
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-line
, text-decoration-color
y text-decoration-style
.
Funciones text-decoration css
Valor inicial | Para cada valor corto:text-decoration-color : currentcolor text-decoration-style : solid text-decoration-line : none |
---|---|
Aplicado a | Todos los artículos. |
Heredable | No |
Móvil | No, excepto por el valor de la propiedad text-decoration-color . |
Valor calculado | Longitud 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ística | Chrome | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 3.0 | 3.5 | 1.0 |
Característica corta | soportado | 36.0 | No soportado | No soportado | 7.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 underline
o line-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 solid
, wavy
o dashed
, 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.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS