通常我们有一些CSS默认编码规范,并不是不按这个写,浏览器认不出来,浏览器比你想象的强大,但是按照编码规范写代码体现了专业性。
CSS编码规范
格式规范
- 选择器和后面的”{“大括号之间要有一个空格
- 属性名和”:”冒号之间没有空格,”:”冒号和属性值之间有一个空格,结尾有”;”分号,且无空格分隔
选择器规范
- 当选择器是并集选择器时,每个并集选择器独占一行
- 后代\子代选择器不建议超过5层;在能达到选择且层数可控的条件下,优先使用子代选择器
属性的规范
- 每个属性自己单起一行
CSS的三大特性
两个选择器针对同一个元素,设定同一个CSS属性。如何解决冲突呢?
CSS层叠性
- 两个选择器选到了同一个元素,并且对同一个CSS属性进行设定,那么后定义的CSS属性将覆盖先前定义的CSS属性
- 如果是针对不同的CSS属性进行设定,互不影响
- 如果有些CSS属性冲突,有些不冲突,那么冲突的层叠,不冲突的互不影响
CSS的继承性
- 一个元素的CSS属性可以继承自其父亲或者祖辈的CSS属性
- 如果多个级别的祖辈元素对同一个CSS属性进行了设定,那么采取就近原则
- 只有一部分的CSS属性是可以继承的。 常用的可继承的CSS属性:字体,color,line-height,text-align,text-indent
CSS优先级
- 原则
- 如果优先级不同,高优先级的选择器将覆盖低优先级的选择器的CSS属性
- 如果优先级相同,定义在后的选择器将覆盖定义在先的选择器的CSS属性
- 优先级(贡献值)的计算方法
- *,继承 = 0,0,0,0
- 元素(标签)= 0,0,0,1
- 类,伪类 = 0,0,1,0
- ID = 0,1,0,0
- 行内 = 1,0,0,0
- !important = ∞
- 复合的选择器的优先级 把所有出现的单个选择器的优先级进行累加,不进位
案例:
本站技术原创文章,是由作者:常春 创作,如若转载请注明原文及出处:http://www.aiyouseo.com/jianzhan/1562.html