CSS : Ancres, Liens et Pseudo Classes css

Ancres, Liens et Pseudo Classes

Les pseudos classes en css permettent 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: La première ligne définie la couleur du lien si aucun événement intervient. La deuxième définie la couleur du lien si l'internaute a déja cliqué sur le lien. La troisème définie la couleur du lien en cas de survol avec la souris (ici en rouge) Le quatrième presque identique au précédent, couvre le cas ou l'internaute n'utilise pas de souris mais plutot une touche de son clavier. (il possible de naviguer sur un site avec la clavier si le webmaster le permet) 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".

Gestion des la couleur d'un ancre

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 memes que dans la rubrique "Gestion des la couleur d'un lien".

les Pseudo Classes

Vous pouvez définir des styles précis pour certaine partie de votre site seulement (au centre par exemple).
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;}

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

Il est possible de faire la meme 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 : 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 etre ajouter en plus de la couleur des liens, j'ai juste un exemple simple.

Gestion des background en CSS >>>