Decoración del texto
Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 22 de 76.
En CSS, la propiedad text-decoration se utiliza para agregar o quitar decoraciones al texto dentro de un elemento HTML. Esta propiedad permite subrayar, superponer una línea o tachar texto, proporcionando énfasis visual o indicando estados específicos.
Los valores comunes para text-decoration incluyen:
none: Elimina cualquier decoración de texto. Este es el valor predeterminado.
underline: Añade un subrayado al texto.
overline: Añade una línea sobre el texto.
line-through: Añade una línea que atraviesa el centro del texto (tachado).
Por ejemplo:
a {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.strike {
text-decoration: line-through;
}Desafío
FácilSe te proporciona un documento HTML con un párrafo (<p>) que contiene un elemento ancla (<a>) y una división (<div>). Tu tarea es utilizar la propiedad text-decoration para aplicar estilos a estos elementos. Sigue los pasos a continuación:
- Escribe una regla CSS que seleccione todos los elementos
<a>. Establecetext-decorationennonepara eliminar el subrayado predeterminado. - Añade un atributo
classcon el valor "underline" al elemento<p>. - Escribe una regla CSS que seleccione todos los elementos con la clase
underline. Establecetext-decorationenunderline. - Añade un atributo
classcon el valor "strike" al elemento<div>. - Escribe una regla CSS que seleccione todos los elementos con la clase
strike. Establecetext-decorationenline-through.
Pruébalo tú mismo
<html>
<head>
<title>Text Decoration</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<p>This is a paragraph with a <a href="#">link</a>.</p>
<div>This is a division.</div>
</body>
</html>Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Estilos con CSS
4Fundamentos del texto
Color del textoFamilia tipográficaTamaño de fuentePeso de la fuenteAlineación del textoDecoración del textoDesafío de repaso n.º 1Desafío de repaso n.º 27Modelo de caja, parte 1
¿Qué es el modelo de caja?RellenoMárgenesBordesAncho y altoDesafío de repaso8Modelo de caja, parte 2
Dimensionamiento de cajasRadio del bordeDesbordamientoSombra de cajaDesafío de repaso3Selectores básicos
Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección9Flex Box
¿Qué es un Flex Box?Dirección de FlexJustificar el contenidoAlinear elementosEl centro perfectoDesafío de Flex Box12Fundamentos del diseño responsive
¿Qué es el diseño responsive?Etiqueta meta viewportDiseños fluidosUnidades del viewportFundamentos de las media queriesImágenes flexiblesPractica por tu cuenta: Playground de Web