CSS介绍
概述:CSS指层叠样式表，极大提高了工作效率（好处：使我们的UI看起来更加完美）。
CSS基础语法
语法：属性选择器{属性名:属性值}
selector{property:value}
例：
h1{color:red;font-size:14px;}
提醒：属性大于1个之后，属性之间用分号隔开，如果值大于1个单词，则需要加上引号：
p{font-family:"sans serif";}
CSS高级语法
1、选择器分组
h1,h2,h3,h4,h5,h6{color:red;}
2、继承
body{ color:green; }
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> h1,a{color: red;font-size:14px;}
body{color:blue} </style> </head> <body> <h1> 应用了样式表 </h1> <a href="www.cowyun.com">这是一个a标签样式</a>
<h2>
这是h2标题
</h2> </body> </html>
备注：根据上面例子可知，已定义的属性会选择自己属性选择器的属性值，未定义属性会继承body或者其他父类的属性值。
CSS派生选择器
1、派生选择器
通过依据元素在其位置的上下文关系来定义样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li strong{color: red;font-size:14px;} strong{color: blue} </style> </head> <body> <p><strong>p标签Hello</strong></p> <ul><li><strong>li标签Hello</strong></li> </ul> </body> </html>
备注：已经定义好的效果是不会被覆盖的，没有具体指定被我们当前的strong效果覆盖掉。这就是派生选择器的使用。
CSSid选择器
1、id选择器
id选择器可以为标有id的HTML元素指定特定的样式
id选择器以"#"定义
2、id选择器和派生选择器
目前比较常用的方式是id选择器常常用于建立派生选择器
例：
html文档
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p id="pid">Hello CSS<a href="http://www.cowyun.com">科沃云</a></p> <div id="divid">这是div<p>这是第一个div</p></div> </body> </html>
CSS文档
#pid{ color: green; } #pid a{ color:red; } #divid p{ color: blue; }
CSS类选择器
1、类选择器
类选择器以一点来显示
2、class也可以用作派生选择器
例：
HTML文档
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p class="pclass">这是一个class效果<a href="http://www.cowyun.com">科沃云</a></p> <div class="divclass"> Hello Div <p>我爱你</p> </div> </body> </html>
CSS文档
.pclass{ color: red } .divclass{ color: blue } .pclass a{ color: green } .divclass p{ color: black }
CSS属性选择器
1、属性选择器
对带有指定属性的HTML元素设置样式
2、属性和值选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> [title]{ color:blue; } [title=te]{ color: red; } </style> </head> <body> <p title="t">属性选择器</p> <p title="te">属性和值选择器</p> </body> </html>
备注：属性选择器如果没有指定值，他的值怎么显示无所谓，但如果指定其值，必须按照其具体的值来生效，如果值变化将不再生效。注意：属性选择器在IE6或者更低的版本是不支持的。