在利用CSS能做的幾乎所有工作中，其基礎(chǔ)都是單位（units）,這是影響所有屬性的顏色、距離和大小的一種元素，本章就要討論單位。如果沒(méi)有單位，就不能聲明某個(gè)段落應(yīng)當(dāng)是紫色，或者某個(gè)圖像周圍應(yīng)當(dāng)有10像素的空白，也不能聲明一個(gè)標(biāo)題的文本應(yīng)當(dāng)是某種大小。如果理解了這里介紹的概念，你就能更快地學(xué)習(xí)和使用CSS的余下內(nèi)容。

數(shù)字

CSS中有兩類數(shù)字：整數(shù)（“完整”的數(shù)）和實(shí)數(shù)（小數(shù)）。這些數(shù)字類型主要作為其他值類型的基礎(chǔ)，不過(guò)在某些情況下，這些基本類型數(shù)字也可以用作屬性的值。

在CSS2.1中，實(shí)數(shù)定義為一個(gè)整數(shù)后可以跟有一個(gè)小數(shù)點(diǎn)和小數(shù)部分。因此，以下都是合法的數(shù)字值：15.5、-270.00004和5。整數(shù)和實(shí)數(shù)都可以是正數(shù)或負(fù)數(shù)，不過(guò)屬性可能（而且通常會(huì)）限制所允許的數(shù)字范圍。

百分?jǐn)?shù)

百分?jǐn)?shù)值是一個(gè)計(jì)算得出的實(shí)數(shù)，其后跟有一個(gè)百分號(hào)（％）。百分?jǐn)?shù)值幾乎總是相對(duì)于另一個(gè)值，這個(gè)值可以是任意的：可能是同一元素另一個(gè)屬性的值，也可以是從父元素繼承的一個(gè)值，或者是祖先元素的一個(gè)值。接受百分?jǐn)?shù)值的屬性會(huì)對(duì)所允許的百分?jǐn)?shù)值定義某些限制，還會(huì)定義百分?jǐn)?shù)計(jì)算到什么程度。

顏色

每一位網(wǎng)頁(yè)設(shè)計(jì)師最早提出的問(wèn)題之一可能是：“怎么在頁(yè)面上設(shè)置顏色？”使用HTML時(shí)，你有兩種選擇：可以按名使用為數(shù)不多的幾種顏色，如red或purple,或者可以采用一種不那么一目了然的方法，即使用十六進(jìn)制代碼。這兩種描述顏色的方法在CSS中都仍然保留，另外還提供了一些其他的描述方法，而且在我看來(lái)，新增的這些方法更為直觀。

命名顏色

假設(shè)你覺(jué)得從一個(gè)很小的基本顏色集中選擇就足夠了，那么最容易的辦法就是使用你想要的顏色名。CSS稱這些有名字的顏色為命名顏色（道理很

顯然）。

一些瀏覽器制造商可能會(huì)讓你相信命名顏色很豐富，然而恰好相反，合法的命名顏色關(guān)鍵字很有限。例如，你不能選擇“mother-of-pearl”，因?yàn)檫@不是一個(gè)已定義的顏色。在 CSS2.1中，CSS規(guī)范定義了17個(gè)顏色名。這包括HTML 4.0丨中定義的16個(gè)顏色，并外加一個(gè)橙色：

因此，假設(shè)你希望所有一級(jí)標(biāo)題都是紫紅色，最好的聲明就是:

h1 {color: maroon;}

是不是很直截了當(dāng)？

當(dāng)然，你可能見(jiàn)過(guò)（甚至用過(guò)）其他的顏色名，而不只是以上所列。例如，如果你指定以下規(guī)則：

h1 {color: lightgreen;}

很可能所有h1元素實(shí)際上會(huì)變成淡綠色，盡管lightgreen并不在CSS2.1的命名顏色表之列。它之所以能起作用，原因是大多數(shù)Web網(wǎng)頁(yè)瀏覽器能識(shí)別多達(dá)140個(gè)顏色名，包括前面的17個(gè)標(biāo)準(zhǔn)顏色。另外的這些顏色都在CSS3顏色規(guī)范中定義，對(duì)此本書(shū)不作討論。與那140種左右的顏色相比（這個(gè)顏色表就要長(zhǎng)得多了），這17種標(biāo)準(zhǔn)顏色往往更可靠（在寫(xiě)作本書(shū)時(shí)只有17種標(biāo)準(zhǔn)顏色，至于以后則不能斷言），因?yàn)檫@17種顏色的顏色值在CSS2.1中定義。CSS3中包含的140種顏色的擴(kuò)展顏色表基于標(biāo)準(zhǔn)Xll RGB值，XII RGB值已經(jīng)使用了數(shù)十年，所以這些顏色能得到很好的支持。

幸運(yùn)地是，CSS中還有一些更詳細(xì)、更精確的方法用于指定顏色。其好處在于，采用這些方法可以指定色譜中的任何顏色，而不只是17種（或140種）命名顏色。

用RGB指定顏色

