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 à l'intérieur d'un élément HTML. Cette propriété vous permet de souligner, de surligner ou de barrer du texte, offrant ainsi une emphase visuelle ou indiquant des états spécifiques.

Les valeurs courantes pour text-decoration incluent :

none : Supprime toute décoration de 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é).

Par exemple :

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

Défi

Facile

On vous donne un document HTML avec un paragraphe (<p>) qui contient un élément d'ancrage (<a>), et 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 la propriété text-decoration sur none pour 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 ayant la classe underline. Définissez la propriété 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 ayant la classe strike. Définissez la propriété text-decoration sur line-through.

Aide-mémoire

La propriété text-decoration ajoute ou supprime des décorations au texte à l'intérieur des éléments HTML.

Valeurs courantes :

none : Supprime toute décoration de texte (par défaut)
underline : Ajoute un soulignement au texte
overline : Ajoute une ligne au-dessus du texte
line-through : Ajoute une ligne de barrage

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: 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>