在利用CSS能做的几乎所有工作中，其基础都是单位（units）,这是影响所有属性的颜色、距离和大小的一种元素，本章就要讨论单位。如果没有单位，就不能声明某个段落应当是紫色，或者某个图像周围应当有10像素的空白，也不能声明一个标题的文本应当是某种大小。如果理解了这里介绍的概念，你就能更快地学习和使用CSS的余下内容。

数字

CSS中有两类数字：整数（“完整”的数）和实数（小数）。这些数字类型主要作为其他值类型的基础，不过在某些情况下，这些基本类型数字也可以用作属性的值。

在CSS2.1中，实数定义为一个整数后可以跟有一个小数点和小数部分。因此，以下都是合法的数字值：15.5、-270.00004和5。整数和实数都可以是正数或负数，不过属性可能（而且通常会）限制所允许的数字范围。

百分数

百分数值是一个计算得出的实数，其后跟有一个百分号（％）。百分数值几乎总是相对于另一个值，这个值可以是任意的：可能是同一元素另一个属性的值，也可以是从父元素继承的一个值，或者是祖先元素的一个值。接受百分数值的属性会对所允许的百分数值定义某些限制，还会定义百分数计算到什么程度。

颜色

每一位网页设计师最早提出的问题之一可能是：“怎么在页面上设置颜色？”使用HTML时，你有两种选择：可以按名使用为数不多的几种颜色，如red或purple,或者可以采用一种不那么一目了然的方法，即使用十六进制代码。这两种描述颜色的方法在CSS中都仍然保留，另外还提供了一些其他的描述方法，而且在我看来，新增的这些方法更为直观。

命名颜色

假设你觉得从一个很小的基本颜色集中选择就足够了，那么最容易的办法就是使用你想要的颜色名。CSS称这些有名字的颜色为命名颜色（道理很

显然）。

一些浏览器制造商可能会让你相信命名颜色很丰富，然而恰好相反，合法的命名颜色关键字很有限。例如，你不能选择“mother-of-pearl”，因为这不是一个已定义的颜色。在 CSS2.1中，CSS规范定义了17个颜色名。这包括HTML 4.0丨中定义的16个颜色，并外加一个橙色：

因此，假设你希望所有一级标题都是紫红色，最好的声明就是:

h1 {color: maroon;}

是不是很直截了当？

当然，你可能见过（甚至用过）其他的颜色名，而不只是以上所列。例如，如果你指定以下规则：

h1 {color: lightgreen;}

很可能所有h1元素实际上会变成淡绿色，尽管lightgreen并不在CSS2.1的命名颜色表之列。它之所以能起作用，原因是大多数Web网页浏览器能识别多达140个颜色名，包括前面的17个标准颜色。另外的这些颜色都在CSS3颜色规范中定义，对此本书不作讨论。与那140种左右的颜色相比（这个颜色表就要长得多了），这17种标准颜色往往更可靠（在写作本书时只有17种标准颜色，至于以后则不能断言），因为这17种颜色的颜色值在CSS2.1中定义。CSS3中包含的140种颜色的扩展颜色表基于标准Xll RGB值，XII RGB值已经使用了数十年，所以这些颜色能得到很好的支持。

幸运地是，CSS中还有一些更详细、更精确的方法用于指定颜色。其好处在于，采用这些方法可以指定色谱中的任何颜色，而不只是17种（或140种）命名颜色。

用RGB指定颜色

计算机通过组合不同的红色、绿色和蓝色分量来创造颜色，这种组合通常称为RGB颜色。实际上，如果你拆开一个老式的CRT计算机显示器，再向下“挖掘”找到显像管，你会发现三支“枪”（不过，如果你担心因为动了显示器而使显示器授权失效，那么建议你还是别去找这些枪）。这些枪会在屏幕各个点上以不同强度发射电子束，然后在屏幕的这些点上结合各个光束的强度，构成你看到的各种颜色。各个点称为像素（pixel）,本章后面还会讨论这个概念。尽管当前大多数显示器并不使用电子枪，但是其颜色输出还是以RGB混合为基础。

