4.4 CSS的属性单位

在设置CSS文字、排版、边界时，常常会在属性值后加上长度单位或者百分比单位。本节将学习这两种单位的使用。

4.4.1 长度单位和百分比单位

使用CSS进行排版时，常常会在属性值后面加上长度单位或者百分比的单位。

1.长度单位

长度单位有相对长度单位和绝对长度单位两种类型。

相对长度单位是指，以该属性前一个属性的单位值为基础来完成目前的属性设置。

绝对长度单位不会随着显示设备的不同而改变。换句话说，属性值使用绝对长度单位时，不论在哪种设备上，显示效果都是一样的，如屏幕上的1cm与打印机上的1cm是一样长的。

由于相对长度单位确定的是一个长度属性相对于另一个长度属性的长度，因而它能更好地适应不同的设备，所以它是首选。一个长度的值由正号“+”或负号“-”、一个数字和表示单位的两个字母组成。

长度单位见表4-3。

2.百分比单位

百分比单位也是一种常用的相对单位类型，通常的参考依据为元素的font-size属性。百分比值总是相对于另一个值来说的，该值可以是长度单位或其他单位。每一个可以使用百分比单位指定的属性，同时也自定义了这个百分比值的参照值。在大多数情况下，这个参照值是该元素本身的字体尺寸。并非所有属性都支持百分比单位。

一个百分比值由正号“+”或负号“-”、一个数字和百分号“%”组成。如果百分比值是正的，正号可以不写。正负号、数字与百分号之间不能有空格，示例代码如下。

注意，不论使用哪种单位，在设置时，数值与单位之间都不能加空格。

4.4.2 色彩单位

在HTML网页或者CSS样式的色彩定义里，设置色彩模式是RGB。在RGB色彩模式中，所有色彩均由红色（Red）、绿色（Green）、蓝色（B1ue）三种色彩混合而成。

在HTML标记中只提供了两种色彩值表示方法：十六进制数和色彩英文名称。CSS则提供了4种定义色彩的方法：十六进制数、色彩英文名称、rgb函数和rgba函数。

1.用十六进制数方式表示色彩值

在计算机中，定义每种色彩的强度范围为0～255。当所有色彩的强度都为0时，将产生黑色；当所有色彩的强度都为255时，将产生白色。

在HTML中，使用RGB色彩模式时，表示方法为：#RRGGBB，即前面是一个“#”号，再加上6位十六进制数。其中，前两位数代表红光强度，中间两位数代表绿光强度，后两位数代表蓝光强度。以上3组参数的取值范围为：00～ff。每组参数都必须是两位数。对于只有1位的参数，应在前面补0。这种方法共可表示256×256×256种色彩，即16M种色彩。红色、绿色、黑色、白色的十六进制设置值分别为#ff0000、#00ff00、#000000、#ffffff。示例代码如下。

如果三组参数中每组参数的两位数都相同，则可缩写为#RGB的方式。例如：#cc9900可以缩写为#c90。

2.用色彩英文名称方式表示色彩值

在CSS中也提供了与HTML一样的用色彩英文名称表示色彩值的方式。CSS只提供了16种色彩名称，示例代码如下。

3.用rgb函数方式表示色彩值

在CSS中，可以用rgb函数设置色彩值。语法格式为：rgb(R,G,B)。其中，R为红色值，G为绿色值，B为蓝色值。这3个参数可取正整数值或百分比值，正整数值的取值范围为0～255，百分比值的取值范围为色彩强度的百分比0.0%～100.0%。示例代码如下。

4.用rgba函数方式表示色彩值

rgba函数在rgb函数的基础上增加了控制Alpha透明度的参数。语法格式为：rgba(R,G,B,A)。其中，R、G、B参数与rgb函数中的R、G、B参数相同，A参数表示Alpha透明度，取值在0～1之间，不可为负值。示例代码如下。