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

不出所料，underline會對元素加下劃線，就像HTML中的U元素一樣。overline的作用恰好相反，會在文本的頂端畫一個上劃線。值line-through則在文本中間畫一個貫穿線，這也稱為貫穿文本，等價于HTML中的S和strike元素。blink會讓文本閃爍，類似于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)然，無法在本書中顯示閃爍的效果，不過很容易想象（也許實在太容易了）。有時，用戶代理不要求支持blink，在寫作本書時，Internet Explorer就不支持blink。

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

a {text-decoration: none;}

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

注意：盡管我個人對此沒有什么意見，不過許多用戶如果發(fā)現(xiàn)你去掉了鏈接的下劃線會很不高興。這取決于個人觀點，所以你自己看著辦。不過要記住：如果鏈接的顏色與正常文本的差別不夠明顯，用戶將很難在文檔中找到超鏈接。

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

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

不過要當(dāng)心：如果兩個不同的裝飾都與同一個元素匹配，勝出規(guī)則的值會完全取代另一個值。考慮以下規(guī)則：

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

h2 (text-decoration: underline overline;}

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

怪異的裝飾

下面來看text-decoration不尋常的一面。第一個奇怪的地方是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：下劃線的顏色一致

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

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—樣，因為你所做的就是明確地聲明已經(jīng)有什么。換句話說，沒有辦法去掉父元素生成的下劃線（或者上劃線或貫穿線）。

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

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

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

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

因為文本裝飾可能會造成這樣一些問題，現(xiàn)在你可能聲稱再也不會使用文本裝飾了。實際上，我還只是指出了其中最簡單的一些可能的情況，因為我們只是討論了按照規(guī)范來講會怎么樣。在實際中，盡管不該去掉子元素的下劃線，但有些Web瀏覽器確實會這么做。這些瀏覽器之所以違反規(guī)范，原因很簡單：創(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所示為一個Web瀏覽器中去掉了strong元素的下劃線。

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

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

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

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è)置為灰色，而且有一個下劃線。灰色的下劃線看上去“覆蓋”了父元素的黑色下劃線，所以裝飾的顏色與strong元素的顏色匹配。