网页设计中的文本装饰

  • 2018-10-10 11:39:49
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

接下来我们讨论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元素的颜色匹配。

当前文章标题:网页设计中的文本装饰

当前URL:http://www.lyjtt.cn/news/wzzz/Text-decoration.html

上一篇:网页设计中的字间隔和字母间隔

下一篇:网页设计中的文本阴影

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)