1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: 理解下划线
slug: Understanding_Underlines
tags:
- 'CSS:Articles'
translation_of: >-
Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration
translation_of_original: Understanding_Underlines
---
<p>对于 Web 设计者来说, 想移除其设计中某些 (或全部) 超链接的下划线是相当常见的事情。但是由于在过去浏览器中的一些不标准的行为, 一些人在删除超链接中下划线的正确方法方面存在一些问题。最常见的错误是这样做：</p>
<pre class="notranslate"><a href="link.html">
<span style="text-decoration: none;">一个链接</span>
</a></pre>
<p>与大部分人的想法相反，这样去除下划线是不应该的。本文将会探讨去除下滑的正确方法及其原因。正确的处理下划线有很大的好处，譬如简洁的标签及高可读性的源代码。</p>
<h3 id="How_Text_Gets_Decorated" name="How_Text_Gets_Decorated">文字是如何被加上修饰线（decoration）的</h3>
<p>了解如何正确删除下划线之前，我们先了解一下修饰线（<code>decoration</code> 下同）是如何被应用的。首先，让我们先思考一个 <code>span</code> 在一个 <code>p</code> 中会是什么样子。</p>
<pre class="brush: html notranslate"><p><span style="text-decoration: underline;">
这里有一些文字
</span></p></pre>
<p>很明显，就像下面所展示的：文字被加上了下划线。</p>
<p><u>这里有一些文字。</u></p>
<p>现在，让我们添加再添加一个 <code>span</code> 嵌套在之前的 <code>span</code> 里面。然后再给后加的 <code>span</code> 一个不一样的线样式：</p>
<pre class="brush: html notranslate"><p><span style="text-decoration: underline;">
这里有一些
<span style="text-decoration: overline;">额外的</span>
文字。
</span></p></pre>
<p><u>这里有一些<span style="text-decoration: overline;">额外的</span>文字。</u></p>
<p>我们发现此例的 “额外的” 一词出现了既有上划线也有下划线的情况。但是这为什么呢？我们仅给最里面 <code>span</code> 标签设置了上划线。<code>text-decoration</code> 的值并不会被继承。那么为什么 “额外的” 下面会有下划线呢？</p>
<p>现在让我们把最里面 <code>span</code> 的文字颜色（<code>color</code> 下同）改一下，比如红色，我们就能知道怎么回事了。</p>
<p><u>这里有一些<span style="color: red; text-decoration: overline;">额外的</span>文字。</u></p>
<p>上划线和文字一起变成了红色，但是下划线并没有。这是因为下划线实际上是外面 <code>span</code> 的一部分，它只是在最里面 <code>span</code> 的下方经过而已。如果我们给外面的 <code>span</code> 加个背景，我们一般是希望背景也能穿过里面 <code>span</code> 显示出来。同样的，父级的文字修饰线就会显示在子级元素上，即使你并没有给子级元素设置或继承修饰线。</p>
<p>现在，让我们明确地移除里面 <code>span</code> 的修饰线样式。</p>
<pre class="brush: html notranslate"><p><span style="text-decoration: underline;">
这里有一些
<span style="text-decoration: none; color: red;">额外的</span>
文字。
</span></p></pre>
<p>这样意味着不应有任何修饰线样式在里面的 <code>span</code> 上，但是这样并不会阻止外面的 <code>span</code> 显示下划线。这就和 “把里面 <code>span</code> 的背景设为透明并不会让我们看不到外面 <code>span</code> (或者 <code>body</code> 之类的) 的背景” 一样。我们可以在下面看见，下划线仍旧是外面 <code>span</code> 的颜色。</p>
<p><u>这里有一些<span style="color: red; text-decoration: none;">额外的</span>文字。</u></p>
<p>那么让我们考虑一下这种情况：你在一个超链接 <code>a</code> 里添加了一个 <code>span</code> ，如果你想移除链接的下划线。但是因为上面所说的原因，你是没办法这样达成目的：</p>
<pre class="notranslate"><a href="http://developer.netscape.com/">这个链接
<span style="text-decoration: none; font-weight: bold;">
有个span
</span>在里面</a></pre>
<p>因此，我们不能使用这种方式移除下划线，我们需要其他的方法。而这其他的方法比你想象的要简单许多。</p>
<h3 id="How_to_Really_Turn_Off_Underlines" name="How_to_Really_Turn_Off_Underlines">如何真正地将下划线移除</h3>
<p>答案很简单：如果你不希望超链接拥有下划线，那么请直接关闭该标签本身的下划线。通过覆写在链接中的<code>span</code>的样式来修改下划线是不会在正常的浏览器中起效的，这是一种多余的无用行为。</p>
<p>比方说，如果你想移除页面中所有超链接的下划线，那么最简单的办法是：</p>
<pre class="notranslate">a:link, a:visited {text-decoration: none;}</pre>
<p>另一个常见情况是仅从一组选定的链接中删除其中的下划线。比方说，在页面顶部的导航链接通常不会设有下划线。在这种情况下，你最好的选择是使用 class 或者 id 属性对目标元素进行分类，然后编写对应的样式。比方说，假设在下面的表格中有你希望修改的链接标签，那么给<code>table</code>本身追加一个<code>id</code>属性就是你首先需要做的。</p>
<pre class="notranslate"><table id="navbar">
<tr>
<td><a href="link1.html">Home</a></td>
<td><a href="link2.html">Electronics</a></td>
<td><a href="link3.html">Accessories</a></td>
<td><a href="link4.html">Software</a></td>
<td><a href="link5.html">Checkout</a></td>
</tr>
</table></pre>
<p>有了 <code>id</code> 之后, 我们现在就可以为其编写一条CSS规则：</p>
<p><code>table#navbar a {text-decoration: none;}</code></p>
<p>这种方法最大的额外好处就是你可以基于此规则为这些链接扩展其他样式，比如：</p>
<pre class="notranslate">table#navbar a {text-decoration: none; color: yellow;
font: 10px sans-serif; letter-spacing: 1px; padding: 0 1em;}</pre>
<p>当然，你也可以直接将你希望修改样式的链接赋上特定的 class ，在有些情况下这是十分有必要的。而且，在绝大多数情况下 ，使用与本页面类似的方法将有效地帮助到其他作者。Of course, you could put classes directly on the links you wish to style, and in some cases that's necessary. However, in the majority of cases, authors will be well served by an approach similar to the one shown here.</p>
<h3 id="Other_Decorations" name="Other_Decorations">其他修饰线</h3>
<p>本文重点介绍下划线，因为下划线是迄今为止在网络上使用的最常见的文本修饰。不过，此处讨论的原理适用于任何形式的装饰。如果文本设置了删除线样式，则该样式将穿透元素的文本以及任何子元素的文本，无论<code>text-decoration</code>的值是多少。举个例子：This article has focused on underlines because they are by far the most common text decoration in use on the Web. However, the principles discussed here apply to any form of decoration. If text is styled with a strike-through line, then that will run through the element's text and the text of any descendant elements, no matter what value they are given for <code>text-decoration</code>. As an example:</p>
<pre class="notranslate"><p style="text-decoration: line-through;">
This text has been
<span style="text-decoration: none; color: red;">stricken</span>
with a line.
</p></pre>
<p>The text in this paragraph will all be stricken, although the word "stricken" will be red. This is shown in Figure 6.</p>
<h3 id="Conclusion" name="Conclusion">结论</h3>
<p>Although some browsers will let you get away with it, the use of <code>span</code> to "switch off" text decorations is not correct CSS and will not work in CSS-conformant browsers. Thus, many Web sites authored to proprietary behavior will not display as the designer intended in more recent browsers. Fortunately, there are several benefits to abandoning this legacy code practice in favor of directly styling hyperlinks.</p>
<h3 id="Recommendations" name="Recommendations">建议</h3>
<ul>
<li><strong>不要</strong>尝试通过<code>span</code>标签来修饰链接，这是一种无效的行为——在使用规范CSS的浏览器中，它不能够去除类似下划线等装饰线。</li>
<li>利用CSS选择器，通过class或id属性对元素进行进行分类来提高CSS的效率。.</li>
</ul>
<div class="originaldocinfo">
<h3 id=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF" name=".E6.96.87.E7.AB.A0.E5.8E.9F.E5.A7.8B.E4.BF.A1.E6.81.AF">文章原始信息</h3>
<ul>
<li>作者： Eric A. Meyer, Netscape Communications</li>
<li>最后更新： Published 2002年3月5日</li>
<li>版权信息： Copyright © 2001-2003 Netscape. All rights reserved.</li>
<li>注意： This reprinted article was originally part of the DevEdge site.</li>
</ul>
</div>
|
