Tutoriel CSS :La propriété text-decoration-style

Tutoriel CSS : text-decoration-style

La propriété text-decoration-style permet de définir le style de la décoration du texte, telle que la ligne sous le texte (text-decoration: underline) ou la ligne barrée à travers le texte (text-decoration: line-through).

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

La syntaxe générale de la propriété text-decoration-style est la suivante :

selector {
    text-decoration-style: value;
}

Remplacez selector par le sélecteur CSS approprié pour cibler les éléments que vous souhaitez modifier et value par l'une des valeurs possibles pour text-decoration-style.

Valeurs par défaut	0
Inherited:	oui
Animable :	oui En savoir plus sur l'animable
Version:	CSS1
Syntaxe JavaScript:	object.style.textIndent="50px"

Valeurs possibles de la propriété text-decoration-style

Les valeurs possibles pour text-decoration-style sont les suivantes :

solid : affiche une ligne solide.
double : affiche une double ligne.
dotted : affiche une ligne en pointillés.
dashed : affiche une ligne en tirets.
wavy : affiche une ligne ondulée.

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

Voici quelques exemples pratiques d'utilisation de la propriété text-decoration-style :

/* Sous-ligne solide */
a {
    text-decoration: underline;
    text-decoration-style: solid;
}

/* Ligne barrée en pointillés */
del {
    text-decoration: line-through;
    text-decoration-style: dotted;
}

Exemple d'utilisation de la propriété text-decoration-style CSS avec des boutons interactifs

Ce code illustre l'utilisation de la propriété CSS "text-decoration-style" pour gérer les styles de décoration du texte.

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété text-decoration-style css</title> 
<style>
.solid { 
  text-decoration-style: solid; 
}
.double { 
  text-decoration-style: double;
}
.dotted { 
  text-decoration-style: dotted; 
}
.dashed { 
  text-decoration-style: dashed; 
}
.wavy { 
  text-decoration-style: wavy; 
}
/*le style du texte, sans rapport avec la propriété css texte-décoration-style */

body { 
  font-family: sans-serif;
}
p {
  text-decoration: underline;
  font-size: 2em;
}
div {
  line-height: 1.5;
}
</style>
</head>
<body>
<h1>La propriété text-decoration-style css</h1>
<div class="style">
  line:
  <button>underline</button>
  <button>line-through</button>
  <button>overline</button>
</div>
<div class="color">
  color:
  <button>black</button>
  <button>red</button>
  <button>blue</button>
</div>

<p class="solid">text-decoration-style: solid;</p>
<p class="double">text-decoration-style: double;</p>
<p class="dotted">text-decoration-style: dotted;</p>
<p class="dashed">text-decoration-style: dashed;</p>
<p class="wavy">text-decoration-style: wavy;</p>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script id="rendered-js">
$(".style button").on("click", function () {
  $("p").css("text-decoration-line", $(this).text());
});

$(".color button").on("click", function () {
  $("p").css("text-decoration-color", $(this).text());
});
    </script>
</body>
</html>

Le code HTML présente un exemple d'utilisation de la propriété CSS text-decoration-style avec des boutons interactifs pour changer le style et la couleur de la décoration du texte. Le script JavaScript jQuery permet de réagir aux clics sur les boutons et d'appliquer les styles correspondants aux paragraphes sélectionnés.

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

Voici quelques astuces et conseils utiles pour utiliser la propriété text-decoration-style de manière efficace :

Utilisez text-decoration-style: none; si vous souhaitez supprimer toutes les décorations du texte.
Combinez text-decoration-style avec d'autres propriétés de décoration du texte telles que text-decoration-color et text-decoration-thickness pour personnaliser davantage l'apparence de la décoration.
Expérimentez avec différentes valeurs de text-decoration-style pour obtenir l'effet visuel souhaité.
Gardez à l'esprit que toutes les valeurs de text-decoration-style ne sont pas prises en charge par tous les navigateurs. Assurez-vous de tester votre code sur différents navigateurs pour vous assurer de la compatibilité.

En utilisant la propriété CSS text-decoration-style, vous pouvez facilement contrôler le style de la décoration du texte sur votre site web. Que vous souhaitiez ajouter une ligne sous le texte, barrer le texte ou même créer des effets plus créatifs, cette propriété vous offre la flexibilité nécessaire pour personnaliser l'apparence de votre contenu.

N'hésitez pas à expérimenter avec différentes combinaisons de valeurs et de propriétés connexes pour obtenir le résultat souhaité. Amusez-vous à explorer les possibilités offertes par la propriété text-decoration-style et laissez libre cours à votre créativité !