根据显示器上创建颜色的方式，应该可以直接访问这些颜色，由你确定如何混合红、绿、蓝分量，从而最大程度地控制颜色。这种解决方法很复杂，不过这确实是可以的，而且是值得的，因为这样一来，对于能够产生哪些颜色几乎没有什么限制。可以采用4种方法以这种方式控制颜色。

函数式RGB颜色

有两种颜色值类型使用函数式RGB记法而不是十六进制记法。这种类型颜色值的一般语法是rgb(color),其中color用一个百分数或整数三元组表示。百分数值在0%~100%范围内，整数范围为0~255。

因此，要使用百分数记法分别指定白色和黑色，值将指定为：

rgb(100%,100%,100%)

rgb(0%,0%,0%)

如果使用整数三元组记法，相同的颜色表示如下：

rgb(255,255,255)

rgb (0,0,0)

假设你希望h1元素有一个红色阴影，其颜色值在红色与紫红色之间。red等价于rgb(100%,0%,0%),而maroon等于(50%, 0%, 0%)。要得到一个介于二者之间的颜色，可以试试下面的规则：

h1 {color: rgb(75%,0%,0%);}

这会让这种颜色的红色分量比maroon深，但比red浅。另一方面，如果你想创建一种灰红色，则要增加绿色和蓝色分量：

h1 {color: rgb(75%,50%,50%);}

如果使用整数三元组记法，与之最接近的颜色是：

h1 {color: rgb(191,127,127);}

要想看看这些值与颜色如何对应，最容易的办法就是建立一个灰度值表。另外，因成本所限，本书无法彩色印刷，只能显示灰度，所以在此将建立一个灰度表，如图4-2所示：

p.one {color:rgb(0%,0%,0%);}

p.two {color: rgb(20%,20%,20%);}

p.three {color: rgb(40%,40%,40%);}

p.four {color: rgb(60%,60%,60%);}

p.five {color: rgb(80%,80%,80%);}

p.six {color: rgb(0,0,0);}

p.seven {color: rgb{51,51,51};}

p.eight {color: rgb(102,102,102);}

p.nine {color: rgb(153,153,153);}

p.ten {color: rgb(204,204,204);}

当然，由于我们处理的是灰度，上述各个规则中RGB值的3个分量都一样。如果其中任意一个分量不同于另外的分量，就会出现一种新颜色，例如，如果将rgb(50%,50%, 50%)，修改为rgb(50%,50%,60%),就会得到一种中暗色，其中稍稍泛一点蓝色。

百分数记法中也可以使用分数。出于某种原因，你可能想指定某种颜色的红色分量为25.5%,绿色为40%,蓝色为98.6%:

h2 {color: rgb(25.5%,40%,98.6%);}

如果网页浏览器忽略小数点（有些网页浏览器确实会这么做），就会把这些值取整为与之最接近的整数，从而得到值rgb(26%,40%,99%)。当然，在整数三元组中只能使用整数。

无论哪一种记法，如果值落在可取范围之外，都会“剪裁”到最接近的范围边界，这意味着，如果一个值大于100%或小干0%,就会默认地调整为100%或0%(这是可取的最大和最小极限)。因此，以下声明会处理为好像声明了注释中指定的值

p.one {color: rgb(300%,4200%,110%);}/* 100%,100%,100%*/

p.two (color: rgb(0%,-40%,-5000%);}/* 0%, 0%,0%*/

p.three {color: rgb(42,444,-13);}/* 42,255,0 */

百分数和整数之间的转换看上去似乎是任意的，不过没有必要去猜测想要的相应整数，对此有一个简单的计算公式。如果知道所要的各RGB分量的百分数，只需将它们应用到255 (乘以255),就能得到结果值。假设有一个颜色的红色分量为25%,绿色分量为37.5%,蓝色分量为60%。将这些百分数乘以255,就会得到63.75、95.625和153。再把这些值取整为最接近的整数，这就得到了voila: rgb(64,96,153)。

当然，如果你已经知道百分数值，那么将其转换为整数并没有什么意义。对于使用Photoshop之类程序的人来说，整数记法更为有用，因为这些程序可以在Info对话框中显示整数值，而对于熟悉颜色生成技术细节的人来说，整数记法也更有利，因为他们通常会按照0~255的整数值来考虑。这么说来，这些人可能更熟悉采用十六进制记法考虑，这正是我们接下来要讨论的。