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
|
---
title: text-decoration
slug: Web/CSS/text-decoration
tags:
- 文本修饰
translation_of: Web/CSS/text-decoration
---
<div>{{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">简介</h2>
<p>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</p>
<p><code>text-decoration</code> 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}}, 和新出现的 {{cssxref("text-decoration-thickness")}} 属性的缩写。</p>
<p>文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性，子元素则不能将其删除。例如，在如下标记中<code> <p>This text has <em>some emphasized words</em> in it.</p>，应用样式</code><code>p { text-decoration: underline }</code> 会对整个段落添加下划线，此时再添加样式 <code>em { text-decoration: none }</code> 则不会引起任何改变，整个段落仍然有下划线修饰。然而，新加样式 <code>em { text-decoration: overline }</code> 则会在<em>标记的文字上再添加上这种overline样式。</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<p>text-decoration属性是一种简写属性，并且可以使用普通属性三个值中的任何一个。普通属性如下：{{cssxref("text-decoration-line")}}，{{cssxref("text-decoration-color")}}和{{cssxref("text-decoration-style")}}</p>
<h3 id="值">值</h3>
<dl>
<dt>{{cssxref("text-decoration-line")}}</dt>
<dd>文本修饰的位置, 如下划线<code>underline</code>，删除线<code>line-through</code></dd>
<dt>{{cssxref("text-decoration-color")}}</dt>
<dd>文本修饰的颜色</dd>
<dt>{{cssxref("text-decoration-style")}}</dt>
<dd>文本修饰的样式, 如波浪线<code>wavy</code>实线<code>solid</code>虚线<code>dashed</code></dd>
<dt>{{cssxref("text-decoration-thickness")}}</dt>
<dd>文本修饰线的粗细</dd>
</dl>
<h3 id="语法形式">语法形式</h3>
{{csssyntax("text-decoration")}}
<h2 id="示例">示例</h2>
<pre class="brush: html"><code><p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>This <a class="plain" href="#">link will not be underlined</a>,
as links generally are by default. Be careful when removing
the text decoration on anchors since users often depend on
the underline to denote hyperlinks.</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="blink">This text might blink for you,
depending on the browser you use.</p></code></pre>
<pre class="brush: css"><code>.under {
text-decoration: underline red;
}
.over {
text-decoration: wavy overline lime;
}
.line {
text-decoration: line-through;
}
.plain {
text-decoration: none;
}
.underover {
text-decoration: dashed underline overline;
}
.blink {
text-decoration: blink;
}</code>
</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample('示例','auto','280')}}</p>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table" style="height: 225px; width: 1157px;">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态值</th>
<th scope="col">注解</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Text Decoration')}}</td>
<td>{{Spec2('CSS4 Text Decoration')}}</td>
<td>增加了 {{cssxref("text-decoration-thickness")}}; 注意这个属性还不是正式的，还没有明确。</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration') }}</td>
<td>{{ Spec2('CSS3 Text Decoration') }}</td>
<td>转换为简写属性。支持{{ cssxref('text-decoration-style') }}值</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>没有显著变化</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#text-decoration', 'text-decoration') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>
<p>最初的规范</p>
</td>
</tr>
</tbody>
</table>
<p id="Browser_compatibility">{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>{{Compat("css.properties.text-decoration")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>The individual text-decoration properties are {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, and {{cssxref("text-decoration-style")}}.</li>
<li>The {{cssxref("list-style")}} attribute controls the appearance of items in HTML {{HTMLElement("ol")}} and {{HTMLElement("ul")}} lists.</li>
</ul>
|
