css的作用
1.修饰页面元素，避免使用不必要的HTML元素（如font），进而构建语义化的页面结构
2.更有效的控制页面结构，页面布局（div+css）。
3.提高开发和维护效率（特别是对于相同的结构或样式）。
css基本结构
选择符种类
通配选择符
*{margin:0;paddin:0;}
特殊情况可以对特定元素的所有后代元素应用样式。
类选择符
.class{margin:5px;}
可多次调用，减少样式的定义，应用范围没有通配那么广泛。
ID选择符
#idselector{margin:5px;}
应用于javascript脚本比较多；最好一个元素只用一个ID。
包含选择符
p span{color:red;}
应用于元素的后代。
子选择符
p > span{color:blue;}
只应用于元素的子元素。
相邻选择符
p + span{color:green;}
匹配同一父级元素下摸个元素之后的元素。
属性选择符
E[attr[[~/|]="value"]]
匹配带有特定属性和属性值的元素；[~/|]比较少见。
伪类选择符
a:link{color:red;}/*运用于URI尚未访问过的链接*/
a:visited{color:blue;}/*运用于URI已经访问过的链接*/
a:hover{color:green;}/*运用于处于悬停状态的元素*/
a:active{color:black;}/*运用于被激活的元素（如被点击的超链接）*/
a:focus{color:white;}/*运用于有焦点的元素。*/
伪类可让用户在使用页面的过程中增加更过交互效果，而不必过多使用javascript来完成；但IE6,IE7对伪类支持有限。
伪对象选择符
p:before{content:"前伪对象";}/*p前插入生成内容*/
p:after{content:"后伪对象";}/*p后插入生成内容*/
e:first-letter{color:blue;}/*用于指定元素首字母的样式*/
e:first-line{color:red;}/*用于设置元素中第一行文本的样式*/
选择符的组合关系
选择符的最大的优点在于针对不同的页面结构组合成各种组合形 式使用；主要体现在针对性使用类选择符或ID选择符，选择符群组及选择符组合。
p.class{color:red;}
p#ids{color:blue;}
.class, #ids{color:green;}
p span{color:#ffffff;}
选择符的优先级
css层叠样式表的特色在于层叠，即css会根据选择符的使用而将样式相互叠加或覆盖；这涉及到覆盖与继承。
优先级如下：
- 标有！important关键字声明的属性；
p{color:blue !important;} - HTML中的css样式属性；
- 标签选择符，伪类及伪对象：1
- 类选择符，属性选择符：10
- ID选择符：100
- style属性：1000
- 其他如通配选择符：0
- 作者编辑的css文件样式属性；
- 用户设置的样式；
- 浏览器默认的样式；
