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

Débuter avec les Ancres, liens en CSS

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

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

code CSS

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ées peuvent etre 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 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] -

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page https://www.cssdebutant.com/coder-en-css-anchors-lien-pseudo-classes.html Votes: 4.4 / 5 étoiles - 9 vote(s) et 10 commentaires