Décoration du texte

Fait partie de la section Styling with 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

Un document HTML vous est fourni avec un paragraph (<p>) qui contient un élément anchor (<a>), ainsi qu’une division (<div>). Votre tâche consiste à utiliser la propriété text-decoration pour styliser 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 avec la valeur "underline" à l’élément <p>.
Écrivez une règle CSS qui cible tous les éléments possédant la class underline. Définissez text-decoration sur underline.
Ajoutez un attribut class avec la valeur "strike" à l’élément <div>.
Écrivez une règle CSS qui cible tous les éléments possédant la class strike. Définissez text-decoration sur line-through.

REQUIRED OUTPUT FORMAT: [Votre contenu traduit ici]

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>