Características text-decoration-style en CSS

La propiedad text-decoration-style CSS define la forma de las líneas decorativas utilizadas en el texto (establecida a través de la propiedad text-decoration-line). Si va a establecer varias propiedades para definir la forma de las líneas de decoración, se recomienda utilizar la propiedad corta text-decoration.

Funciones text-decoration-style css

Valor inicial	`solid`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	No
Valor calculado	Como se especificó.

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

CSS no proporciona una forma sencilla de especificar una fuente única para cada fuente decorativa aplicada a un elemento, pero se puede hacer usando más de un elemento HTML. Aplicando un tipo de fuente diferente a cada elemento (usando la propiedad text-decoration-line) y especificando la fuente forma (transversal text-decoration-style) para cada elemento individualmente.

Si está utilizando fuentes decorativas para darle un significado organizativo al texto, cómo usar fuentes de paso en el texto para indicar que este texto ha sido omitido, se recomienda que use elementos HTML apropiados para este propósito como <del> o <s>. Los navegadores pueden deshabilitar el formato en algunos casos, pero el significado reglamentario de esos elementos no desaparecerá en ese caso.

Ejemplos y aplicaciones en código

Ejemplo de uso de la propiedad text-decoration-style con atributos text-decoration-color y text-decoration-line en un elemento <p> para agregar una línea ondulada roja debajo del texto:

< p  class = "wavy" > Este es un texto subrayado ondulado de color rojo. </ p >

Código CSS:

.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	57	36,0	No soportado	44	7.1 con el anterior `-webkit-`

Características generales

La propiedad acepta text-decoration-style una de las siguientes palabras reservadas.

solid

La línea de decoración está llena.

double

Decoración de doble línea.

dotted

Línea decorativa punteada.

dashed

Clip de línea decorativa.

wavy

Línea decorativa ondulada.

Estructura text-decoration-style css

text-decoration-style: solid | double | dotted | dashed | wavy;

Consulte también

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