text-decoration-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété text-decoration-style
définit le style appliqué sur les lignes visées par text-decoration-line
. Le style s'applique à toutes les lignes définies avec text-decoration-line
.
Note : Il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres.
Exemple interactif
Si la mise en forme appliquée possède une sémantique forte (par exemple barrer le texte pour indiquer qu'il a été supprimé), on recommande aux auteurs d'utiliser les balises HTML associées si elles existent (par exemple <del>
ou <s>
). Les navigateurs peuvent parfois désactiver la mise en forme et ces éléments permettent de conserver la sémantique du contenu quoi qu'il arrive.
La propriété raccourcie text-decoration
permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.
Syntaxe
/* Valeurs avec des mots-clés */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
/* Valeurs globales */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;
Valeurs
Définition formelle
Valeur initiale | solid |
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line . |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Syntaxe formelle
Exemples
CSS
.exemple {
-moz-text-decoration-line: underline;
-moz-text-decoration-style: wavy;
-moz-text-decoration-color: red;
-webkit-text-decoration-line: underline;
-webkit-text-decoration-style: wavy;
-webkit-text-decoration-color: red;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}
HTML
<p class="exemple">Et voilà le résultat.</p>
Résultat
Spécifications
Specification |
---|
CSS Text Decoration Module Level 3 # text-decoration-style-property |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- La propriété raccourcie
text-decoration
qui permet, entre autres, de paramétrertext-decoration-style
.