text-decoration

Summary

La propiedad CSS text-decoration se usa para establecer el formato de texto a subrayado inferior (underline) y superior (overline), línea a través del texto (line-through) o parpadeo (blink). El subrayado inferior y superior son posicionados bajo el texto, mientras la línea a través de éste se posiciona por encima.

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 <p>Este texto tiene <em>algunas palabras enfatizadas</em> en él.</p>, la regla de estilos p { text-decoration: underline; } causará que el párrafo entero tenga subrayado. La regla em { text-decoration: none; } no causará ningún cambio; el párrafo entero seguirá subrayado. Sin embargo, la regla em { text-decoration: overline; } causará una segunda decoración que aparecerá sobre "algunas palabras enfatizadas".

Nota: El Nivel 3 de Decoraciones de Texto transformó esta propiedad en la forma reducida de las tres propiedades nuevas text-decoration-color, text-decoration-line, y 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.

Valor inicialas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableno
Mediavisual
Valor calculadoas each of the properties of the shorthand:
Animatableas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

Sintaxis

/* 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;

Valores

La propiedad text-decoration es una forma reducida, y puede usar los valores de cada una de las propiedades de la forma larga: text-decoration-line, text-decoration-color, y text-decoration-style

Sintaxis formal

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

Ejemplos

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;
}

Especificaciones

Especificación Estado Comentarios
CSS Text Decoration Level 3
The definition of 'text-decoration' in that specification.
Candidate Recommendation

Transformada a propiedad reducida. Soporte agregado para el valor de text-decoration-style.

CSS Level 2 (Revision 1)
The definition of 'text-decoration' in that specification.
Recommendation Sin cambios significativos
CSS Level 1
The definition of 'text-decoration' in that specification.
Recommendation Definición inicial

Compatibilidad de navegadores

Característica Firefox (Gecko) Chrome Internet Explorer Opera Safari
Soporte básico 1.0 (1.7 or earlier) 1.0 3.0 3.5 1.0
valor blink 1.0 (1.7 or earlier)
23.0 (23.0)[1]
(Yes)[1] (Yes)[1] 4.0
15.0[1]
(Yes)[1]
Propiedad reducida 6.0 (6.0)[3]
36.0 (36.0)
No support No support No support 7.1[2]
Característica Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Soporte básico 1.0 (1.0) (Yes) (Yes) (Yes) (Yes)
valor blink 1.0 (1.7 or earlier)
23.0 (23.0)[1]
(Yes)[1] (Yes)[1] 4.0[1] (Yes)[1]
Propiedad reducida 6.0 (6.0)[3]
36.0 (36.0)
? ? ? 8[1]

[1] El valor blink no tiene ningún efecto.

[2] Safari no soporta text-decoration-style.

[3] Esta versión de Gecko tiene una implementación parcial.

Véase también

  • El atributo list-style controla la apariencia de los items en listas <ol> y <ul> de HTML.

Etiquetas y colaboradores del documento

Etiquetas: 
 Colaboradores en esta página: israel-munoz
 Última actualización por: israel-munoz,