H5之Css基础(1)基础语法与选择器;

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Css层叠样式表;

多个属性通过分号隔开,多个选择器用逗号隔开进行分组;

h1,h2,h3{
color: blue;
font-size: 50px;
}

选择器分组h1,h2,h3

选择器继承:子标签如果没有设置样式,它会继承父标签的样式,h1,h1有自己的样式,而a,p继承了body的样式;

<body>
<h1>hahh</h1>
<h2>ggg</h2>

<a>哈安徽</a>
<p>hello</p>
</body>

====================================

h1,h2{
color: blue;
font-size: 50px;
} body{
color:red ;
}

派生选择器:li strong,strong为派生选择器;

<body>
<p><strong>标签hello css</strong></p>
<ul>
<li><strong>li标签

</strong></li>
</ul>
</body>

===================================

li strong{
color: red;
}
strong
{
color: blue;
}

id选择器:#(div 使用id选择器较多)

<body>
<p ID="pid">标签hello css</p>
</body>

============================

#pid {
color: red;
}

派生选择器和ID选择器一起使用

<body>
<p ID="pid">标签hello css<a href="">百度</a></p>
</body

==================================

#pid a {
color: red;
}

a标签中字体颜色发生变化,p标签颜色不发生变化

#pid {
color: red;
}

p标签颜色发生变化,a标签颜色不发生变化,

类选择器:.表示和ID选择器非常相像的,类选择器也可以作为派生选择器;div中使用更多;

<p class="pclass">标签hello css<a href="">百度</a></p>


.pclass a{
color: red;
}

a标签中字体颜色发生变化,p标签颜色不发生变化

.pclass {
color: red;
}
p标签颜色发生变化,a标签颜色不发生变化,

1属性选择器2属性和值选择器;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


<title>Title</title>
<style type="text/css">
[title]{


color: blue;
}
[title=te]{
color: red;
}
</style>
</head>
<body>
<p title="">属性选择器</p>
<p title="te">属性和值选择器</p>
</body>
</html>

相关文档
最新文档