CSS设计指南笔记(2)

一.层叠

层叠,就是层叠样式表中的层叠,是CSS的核心机制,是一种样式在文档层次中逐层叠加的过程,目的是让浏览器面对某个标签特定属性值的多个来源,确定最终使用哪个值。

1.浏览器层叠各个来源样式的顺序

浏览器默认样式表>用户样式表>作者链接样式表>作者嵌入样式>作者行内样式(这个顺序也就是样式的优先级吧)

2.层叠规则

规则一:找到应用给每个元素和属性的所有声明
规则二:按照顺序和权重排序
按照浏览器层叠各个来源样式的顺序确定css规则里属性的值,当然也可以通过加重声明的权重防止属性的值被改变,也就是空格!important分号(;),屏蔽其他来源样式。
规则三:按特指度排序
特指度就是表示一条规则有多明确。特指度越高的CSS规则就越优先起作用。比如:p{color:red;}和div p{color:blue;},明显后者更明确,特指度比前者高,
所以p标签里的字体颜色最终会以蓝色显示。

1
2
3
4
5
6
7
计算特指度:
ICE公式计算三个值:I-C-E,也就是ID,Class,Element
1.选择符中有一个ID,就在I的位置上加1
2.选择符中有一个类,就在C的位置上加1
3.选择符中有一个元素(标签名)名,就在E的位置上加1;
4.得到一个三位数
注意:此时得到的ICE并非真正的三位数,只不过大多数情况下我们可以将它看成三位数来比较,最大的胜出,但是,千万要记得,像0-1-12与0-2-0相比,还是后者特指度更高。

规则四:顺序决定权重
如果两条CSS规则都影响某一个元素的同一个属性,而且特指度也相同,那么位置最靠下的规则胜出,也就是后声明的规则优先。

二.规则声明

CSS规则声明主要分三类:
1.文本值。例如:{font-size:bold}声明中bold就是一个文本值。也叫关键字。
2.数字值。数字值后面都有一个单位。例如英寸或点。比如:{font-size:16px;}中的12是数字,px是单位(像素),如果为0就不用带单位。
3.颜色值。颜色值可以用几种不同的格式来写,例如RGB(red,green,blue,红绿蓝),HSL(Hue,Saturation,Luminance,色相,饱和度,亮度)和十六进制值(例如#ffffff,另外RGB和HSL都支持Alpha通道,用于设置颜色的不透明度,相应格式为RGBA和HSLA,alpha是透明度,值是1或0,也可以是0~1之间的一个数字值。

一些内容不是很详细,毕竟只是学习过程中的一个笔记,以后可能会有后续的博客推出解释具体的名词和规则的用法,例如颜色值的几种方式,特指度等等。