S'amuser avec les liens

Récemment un site a fait parler de lui dans le microcosme des standards web, il s'agit d'Adaptivepath.com. C'est le genre de site qui vous fait comprendre qu'il y a encore du chemin à faire pour maîtriser CSS. Un effet m'a particulièrement intéressé : il s'agit des liens en bas de la colonne de gauche sur la page d'accueil avec les photos (consulting et training). C'est tout con à faire mais ça englobe plusieurs concepts qu'il faut assimiler pour se servir des CSS : la notion de boîte de type en ligne ou de type block, les pseudos-classes et les sélecteurs descendants (qui alleluia sont supportés par IE 6).

Avant d'y aller je précise que tout cela se passe en mode strict. Maintenant on y va. Le code XHTML d'abord, simplifié par rapport à celui d'Adaptivepath.com :

<a href="#">
    <strong>C'est mode</strong><br />
    L'alchimiste passe du inline au block
</a>

Rien de compliqué, un élément a qui englobe du texte dont une partie est accentuée avec strong. Peut être que le br m'occasionnerait quelques claques de la part des puristes mais allons bon, il faut trouver un juste milieu dans tout ça, non ?

Maintenant stylons un peu notre affaire afin d'obtenir un truc vraiment sympa. Pour obtenir l'effet de changement de la couleur du fond sur une zone de taille définie, il faut passer l'élément a qui d'origine est un élément de type inline en élément de type block via les CSS et la propriété display. Mieux que des paroles, le code CSS :

body {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
    color: #88764E;
    font: x-small Verdana;
}

a:link, a:visited {
    display: block;
    background-color: #E3DDCB;
    color: #000000;
    text-decoration: none;
    padding: 6px 10px;
    border: 1px solid #F0EADD;
    width: 278px;
}

a:hover {
    background-color: #FFFFFF;
    border-color: #CCCCCC;
    color: #CC9900;
}

strong { color: #88764E; }

a:hover strong { color: #990000; }

Comme dans CSS il y a cascade, ce que je définis pour l'élément body s'applique à tout le reste tant que rien d'autre n'est définit. Donc ce qu'il y aura dans élément a (mon lien) sera de taille x-small et en Verdana pour mon élément a car je ne lui dis pas de se comporter autrement. Ensuite je demande à ce que mon élément a se comporte comme une boîte de type block d'une largeur de 278 pixels. Via la pseudo-classe :hover appliquée à mon lien je demande que la couleur de fond de mon lien change au survol de la souris.

Via les sélecteurs descendants, je demande à ce que mon élément strong change aussi de couleur au survol du lien : a:hover strong { color: #990000; }. Ce qui est fantastique c'est que sa couleur lors du survol n'est pas la même que celle définie dans a:hover grâce aux sélecteurs descendants.

Ouais bon... J'ai essayé d'être clair mais c'est pas toujours facile. Si vous avez compris quelque chose, vous pouvez m'envoyer vos dons.

L'exemple en ligne est ici.

Les ressources pour vous aider à comprendre tout ça sont dans la liste sur votre droite : les specs CSS 2 en français, OpenWeb et les autres.