text-decoration
En este capítulo aprenderá acerca de las siguientes propiedades:
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
- text-decoration
La propiedad text-decoration-line se usa para agregar una línea de decoración al texto.
Sugerencia: puedes combinar más de un valor, como sobrerayado y subrayado, para mostrar líneas tanto encima como debajo de un texto.
Ejm
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
Nota: No se recomienda subrayar el texto que no sea un enlace, ya que esto suele confundir al lector.
Establecer un color para la linea de decoración
La propiedad text-decoration-color se utiliza para establecer el color de la línea de decoración.
Ejm
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
}
p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}
Establecer un estilo para la linea de decoración
La propiedad text-decoration-style se utiliza para establecer el estilo de la línea de decoración.
Ejm
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
Especificar 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.
Ejm
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
Forma corta de escribir
La propiedad text-decoration es una propiedad abreviada para:
- text-decoration-line (requerido)
- text-decoration-color (opcional)
- text-decoration-style (opcional)
- text-decoration-thickness (opcional)
Ejm
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p {
text-decoration: underline red double 5px;
}
Un pequeño consejo
Todos los enlaces en HTML están subrayados por defecto. A veces ves que los enlaces tienen un estilo sin subrayar. text-decoration: none; se utiliza para eliminar el subrayado de los enlaces, como este.
Ejm
a {
text-decoration: none;
}