HTML标记定义
<p>...</p>
p { 属性:属性值 ; 属性1:属性值1 }
p可以叫做选择器,定义那个标记中的内容执行其中的样式
一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不加;
Class定义
<p class="oijwd">...</p>
class定义是以“.”开始
.oijwd { 属性:属性值 ; 属性1:属性值1 }
ID定义
<p id="oid">...</p>
ID定义是以“#”开始
#oid { 属性:属性值 ; 属性1:属性值1 }
优先级问题
ID>Class>HTML
同级时选择离元素最近的一个
组合选择器
同时控制多个元素
h1,h2,h3,p,.div,#abc { font-size:14px; color:red; }
选择器组合可以用“,”隔开
伪元素选择器
a:link 正常链接的样式
a:hover 鼠标放上去的样式
a:active 选择链接时的样式
a:visited 已经访问过的链接样式
<!doctype html> <html> <head> <title>定义CSS样式(CSS选择器)</title> <meta charset="utf-8"> <style type="text/css"> /* p { color:red; font-size:28px; } .p { color:green; font-size:28px; } .pp{ color:red; } #ppp { color:blue; } #ppp p { color:red; } div { color:red; } .p { color:green; } #pp { color:blue; } .p { color:red; } .p { color:green; } h1 , h2 , h3 , h4 , p, .div ,#div{ color:red ; font-size:40px } */ a:link { color:red; } a:hover { color:green; } a:active { color:yellow; } a:visited { color:blue; } </style> </head> <body> <!-- <div id="pp" class="p"> <h1>麦子学院麦子学院麦子学院</h1> <h2>麦子学院麦子学院麦子学院</h2> <h3>麦子学院麦子学院麦子学院</h3> <h4>麦子学院麦子学院麦子学院</h4> </div> <p> 麦子学院麦子学院麦子学院 </p> <div class="div"> 麦子学院麦子学院麦子学院 </div> <div id="div"> 麦子学院麦子学院麦子学院 </div> --> <a href="http://www.baidu.com" target="_blank">百度</a> <a href="http://www.baidu.com/ddddd" target="_blank">百度ddd</a> <a href="http://www.baidu.com/ddddsasad" target="_blank">百度dasdd</a> <a href="http://www.baidu.com/dasasadddd" target="_blank">百度asaddd</a> <a href="http://www.baidu.com/dsaadddd" target="_blank">百度ddsad</a> <a href="http://www.baidu.com/dsasaddd" target="_blank">百度ddd</a> <a href="http://www.baidu.com/dddasasdd" target="_blank">百度asaddd</a> <a href="http://www.baidu.com/dsaadddd" target="_blank">百度ddd</a> </body> </html>