H5之Css基础(1)基础语法与选择器;
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 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>