Le.modeste.lien.d’ancre.est.ni.plus.ni.moins.que.la.pierre.angulaire.du.Web..Il.s’agit.du.
mécanisme. qui. permet. aux. pages. web. de. se. connecter. les. unes. aux. autres. et. aux. personnes.d’explorer.et.de.parcourir.des.sites..La.mise.en.forme.par.défaut.des.liens.est.assez.
peu. flamboyante,. mais. avec. une. pincée. de. CSS,. il. est. possible. de. réaliser. d’incroyables.
transformations.
Au.cours.de.ce.chapitre,.vous.apprendrez.à :
•. ordonner.les.sélecteurs.de.liens.d’après.la.cascade ;.
•. créer.des.soulignements.stylés ;
•. mettre.en.forme.des.liens.externes.avec.des.sélecteurs.d’attribut ;
•. amener.des.liens.à.se.comporter.comme.des.boutons ;.
•. créer.des.styles.de.liens.visités ;
•. créer.des.info-bulles.CSS.
Mise en forme simple des liens
Le.moyen.le.plus.simple.de.mettre.en.forme.un.lien.consiste.à.utiliser.le.sélecteur.de.type.
d’ancre..Par.exemple,.la.règle.suivante.passe.toutes.les.ancres.en.rouge :.
a {color: red;}
Les.ancres.peuvent.cependant.agir.en.guise.de.références.internes.en.plus.de.liens.externes,.
si.bien.qu’il.n’est.pas.toujours.idéal.d’utiliser.un.sélecteur.de.type..Considérez.l’exemple.
suivant.. La. première. ancre. contient. un. identificateur. de. fragment.. Lorsque. l’utilisateur.
clique.dessus,.il.saute.directement.à.la.seconde.ancre.nommée :
...
Dans.ce.cas,.alors.qu’il.serait.préférable.que.seul.le.lien.soit.en.rouge,.le.titre.va.le.devenir.
aussi..Pour.éviter.cela,.les.CSS.possèdent.deux.sélecteurs.spéciaux.appelés.sélecteurs de
pseudo-classe de lien :.:link,.utilisé.pour.cibler.les.liens.qui.n’ont.pas.été.visités.et.:visited,.pour.cibler.les.liens.visités..Dans.cet.exemple,.tous.les.liens.non.visités.passent.en.bleu.
et.tous.les.liens.visités.en.vert :
a:link {color: blue;}
/* Passe les liens non visités en bleu */
a:visited {color: green;} /* Passe les liens visités en vert */
Deux.autres.sélecteurs.peuvent.être.utilisés.pour.la.mise.en.forme.des.liens :.les.sélecteurs.
de.pseudo-classe.dynamique.:hover.et.:active..Le.premier,.:hover,.est.utilisé.pour.cibler.
Mise en forme des liens
5
mécanisme. qui. permet. aux. pages. web. de. se. connecter. les. unes. aux. autres. et. aux. personnes.d’explorer.et.de.parcourir.des.sites..La.mise.en.forme.par.défaut.des.liens.est.assez.
peu. flamboyante,. mais. avec. une. pincée. de. CSS,. il. est. possible. de. réaliser. d’incroyables.
transformations.
Au.cours.de.ce.chapitre,.vous.apprendrez.à :
•. ordonner.les.sélecteurs.de.liens.d’après.la.cascade ;.
•. créer.des.soulignements.stylés ;
•. mettre.en.forme.des.liens.externes.avec.des.sélecteurs.d’attribut ;
•. amener.des.liens.à.se.comporter.comme.des.boutons ;.
•. créer.des.styles.de.liens.visités ;
•. créer.des.info-bulles.CSS.
Mise en forme simple des liens
Le.moyen.le.plus.simple.de.mettre.en.forme.un.lien.consiste.à.utiliser.le.sélecteur.de.type.
d’ancre..Par.exemple,.la.règle.suivante.passe.toutes.les.ancres.en.rouge :.
a {color: red;}
Les.ancres.peuvent.cependant.agir.en.guise.de.références.internes.en.plus.de.liens.externes,.
si.bien.qu’il.n’est.pas.toujours.idéal.d’utiliser.un.sélecteur.de.type..Considérez.l’exemple.
suivant.. La. première. ancre. contient. un. identificateur. de. fragment.. Lorsque. l’utilisateur.
clique.dessus,.il.saute.directement.à.la.seconde.ancre.nommée :
...
Bienvenue
Dans.ce.cas,.alors.qu’il.serait.préférable.que.seul.le.lien.soit.en.rouge,.le.titre.va.le.devenir.
aussi..Pour.éviter.cela,.les.CSS.possèdent.deux.sélecteurs.spéciaux.appelés.sélecteurs de
pseudo-classe de lien :.:link,.utilisé.pour.cibler.les.liens.qui.n’ont.pas.été.visités.et.:visited,.pour.cibler.les.liens.visités..Dans.cet.exemple,.tous.les.liens.non.visités.passent.en.bleu.
et.tous.les.liens.visités.en.vert :
a:link {color: blue;}
/* Passe les liens non visités en bleu */
a:visited {color: green;} /* Passe les liens visités en vert */
Deux.autres.sélecteurs.peuvent.être.utilisés.pour.la.mise.en.forme.des.liens :.les.sélecteurs.
de.pseudo-classe.dynamique.:hover.et.:active..Le.premier,.:hover,.est.utilisé.pour.cibler.
Mise en forme des liens
5