接下來我們討論text-decoration，這是一個(gè)很有意思的屬性，它在網(wǎng)頁設(shè)計(jì)中提供了很多非常有趣的行為。

不出所料，underline會(huì)對(duì)元素加下劃線，就像HTML中的U元素一樣。overline的作用恰好相反，會(huì)在文本的頂端畫一個(gè)上劃線。值line-through則在文本中間畫一個(gè)貫穿線，這也稱為貫穿文本，等價(jià)于HTML中的S和strike元素。blink會(huì)讓文本閃爍，類似于Netscape支持的頗招非議的blink標(biāo)記。圖6-26顯示了這些值的一些例子：

p.enph {text-decoration: underline;}

p.topper {text-decorat ion: overline;}

p.old {cext-ciecoration: line-through;}

p.annoy {text-decorat ion: blink;}

p.plain {text-decoration: none;}

注意：當(dāng)然，無法在本書中顯示閃爍的效果，不過很容易想象（也許實(shí)在太容易了）。有時(shí)，用戶代理不要求支持blink，在寫作本書時(shí)，Internet Explorer就不支持blink。

none值會(huì)關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾。通常，無裝飾的文本是默認(rèn)外觀，伹也不總是這樣，例如，鏈接默認(rèn)地會(huì)有下劃線。如果你想去掉超鏈接的下劃線，可以使用以下網(wǎng)站建設(shè)CSS規(guī)則來做到這一點(diǎn)：

a {text-decoration: none;}

如果顯式地用這樣一個(gè)規(guī)則去掉鏈接的下劃線，那么錨與正常文本之間在視覺上的唯一差別就是顏色（至少默認(rèn)是這樣，不過也不能完全保證其顏色肯定有區(qū)別）。

注意：盡管我個(gè)人對(duì)此沒有什么意見，不過許多用戶如果發(fā)現(xiàn)你去掉了鏈接的下劃線會(huì)很不高興。這取決于個(gè)人觀點(diǎn)，所以你自己看著辦。不過要記?。喝绻溄拥念伾c正常文本的差別不夠明顯，用戶將很難在文檔中找到超鏈接。

還可以在一個(gè)規(guī)則中結(jié)合多種裝飾。如果希望所有超鏈接既有下劃線又有上劃線，則規(guī)則如下

a:link, a:visited {text-decoration: underline overline;}

不過要當(dāng)心：如果兩個(gè)不同的裝飾都與同一個(gè)元素匹配，勝出規(guī)則的值會(huì)完全取代另一個(gè)值?？紤]以下規(guī)則：

h2.stricken {text-decoration: line-through;}

h2 (text-decoration: underline overline;}

給定這些規(guī)則，所有class為stricken的h2元素都只有一個(gè)貫穿線裝飾，而沒有下劃線和上劃線裝飾，因?yàn)閠ext-decoration值會(huì)替換而不是累積起來。

怪異的裝飾

下面來看text-decoration不尋常的一面。第一個(gè)奇怪的地方是text-decoration不能繼承。沒有繼承性意味著文本上畫的任何裝飾線（上劃線或貫穿線）與父元素的顏色相同。即使后代元素本身有其他顏色也是如此，如圖6-27所示：

p {text-decoration: underline; color: black;}

strong {color: gray;}

<p>This paragraph, which is black and has a black underline, also contains <strong>strongly emphasized text</strong> which has the black underline beneath it as well.</p>

圖6-27：下劃線的顏色一致

為什么會(huì)這樣？因?yàn)閠ext-decoration的值不能繼承，strong元素認(rèn)為text-decoration默認(rèn)值為none。因此，strong元素沒有下劃線。現(xiàn)在，在strong元素下面很顯然有一條線，所以說它無下劃線看上去很傻。但這并不傻。你在strong元素下面看到的是段落的下劃線，它實(shí)際上只是“經(jīng)過”了 strong元素而已。如果修改粗體元素的樣式，可以更清楚地看到這一點(diǎn)，如下：

p {text-decoration: underline; color: black;}

strong {color: gray;text-decoration: none;}

<p>This paragraph, which is black and has a black underline, also contains <strong>strongly aifhasized text</strong> which has the black underline beneath it as well.</p>

其結(jié)果與圖6-27—樣，因?yàn)槟闼龅木褪敲鞔_地聲明已經(jīng)有什么。換句話說，沒有辦法去掉父元素生成的下劃線（或者上劃線或貫穿線）。

text-decoration與vertical-align結(jié)合時(shí)，還會(huì)發(fā)生更奇怪的事情。圖6-28顯示了這樣一種情況。因?yàn)閟up元素沒有自己的裝飾，但是它在一個(gè)有上劃線的元素中，這個(gè)上劃線穿過了sup元素：

p {text-decoration: overline; font-size: 12pt;}

sup {vertical-align: 50%; font-size: 12pt;}

圖6-28：正確但有些奇怪的裝飾行為

因?yàn)槲谋狙b飾可能會(huì)造成這樣一些問題，現(xiàn)在你可能聲稱再也不會(huì)使用文本裝飾了。實(shí)際上，我還只是指出了其中最簡(jiǎn)單的一些可能的情況，因?yàn)槲覀冎皇怯懻摿税凑找?guī)范來講會(huì)怎么樣。在實(shí)際中，盡管不該去掉子元素的下劃線，但有些Web瀏覽器確實(shí)會(huì)這么做。這些瀏覽器之所以違反規(guī)范，原因很簡(jiǎn)單：創(chuàng)作人員希望如此?？紤]以下標(biāo)記：

p (text-decoration: underline; color: black;}

strong {color: silver; text-decoration: none;}

<p>This paragraph, which is black and has a black underline, also contains <strong>boldfaced text</strong> which does not have black underline beneath it.</p>

圖6-29所示為一個(gè)Web瀏覽器中去掉了strong元素的下劃線。

圖6-29:—些瀏覽器的實(shí)際表現(xiàn)

這里有一個(gè)警告，很多瀏覽器確實(shí)會(huì)遵循規(guī)范，而且現(xiàn)有瀏覽器（或所有其他用戶代理）的將來版本可能有一天會(huì)嚴(yán)格遵循規(guī)范。所以，如果你依賴于使用none來去掉裝飾，要認(rèn)識(shí)到重要的一點(diǎn)：將來這可能會(huì)給你帶來麻煩，甚至現(xiàn)在就會(huì)出問題。而且，CSS 的將來版本可能會(huì)包含一些去掉裝飾的方法，而不必不正確地使用none，所以這方面還是有希望的。

還有一種方法可以改變裝飾的顏色而不會(huì)違反規(guī)范。你應(yīng)該記得，在一個(gè)元素上設(shè)置文本裝飾意味著整個(gè)元素都有同樣的顏色裝飾，即使子元素有不同顏色。為了使裝飾顏色與一個(gè)元素匹配，必須顯式地聲明其裝飾，如下：

p {text-decoration: underline; color: black;}

strong (color: silver; text-decoration: underline;}

<p>This paragraph, which is black and has a black underline, also contains <strong>strongly emphasized text</strong> which has the black underline beneath it as well, but whose gray underline overlays the black underline of its parent.</p>

在圖6-30中，strong元素被設(shè)置為灰色，而且有一個(gè)下劃線。灰色的下劃線看上去“覆蓋”了父元素的黑色下劃線，所以裝飾的顏色與strong元素的顏色匹配。