Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
text-decoration
Baseline Widely available *
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
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. C'est unepropriété raccourcie qui permet de paramétrer simultanément les propriétés « détaillées » :text-decoration-line,text-decoration-color ettext-decoration-style.
Exemple interactif
text-decoration: underline;text-decoration: underline dotted;text-decoration: underline dotted red;text-decoration: green wavy underline;text-decoration: underline overline #ff3028;<section> <p> I'd far rather be <span>happy than right</span> any day. </p></section>p { font: 1.5em sans-serif;}Ces décorations se propagent sur les différents éléments enfants. 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 CSSp { text-decoration: underline; }, on aura tout le paragraphe souligné, même si on applique la règleem { text-decoration: none; }, cela n'aurait aucun impact. En revanche, ajouter la règleem { 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éstext-decoration-color,text-decoration-line ettext-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.
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
text-decoration-lineCette valeur indique le type de décoration utilisée.
text-decoration-colorCette valeur indique la couleur de la décoration utilisée.
text-decoration-styleCette valeur indique le style à utiliser pour la décoration.
Définition formelle
| 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 |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
text-decoration =
<'text-decoration-line'>||
<'text-decoration-thickness'>||
<'text-decoration-style'>||
<'text-decoration-color'>
<text-decoration-line> =
none|
[underline||overline||line-through||blink]|
spelling-error|
grammar-error
<text-decoration-thickness> =
auto|
from-font|
<length-percentage>
<text-decoration-style> =
solid|
double|
dotted|
dashed|
wavy
<text-decoration-color> =
<color>
<length-percentage> =
<length>|
<percentage>
Exemples
CSS
.under { text-decoration: underline red;}.over { text-decoration: wavy overline lime;}.line { text-decoration: line-through;}.plain { text-decoration: none;}.underover { text-decoration: dashed underline overline;}.blink { text-decoration: blink;}HTML
<p>Ce texte a une ligne en dessous.</p><p>Ce texte a une ligne au dessus.</p><p>Ce texte est barré d'une ligne.</p><p> Ce <a href="#">lien ne sera pas souligné</a>, comme les liens le sont normalement. Attention à ces décorations sur les ancres cars le soulignement sert souvent d'indication pour un hyperlien.</p><p>Ce texte a des lignes en dessous et au dessus.</p><p>Ce texte peut clignoter selon le navigateur utilisé.</p>Résultat
Spécifications
| Specification |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-property |
| Scalable Vector Graphics (SVG) 2 # TextDecorationProperties |
Compatibilité des navigateurs
Voir aussi
- L'attribut
list-stylequi contrôle la façon dont les éléments apparaissent dans les listes HTML<ol>et<ul>. - Les propriétés détaillées associées à cette propriété raccourcie :