HTMLCSS学习笔记（十一）——CSS统筹

CSS层叠

css层叠指的是样式的优先级，当产生冲突时以优先级高的为准。

CSS继承

css的一个主要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

CSS统筹

1. 整站里相同的CSS样式提取到一个样式表里，各个页面调用相同的样式文件即可。
2. 网站较大的情况下一般会把网站的头部，尾部单独分离出来，包括样式文件。分离规则大体分为以下几种：
   （1）根据页面类型分离文件
   （2）根据功能模块分离文件
   （3）根据标签类型分离文件
   （4）根据设备类型分离文件
   （5）根据代码规模综合分离文件

CSS规范

原则：简化代码，易修改，易阅读

1. 命名方法（语义化命名，结构化命名）

2. CSS命名规则
   （1）建议使用小写字母
   （2）以英文字母开头，后面可以连接数字、字母、下划线、连字符，建议尽量使用英文字母，适当使用下划线和连接线
   （3）词必达意，名称要反映用途和相关信息，同时也要简短

3. 规则设置
   新浪为例

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img { border:0; }
img{display: block;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; } 
body { color:#333; padding:5px 0; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ overflow-x:hidden;}
a { color:#666; text-decoration:none; }
a:visited { color:#666; }
a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }

腾讯为例

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,
select{margin:0;padding:0}
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;}
a{color:#172c45;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
.ind{text-indent:2em} 
.ind10{text-indent:10px;}
.noborder{border:0;}