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 sert à ajouter ou à supprimer des décorations au texte d’un élément HTML. Cette propriété vous permet de souligner le texte, de le surligner au-dessus ou de le barrer, afin de mettre certains éléments en évidence ou d’indiquer des états spécifiques.

Les valeurs courantes de text-decoration comprennent :

none : Supprime toute décoration du texte. C’est 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é). Cette mise en forme est couramment utilisée pour indiquer que le texte a été supprimé, retiré ou n’est plus valide.

Par exemple :

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

Défi

Facile

Un document HTML contenant un paragraphe (<p>) qui comporte un élément d’ancrage (<a>), ainsi qu’une division (<div>), vous est fourni. Votre tâche consiste à utiliser la propriété text-decoration pour mettre en forme 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 pour supprimer le soulignement par défaut.
Ajoutez un attribut class ayant pour valeur "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 ayant pour valeur "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>