La propriété text-decoration
est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte.
Ces décorations se propagent sur les différents éléments fils. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML <p>Ce texte a <em> des mots mis en avant</em> dedans.</p>
, et cette règle CSS p { text-decoration: underline; }
, on aura tout le paragraphe souligné, même si on applique la règle em { text-decoration: none; }
, cela n'aurait aucun impact. En revanche, ajouter la règle em { text-decoration: overline; }
entraînerait un cumul des décorations pour « des mots mis en avant ».
Note : La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés text-decoration-color
, text-decoration-line
et text-decoration-style
. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line . |
Héritée | non |
Média | visuel |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Animable | pour chaque propriété individuelle de la propriété raccourcie :
|
Ordre canonique | l'ordre d'apparition dans la grammaire formelle des valeurs |
Syntaxe
/* Valeurs avec mots-clés */ text-decoration: none; /* Aucune décoration */ text-decoration: underline red; /* On souligne en rouge */ text-decoration: underline wavy red; /* On souligne en rouge avec */ /* une ligne ondulée */ /* Valeurs globales */ text-decoration: inherit; text-decoration: initial; text-decoration: unset;
Valeurs
La propriété text-decoration
est une propriété raccourcie qui permet de combiner les valeurs des trois propriétés qui peuvent la composer : text-decoration-line
, text-decoration-color
et text-decoration-style
Syntaxe formelle
<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
Exemples
h1.under { text-decoration: underline; } h1.over { text-decoration: overline; } p.line { text-decoration: line-through; } p.blink { text-decoration: blink; } a.none { text-decoration: none; } p.underover { text-decoration: underline overline; }
Spécifications
Spécification | Statut | Commentaires |
---|---|---|
CSS Text Decoration Level 3 La définition de 'text-decoration' dans cette spécification. |
Candidat au statut de recommandation | Transformée comme une propriété raccourcie. Ajout du support pour la valeur de text-decoration-style . |
CSS Level 2 (Revision 1) La définition de 'text-decoration' dans cette spécification. |
Recommendation | Pas de changement significatif. |
CSS Level 1 La définition de 'text-decoration' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
Fonctionnalité | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support simple | 1.0 (1.7 ou moins) | 1.0 | 3.0 | 3.5 | 1.0 |
blink |
1.0 (1.7 ou moins) 23.0 (23.0)[1] |
(Oui)[1] | (Oui)[1] | 4.0 15.0[1] |
(Oui)[1] |
Propriété raccourcie | 6.0 (6.0)[3] 36.0 (36.0) |
Pas de support | Pas de support | Pas de support | 7.1[2] |
Fonctionnalité | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | 1.0 (1.0) | (Oui) | (Oui) | (Oui) | (Oui) |
blink |
1.0 (1.7 ou moins) 23.0 (23.0)[1] |
(Oui)[1] | (Oui)[1] | 4.0[1] | (Oui)[1] |
Propriété raccourcie | 6.0 (6.0)[3] 36.0 (36.0) |
? | ? | ? | 8[1] |
[1] La valeur blink
n'a aucun effet.
[2] Safari ne supporte pas text-decoration-style
.
[3] Cette version de Gecko possède une implémentation partielle.
Voir aussi
- L'attribut
list-style
qui contrôle la façon dont les éléments apparaissent dans les listes HTML<ol>
et<ul>
.