text-decoration-style
Resumen
La propiedad CSS text-decoration-style
define el estilo de las líneas especificadas por text-decoration-line
. El estilo aplica a todas las líneas, no hay manera de establecer diferentes estilos para cada línea definida por text-decoration-line
.
Si la decoración especificada tiene un significado semántico propio, como line-through, que significa que el texto ha sido removido, se recomienda a los autores denotar este significado usando una etiqueta HTML, como <del>
o <s>
. Siendo que los navegadores pueden deshabilitar estilos en algunos casos, el significado semántico no desaparecerá en dicha situación.
Valor inicial | solid |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Heredable | no |
Valor calculado | como se especifica |
Animation type | discrete |
Sintaxis
/* Valores clave */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
/* Valores globales */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;
Valores
solid double dotted dashed wavy
- Es una de las siguientes palabras clave:
Palabra clave Descripción Comentario solid
Dibuja una línea simple double
Dibuja una línea doble dotted
Dibuja una línea punteada dashed
Dibuja una línea discontinua wavy
Dibuja una línea ondulada -moz-none
No dibuja una línea No usarse: usar text-decoration-line
: none
en su lugar inherit
- Es una palabra clave que indica que se reutilice el valor calculado del elemento padre.
Sintaxis formal
Ejemplos
.example {
-moz-text-decoration-line: underline;
-moz-text-decoration-style: wavy;
-moz-text-decoration-color: red;
-webkit-text-decoration-line: underline;
-webkit-text-decoration-style: wavy;
-webkit-text-decoration-color: red;
}
.example {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
<p class="example">Así se ve el resultado.</p>
Especificaciones
Especificación | Estado | Comentarios |
---|---|---|
CSS Text Decoration Module Level 3 La definición de 'text-decoration-style' en esta especificación. |
Candidate Recommendation | Definición inicial. La propiedad text-decoration no era una forma reducida anteriormente. |
Compatibilidad de navegadores
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help! (en-US)
Característica | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Soporte básico | 6.0 (6.0) - 39.0 (39.0)-moz (en-US) 36.0 (36.0) |
Sin soporte | Sin soporte | Sin soporte | Sin soporte |
wavy | 6.0 (6.0) | Sin soporte | Sin soporte | Sin soporte | Sin soporte |
Característica | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Soporte básico | Sin soporte | Sin soporte | 6.0 (6.0)- 39.0 (39.0)-moz (en-US) 36.0 (36.0) |
Sin soporte | Sin soporte | Sin soporte |
wavy | Sin soporte | Sin soporte | 6.0 (6.0) | Sin soporte | Sin soporte | Sin soporte |