1 1.属性值的数据类型和数据单位
2
3 1.1长度：有两种长度单位，一种是相对长度单位，一种是绝对长度单位
4 1.1.1：相对长度单位：em、ex、px、gd、rem、vw、vh、ch
5
6 以下是几个常用的相对长度单位:
7 （1）em单位：em单位等于该元素font-size属性的计算值，一个例外情况是font-size属性值本身出现了em单位，这
8
9 时它参造其父元素的font-size属性值。
10 （2)ex单位：ex单位也被称为x-height。之所以叫x-height,是因为它通常等于小写字母x的高度，即使字体中没有x
11
12 字母，ex单位还是会有定义的。该单位取决于每个字体的规定。
13 （3）px单位：px也就是像素单位，它是相对于用户浏览器设备的分辨率，最常见的就是指计算机的显示器。
14
15 1.1.2：绝对长度单位:绝对长度单位只有在其输出介质的物理特性已知的情况下才有用。in(英寸)\cm\mm\pt(点)\pc(12pt)
16
17 1.2百分比值
18 百分比的值总是相对于另外一个值而言，如相对一个长度。如果一个属性允许使用百分比作为属性值，那么该属性也肯定定
19
20 义了百分比所相对的绝对值。这个绝对值可以是同一元素的另外一个样式属性的值，也可以是其父元素的样式属性值，或是
21
22 格式化环境的值。
23 如:line-height属性的百分值就是相对于元素本身的font-size属性值。下面的代码中，p元素的line-height属性的计算值
24
25 是12px。
26 p{font-size:10px;line-height:120%;}
27 如果根元素的样式属性指定了百分比值，并且该百分比值又被定义为相对某个属性的继承值，那么结果值就是百分比乘以
28
29 那个属性的初始值。
30 1.3颜色
31 颜色可以用多种方式表示，可以是名称，也可以是RGB数字或HSL数字。
32
33 1.3.1颜色名称关键字
34 常见的有white、green、red等，当然用户也可以使用svg颜色名称关键字等。如:p{color:red;}
35
36 1.3.2RGB颜色模型（用在颜色的数字表示中）
37 如:em{color:#f00}（16进制表示法）
38 em{color:#fff000}
39 em{color:rgb(255,0,0)}函数表示法
40
41 1.3.3RGBA颜色模型
42 RGBA颜色模型是对RGB颜色模型的扩展，包括alpha通道(即透明度(范围：0到1))。
43 例子:将背景颜色设置为具有50%透明度的红色，可以在样式表中包含以下两个css声明中任何一个。
44 background-color:rgba(255,0,0,0.5);/background-color:rgba(100%,0,0,0.5);
45
46 1.3.4HSL颜色模型
47 HSL是Hue(色相)、Saturation(饱和度)、Lightness(亮度)的简称。HSL把颜色描述在双圆锥体内的点，这个双圆锥
48
49 的中心轴取值为自底部的黑色到顶部白色而在他们中间是灰色。
50 hsl颜色模型格式:hsl(h,s,l);
51 h是一个色盘中的颜色，色彩选择通过度数来确定，0度是红色，120度是绿色，240是蓝色。
52 s是该色彩使用了多少，用百分比表示。0%表示灰度，也就是没有使用该颜色，而100%表示该颜色饱满。
53 l是该色彩有多亮，也用百分比表示。较低较暗，较高较亮。0%与100%分别表示为黑与白。
54 如：定义红色背景:background-color:hsl(0,100%,50%);
55
56 1.3.5HSLA颜色模型
57 对HSL颜色模型的扩展。与HSL颜色模型相似，不过多了最后一个透明度而已。
58 如：定义透明度为50%的红色背景：background-color:hsl(0,100%,50%,0.5);
59
60 1.4其他数据类型
61 css定义的一些数据类型目前一般用得较少，很多数据类型一般用于语音介质
62 1.4.1角度(deg、grad、rad、turn)
63 1.4.2时间(s、ms)时间不能为负值
64 1.4.3频率(Hz、kHz)频率不能为负值
65
66 2.函数
67 2.1.1atrr()函数
68 该函数用于获取一个样式属性的值，语法如下:attr(ident,[,<type>[,<value>]]).第一个参数ident指定样式属性名，将获
69 取该元素的ident样式属性的值。还可以指定命名空间前缀，以限定属性。名称空间和属性之间用“|”分割。
70 第二个参数type是可选的，如果第三个参数出现，那么第二个参数就必须出现，该参数指示浏览器怎么解释属性值。第二个
71 参数可以是(string,url,color,integer,number,length等)。如果第二个参数缺失，那么默认是string。
72 如:width:attr(length,em);//默认值是0
73
74 2.1.2url()函数
75 格式是使用url()函数，括号中包括uri地址,地址可以是绝对地址，也可以是相对地址。如:background:url(yellow.jpg)
76
77 2.1.3calc()函数
78 该函数用来计算长度值，任何长度值都可以进行计算，包括相对长度与绝对长度。
79 如:width:calc(100%3-2*1em-2*1px);
80
81 2.1.4counter()函数
82 计数器使用标识符表示。要引用一个计数器的值，可以采用下面两种语法格式:
83 (1)counter(标识符) "符号1" "符号2" ... "符号n"
84 (2)counter（标识符,列表样式类型）"符号1" "符号2" ... "符号n"
85 要引用有名称相同的嵌套计数器序列，也有两种语法格式：
86 (1)counters(标识符,字符串) "符号1" "符号2" ... "符号n"
87 (2)counters（标识符,字符串,列表样式类型）"符号1" "符号2" ... "符号n"
88 css中，计数器只可以有content属性引用。
89
90 3.属性值的计算步骤
91 一个属性最终值的获得要经过4步计算：
92 （1）根据css规则中定义的值(称为"指定值")\(2)被转换成一个用于继承的值(称为"计算值")\(3)在需要的情况下转换成一
93 个绝对的值(称为"使用值")\(4)根据本地环境的限制条件最终转换成另一个值(称为"呈现值")
94 3.1指定值：属性的初始值
95 3.2计算值：指定值经过计算变成计算值
96 3.3使用值：将计算值和依赖关系综合考虑后获得的绝对值
97 3.4实际值：依据显示介质后的值
98
99 4.属性的继承
100
101 文档树种元素的某些样式属性的属性值可以被子元素继承，css规范为元素的每一个样式属性都规定了它是否被继承。当发生继承时，
102 继承的是父元素的计算值，而从父元素那里继承的计算值将变成子元素的指定值和计算值。
103 如:body{font-size:10pt;}h1{font-size:130%;}
104 4.1指定属性值为inherit
105 有些css属性可以被继承，但有些不能被继承。为了解决这部分属性继承问题，css规定每一个属性可以有一个为关键字inherit的
106 指定值，即对于任何给定的元素，该属性的值和它的父元素相同属性的计算值相同。但是，有一个例外，如果inherit被设置在根
107 元素上，没有父元素就不能继承了，那么该属性将被赋予初始值。定义属性值inherit可以继承父元素的值。
108 如:body{color:black;baockground:white;} *{color:inherit!important;backgound:transparent!important;}color的值
109 将从body元素继承。
