還記得你第一次改變Web頁面的顏色是什么時(shí)候嗎？以前總是灰色背景上的黑色文本，其間有一些藍(lán)色的鏈接，突然之間，你可以按自己的意愿使用任何顏色組合，可以是黑色背景上的淡藍(lán)色文本，而超鏈接是淺綠色的。這只是朝著有色文本前進(jìn)的一個(gè)小進(jìn)步（最終目標(biāo)是頁面上的文本有多種顏色），這要?dú)w功于<FONT COLOR="…">。一旦還能增加背景圖像，那么一切皆有可能，或者起碼看上去是這樣，網(wǎng)站建設(shè)在顏色和背景方面則走得更遠(yuǎn)，它允許向一個(gè)頁面應(yīng)用多種不同的顏色和背景，而且根本不需要任何FONT或TABLE標(biāo)記。
網(wǎng)站設(shè)計(jì)師在設(shè)計(jì)頁面時(shí)，要在開始前先做好計(jì)劃。不論什么情況下通常都是如此，不過對(duì)于顏色，這一點(diǎn)更為重要。如果設(shè)計(jì)師要讓所有超鏈接都是黃色，它們會(huì)與文檔中某些部分的背景色沖突嗎？如果使用了太多的顏色，會(huì)不會(huì)讓用戶無所適從？（提示：確實(shí)如此）。如果改變了默認(rèn)的超鏈接顏色，用戶還能找出鏈接在哪里嗎？（例如，如果讓常規(guī)文本和超鏈接文本顏色相同。要找出鏈接就會(huì)困難得多，實(shí)際上，如果鏈接沒有加下劃線，則幾乎不可能識(shí)別出超鏈接。）
盡管需要先做一些規(guī)劃，不過修改元素顏色的功能還是讓人趨之若騖，這幾乎是每一位網(wǎng)站建設(shè)創(chuàng)作人員都想使用的功能，而且也確實(shí)相當(dāng)常用。如果使用得當(dāng)，顏色確實(shí)能強(qiáng)化文檔的表示。例如，假設(shè)你有一個(gè)設(shè)計(jì)，其中所有h1元素都是綠色，大多數(shù)h2元素是藍(lán)色，所有超鏈接都應(yīng)當(dāng)是暗紅色。不過，在某些情況下你希望h2元素是深藍(lán)色，因?yàn)榕c之關(guān)聯(lián)有不同類型的信息。要處理這種情況，最容易的辦法是為應(yīng)當(dāng)為深藍(lán)色的各個(gè)h2指定一個(gè)class，然后作以下聲明：
h1 {color:green;}
h2 {color:blue;}
h2.dkblue {color:navy;}
a {color:maroon;}/*a good dark red color*/
注意：選擇的類名最好描述其中包含的信息類型，而不是你想要達(dá)到什么視覺效果。例如，假設(shè)你希望對(duì)所有作為下級(jí)標(biāo)題的h2元素應(yīng)用深藍(lán)色。更可取的做法是選擇subsec甚至sub-section作為類名，這就能反映某種含義，而且更重要的是，這不依賴于任何表示概念。畢竟，也許你以后會(huì)決定所有下級(jí)標(biāo)題是深紅色而不是深藍(lán)色，如果是這樣，寫作h2.dkblue{color:maroon;}看上去就會(huì)有些傻。
從這個(gè)簡(jiǎn)單的例子可以看到，使用樣式之前最好先做些規(guī)劃，這樣才能充分合理地使用所有工具。例如，假設(shè)向前例中的頁面增加一個(gè)導(dǎo)航條。在這個(gè)導(dǎo)航條中，超鏈接應(yīng)當(dāng)是黃色而不是深紅色。如果導(dǎo)航條標(biāo)志為ID是navbar，則只需增加以下規(guī)則：
#navbar a{color:yellow;}
這會(huì)改變導(dǎo)航條中超鏈接的顏色，而不影響文檔中的其他超鏈接。
網(wǎng)站建設(shè)中實(shí)際上只有一種顏色類型，即純色。如果將一個(gè)文檔的color設(shè)置為red，文本都將是紅色。當(dāng)然，HTML的做法也一樣。使用HTML 3.2時(shí)，如果聲明<BODY LINK="blue" VLlNK="blue">，那么所有超鏈接都將是藍(lán)色，而不論它們放在文檔中的哪個(gè)位置。
使用CSS時(shí)也是如此。如果使用CSS將所有超鏈接（包括已訪問和未訪問）的color都設(shè)置為blue，它們將全是藍(lán)色。同樣，如果使用樣式設(shè)置body的背景為green，那么整個(gè)body的背景都是同樣的綠色。
在網(wǎng)站建設(shè)中，可以為任何元素設(shè)置前景和背景色，從body到強(qiáng)調(diào)元素和超鏈接元素，再到幾乎所有一切（列表項(xiàng)、整個(gè)列表、標(biāo)題、表單元格，甚至從某種程度上圖像也可以設(shè)置前景和背景色）。不過，要理解這是如何工作的，重要的是應(yīng)當(dāng)理解元素前景中有什么、沒有什么。
先來討論前景本身；一般來說，前景是元素的文本，不過前景還包括元素周圍的邊框。因此，有兩種方式直接影響一個(gè)元素的前景色：可以使用color屬性，也可以使用某個(gè)邊框?qū)傩栽O(shè)置邊框顏色，這在上一章討論過。