text-decoration-style - Propriété CSS
Résumé des caractéristiques de la propriété text-decoration-style
solid
| dashed
| dotted
| double
| wavy
solid
text-decoration-style
passe d'une valeur à l'autre sans transition.Description.
La propriété text-decoration-style
définit le type de trait à utiliser pour la décoration du texte :
trait plein, pointillé, etc.
Rappel : la décoration est un trait, placé au dessous du texte (souligné), au dessus (surligné) ou utilisé pour rayer le texte.
Pour des explications plus détaillées et des exemples sur les possibilités des décorations, reportez-vous à la propriété résumée text-decoration
.
Particularité concernant l'héritage.
L'héritage, ou plutôt le mode de propagation de text-decoration-style
est très particulier : les décorations définies sur le parent ne sont pas forcément transmises
aux éléments enfants : cela dépend du type d'affichage de ces derniers :
Les décorations sont transmises pour les types d'affichage non composés : block
, inline
, grid
, etc.
Les décorations ne sont pas transmises aux descendants dont le type d'affichage est composé : inline-block
, inline-table
, etc.
De plus, lorsque la valeur de text-decoration-style
est transmise, l'élément enfant ne peut pas la modifier : c'est un peu comme un héritage forcé.
L'exemple ci-dessous illustre ce mécanisme. L'élément parent a reçu comme décoration un souligné en double trait.
Le premier enfant hérite de cette décoration. Jusque là tout est assez normal.
Le deuxième enfant redéfinit une nouvelle valeur pour text-decoration-style
, comme vous pourrez le voir en affichant les styles CSS. Pourtant on constate
que sa décoration est toujours un trait double.
Enfin l'enfant numéro 3 ajoute une nouvelle décoration au dessus du texte (overline
), et cette fois-ci, le style demandé est pris en compte
pour cette nouvelle décoration.
Tout se passe comme s'il n'était pas possible de modifier une décoration une fois qu'elle a été définie sur un élément parent. Pour d'autres exemples de cette particularité, reportez-vous à la page Le mécanisme de propagation des décorations.
Syntaxes pour text-decoration-style
.
text-decoration-style:
;
- text-decoration-style: solid;
Le souligné, le surligné ou la rayure sont représentés par un trait plein. C'est la valeur par défaut.
Souligné Surligné Rayé - text-decoration-style: double;
Le souligné et autres décorations sont représentés par un trait double.
Souligné Surligné Rayé - text-decoration-style: dotted;
Les décorations sont représentées par un trait pointillé.
Souligné Surligné Rayé - text-decoration-style: dashed;
Les traits de décorations sont représentés par une succession de tirets.
Souligné Surligné Rayé - text-decoration-style: wavy;
Les décorations sont représentées par un trait ondulé.
Souligné Surligné Rayé - text-decoration-style:
initial
; text-decoration-style:inherit
; text-decoration-style:revert
; text-decoration-style:revert-layer
; text-decoration-style:unset
;La valeur initiale est :
.solid
Animation de la propriété text-decoration-style
.
L'animation ci-dessous explore toutes les valeurs pour text-decoration-style
.
text-decoration-style
Simulateur.
Prise en charge par les navigateurs (compatibilité).
Tous les navigateurs actuels reconnaissent et traitent correctement la propriété text-decoration-style
.
text-decoration-style
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que text-decoration-style
.
Les spécifications CSS éditées par le W3C sont organisées en modules. text-decoration-style
fait partie du Module CSS - Décoration du texte (CSS Text Decoration Module). Les définitions suivantes sont également décrites dans ce même module.