CSS Liens

Différents liens peuvent avoir différents styles.

Styles de liens

Les styles de liens peuvent utiliser n'importe quelles propriétés CSS (telles que color, font, background, etc.).

Certains liens peuvent avoir différents styles, selon l'état dans lequel ils se trouvent.

Les quatre états des liens sont :

  • a:link - liens normaux, non visités
  • a:visited - liens que l'utilisateur a visités
  • a:hover - lorsque la souris de l'utilisateur survole le lien
  • a:active - au moment où le lien est cliqué

Exemple

a:link {color:#000000;} /*Lien non visité*/ a:visited {color:#0080FF;} /*Lien visité*/ a:hover {color:#FF00FF;} /*Survol du lien*/ a:active {color:#0000FF;} /*Au clic de la souris*/

Essayez-le vous-même »

Lorsque vous définissez des styles pour plusieurs états de lien, il existe aussi des règles d'ordre :

  • a:hover doit venir après a:link et a:visited
  • a:active doit venir après a:hover

Styles de lien courants

D'après l'exemple ci-dessus de changement de couleur des liens, voyez dans quel état il se trouve.

Passons à d'autres façons courantes de styliser les liens :

Décoration du texte

La propriété text-decoration est principalement utilisée pour supprimer le soulignement des liens :

Exemple

a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}

Essayez-le vous-même »

Couleur d'arrière-plan

La propriété background-color spécifie la couleur d'arrière-plan des liens :

Exemple

a:link {background-color:#8CC6FF;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

Essayez-le vous-même »

Examples

Plus d’exemples

Ajouter des hyperliens avec des styles différents
Cet exemple montre comment ajouter d'autres styles aux hyperliens.

Avancé - Créer une boîte de lien
Cet exemple illustre un exemple plus avancé, où nous combinons plusieurs propriétés CSS pour l'afficher sous forme de boîte.

autres extensions