Comment définir l’apparence de ses liens ?
Sur le web, les liens hypertextes sont traditionnellement caractérisés par la couleur bleue et le soulignement. Mais vous avez certainement remarqué que cette présentation varie d’un site à l’autre. Vous pouvez très facilement personnaliser l’apparence de vos liens avec les styles CSS. Exemple très classique :
a { color: green; text-decoration: none; }
a:hover { color: red; text-decoration: underline; }
- « a » concerne tous les liens affichés sur votre page web, c’est-à-dire toutes les balises <a>, sans exception, qu’elles aient ou non un attribut class. Dans l’exemple ci-dessus, les liens s’afficheront en vert, sans « décoration » : ils ne sont pas soulignés.
- Plusieurs états sont disponibles pour les liens avec les « pseudo classes » (:hover, :visited, etc.). Ainsi « a:hover » concerne les liens « survolés ». Dans l’exemple ci-dessus, les liens deviennent rouges et soulignés lorsqu’ils sont survolés par le pointeur de la souris.
Notez que la recommandation CSS2 précise que, pour être pleinement prise en compte, la règle a:hover doit être placée après les autres.
Les liens hypertextes de SPIP
SPIP différencie graphiquement les différents types de liens, notamment les liens internes au site et les liens vers d’autres sites. Cela se fait avec quelques définitions de style spécifiques, que nous vous recommandons de personnaliser à votre goût :
- a.spip_in concerne les liens à l’intérieur de votre propre site. Par exemple :
Le raccourci [->article1177] génére un lien interne, vers l’article 1177 de votre site, ainsi : Les feuilles de style de SPIP
- a.spip_out concerne les liens vers l’extérieur de votre site. Par exemple :
Le raccourci [uZine->http://www.uzine.net] affiche le lien externe suivant : uZine
- a.spip_url traite les adresses URL transformées en lien hypertexte. Par exemple :
Le raccourci [->http://www.uzine.net] affiche directement l’URL, avec un lien hypertexte vers cette adresse, ainsi : http://www.uzine.net
- a.spip_glossaire concerne les liens vers le glossaire externe (en l’occurrence l’encyclopédie en ligne Wikipédia). Par exemple :
Le raccourci [?SPIP] génére le lien suivant : SPIP
Pour ne pas s’emmêler les liens
Notez bien que, pour un lien donné, plusieurs définitions de style interviennent. Par exemple, si vous avez précisé :
a { color: green; text-decoration: underline; }
a.spip_in { color: orange; }
Les liens internes (dotés de la classe spip_in) sont de couleur orange, mais héritent également du soulignement appliqué à <a>. Les autres liens, y compris ceux qui ne sont pas générés par SPIP, s’afficheront en vert souligné.
On note ici une propriété fondamentale des feuilles de style : les règles graphiques s’appliquent dans l’ordre allant de la plus générique à la plus spécifique. Cela permet de spécifier un comportement général pour la plupart des éléments, et de modifier ce comportement pour un plus petit sous-ensemble d’éléments. Cette caractéristique fait toute la puissance des feuilles de style.
Exposer le lien activé
On peut mettre en évidence, dans une liste de liens, celui concernant la page où l’on se trouve. Le style que l’on utilisera pour ce faire est : .on. Voir : « Exposer un article dans une liste ».