Couleur des ancres, des liens et notion de pseudo classes
Exemples Ancres, Liens et comprendre les pseudo classes

Les pseudos classes en css permettent de définir l’apparence de certain élément contenu dans un classe.

1. link: Couleur des liens
2. Anchor: Gestion des ancres html…
3. pseudo-class: les Pseudo Classes

Gestion des la couleur d’un lien

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 intervient.

a:visited {color: #999999;}

La deuxième définie la couleur du lien si l’internaute a déja 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 plutot 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".

Vous pouvez définir des styles css 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;}

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 :

<a href="" class="column" >texte ici</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">
<a href="" title="">some link text</a>
</div>

D’autres propriétés peuvent etre ajouter en plus de la couleur des liens, j’ai juste un exemple simple.

D'autres proprietées sont disponibles sur ses liens : style sur le texte et une police de caratère et peuvent etre utilisées

Liens vers d’autres sujets sur le CSS : [Gestion des background en CSS] – [css button] –