Hoe definieer je de styling van hyperlinks?
Traditioneel worden hyperlinks op het internet gekenmerkt door hun blauwe kleur en de onderstreping. Maar hun weergave verschilt per website. Voor jouw website kun je eenvoudig zelf hun weergave bepalen in je stylesheet. Een klassiek voorbeeld:
a { color: green; text-decoration: none; }
a:hover { color: red; text-decoration: underline; }- « a » heeft betrekking op alle links op je webpagina, dat wil zeggen alle <a> tags, zonder enige uitzondering. In dit voorbeeld worden ze zonder verdere «aankleding» in het groen weegveven: dus zonder onderstreping.
- Links kennen meerdere « pseudo classes » (:hover, :visited, enz.). Zo bepaalt« a:hover » de weergave als de muis erover bewogen wordt. In het bovenstaande voorbeeld wordt de tekst van de link rood als de muis erover wordt bewogen.
Denk eraan dat in de CSS2 aanbevelingen wordt aangegeven dat de verschillende pseudo classes in de juiste volgorde moeten worden gedefinieerd, dus bijvoorbeeld a:hover na de andere.
De hyperlinks van SPIP
SPIP maakt een onderscheid tussen links binnen je site en externe links. Ze krijgen een verschillend class-attribuut waarmee je dus de keuze krijgt om ze op verschillende wijzes weer te geven:
- a.spip_in betreft de links binnen jouw site. Bijvoorbeeld:
De opmaakcode [->article1177] Maakt een interne link binnen deze site naar het artikel 1177 en geeft: Les feuilles de style de SPIP.
- a.spip_out betreft een externe link. Bijvoorbeeld:
De opmaakcode [uZine->http://www.uzine.net] toont een externe link als volgt: uZine.
- a.spip_url behandelt URL adressen als hyperlink. Bijvoorbeeld:
De opmaakcode [->http://www.uzine.net] gebruikt de URL als tekst voor de hyperlink met een link naar datzelfde adres: http://www.uzine.net
- a.spip_glossaire betreft de links naar een externe woordenlijst (zoals Wikipedia). Bijvoorbeeld:
De opmaakcode [?SPIP] resulteert in: SPIP.
Gooi de links niet door elkaar
Let erop dat meerdere regels in je stylesheet invloed kunnen hebben op dezelfde hyperlink. Heb je bijvoorbeeld aangegeven:
a { color: green; text-decoration: underline; }
a.spip_in { color: orange; }Interne links (met class spip_in) hebben een oranje kleur, maar krijgen ook de onderstreping die werd gedefinieerd voor <a>. Alle andere links (ook de door SPIP gegenereerde) zullen groen en onderstreept zijn.
Je ziet hier een van de fundamenten van stylesheets (CSS betekent Cascading Style Sheet): de volgorde waarin eigenschappen worden toegewezen is allesbepalend. Je zult dus van algemeen naar zeer specifiek moeten werken.
Een geactiveerde link onderscheidend weergeven
Je kunt in een lijst van links die van de huidige pagina onderscheidend weergeven. Om dit te doen gebruik je: .on. Je leest het in artikel: «Een onderscheidende weergave voor een titel in een lijst».