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 visées (il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres).
/* 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;
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.
| Valeur initiale | solid |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | non |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
Valeurs
solid double dotted dashed wavy- Un des mots-clés suivants :
solid- Dessine une ligne.
double- Dessine une double-ligne.
dotted- Dessiner une ligne avec des points.
dashed- Dessine une ligne avec des tirets.
wavy- Dessine une ligne ondulée.
Syntaxe formelle
solid | double | dotted | dashed | wavy
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
| Spécification | État | Commentaires |
|---|---|---|
| CSS Text Decoration Module Level 3 La définition de 'text-decoration-style' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. La propriété text-decoration n'était pas une propriété raccourcie auparavant. |