Propriété CSS text-decoration
La propriété text-decoration définit la décoration du texte.
En CSS3, c'est une raccourcie pour les propriétés suivantes:
Si la valeur de l'une de ses propriétés est absente, la valeur par défaut sera définie automatiquement. La text-decoration-line est requise.
En spécification CSS1, text-decoration n'était pas une raccourcie et avait les valeur suivantes:
- none
- underline
- overline
- line-through
- blink
Valeur initiale | none currentColor solid |
Appliquée à | Tous les éléments. Elle est aussi appliquée à ::first-letter et ::first-line. |
Héritée | Non. |
Animable | Non. |
Version | CSS1, CSS3 |
Syntaxe DOM | object.style.textDecoration = "dashed"; |
Syntaxe
text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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>Exemple de la propriété text-decoration</h2>
<p class="a">Lorem Ipsum est simplement du faux texte...</p>
<p class="b">Lorem Ipsum est simplement du faux texte...</p>
<p class="c">Lorem Ipsum est simplement du faux texte...</p>
<p class="d">Lorem Ipsum est simplement du faux texte...</p>
</body>
</html>
Un autre exemple dans lequel la couleur du texte est spécifiée:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
p {
text-decoration: underline;
-webkit-text-decoration-color: #1c87c9; /* Safari */
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Exemple de la propriété text-decoration</h2>
<p>Lorem Ipsum est simplement du faux texte...</p>
</body>
</html>
Dans l'exemple donné, l'extension -webkit- est utilisée pour Safari.
Un exemple dans lequel le style du texte est spécifié:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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>Exemple de la propriété text-decoration</h2>
<div class="t1">Lorem ipsum est simplement du faux texte...</div>
<br>
<div class="t2">Lorem ipsum est simplement du faux texte...</div>
<br>
<div class="t3">Lorem ipsum est simplement du faux texte...</div>
<br>
<div class="t4">Lorem ipsum est simplement du faux texte...</div>
</body>
</html>
Valeurs
Valeur | Description |
---|---|
text-decoration-line | Spécifie le type de la 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 | Fait utiliser la valeur initiale. |
inherit | Hérite la propriété de son élément parent. |
Support de Navigateurs
1.0+ | 12.0+ | 1.0+ | 1.0+ | 3.5+ |
Pratiquez vos connaissances
Quelle propriété CSS est utilisée pour contrôler l'apparence du texte sous-ligné, biffé et surligné?
Correcte!
Incorrecte!