Back

Le style des liens en CSS

Le style des liens

  1. Objectif

    • Connaitre les les propriétés CSS qui s’appliquent à l’élément <a>.



  2. Introduction

    • Un lien élémentaire se crée en intégrant le texte que vous voulez transformer en lien dans un élément <a> et en lui affectant un attribut href (également connu comme étant une Hypertext Reference, ou target) contenant l’adresse web vers laquelle vous voulez que le lien pointe.
    • Le moyen le plus simple de mettre en forme un lien consiste à utiliser le sélecteur de type d’ancre. Par exemple, la règle suivante passe toutes les ancres en rouge :a {color: red;}
    • Il existe trois états d’un lien:
      1. Survol ( :hover): lorsque le curseur de la souris est placé en haut du lien sans cliquer
      2. Visited ( :visited): Apparition d’un lien sur lequel l’utilisateur a cliqué auparavant lorsque le curseur de la souris ne se trouve pas dessus
      3. Actif ( :active): lorsque le lien est en cours de clic. C’est peut-être très rapide, mais c’est quand le bouton de la souris a été enfoncé et avant que le clic ne soit terminé.
  3. L’utilisation des sélecteurs de pseudo-classes avec les liens

    • Les liens apparaissent par défaut est en bleu soulignées.
    • Pour supprimer le trait de soulignement, il suffit d’utiliser la propriété CSS text-decoration et pour changer la couleur on se sert de la propriété CSS de formatage de texte color :
    • a {
      text-decoration: none; /* supprimer les traits de soulignement */
      color: green; /* des liens en vert au lieu du bleu */
      }
        • On va utiliser la pseudo-classe :link avec l’élément <a> pour cibler uniquement les vrais liens (les ancres nommées avec la balise <a> ne sont pas concernées).
        • Exemple :

          a {
          text-decoration: none; /* supprimer les traits de soulignement */
          color: green; /* des liens en vert au lieu du bleu */
          }
        • Le sélecteur de pseudo-classe “a:link” cible uniquement les vrais liens, c’est-à-dire les éléments <a> dotés d’attributs href ;
      • a:hover
        • La pseudo-classe :hover associée à la balise <a>, permet de personnaliser l’aspect des liens lors du passage de la souris au-dessus du lien.
        • Exemple :

          a:hover { /* Quand le visiteur passe la souris au-dessus du lien*/ 
          text-decoration: underline; /* lien souligné au passage de la souris */
          color: red; /* au passage de la souris, le lien aura une couleur rouge */
          }
      • a:active
        • La pseudo-classe :active est utilisé pour sélectionner et mettre en forme le lien actif.
        • Un lien devient actif lorsque vous cliquez dessus.
        • La pseudo-classe :active permet de définir l’aspect des liens au moment du click.
        • La pseudo-classe :active peut être utilisé sur tous les éléments, pas seulement sur les liens.

      • :focus
        • La pseudo-classe :focus permet de spécifier l’apparence du lien lorsqu’il reçoit le focus.
        • Le focus dans le domaine informatique désigne l’attention d’un système d’exploitation ou d’un logiciel. On peut attribuer le focus à un élément soit par la souris ou la touche tabulation.
        • Exemple :

          a:focus {
          color: green;
          font-size: 1.2em;
          }
      • a:visited
        • La pseudo-classe :visited est strictement réservé aux liens, il sert à personnaliser l’aspect des liens qui ont été visités, pour que l’internaute ne se perd pas lors de sa navigation.
        • Par défaut les liens visités sont représentés par un violet qu’il convient de modifier :
        • a:visited { /* Quand le visiteur a déjà visité le lien */
          text-decoration: line-through; /* les liens visités seront barrés,
          je crois que c'est plus méchant  comme style */ 
          }
  4. Ordre d’application des styles

    • il est judicieux d’appliquer les styles de liens dans l’ordre suivant :
    • a:link, a:visited, a:hover, a:focus, a:active

      En anglais, une petite formule a été retenue pour se remémorer cet ordre : “Lord Vader Hates Furry Animals” (Darth Vader n’aime pas les bêtes à poil).

Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement