text-decoration-style
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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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
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
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. |
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 |
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
.