Modifier l'apparence des liens - XwZ

Dans ce tutorial je vais vous montrez comment on peut modifier l'apparence des liens hypertextes ce situant dans vos pages.
Pour cela vous aurez besoin soit de définir une zone CSS spécifique où seront les différents liens ou alors de rajouter un attribut class dans vos balises de lien.
Dans un premier temps nous allons voir comment utiliser des zones spécifiques CSS et ce que j'entends par là. Ensuite nous verrons comment utiliser l'attribut class dans la balise de lien.

I/ Utilisation des zones de liens

Bon tout dabord je vais vous expliquer ce que j'appelle une zone CSS. Une zone CSS n'est rien d'autre qu'un bloc html délimité par un calque, paragraphe ou même cellule de tableau (bien que je ne sois pas pour).
Maintenant je vais prendre un petit exemple de calques avec deux ou trois liens dans chaques calques.

<div id="calque1">
  <a href="dest1.html">lien1</a><br />
  <a href="dest2.html">lien2</a><br />
  <a href="dest3.html">lien3</a>
</div>
<div id="calque2">
  <a href="dest4.html">lien4</a><br />
  <a href="dest5.html">lien5</a><br />
  <a href="dest6.html">lien6</a>
</div>

Bon là il n'y a rien de spécial, vous aurez compris que je viens de faire deux calques calque1 et calque2 avec trois liens dans chacun d'eux.
Voici ce que donne le code html ci-dessus :
Les liens sans CSS

Maintenant nous allons voir le CSS.
Alors tout dabord voici la propriété qui permet de modifier l'apparence général du lien, sans tenir compte de la position de la sourie et de si vous avez visité ou non la page ciblait par le lien.

/* On modifie les liens du calque1 */
#calque1 a {
  color: #FF00FF; /* On modifie la couleur du lien */
}

/* On modifie les liens du calque2 */
#calque2 a {
  color: #00FF00; /* On modifie la couleur du lien */
}

Voila le résultat du code ci-dessus, avec la sourie sur le lien ou pas :
Les liens avec CSS

Bon maintenant voyons les pseudo-classes utilisable avec les liens :
-> :visited : Modifie l'apparence des liens ayant pour cible une page déjà visitée.

-> :hover : Modifie l'apparence du lien se situant sous la sourie.

-> :active : Modifie l'apparence du lien sur lequel vous cliquez.

Bon maintenant on a tous ce qu'il nous faut, voyons comment les utiliser (je ne trairais que les liens du calque 1 car c'est exactement la même procédure pour le calque2. Le calque 2 est là pour servir de témoins et prouver qu'il n'y a que les liens du calque séléctionné qui sont modifiés):

/* On modifie les liens du calque1 */
#calque1 a {
  color: #FF00FF; /* On modifie la couleur du lien */
}

#calque1 a:hover {
  color: #CECECE; /* On modifie la couleur du lien */
}

#calque1 a:active {
  color: #FFFFFF; /* On modifie la couleur du lien */
}

#calque1 a:visited {
  color: #000000; /* On modifie la couleur du lien */
}

/* On modifie les liens du calque2 */
#calque2 a {
  color: #00FF00; /* On modifie la couleur du lien */
}

Là j'ai mis les trois pseudo-classe, je vais vous mettre le résultat sous forme d'image :
L'activation de la pseudo-classe :hover :

L'activation de la pseudo-classe :active :

Et enfin la pseudo-classe :visited :

II/ Utilisation de l'attribut class
Maintenant que nous avons vu la méthode rapide, voyons comment faire pour modifier les liens un par un.
La première chose à faire est indiquer dans le titre de cette deuxième partie, est de mettre l'attribut class dans chaque lien que vous voulez modifier et de mettre le nom des différentes classes que vous définirez dans votre CSS.
Je vais prendre un exemple avec deux liens, un avec l'atribut class et l'autre sans l'attribut class.

Modifier l'apparence des liens - XwZ

Les commentaires :