Au contraire de celui des autres éléments, le style d'un lien <a> change en fonction de son état. Lorsque le lien n'a jamais été cliqué, il a un style donné et lorsqu'il a déjà été cliqué, un autre style. Lorsque vous survolez un lien, il peut avoir un troisième style. En fait, il y a bon nombres de possibilités en matière de style pour les éléments <a>. Un lien peut avoir plusieurs états: non visité, visité ou survolé. Il serait dès lors bien de pouvoir indiquer des couleurs différentes selon que le lien a été visité ou non, voire même le surligner lorsque l'internaute le survole avec sa souris. Il existe un moyen de le faire en utilisant des pseudo-classes:
Une pseudo-classe se comporte comme une classe mais n'en est pas vraiment une. En effet, une pseudo-classe regroupe des éléments qui seront stylés de la même façon mais les noms a:link, a:visited et a:hover ne sont attribués à aucun élément. C'est en fait le navigateur qui ajoute tous les éléments <a> à la pseudo-class adéquate. Dès lors, si un lien a été visité, il ira dans la classe visited et si l'internaute survole un lien, il ira dans la classe hover.
Utilisons donc les pseudo-classes pour modifier l'aspect des liens du Bar.
Donnez du style au lien «itinéraire détaillé» de la page du Bar. Ce dernier doit être comme celui des cocktails, c'est-à-dire vert émeraude lorsqu'il n'a pas encore été visité et gris lorsqu'il l'a été. Nous ne voulons pas que les autres liens du Bar aient un style spécifique lorsqu'ils sont survolés, seul le lien cocktail doit l'avoir. Remplissez les lignes suivantes avec le style à donner au lien «itinéraire détaillé»:
|