Tout tout tout... Vous saurez tout sur les barres de soulignement ! Bon, d'accord, vous avez reconnu la musique au moins ? En tout cas, les barres de soulignement ne se limitent pas à souligner nos textes de temps en temps, il s'agit d'un véritable outil de stylisation nous permettant d'ajouter des barres au-dessous, mais aussi au-dessus, sous forme de vague, de pointillés, de tirets... Vous l'aurez compris, nous allons voir tout ceci dans cet article.
La propriété aux multiples visages
La propriété text-decoration est la propriété qui nous permet jusqu'à maintenant de souligner le texte. Vous savez, avec la valeur underline ? Bon. Mais ce n'est pas vraiment la seule valeur possible avec cette propriété, il y en a beaucoup d'autres. On parle d'ailleurs de propriété qui permet de décorer le text et non pas de le souligner.
Autre point important : text-decoration est une propriété raccourcie ! Vous avez peut-être l'habitude de l'utiliser, mais elle combine en fait :
text-decoration-line- Elle permet de définir la position des lignes (qui a dit qu'on ne pouvait que surligner ?) ;text-decoration-color- Celle-ci permet de modifier la couleur de la ligne ;text-decoration-style- Dans le but de définir le style de la ligne.
Text-decoration-line
La propriété text-decoration-line, comme nous venons de le voir, permet de définir la position des lignes. Et c'est peut-être la chose la plus importante que vous allez apprendre dans cet article (quoi que... À la fin, nous vous réservons une belle surprise).
Voici les valeurs possibles pour text-decoration-line :
none- Pour n'afficher aucune ligne de décoration ;underline- Pour afficher une barre de décoration au-dessous (pour souligner) ;overline- Pour afficher une barre de décoration au-dessus ;line-through- Pour afficher une barre de décoration au milieu (pour barrer).
Alors ? Qu'en pensez-vous ? Nous avons l'habitude des deux premières valeurs none et underline mais lorsqu'il s'agit de barrer un texte (line-through) ou de lui placer une ligne au-dessus (overline) c'est une autre paire de manches.
Et ce que vous ne saviez peut-être pas ? Nous pouvons combiner ces valeurs. Par exemple avec :
text-decoration-line: underline overline;Nous affichons une barre au-dessous (underline) mais également au-dessus (overline).
Plutôt sympa non ? Et bien entendu, vous pouvez continuer en précisant également line-through pour vous retrouver avec une barre au-dessus puis au milieu et au-dessous.
Text-decoration-color
Pour la propriété text-decoration-color nous allons pouvoir aller plus vite : elle permet juste de changer la couleur des lignes décorant le texte.
text-decoration-color: #613BDB;Va donc nous permettre de mettre les lignes en violet (la couleur de Believemy).
Text-decoration-style
Et pour terminer, la propriété text-decoration-style va nous permettre de changer le style de la ligne. Pour le moment, c'est un peu... linéaire.
Voici les valeurs que nous pouvons utiliser avec text-decoration-style :
double- Affiche des lignes en double ;solid- Affiche une ligne simple ;dotted- Affiche des pointillés ;dashed- Affiche des tirés ;wavy- Affiche des vagues.
Allez, un exemple pour la route et pour voir ce que donne wavy :
text-decoration-line: underline overline;
text-decoration-color: #613BDB;
text-decoration-style: wavy;
De toute évidence, nous avons du goût.
Text-decoration
Toutes ces propriétés sont très intéressantes lorsqu'elles sont utilisées ensemble, donnant naissance à des éléments très bien décorés avec un style assez original. Mais toutes ces propriétés sont longues à ajouter... Fort heureusement comme nous l'avions vu ensemble, nous pouvons utiliser text-decoration pour toutes les dominer d'un coup.
Le fonctionnement de la propriété text-decoration est représenté ici :
text-decoration: <text-decoration-line> <text-decoration-style> <text-decoration-color>Si nous souhaitons reproduire l'exemple précédent nous aurons donc :
text-decoration: underline overline wavy #613bdb;Vous savez maintenant tout sur text-decoration et les propriétés qu'elle utilise text-decoration-line / text-decoration-style / text-decoration-color. Si vous souhaitez en savoir plus sur le HTML et le CSS, nous avons une formation complète dédiée à ces deux langages de programmation. N'hésitez pas non plus à partager cet article à votre entourage sur vos réseaux-sociaux. Merci !
