Características text-decoration en CSS

Características text-decoration en CSS

La propiedad text-decoration CSS determina la apariencia de las líneas decorativas utilizadas en el texto. Es una propiedad de acceso directo para establecer el valor de más de una propiedad sobre líneas decorativas al mismo tiempo, e incluye text-decoration-linetext-decoration-colortext-decoration-style.

Funciones text-decoration css

Valor inicialPara cada valor corto:
text-decoration-colorcurrentcolor
text-decoration-stylesolid
text-decoration-linenone
Aplicado aTodos los artículos.
HeredableNo
MóvilNo, excepto por el valor de la propiedad text-decoration-color.
Valor calculadoLongitud absoluta o palabra reservada normal.
/* Palabras reservadas */ 
text-decoration: none;
text-decoration: underline red;
text-decoration: underline wavy red;
/* Valores globales */ 
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

Tenga en cuenta que las líneas de decoración se mostrarán en los elementos de texto secundarios, lo que significa que si un elemento especifica una decoración de texto, el elemento secundario no podrá eliminarlo. Por ejemplo, si tenemos el siguiente código ‎<p> This text has <em> some emphasized words </em> in it.</p> ‎y se le aplica la regla p { text-‎decoration: underline;‎ ‎}, aparecerá una línea debajo de todo el párrafo y la regla no tendrá em { text-‎decoration: none; ‎}‎ningún efecto. Pero si lo usamos ‎‎em‎ ‎‎{ ‎text-decoration:‎ ‎overline‎; ‎‎}‎‎, mostrará otra línea de decoración encima del texto dentro del elemento <em>.

Ejemplos y aplicaciones en código

Un ejemplo del uso de la propiedad abreviada text-decoration con varios valores:

< p  class = "under" > Este texto está subrayado. </ p > 
< p  class = "over" > Este texto está subrayado. </ p > 
< p  class = "line" > Una línea pasa por este texto. </ p > 
< p > <a class="plain" href="#"> el enlace no será subrayado </ a >, pero tenga cuidado al eliminar la fuente debajo de los enlaces, ya que esto puede confundir a los visitantes. </ p > 
< p  class = "underover" > Este texto está subrayado < em > y </ em > está subrayado . </ p > 
< p  class = "blink" > Este texto puede parpadear si su navegador lo admite. </ p >

Código CSS:

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

Soporte de navegadores

CaracterísticaChromeFirefoxIEOperaSafari
Soporte básico1.01.03.03.51.0
Característica cortasoportado36.0No soportadoNo soportado7.1

Antes de que esta propiedad se abreviara, aceptaba cinco valores, a saber:

text-decoration: none | underline | overline | line-through | blink;

Características generales

La propiedad acepta text-decoration uno de los siguientes valores, separados por espacios, que representan los valores de propiedad que abrevia esta propiedad.

<text-decoration-line>

Ajuste el tipo (o ubicación) de las fuentes utilizadas en la decoración, como underlineline-through, consulte la página de propiedades text-decoration-line para obtener más información.

<text-decoration-color>

Ajusta el color de la decoración, consulte la página de características text-decoration-color para obtener más información.

<text-decoration-style>

Ajuste la forma de las fuentes utilizadas en la decoración, como solidwavydashed, consulte la página de propiedades text-decoration-style para obtener más información.

Estructura text-decoration css

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

Consultar también

  • La página de propiedades text-decoration-color que especifica el color de las fuentes decorativas utilizadas en el texto.
  • Página de propiedades text-decoration-line que especifica el tipo de fuentes decorativas utilizadas en el texto.
  • La página de propiedades text-decoration-style que define la forma de las líneas decorativas utilizadas en el texto.