接下来我们讨论text-decoration，这是一个很有意思的属性，它在网页设计中提供了很多非常有趣的行为。

不出所料，underline会对元素加下划线，就像HTML中的U元素一样。overline的作用恰好相反，会在文本的顶端画一个上划线。值line-through则在文本中间画一个贯穿线，这也称为贯穿文本，等价于HTML中的S和strike元素。blink会让文本闪烁，类似于Netscape支持的颇招非议的blink标记。图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;}

注意：当然，无法在本书中显示闪烁的效果，不过很容易想象（也许实在太容易了）。有时，用户代理不要求支持blink，在写作本书时，Internet Explorer就不支持blink。

none值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，伹也不总是这样，例如，链接默认地会有下划线。如果你想去掉超链接的下划线，可以使用以下网站建设CSS规则来做到这一点：

a {text-decoration: none;}

如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样，不过也不能完全保证其颜色肯定有区别）。

注意：尽管我个人对此没有什么意见，不过许多用户如果发现你去掉了链接的下划线会很不高兴。这取决于个人观点，所以你自己看着办。不过要记住：如果链接的颜色与正常文本的差别不够明显，用户将很难在文档中找到超链接。

还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线又有上划线，则规则如下

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

不过要当心：如果两个不同的装饰都与同一个元素匹配，胜出规则的值会完全取代另一个值。考虑以下规则：

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

h2 (text-decoration: underline overline;}

给定这些规则，所有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元素认为text-decoration默认值为none。因此，strong元素没有下划线。现在，在strong元素下面很显然有一条线，所以说它无下划线看上去很傻。但这并不傻。你在strong元素下面看到的是段落的下划线，它实际上只是“经过”了 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>

其结果与图6-27—样，因为你所做的就是明确地声明已经有什么。换句话说，没有办法去掉父元素生成的下划线（或者上划线或贯穿线）。

text-decoration与vertical-align结合时，还会发生更奇怪的事情。图6-28显示了这样一种情况。因为sup元素没有自己的装饰，但是它在一个有上划线的元素中，这个上划线穿过了sup元素：

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

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

图6-28：正确但有些奇怪的装饰行为

因为文本装饰可能会造成这样一些问题，现在你可能声称再也不会使用文本装饰了。实际上，我还只是指出了其中最简单的一些可能的情况，因为我们只是讨论了按照规范来讲会怎么样。在实际中，尽管不该去掉子元素的下划线，但有些Web浏览器确实会这么做。这些浏览器之所以违反规范，原因很简单：创作人员希望如此。考虑以下标记：

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:—些浏览器的实际表现

这里有一个警告，很多浏览器确实会遵循规范，而且现有浏览器（或所有其他用户代理）的将来版本可能有一天会严格遵循规范。所以，如果你依赖于使用none来去掉装饰，要认识到重要的一点：将来这可能会给你带来麻烦，甚至现在就会出问题。而且，CSS 的将来版本可能会包含一些去掉装饰的方法，而不必不正确地使用none，所以这方面还是有希望的。

还有一种方法可以改变装饰的颜色而不会违反规范。你应该记得，在一个元素上设置文本装饰意味着整个元素都有同样的颜色装饰，即使子元素有不同颜色。为了使装饰颜色与一个元素匹配，必须显式地声明其装饰，如下：

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元素被设置为灰色，而且有一个下划线。灰色的下划线看上去“覆盖”了父元素的黑色下划线，所以装饰的颜色与strong元素的颜色匹配。