Valores de text-decoration
text-decoration: none;: Este valor elimina toda la decoración del texto. Los enlaces se ven como texto normal sin subrayado ni línea a través.
text-decoration: underline;: Agrega una línea de subrayado debajo del texto. Este es el valor predeterminado para la mayoría de los enlaces.
text-decoration: overline;: Agrega una línea de subrayado por encima del texto.
text-decoration: line-through;: Agrega una línea horizontal que atraviesa el medio del texto, como si se estuviera tachando.
text-decoration: underline overline;: Puedes combinar múltiples valores para aplicar subrayado y línea superior al mismo tiempo.
text-decoration: underline line-through;: Combina subrayado y línea a través.
text-decoration: inherit;: Hereda la propiedad de decoración del texto de su elemento padre.
text-decoration: initial;: Establece la propiedad en su valor inicial predeterminado.
text-decoration-color: Esta propiedad permite especificar el color de la decoración del texto, como el color del subrayado o la línea a través. Puedes usar valores de color CSS aquí, como text-decoration-color: red;.
text-decoration-style: Esta propiedad controla el estilo de la línea de decoración, como sólida (solid), discontinua (dotted), discontinua larga (dashed), etc.
Un ejemplo que usa todos estos valores es:
<!DOCTYPE html>
<html>
<head>
<style>
/* Definir una clase CSS con todas las propiedades de text-decoration */
.decoracion-texto-none {
text-decoration: none;
}
.decoracion-texto-underline {
text-decoration: underline;
}
.decoracion-texto-overline {
text-decoration: overline;
}
.decoracion-texto-line-through {
text-decoration: line-through;
}
.decoracion-texto-underline-overline {
text-decoration: underline overline;
}
.decoracion-texto-underline-line-through {
text-decoration: underline line-through;
}
.decoracion-texto-heredar {
text-decoration: inherit;
}
.decoracion-texto-inicial {
text-decoration: initial;
}
.decoracion-texto-color {
text-decoration-color: blue;
}
.decoracion-texto-style {
text-decoration-style: wavy;
}
</style>
</head>
<body>
<h1>Ejemplo de Decoración de Texto</h1>
<p class="decoracion-texto-none">Este es un párrafo de texto sin decoración.</p>
<p class="decoracion-texto-underline">Este es un párrafo de texto con subrayado.</p>
<p class="decoracion-texto-overline">Este es un párrafo de texto con línea superior.</p>
<p class="decoracion-texto-line-through">Este es un párrafo de texto con línea a través.</p>
<p class="decoracion-texto-underline-overline">Este es un párrafo de texto con subrayado y línea superior.</p>
<p class="decoracion-texto-underline-line-through">Este es un párrafo de texto con subrayado y línea a través.</p>
<p class="decoracion-texto-heredar">Este es un párrafo de texto que hereda la decoración de su elemento padre.</p>
<p class="decoracion-texto-inicial">Este es un párrafo de texto con decoración inicial.</p>
<p class="decoracion-texto-color">Este es un párrafo de texto con color de decoración azul.</p>
<p class="decoracion-texto-style">Este es un párrafo de texto con estilo de decoración ondulado.</p>
</body>
</html>
En este ejemplo, hemos definido diferentes clases CSS para cada propiedad de text-decoration y sus combinaciones. Luego, aplicamos estas clases a varios párrafos de texto en la página para mostrar cómo afectan la decoración del texto. Puedes copiar y pegar este código en tu página web y ajustar los valores de las propiedades según tus preferencias de diseño.
El ejemplo 21 muestra la página resultante.
Volver a text-decoration.
Comentarios
Publicar un comentario