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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
---
title: text-decoration
slug: Web/CSS/text-decoration
tags:
- Propiedad CSS
- Texto CSS
translation_of: Web/CSS/text-decoration
---
<div>{{CSSRef}}</div>
<p>La propiedad CSS <strong><code>text-decoration</code></strong> se usa para establecer el formato de texto a subrayado (<code>underline</code>) y suprarrayado (<code>overline</code>), tachado (<code>line-through</code>) o parpadeo (<code>blink</code>). El subrayado y el suprarrayado son posicionados bajo el texto, mientras la línea a través de éste se posiciona por encima.</p>
<p>Las decoraciones de texto se dibujan a través de los elementos descendientes. Esto significa que no es posible deshabilitar la decoración en un descendiente si la propiedad se especifica en un elemento ancestro. Por ejemplo, en el código <code><p>Este texto tiene <em>algunas palabras enfatizadas</em> en él.</p></code>, la regla de estilos <code>p { text-decoration: underline; }</code> causará que el párrafo entero tenga subrayado. La regla <code>em { text-decoration: none; }</code> no causará ningún cambio; el párrafo entero seguirá subrayado. Sin embargo, la regla <code>em { text-decoration: overline; }</code> causará una segunda decoración que aparecerá sobre "algunas palabras enfatizadas".</p>
<div class="note style-wrap">
<p><strong>Nota: </strong>El Nivel 3 de Decoraciones de Texto transformó esta propiedad en la forma reducida de las tres propiedades nuevas {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, y {{cssxref("text-decoration-style")}}. Como en cualquier otra propiedad reducida, esto significa que restaura sus valores a los predeterminados si no son definidos explícitamente en la propiedad.</p>
</div>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush: css">/* Valores clave */
text-decoration: none; /* Sin decoración */
text-decoration: underline red; /* Subrayado rojo */
text-decoration: underline wavy red; /* Subrayado rojo ondulado */
/* Valores globales */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
</pre>
<h3 id="Valores">Valores</h3>
<p>La propiedad <code>text-decoration</code> es una forma reducida, y puede usar los valores de cada una de las propiedades de la forma larga: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, y {{cssxref("text-decoration-style")}}</p>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
{{csssyntax}}
<h2 id="Ejemplos">Ejemplos</h2>
<pre class="brush: css">h1.under {
text-decoration: underline;
}
h1.over {
text-decoration: overline;
}
p.line {
text-decoration: line-through;
}
p.blink {
text-decoration: blink;
}
a.none {
text-decoration: none;
}
p.underover {
text-decoration: underline overline;
}
</pre>
<pre class="brush: html" style="display: none;"><h1 class="under">Underlined Header</h1>
<p class="line">If you want to strike out text, use line-through.</p>
<p class="blink">This text might blink for you - if you use Explorer, it will not.</p>
<h1 class="over">and now an overlined header.</h1>
<p>This <a class="none" href="textdecoration.html">link will not be underlined</a>, as most links are by default. Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.</p>
<p class="underover">This text has both underline and overline.</p>
</pre>
<p>{{EmbedLiveSample('Examples','100%','310')}}</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentarios</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
<td>{{Spec2('CSS3 Text Decoration')}}</td>
<td>
<p>Transformada a propiedad reducida. Soporte agregado para el valor de {{cssxref('text-decoration-style')}}.</p>
</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Sin cambios significativos</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatGeckoDesktop("1.0")}}</td>
<td>1.0</td>
<td>3.0</td>
<td>3.5</td>
<td>1.0</td>
</tr>
<tr>
<td>valor <code>blink</code></td>
<td>{{CompatGeckoDesktop("1.0")}}<br>
{{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
<td>4.0<br>
15.0<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
</tr>
<tr>
<td>Propiedad reducida</td>
<td>{{CompatGeckoDesktop("6.0")}}<sup>[3]</sup><br>
{{CompatGeckoDesktop("36.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>7.1<sup>[2]</sup></td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatGeckoMobile("1.0")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>valor <code>blink</code></td>
<td>{{CompatGeckoDesktop("1.0")}}<br>
{{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
<td>4.0<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
</tr>
<tr>
<td>Propiedad reducida</td>
<td>{{CompatGeckoMobile("6.0")}}<sup>[3]</sup><br>
{{CompatGeckoMobile("36.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>8<sup>[1]</sup></td>
</tr>
</tbody>
</table>
</div>
<p>[1] El valor <code>blink</code> no tiene ningún efecto.</p>
<p>[2] Safari no soporta {{cssxref("text-decoration-style")}}.</p>
<p>[3] Esta versión de Gecko tiene una implementación parcial.</p>
<h2 id="Véase_también">Véase también</h2>
<ul>
<li>El atributo {{cssxref("list-style")}} controla la apariencia de los items en listas {{HTMLElement("ol")}} y {{HTMLElement("ul")}} de HTML.</li>
</ul>
|
