在利用CSS能做的幾乎所有工作中，其基礎都是單位（units）,這是影響所有屬性的顏色、距離和大小的一種元素，本章就要討論單位。如果沒有單位，就不能聲明某個段落應當是紫色，或者某個圖像周圍應當有10像素的空白，也不能聲明一個標題的文本應當是某種大小。如果理解了這里介紹的概念，你就能更快地學習和使用CSS的余下內(nèi)容。
CSS中有兩類數(shù)字：整數(shù)（“完整”的數(shù)）和實數(shù)（小數(shù)）。這些數(shù)字類型主要作為其他值類型的基礎，不過在某些情況下，這些基本類型數(shù)字也可以用作屬性的值。
在CSS2.1中，實數(shù)定義為一個整數(shù)后可以跟有一個小數(shù)點和小數(shù)部分。因此，以下都是合法的數(shù)字值：15.5、-270.00004和5。整數(shù)和實數(shù)都可以是正數(shù)或負數(shù)，不過屬性可能（而且通常會）限制所允許的數(shù)字范圍。
百分數(shù)值是一個計算得出的實數(shù)，其后跟有一個百分號（％）。百分數(shù)值幾乎總是相對于另一個值，這個值可以是任意的：可能是同一元素另一個屬性的值，也可以是從父元素繼承的一個值，或者是祖先元素的一個值。接受百分數(shù)值的屬性會對所允許的百分數(shù)值定義某些限制，還會定義百分數(shù)計算到什么程度。
每一位網(wǎng)頁設計師最早提出的問題之一可能是：“怎么在頁面上設置顏色？”使用HTML時，你有兩種選擇：可以按名使用為數(shù)不多的幾種顏色，如red或purple,或者可以采用一種不那么一目了然的方法，即使用十六進制代碼。這兩種描述顏色的方法在CSS中都仍然保留，另外還提供了一些其他的描述方法，而且在我看來，新增的這些方法更為直觀。
假設你覺得從一個很小的基本顏色集中選擇就足夠了，那么最容易的辦法就是使用你想要的顏色名。CSS稱這些有名字的顏色為命名顏色（道理很
顯然）。
一些瀏覽器制造商可能會讓你相信命名顏色很豐富，然而恰好相反，合法的命名顏色關鍵字很有限。例如，你不能選擇“mother-of-pearl”，因為這不是一個已定義的顏色。在 CSS2.1中，CSS規(guī)范定義了17個顏色名。這包括HTML 4.0丨中定義的16個顏色，并外加一個橙色：
因此，假設你希望所有一級標題都是紫紅色，最好的聲明就是:
h1 {color: maroon;}
是不是很直截了當？
當然，你可能見過（甚至用過）其他的顏色名，而不只是以上所列。例如，如果你指定以下規(guī)則：
h1 {color: lightgreen;}
很可能所有h1元素實際上會變成淡綠色，盡管lightgreen并不在CSS2.1的命名顏色表之列。它之所以能起作用，原因是大多數(shù)Web網(wǎng)頁瀏覽器能識別多達140個顏色名，包括前面的17個標準顏色。另外的這些顏色都在CSS3顏色規(guī)范中定義，對此本書不作討論。與那140種左右的顏色相比（這個顏色表就要長得多了），這17種標準顏色往往更可靠（在寫作本書時只有17種標準顏色，至于以后則不能斷言），因為這17種顏色的顏色值在CSS2.1中定義。CSS3中包含的140種顏色的擴展顏色表基于標準Xll RGB值，XII RGB值已經(jīng)使用了數(shù)十年，所以這些顏色能得到很好的支持。
幸運地是，CSS中還有一些更詳細、更精確的方法用于指定顏色。其好處在于，采用這些方法可以指定色譜中的任何顏色，而不只是17種（或140種）命名顏色。
計算機通過組合不同的紅色、綠色和藍色分量來創(chuàng)造顏色，這種組合通常稱為RGB顏色。實際上，如果你拆開一個老式的CRT計算機顯示器，再向下“挖掘”找到顯像管，你會發(fā)現(xiàn)三支“槍”（不過，如果你擔心因為動了顯示器而使顯示器授權失效，那么建議你還是別去找這些槍）。這些槍會在屏幕各個點上以不同強度發(fā)射電子束，然后在屏幕的這些點上結合各個光束的強度，構成你看到的各種顏色。各個點稱為像素（pixel）,本章后面還會討論這個概念。盡管當前大多數(shù)顯示器并不使用電子槍，但是其顏色輸出還是以RGB混合為基礎。
根據(jù)顯示器上創(chuàng)建顏色的方式，應該可以直接訪問這些顏色，由你確定如何混合紅、綠、藍分量，從而最大程度地控制顏色。這種解決方法很復雜，不過這確實是可以的，而且是值得的，因為這樣一來，對于能夠產(chǎn)生哪些顏色幾乎沒有什么限制。可以采用4種方法以這種方式控制顏色。
有兩種顏色值類型使用函數(shù)式RGB記法而不是十六進制記法。這種類型顏色值的一般語法是rgb(color),其中color用一個百分數(shù)或整數(shù)三元組表示。百分數(shù)值在0%~100%范圍內(nèi)，整數(shù)范圍為0~255。
因此，要使用百分數(shù)記法分別指定白色和黑色，值將指定為：
rgb(100%,100%,100%)
rgb(0%,0%,0%)
如果使用整數(shù)三元組記法，相同的顏色表示如下：
rgb(255,255,255)
rgb (0,0,0)
假設你希望h1元素有一個紅色陰影，其顏色值在紅色與紫紅色之間。red等價于rgb(100%,0%,0%),而maroon等于(50%, 0%, 0%)。要得到一個介于二者之間的顏色，可以試試下面的規(guī)則：
h1 {color: rgb(75%,0%,0%);}
這會讓這種顏色的紅色分量比maroon深，但比red淺。另一方面，如果你想創(chuàng)建一種灰紅色，則要增加綠色和藍色分量：
h1 {color: rgb(75%,50%,50%);}
如果使用整數(shù)三元組記法，與之最接近的顏色是：
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);}
當然，由于我們處理的是灰度，上述各個規(guī)則中RGB值的3個分量都一樣。如果其中任意一個分量不同于另外的分量，就會出現(xiàn)一種新顏色，例如，如果將rgb(50%,50%, 50%)，修改為rgb(50%,50%,60%),就會得到一種中暗色，其中稍稍泛一點藍色。
百分數(shù)記法中也可以使用分數(shù)。出于某種原因，你可能想指定某種顏色的紅色分量為25.5%,綠色為40%,藍色為98.6%:
h2 {color: rgb(25.5%,40%,98.6%);}
如果網(wǎng)頁瀏覽器忽略小數(shù)點（有些網(wǎng)頁瀏覽器確實會這么做），就會把這些值取整為與之最接近的整數(shù)，從而得到值rgb(26%,40%,99%)。當然，在整數(shù)三元組中只能使用整數(shù)。
無論哪一種記法，如果值落在可取范圍之外，都會“剪裁”到最接近的范圍邊界，這意味著，如果一個值大于100%或小干0%,就會默認地調(diào)整為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 */
百分數(shù)和整數(shù)之間的轉(zhuǎn)換看上去似乎是任意的，不過沒有必要去猜測想要的相應整數(shù)，對此有一個簡單的計算公式。如果知道所要的各RGB分量的百分數(shù)，只需將它們應用到255 (乘以255),就能得到結果值。假設有一個顏色的紅色分量為25%,綠色分量為37.5%,藍色分量為60%。將這些百分數(shù)乘以255,就會得到63.75、95.625和153。再把這些值取整為最接近的整數(shù)，這就得到了voila: rgb(64,96,153)。
當然，如果你已經(jīng)知道百分數(shù)值，那么將其轉(zhuǎn)換為整數(shù)并沒有什么意義。對于使用Photoshop之類程序的人來說，整數(shù)記法更為有用，因為這些程序可以在Info對話框中顯示整數(shù)值，而對于熟悉顏色生成技術細節(jié)的人來說，整數(shù)記法也更有利，因為他們通常會按照0~255的整數(shù)值來考慮。這么說來，這些人可能更熟悉采用十六進制記法考慮，這正是我們接下來要討論的。
當前文章標題：網(wǎng)頁設計中的顏色數(shù)值設置
當前URL：http://www.gtalker.cn/news/wzzz/web-design-color-units.html
