Propriété CSS text-decoration
La propriété text-decoration est utilisée pour définir la décoration du texte.
En CSS3, il s'agit d'un raccourci pour les propriétés suivantes :
Si la valeur de l'une de ces propriétés est absente, la valeur par défaut sera automatiquement définie. Notez que text-decoration-line n'est pas obligatoire ; s'il est omis, il vaut par défaut none.
Dans la spécification CSS1, text-decoration n'était pas un raccourci et prenait les valeurs suivantes :
- none
- underline
- overline
- line-through
- blink
| Valeur initiale | none currentColor solid |
|---|---|
| S'applique à | Tous les éléments. Il s'applique également à ::first-letter et ::first-line. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS1, CSS3 |
| Syntaxe DOM | object.style.textDecoration = "dashed"; |
Syntaxe
Syntaxe de la propriété CSS text-decoration
text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;Notez que plusieurs valeurs de ligne peuvent être combinées dans la syntaxe raccourcie, par ex. underline overline.
Exemple de la propriété text-decoration :
Exemple de la propriété CSS text-decoration avec les valeurs overline, line-through, underline et overline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
text-decoration: overline;
}
.b {
text-decoration: line-through;
}
.c {
text-decoration: underline;
}
.d {
text-decoration: underline overline;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
<p class="d">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Résultat
Exemple de la propriété text-decoration avec une couleur spécifiée :
Exemple de la propriété CSS text-decoration avec la propriété text-decoration-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration: underline;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>INFO
Le préfixe -webkit- est omis ici car les navigateurs modernes prennent entièrement en charge la propriété standard.
Exemple de la propriété text-decoration avec un style spécifié :
Exemple de la propriété CSS text-decoration avec les propriétés text-decoration-line et text-decoration-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: underline;
}
div.t1 {
text-decoration-style: dotted;
}
div.t2 {
text-decoration-style: wavy;
}
div.t3 {
text-decoration-style: solid;
}
div.t4 {
text-decoration-line: overline underline;
text-decoration-style: double;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<div class="t1">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t2">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t3">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t4">Lorem ipsum is simply dummy text...</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| text-decoration-line | Spécifie le type de décoration du texte. |
| text-decoration-color | Spécifie la couleur de la décoration du texte. |
| text-decoration-style | Spécifie le style de la décoration du texte. |
| initial | Définit la propriété sur sa valeur par défaut. |
| inherit | Hérite la propriété de l'élément parent. |
Pratique
Quelle propriété CSS modifie la présentation du texte en ligne en ajoutant des effets comme des soulignements ou des barrés ?