5.2.3 属性的值
每个CSS属性对于它可以接受哪些值都有不同的规定。有的属性只能接受预定义的值。有的属性接受数字、整数、相对值、百分数、URL或者颜色。有的属性可以接受多种类型的值。
1.inherit
对于任何属性，如果希望显式地指出该属性的值与对应元素的父元素对该属性设定的值相同，就可以使用inherit值。
2.预定义的值
大多数CSS属性都有一些可供使用的预定义值。例如，float属性被设为left、right或none。与HTML中属性值的书写方式不同，在CSS中，不需要也不能将预定义的值放在引号里，如图5-11所示。
3.长度和百分数
很多CSS属性的值是长度。所有长度都必须包含数字和单位，并且它们之间没有空格。例如3 em、10 px，如图5-12所示。唯一的例外是0，它可以带单位，也可以不带单位。
图5-11 CSS属性预定义的值
图5-12 长度必须指出单位
有的长度是相对于其他值的。一个em的长度大约与对应元素的字号相等，因此2em表示“字号的两倍”。（当em用于设置元素的font-size属性本身时，它的值继承自对应元素的父元素的字号。）ex应与字体的x字母高相等，也就是与这种字体中字母x的高度相等。不过，浏览器对ex的支持不是太好，因此很少用到它。
px（像素）并不是相对于其他样式规则的。例如，以px为单位的值不会像以em为单位的值那样受font-size设置的影响，但是不同设备上一个像素的大小不一定完全相等。
还有一些无须说明的绝对单位，如磅（pt），应该在为打印准备的样式表中保留这个单位。一般来说，应该只在输出尺寸已知的情况下使用绝对长度。
百分数（如65%）的工作方式很像em，它们都是相对于其他值的值，百分数通常是相对于父元素的，在图5-13所示的例子中，字号被设为父元素字号的80%，详情见5.2.4节。
在上述单位中，最常使用的是em、px和百分数。
4.纯数字
只有极少数的CSS属性接受不带单位的数字。其中最常见的就是line-height（行高）和z-index（元素的堆叠顺序），如图5-14所示。
不要将数字和长度弄混，数字没有单位。在图5-14所示的例子中，行高由数字1.5与字号大小相乘得到。
5.URL
有的CSS属性允许开发人员指定另一个文件的URL（尤其是图像）。在这种情况下，使用url（文件的路径和文件名）的方式，如图5-15所示。注意，URL中的相对路径应该是相对于样式表的位置，而不是相对于HTML文档的位置。
图5-13 百分数通常是相对于父元素的
图5-14 设置行高
图5-15 设置背景图片的URL
可以为文件名加上引号，但这不是必需的。此外，在url和前括号之间不应该有空格。括号和地址之间允许有空格，但通常不这样做。
6.CSS颜色
有多种方法为CSS属性指定颜色，最容易的是使用预定义的颜色关键词作为颜色值。CSS3指定了16个基本的名称，如图5-16所示，又增加135个名称，从而组成了151种SVG 1.0颜色关键词。完整的列表见http：//www.w3.org/TR/SVG/types.html＃ColorKeywords。
当然，除了几样最简单的名称，没有人记得住这些颜色名。可以使用Dreamweaver中的工具进行取色。在实践中，常见的定义CSS颜色的方法是使用十六进制格式或RGB格式。后面将讲到，还可以使用HSL格式指定颜色，使用RGBA和HSLA指定颜色的透明度，这些都是CSS3中新增的方式。
1）RGB
可以通过制定红、绿、蓝的量来构建自己的颜色。可以使用百分数、0～255的数字或十六进制数来指定这3种颜色的值。例如，如果创建一种深紫色，可以使用89份红、127份蓝，没有绿。这个颜色可以写作rgb（89，0，127），如图5-17所示。
图5-16 16种预定义颜色
2）十六进制
这是目前最为常见的方式，如图5-18所示。将RGB中的数字值转化为十六进制，然后将它们合并到一起，再在前面加一个“＃”，就像＃59007F这样（89、0、127在十六进制中分别是59、00、7F）。
图5-17 RGB格式的颜色
图5-18 十六进制格式的颜色
如果一个十六进制颜色是由3对重复的数字组成的，如＃FF3344，则可以缩写为＃F34。这种做法也是一种最佳实践，因为没有理由让代码无谓地变长。
类似Dreamweaver中的取色工具或者Photoshop这样的工具在选择颜色时可以显示颜色的RGB值以及对应的十六进制数，如图5-19所示。
7.CSS3提供更多指定颜色的方式：RGBA、HSL和HSLA
CSS3引入了另一种指定颜色的方式——HSL，以及通过RGBA和HSLA设置alpha透明度的能力（使用十六进制记法无法指示alpha透明度）。
1）RGBA
RGBA在RGB的基础上加上一个代表alpha透明度的A。可以在红、绿、蓝数值后面加上一个用以指定透明度的0～1的小数。
alpha设置越接近0，颜色就越透明。如果alpha设为0，就是完全透明的，就像没有设置任何颜色。相反的，1表示完全不透明。例如：
图5-19 取色板
将alpha透明度应用到元素的背景颜色上的做法很常见，因为alpha透明度可以让元素下面的任何东西（如图像、其他颜色、文本等）透过来并混合在一起，也可以对其他基于颜色的属性使用alpha透明度，如color、border、border-color、box-shadow、text-shadow等，但需要说明的是，不同浏览器对它们的支持程度并不相同。
2）HSL和HSLA
HSL和HSLA也是CSS3中新增的。HSLA是除了RGBA以外的颜色设置alpha透明度的另一种方式。用HSLA指定alpha透明度的方法与RGBA是一致的。
先看看HSL是怎样运行的。HSL代表色相（hue）、饱和度（saturation）和亮度（lightness），其中色相的取值范围为0～360，饱和度和亮度的取值均为百分数，范围为0～100%，如图5-20所示。
图5-20 HSL格式的颜色
并非所有的图像编辑器都可以在对话框中指定HSL，不过，通过Mathis强大的免费在线工具HSL Color Picker（http：//hslpicker.com），可以选取颜色，获取其HSL值、十六进制数值和RGB值，还可以输入这些格式的颜色值，查看颜色的变化。
不幸的是，如同标准世界那些最新的发展常常遭遇的情形，对于RGBA、HSL和HSLA这些功能，IE9之前的版本均不支持。它们无法理解这些记法，因此会忽略这些声明。对于IE9之前的版本，通过一些变通的方法可以使用RGBA和HSLA，但HSL还是用不了，因此只能继续使用十六进制数或RGB来指定颜色。为IE9之前版本准备的代码将在13.1节中介绍。