CSS - Liens

Ce chapitre vous apprend à définir différentes propriétés d'un hyperlien à l'aide de CSS. Vous pouvez définir les propriétés suivantes d'un lien hypertexte -

Nous revisiterons les mêmes propriétés lorsque nous discuterons des pseudo-classes de CSS.

  • le :link signifie des hyperliens non visités.

  • le :visited signifie les hyperliens visités.

  • le :hover signifie un élément sur lequel le pointeur de la souris de l'utilisateur plane actuellement.

  • le :active signifie un élément sur lequel l'utilisateur clique actuellement.

Habituellement, toutes ces propriétés sont conservées dans la partie en-tête du document HTML.

Rappelez-vous qu'un: hover DOIT venir après un: lien et un: visité dans la définition CSS pour être efficace. De plus, a: active DOIT venir après un: hover dans la définition CSS comme suit -

<style type = "text/css">
   a:link {color: #000000}
   a:visited {color: #006600}
   a:hover {color: #FFCC00}
   a:active {color: #FF00CC}
</style>

Maintenant, nous allons voir comment utiliser ces propriétés pour donner différents effets aux hyperliens.

Définir la couleur des liens

L'exemple suivant montre comment définir la couleur du lien. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Il produira le lien noir suivant -

Définir la couleur des liens visités

L'exemple suivant montre comment définir la couleur des liens visités. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = ""> link</a> 
   </body>
</html>

Il produira le lien suivant. Une fois que vous aurez cliqué sur ce lien, il changera sa couleur en vert.

Changer la couleur des liens lorsque la souris est terminée

L'exemple suivant montre comment modifier la couleur des liens lorsque nous plaçons un pointeur de souris sur ce lien. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Il produira le lien suivant. Maintenant, vous amenez votre souris sur ce lien et vous verrez qu'il change sa couleur en jaune.

Changer la couleur des liens actifs

L'exemple suivant montre comment modifier la couleur des liens actifs. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

Il produira le lien suivant. Il changera sa couleur en rose lorsque l'utilisateur cliquera dessus.