Décoration du texte

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 22 sur 76.

En CSS, la propriété text-decoration est utilisée pour ajouter ou supprimer des décorations au texte au sein d’un élément HTML. Cette propriété vous permet de souligner, de surligner ou de barrer du texte, afin de fournir une mise en évidence visuelle ou d’indiquer des états spécifiques.

Les valeurs courantes de text-decoration incluent :

none : Supprime toute décoration du texte. Il s’agit de la valeur par défaut.

underline : Ajoute un soulignement au texte.

overline : Ajoute une ligne au-dessus du texte.

line-through : Ajoute une ligne au milieu du texte (barré).

Par exemple :

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

Défi

Facile

Vous disposez d’un document HTML contenant un paragraphe (<p>) qui contient un élément d’ancrage (<a>), ainsi qu’une division (<div>). Votre tâche consiste à utiliser la propriété text-decoration pour appliquer un style à ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible tous les éléments <a>. Définissez text-decoration sur none afin de supprimer le soulignement par défaut.
Ajoutez un attribut class dont la valeur est "underline" à l’élément <p>.
Écrivez une règle CSS qui cible tous les éléments ayant la classe underline. Définissez text-decoration sur underline.
Ajoutez un attribut class dont la valeur est "strike" à l’élément <div>.
Écrivez une règle CSS qui cible tous les éléments ayant la classe strike. Définissez text-decoration sur line-through.

Essayez vous-même

<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>