Tuto : Les différentes façons de souligner un lien

Dans ce tutoriel nous allons voir quelques méthode pour souligner un lien grâce au CSS.

En effet, il existe plusieurs façons de souligner un lien, en solide, en pointillés...

Tout d'abord pour créer un lien il faut créer 2 ou 3 lignes de configuration :

• a:
• a:hover
• (a:visited)

Je mets le dernier entre parenthèses car il n'est pas obligatoire, ce sont les paramètres du lien une fois qu'il a été visité.

Tout d'abord, occupons nous du lien tel qu'il va être affiché d'origine :

 a {text-decoration:none; color:#48b2e9; font-size:100%;}
 
 

On va décomposer tout ça :

a : signifie que c'est un lien,

text-decoration : cela permet de définir la décoration d'un texte, à savoir :

• underline : souligner le texte,
• blink : rendre le texte clignotant,
• overline : surligner le texte,
• line-through : barrer le texte,
• none : aucune décoration,

color : cela permet de donner de la couleur à un texte,

font-size : définit la taille du texte.


Voyons ensuite le lien survolé :

 a:hover {text-decoration:none; border-bottom:1px dotted; color:#addcf5;}
 
 

a:hover : cela signifie le lien est survolé,

border-bottom : c'est une autre façon de souligner un lien, ci-dessous quelques exemples :

• 1px dotted : texte souligné en pointillé,
• 1px solid : texte souligné de façon standard,
• 1px dotted red : texte souligné en pointillés rouges,
• 1 px solid blue : texte souligné de façon standard bleu,

Vous pouvez pour ce style, définir l'épaisseur, la largeur ou le style de soulignage.

Pour le style de lien "a:visited" répétez la même opération que précédemment. Je rappelle que "a:visited" définit le lien visité.