Styles CSS pour les liens

Un lien (l'élément HTML <a>) est l'un des éléments les plus cliqués sur n'importe quelle page, et son style compte autant pour l'apparence que pour la facilité d'utilisation. Dans ce chapitre, nous allons expliquer comment styliser les liens avec CSS pour les rendre clairs, accessibles et visuellement attrayants.

Les états des liens (pseudo-classes)

CSS expose un lien à travers cinq pseudo-classes, chacune correspondant au lien dans un état particulier :

a:link — un lien normal, non visité
a:visited — un lien que l'utilisateur a déjà visité
a:hover — un lien sur lequel la souris est positionnée
a:active — un lien au moment où il est cliqué
a:focus — un lien qui a reçu le focus du clavier (par exemple, via la touche Tab)

Vous pouvez cibler chacun d'eux individuellement, mais lorsque vous stylisez plusieurs états à la fois, l'ordre est important. Étant donné que :hover, :active et :visited ont tous la même spécificité, une règle ultérieure remplace une règle antérieure. L'ordre conventionnel et fonctionnel est LVHA — :link, :visited, :hover, :active :

a:link    { color: #1c87c9; }  /* normal   */
a:visited { color: #8e44ad; }  /* visited  */
a:hover   { color: #f4511e; }  /* mouse over */
a:active  { color: #c0392b; }  /* clicked  */

Si vous placez :hover avant :visited, la couleur de survol n'apparaîtra jamais sur les liens visités. Un moyen mnémotechnique pratique est « LoVe HAte ». Ajoutez :focus (généralement aux côtés de :hover) afin que les utilisateurs au clavier bénéficient du même retour visuel que les utilisateurs à la souris — l'oublier est une erreur d'accessibilité courante.

Nous allons couvrir les trois propriétés les plus souvent utilisées pour styliser les liens :

Décoration du texte

Par défaut, un navigateur trace un soulignement sous chaque lien. Pour le modifier ou le supprimer, utilisez la propriété text-decoration. Définir text-decoration: none supprime le soulignement ; le rétablir à underline sur :hover est un schéma populaire qui garde la page soignée tout en signalant la possibilité de clic lors de l'interaction.

Un mot de mise en garde : supprimer entièrement le soulignement peut rendre les liens difficiles à repérer, notamment pour les utilisateurs qui ne perçoivent pas bien les couleurs. Si vous le supprimez, faites ressortir les liens d'une autre façon — avec une couleur distincte, un font-weight, ou en rétablissant le soulignement au survol et au focus.

Exemple d'utilisation de la propriété text-decoration pour styliser un lien :

Exemples CSS de text-decoration pour les liens

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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 href="#"> This is some link.</a>
  </body>
</html>

Essayez vous-même »

Expliquons la signification de notre code.

On voit ici que le lien dans son premier et son deuxième état sera sans soulignement. Le lien est souligné lorsque l'utilisateur passe la souris dessus ou clique dessus.

Vous pouvez le vérifier dans votre navigateur en utilisant vos éditeurs ou notre éditeur en ligne.

Ces styles peuvent être écrits dans la section <head> ou dans un fichier CSS que vous utiliserez pour votre page web.

Couleur

Nous utilisons la propriété color pour définir la couleur d'un lien.

Par exemple, si nous voulons que notre lien soit noir par défaut et #1c87c9 dans son troisième état (a:hover), nous devons écrire ce qui suit :

Exemple d'utilisation de la propriété color pour styliser un lien :

Exemples CSS de color pour les liens

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        color: #000000;
      }
      a:visited {
        color: #000000;
      }
      a:hover {
        color: #1c87c9;
      }
      a:active {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Essayez vous-même »

Résultat

Couleur d'arrière-plan

Que faire si nous voulons que notre lien ait un arrière-plan ?

Il suffit d'appliquer la propriété background-color.

Par exemple, notre lien aura un arrière-plan gris, et au survol, il passera à #1c87c9.

Lorsque les premier (a:link) et deuxième (a:visited) états ont la même couleur d'arrière-plan, on peut simplement utiliser a.

Exemple d'utilisation de la propriété background-color pour styliser un lien :

Exemples CSS de background-color pour les liens

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        background-color: #555555;
      }
      a:hover {
        background-color: #1c87c9;
      }
      a:active {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Essayez vous-même »

Vous pouvez choisir votre couleur préférée à l'aide du Sélecteur de couleurs.

Tout assembler

Dans les projets réels, vous stylisez rarement une seule propriété. L'exemple ci-dessous combine la couleur, le schéma de soulignement au survol, un peu de padding pour que l'arrière-plan puisse respirer, et une règle :focus qui reprend :hover afin que les utilisateurs au clavier bénéficient d'un retour visuel :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link,
      a:visited {
        color: #1c87c9;
        text-decoration: none;
        padding: 2px 4px;
        border-radius: 4px;
      }
      a:hover,
      a:focus {
        color: #ffffff;
        background-color: #1c87c9;
        text-decoration: underline;
      }
      a:active {
        color: #ffffff;
        background-color: #14679b;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Remarquez comment le regroupement de a:link, a:visited avec une virgule applique la même valeur par défaut aux deux états, et comment l'association de a:hover, a:focus maintient une expérience identique pour les utilisateurs à la souris et au clavier.

Conseils d'accessibilité

Ne vous fiez jamais à la couleur seule. Les utilisateurs daltoniens peuvent ne pas distinguer un lien bleu du texte noir. Conservez un soulignement, ou associez la couleur à un autre indice visuel.
Stylisez toujours :focus. Si vous supprimez le contour de focus par défaut, remplacez-le par votre propre style visible — sinon, les utilisateurs au clavier ne savent pas où ils se trouvent. Consultez la propriété outline.
Maintenez un contraste suffisant. Le texte des liens doit se démarquer clairement de son arrière-plan et du texte environnant.

Résumé

Un lien possède cinq états, chacun avec sa propre pseudo-classe : :link, :visited, :hover, :active et :focus.
Lors de la stylisation de plusieurs états, suivez l'ordre LVHA pour éviter que des règles ultérieures ne remplacent accidentellement des règles antérieures.
text-decoration contrôle le soulignement, color définit la couleur du texte, et background-color ajoute un arrière-plan.
Stylisez toujours :focus et évitez de signaler les liens par la couleur seule pour les rendre accessibles.

Pratique

Quelles propriétés sont utilisées en CSS pour modifier l'apparence des liens ?