La propriété CSS: text-decoration

Décoration de texte avec CSS

La propriété CSS text-decoration permet d'ajouter des décorations à un texte. Ces décorations peuvent inclure des soulignements, des surlignements, des barrés et des clignotements.

Syntaxe de la propriété text-decoration en CSS

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

		selector {
			text-decoration: value;
		}

Le "selector" représente l'élément HTML auquel vous souhaitez appliquer la décoration de texte, et "value" correspond à l'une des valeurs possibles de la propriété text-decoration.

Valeurs par défaut	none
Inherited:	non
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.textDecoration="underline"

Valeurs possibles de la propriété text-decoration

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

none : Aucune décoration du texte.
underline : Souligne le texte.
overline : Ajoute une ligne au-dessus du texte.
line-through : Barre le texte en ajoutant une ligne au milieu.
blink : Fait clignoter le texte en alternant entre la présence et l'absence de décoration. Cette valeur n'est pas prise en charge par tous les navigateurs.
inherit : Indique que la propriété text-decoration doit être héritée de l'élément parent. Cette valeur peut ne pas fonctionner correctement dans certains navigateurs.

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

Voici quelques exemples pour illustrer l'utilisation de la propriété text-decoration :

	/* Exemple 1 : Souligner un lien */
	a {
		text-decoration: underline;
	}
	
	/* Exemple 2 : Barrer du texte pour indiquer une suppression */
	.del-text {
		text-decoration: line-through;
	}

Dans l'exemple 1, tous les liens seront soulignés. Dans l'exemple 2, la classe CSS ".del-text" sera utilisée pour barrer du texte et indiquer qu'il a été supprimé.

Cet exemple pratique vous permet de visualiser les différentes décorations de texte disponibles avec la propriété text-decoration en CSS. Vous pouvez également expérimenter avec d'autres valeurs et combinaisons pour obtenir les effets de décoration souhaités.

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple : la propriété text-decoration css</title> 
    <style>
.underline {
  text-decoration: underline;
}
.overline {
  text-decoration: overline;
}
.strikethrough {
  text-decoration: line-through;
}
.multiple {
  text-decoration: underline overline line-through;
}
.blink {
  text-decoration: blink;
}
.wavy {
  text-decoration: red underline overline wavy;
}


body {
  padding: 1em 2em;
}
    </style>
</head>
<body>
    <h1>La propriété CSS text-decoration</h1>
<p class="underline">text-decoration: underline;</p>
<p class="overline">text-decoration: overline;</p>
<p class="strikethrough">text-decoration: line-through;</p>
<p class="multiple">text-decoration: underline overline line-through;</p>
<p class="blink">text-decoration: blink;</p>
<p class="wavy">text-decoration: red underline overline wavy;</p>
</body>
</html>

Dans cet exemple pratique d'utilisation de la propriété text-decoration en CSS, nous avons créé un document HTML qui présente différentes décorations de texte appliquées à des paragraphes. Chaque paragraphe utilise une classe CSS correspondante pour appliquer une décoration spécifique. Voici un aperçu des différentes décorations utilisées :

Le premier paragraphe est souligné grâce à la classe "underline".
Le deuxième paragraphe a une ligne au-dessus grâce à la classe "overline".
Le troisième paragraphe a du texte barré grâce à la classe "strikethrough".
Le quatrième paragraphe combine le soulignement, la ligne au-dessus et le texte barré grâce à la classe "multiple".
Le cinquième paragraphe clignote grâce à la classe "blink". (Remarque : cette fonctionnalité peut ne pas être prise en charge par tous les navigateurs.)
Le dernier paragraphe a du texte souligné, une ligne au-dessus et un effet ondulé grâce à la classe "wavy".

Astuces et conseils d'utilisation

Voici quelques astuces et conseils pour utiliser au mieux la propriété text-decoration :

Utilisez la valeur "none" lorsque vous ne souhaitez aucune décoration du texte. Cela permet de revenir à l'apparence par défaut.
Expérimentez avec les différentes valeurs de la propriété text-decoration pour trouver l'effet visuel souhaité. Par exemple, vous pouvez combiner différentes décorations pour obtenir un style unique.
Gardez à l'esprit que la valeur "blink" n'est pas prise en charge par tous les navigateurs, donc utilisez-la avec précaution et testez votre site sur différents navigateurs pour vous assurer de la cohérence de l'apparence.
Lorsque vous utilisez la valeur "inherit", vérifiez la compatibilité avec les navigateurs cibles, car certains navigateurs peuvent ne pas prendre en charge correctement l'héritage de cette propriété.
Utilisez des sélecteurs CSS spécifiques pour appliquer des décorations de texte uniquement à certains éléments. Par exemple, vous pouvez cibler uniquement les liens dans une certaine partie de votre site en utilisant des sélecteurs CSS appropriés.
Combinez la propriété text-decoration avec d'autres propriétés CSS telles que la couleur du texte, la taille de police et les marges pour créer des effets visuels plus complexes.