Día 33: CSS Text Decoration
La ruta del desarrollador web frontend autónomo🤹♂️
Table of contents
Decoración del texto
En este capítulo, aprenderemos sobre las siguientes propiedades:
text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thicknesstext-decoration
Agrega una línea de decoración al texto
La propiedad text-decoration-line se utiliza para agregar una línea de decoración al texto.
Tip: Puedes combinar más de un valor, como sobrerayado y subrayado, para mostrar líneas encima y debajo de un texto.
Ejemplo:
Nota: No se recomienda subrayar el texto que no sea un enlace, ya que esto suele confundir al lector.
Especifique un color para la línea de decoración
La propiedad text-decoration-color se utiliza para establecer el color de la línea de decoración.
Ejemplo:
Especifique un estilo para la línea de decoración
La propiedad text-decoration-style se utiliza para establecer el estilo de la línea de decoración.
Ejemplo:
Especifique el grosor de la línea de decoración
La propiedad text-decoration-thickness se utiliza para establecer el grosor de la línea de decoración.
Ejemplo:
La propiedad abreviada
La propiedad text-decoration es una propiedad abreviada para:
text-decoration-line(obligatorio)text-decoration-color(opcional)text-decoration-style(opcional)text-decoration-thickness(opcional)
Ejemplo:
Un pequeño consejo
Todos los enlaces en HTML están subrayados por defecto. A veces verás que los enlaces tienen un estilo sin subrayar. La text-decoration: none; se utiliza para eliminar el subrayado de los enlaces, como este:
Ejemplo:
a {
text-decoration: none;
}
Todas las propiedades text-decoration
| Propiedad | Descripción |
text-decoration | Establece todas las propiedades tex-decoration en una sola declaración. |
text-decoration-color | Especifica el color de text-decoration |
text-decoration-line | Especifica el tipo de decoración de texto que se utilizará (underline, overline, etc.) |
text-decoration-style | Especifica el estilo de la decoración del texto (solid, dotted, etc.) |
text-decoration-thickness | Especifica el grosor de la línea de decoración del texto. |
Resumen
Este documento describe las propiedades CSS para decorar el texto, incluyendo text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness, y text-decoration. También se proporcionan ejemplos y consejos, como la eliminación del subrayado de los enlaces con text-decoration: none;
Traducido con 💚 desde W3Schools.com