CSS > Les liens

Le style des liens (balise <a>) peut être personnalisé avec toutes les propriétés CSS disponibles, à l'instar de tous les textes.

CSS permet également de les personnaliser via des pseudo-classes qui définissent "l'état courant" d'un lien :

• a:link : lien non visité par l'internaute
• a:visited : lien déjà visité par l'internaute
• a:hover : l'internaute passe la sourie au dessus du lien
• a:active : l'internaute clique sur le client

Remarque importante : la déclaration des pseudo-classes doit se faire dans cet ordre : :link, :visited, :hover puis :active.

Exemple 1 : modifier le style d'un lien au survol de la sourie

  <style type="text/css">
  #link1 a:link { color: blue; }     /* lien non visité */
  #link1 a:visited { color: green; } /* lien visité */
  #link1 a:hover {
  	color: black;
 	background-color: yellow;
 	text-decoration: none;
 	font-size: 120%;
 	font-family: "Comic Sans MS" }   /* lien survolé par la sourie */
  #link1 a:active { color:red; }     /* lien cliqué */
  </style>

  <div id="link1">
  <a href="http://www.site1.fr/">www.site1.fr</a><br />
  <a href="http://www.site2.fr/">www.site2.fr</a><br />
  <a href="http://www.france.fr/">www.france.fr</a>
  </div>

Exemple 2 : des liens ressemblant à des boutons

  <style type="text/css">
  #link2 a:link, #link2 a:visited {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #1A2899;
    text-decoration: none;
    padding: 6px;
  }
  #link2 a:hover, #link2 a:active {
    background-color:#1A8899;
  }
  </style>

  <div id="link2">
  <a href="http://www.site1.fr/">www.site1.fr</a>
  <a href="http://www.site2.fr/">www.site2.fr</a>
  <a href="http://www.france.fr/">www.france.fr</a>
  </div>

Place à la pratique :