CSS Débutant .com

Ancres, Liens et Pseudo Classes

Les pseudos classes permet de définir l'apparence de certain élément contenu dans un classe.

• link: Couleur des liens
• Anchor: Gestion des encres...
• pseudo-class: les Pseudo Classes

Voici comment choisir l'apparence de vos liens sur votre site :
a:link {color: #009900;} a:visited {color: #999999;} a:hover {color: #FF0000;} a:focus {color: #000000;} a:active {color: #009900;}

Maintenant, explication, un par un:
a:link {color: #009900;}

La première ligne définie la couleur du lien si aucun évènement d'intervient.
a:visited {color: #999999;}

La deuxième définie la couleur du lien si l'internaute a déjà cliqué sur le lien.
a:hover {color: #FF0000;}

La troisème définie la couleur du lien en cas de survol avec la souris (ici en rouge)
a:focus {color: #333333;}

Le quatrième presque identique au précédent, couvre le cas ou l'internaute n'utilise pas de souris mais plutôt une touche de son clavier. (il possible de naviguer sur un site avec la clavier si le webmaster le permet)
a:active {color: #009900;}

Le dernier définie la couleur si le lien est cliquée.

Attention

Vous devez déclarer "a:link and a:visited" avant de déclarer "a:hover" pour un bon fonctionment

Voir un exemple
Voir le code CSS

a:link {color: #009900;}
a:visited {color: #999999;}
a:hover {color: #333333;}
a:focus {color: #000000;}
a:active {color: #009900;}

Voir le code dans l'élément

Dans cet exemple, il n'y a rien à ajouter à vos balise de "lien".

Une ancre, c'est un lien mais qui pointe vers une partie de la page sur lequelle l'internaute ce trourve (concertement il n'y a pas de rechargment de la page lors du clique)

Les règles sont les mêmes que dans la rubrique "Gestion des la couleur d'un lien".

Vous pouvez définir des styles précis pour certaine partie de votre site seulement (au centre par exemple).

selector:pseudo-class {property: value}

Disons que le centre de votre site soit nommée "content" et que tous les liens soit selon ce code CSS

#content a:link {color: #009900;} #content a:visited {color: #999999;} #content a:hover {color: #333333;} #content a:focus {color: #333333;} #content a:active {color: #009900;}

Dans cet exemple, nous avons défini des liens de différentes couleurs en fonction de leurs positions sur la page.

Définisons un colonne :
#column a:link {color: #009900;} #column a:visited {color: #999999;} #column a:hover {color: #333333;} #column a:focus {color: #333333;} #column a:active {color: #009900;}

Biensûr, le nom "column" c'est vous qui le définissez (ici c'est colonne en Anglais)

Il est possible de faire la même action en déclarant une class plutot d'un ID
a.column:link {color: #009900;} a.column:visited {color: #999999;} a.column:hover {color: #333333;} a.column:focus {color: #333333;} a.column:active {color: #009900;}

A travers cet exemple, il faut ajouter une classe comme suivant :
<a <span class="bleutext">class="column"</span> href="" title="">some link text</a>

Une autre façon plus simple consite à écire le code suivant :
.column a:link {color: #009900;} .column a:visited {color: #999999;} .column a:hover {color: #333333;} .column a:focus {color: #333333;} .column a:active {color: #009900;}

Puis dans le code HTML :
<div class="column"><br><a href="" title="">some link text</a><br></div>

D'autres propriétées peuvent être ajouter en plus de la couleur des liens, j'ai juste un exemple simple. D'autres propriétées sont disponibles sur ses liens :Style sur le texte et Police de caratère et peuvent être utilisées