Tutoriel sur la propriété CSS text-decoration-color

La propriété text-decoration-color permet de spécifier la couleur de la ligne de décoration du texte. Cette ligne de décoration est généralement utilisée pour souligner, barrer ou mettre en évidence du texte.

Syntaxe générale de la propriété CSS text-decoration-color

text-decoration-color: valeur;

La valeur de la propriété text-decoration-color peut être spécifiée en utilisant les noms de couleur, les valeurs hexadécimales ou les valeurs RGB.

Valeurs par défaut	couleur par defaut
Inherited:	non
Animable :	oui En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.textDecorationColor="red"

Valeurs possibles de la propriété CSS text-decoration-color

Voici quelques valeurs possibles pour la propriété text-decoration-color:

une couleur: Peut être spécifiée en utilisant les noms de couleur, des valeurs hexadécimales ou des valeurs RGB.
color: spécifie la couleur du texte comme couleur de décoration
inherit: hérite la valeur de décoration du texte de l'élément parent

Exemples pratiques d'utilisation de la propriété CSS text-decoration-color

text-decoration-color: red;

Applique une ligne de décoration rouge au texte en utilisant le nom de la couleur.

text-decoration-color: #00ff00;

Applique une ligne de décoration verte au texte en utilisant la valeur hexadécimale.

text-decoration-color: rgb(255, 0, 0);

Applique une ligne de décoration rouge au texte en utilisant les valeurs RGB.

Utilisation de la propriété CSS text-decoration-color

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété text-decoration-color css</title> 
    <style>
        p, a {
            text-decoration: underline;
            -webkit-text-decoration-color: #E18728;
            text-decoration-color: #E18728; 
        }

        a:visited {
            -webkit-text-decoration-color: #94530D;
            text-decoration-color: #94530D; 
        }

        a:hover { 
            -webkit-text-decoration-color: #28B1E1;
            text-decoration-color: #28B1E1; 
        }

        a:active {
            -webkit-text-decoration-color: #006E94;
            text-decoration-color: #006E94; 
        }

        /* styling for Pen, unrelated to text-decoration-color */
        body {
            font-family: sans-serif; 
            font-size: 2.5em;
        }
    </style>
</head>
<body>
    <h1>La propriété CSS text-decoration-color</h1>
    <br>
    <p>Regardez mon trait de soulignement cool.</p>
    <p style="text-align: justify;">Mon lien est un lien avec un trait de soulignement.</p>
    <a href="#">Je suis un lien avec un soulignement cool. Survolez-moi !</a>
</body>
</html>

Ce code HTML met en évidence l'utilisation de la propriété CSS text-decoration-color pour personnaliser la couleur de la décoration de texte (soulignement). Les différentes couleurs sont appliquées aux liens en utilisant les sélecteurs CSS appropriés. N'hésitez pas à l'essayer dans votre navigateur pour voir le résultat !

Astuces et conseils d'utilisation de la propriété CSS text-decoration-color

- La propriété text-decoration-color n'a aucun effet si la propriété text-decoration n'est pas définie.

- La valeur par défaut de text-decoration-color est la valeur de la propriété color (couleur du texte).

- Pour appliquer une couleur de décoration différente à différents éléments de texte, vous pouvez utiliser des sélecteurs CSS spécifiques pour cibler chaque élément individuellement.

- Vous pouvez combiner la propriété text-decoration-color avec d'autres propriétés de décoration de texte telles que text-decoration-line (pour spécifier le type de décoration) et text-decoration-style (pour spécifier le style de décoration) afin de personnaliser davantage l'apparence du texte.

- La propriété text-decoration-color est bien prise en charge par la plupart des navigateurs modernes. Cependant, il est important de vérifier la compatibilité avec les navigateurs spécifiques que vous ciblez, en particulier si vous devez prendre en charge d'anciennes versions de navigateurs.

Conclusion

Dans ce tutoriel, vous avez appris à utiliser la propriété CSS text-decoration-color pour spécifier la couleur de la ligne de décoration du texte. Vous pouvez désormais personnaliser la couleur de décoration de votre texte pour le souligner, le barrer ou le mettre en évidence selon vos besoins.

Expérimentez avec différentes valeurs de couleur et explorez les possibilités offertes par les autres propriétés de décoration de texte pour créer des effets visuels intéressants sur vos pages web.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- -moz- indiquent la première version qui fonctionne avec un préfixe.

Explorateur
Verssion	57.0	79.0	36.0 6.0 -moz-	12.1 7.1 -webkit-	44.0

Liste des propriétés css

Tutoriel CSS : Utiliser text-decoration-color pour personnaliser la décoration du texte

Les propriétés CSS par ordre alphabétique