計(jì)算機(jī)通過(guò)組合不同的紅色、綠色和藍(lán)色分量來(lái)創(chuàng)造顏色，這種組合通常稱為RGB顏色。實(shí)際上，如果你拆開(kāi)一個(gè)老式的CRT計(jì)算機(jī)顯示器，再向下“挖掘”找到顯像管，你會(huì)發(fā)現(xiàn)三支“槍”（不過(guò)，如果你擔(dān)心因?yàn)閯?dòng)了顯示器而使顯示器授權(quán)失效，那么建議你還是別去找這些槍）。這些槍會(huì)在屏幕各個(gè)點(diǎn)上以不同強(qiáng)度發(fā)射電子束，然后在屏幕的這些點(diǎn)上結(jié)合各個(gè)光束的強(qiáng)度，構(gòu)成你看到的各種顏色。各個(gè)點(diǎn)稱為像素（pixel）,本章后面還會(huì)討論這個(gè)概念。盡管當(dāng)前大多數(shù)顯示器并不使用電子槍，但是其顏色輸出還是以RGB混合為基礎(chǔ)。

根據(jù)顯示器上創(chuàng)建顏色的方式，應(yīng)該可以直接訪問(wèn)這些顏色，由你確定如何混合紅、綠、藍(lán)分量，從而最大程度地控制顏色。這種解決方法很復(fù)雜，不過(guò)這確實(shí)是可以的，而且是值得的，因?yàn)檫@樣一來(lái)，對(duì)于能夠產(chǎn)生哪些顏色幾乎沒(méi)有什么限制。可以采用4種方法以這種方式控制顏色。

函數(shù)式RGB顏色

有兩種顏色值類型使用函數(shù)式RGB記法而不是十六進(jìn)制記法。這種類型顏色值的一般語(yǔ)法是rgb(color),其中color用一個(gè)百分?jǐn)?shù)或整數(shù)三元組表示。百分?jǐn)?shù)值在0%~100%范圍內(nèi)，整數(shù)范圍為0~255。

因此，要使用百分?jǐn)?shù)記法分別指定白色和黑色，值將指定為：

rgb(100%,100%,100%)

rgb(0%,0%,0%)

如果使用整數(shù)三元組記法，相同的顏色表示如下：

rgb(255,255,255)

rgb (0,0,0)

假設(shè)你希望h1元素有一個(gè)紅色陰影，其顏色值在紅色與紫紅色之間。red等價(jià)于rgb(100%,0%,0%),而maroon等于(50%, 0%, 0%)。要得到一個(gè)介于二者之間的顏色，可以試試下面的規(guī)則：

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

這會(huì)讓這種顏色的紅色分量比maroon深，但比red淺。另一方面，如果你想創(chuàng)建一種灰紅色，則要增加綠色和藍(lán)色分量：

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

如果使用整數(shù)三元組記法，與之最接近的顏色是：

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

要想看看這些值與顏色如何對(duì)應(yīng)，最容易的辦法就是建立一個(gè)灰度值表。另外，因成本所限，本書(shū)無(wú)法彩色印刷，只能顯示灰度，所以在此將建立一個(gè)灰度表，如圖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);}

當(dāng)然，由于我們處理的是灰度，上述各個(gè)規(guī)則中RGB值的3個(gè)分量都一樣。如果其中任意一個(gè)分量不同于另外的分量，就會(huì)出現(xiàn)一種新顏色，例如，如果將rgb(50%,50%, 50%)，修改為rgb(50%,50%,60%),就會(huì)得到一種中暗色，其中稍稍泛一點(diǎn)藍(lán)色。

百分?jǐn)?shù)記法中也可以使用分?jǐn)?shù)。出于某種原因，你可能想指定某種顏色的紅色分量為25.5%,綠色為40%,藍(lán)色為98.6%:

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

如果網(wǎng)頁(yè)瀏覽器忽略小數(shù)點(diǎn)（有些網(wǎng)頁(yè)瀏覽器確實(shí)會(huì)這么做），就會(huì)把這些值取整為與之最接近的整數(shù)，從而得到值rgb(26%,40%,99%)。當(dāng)然，在整數(shù)三元組中只能使用整數(shù)。

無(wú)論哪一種記法，如果值落在可取范圍之外，都會(huì)“剪裁”到最接近的范圍邊界，這意味著，如果一個(gè)值大于100%或小干0%,就會(huì)默認(rèn)地調(diào)整為100%或0%(這是可取的最大和最小極限)。因此，以下聲明會(huì)處理為好像聲明了注釋中指定的值

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 */

百分?jǐn)?shù)和整數(shù)之間的轉(zhuǎn)換看上去似乎是任意的，不過(guò)沒(méi)有必要去猜測(cè)想要的相應(yīng)整數(shù)，對(duì)此有一個(gè)簡(jiǎn)單的計(jì)算公式。如果知道所要的各RGB分量的百分?jǐn)?shù)，只需將它們應(yīng)用到255 (乘以255),就能得到結(jié)果值。假設(shè)有一個(gè)顏色的紅色分量為25%,綠色分量為37.5%,藍(lán)色分量為60%。將這些百分?jǐn)?shù)乘以255,就會(huì)得到63.75、95.625和153。再把這些值取整為最接近的整數(shù)，這就得到了voila: rgb(64,96,153)。

當(dāng)然，如果你已經(jīng)知道百分?jǐn)?shù)值，那么將其轉(zhuǎn)換為整數(shù)并沒(méi)有什么意義。對(duì)于使用Photoshop之類程序的人來(lái)說(shuō)，整數(shù)記法更為有用，因?yàn)檫@些程序可以在Info對(duì)話框中顯示整數(shù)值，而對(duì)于熟悉顏色生成技術(shù)細(xì)節(jié)的人來(lái)說(shuō)，整數(shù)記法也更有利，因?yàn)樗麄兺ǔ?huì)按照0~255的整數(shù)值來(lái)考慮。這么說(shuō)來(lái)，這些人可能更熟悉采用十六進(jìn)制記法考慮，這正是我們接下來(lái)要討論的。