Liens CSS

Dans ce chapitre, nous allons expliquer comment donner des styles aux liens, comment les rendre plus beaux.

Le lien a ces quatre états:

  • a:link - un lien normal, non visité
  • a:visited - un lien que l'utilisateur a déjà visité
  • a:hover - un lien en survol
  • a:active - un lien au moment il est cliqué

Nous allons parler de ces propriétés:

Décoration de texte

Comme vous vous le souvenez, lorsqu'on crée un lien, par défaut il est souligné. Lorsqu'on veut le supprimer, on doit utiliser la propriété text-decoration.

Voyons un exemple.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      a:link {
        text-decoration: none;
      }
      a:visited {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      a:active {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <a> Quelque lien.</a>
  </body>
</html>

Expliquons la signification de notre code.

Ici vous pouvez voir que notre lien dans son premier et deuxième état sera sans soulignement. Le lien est souligné lorsqu'il est en survol ou au moment il est cliqué.

Vous pouvez vérifier dans notre navigateur avec votre éditeurs ou avec notre éditeur en ligne cliquez ici et allez sur la page de l'éditeur.

Ces styles peuvent être écrits dans la séction <head> ou dans un fichier css que vous voulez utiliser pour la page web.

Couleur

La propriété color est utilisée pour la couleur du lien.

Par exemple, lorsqu'on veut que notre lien soit noir et soit #1c87c9 dans son troisième état (a:hover) on doit écrire le suivant:

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      a:link {
        color: #000000;
      }
      a:visited {
        color: #000000;
      }
      a:hover {
        color: #1c87c9;
      }
      a:active {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a> C'est quelque lien.</a>
  </body>
</html>

Couleur de l'arrière-plan

Qu'on peut faire si on veut que le lien ait un arrière-plan?

On doit donner un style avec la propriété background-color.

Par exemple, notre lien sera avec un arrière-plan gris et en survol il sera #1c87c9.

Lorsque le premier (a:link) et le deuxième (a:visited) états ont la même couleur de l'arrière-plan, on peut écrire juste "a".

Voyons le code.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      a {
        background-color: #555555;
      }
      a:hover {
        background-color: #1c87c9;
      }
      a:active {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a> C'est un lien.</a>
  </body>
</html>

Vous pouvez choisir votre couleur préférée avec la Pipette de couleurs.




Trouvez-vous cela utile?

Articles Associées