Come definire l’aspetto dei link?
Sul web, i link ipertestuali sono tradizionalmente caratterizzati dal colore blu e dalla sottolineatura. Ma si sarà di certo notato che tale presentazione varia da un sito all’altro. In effetti è molto facile personalizzare l’aspetto dei propri link con gli stili CSS. Esempio molto classico:
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}- « a » riguarda tutti i link mostrati nelle proprie pagine web, ovvero tutti i tag HTML <a>, senza eccezione alcuna, sia che essi abbiano un attributo class o meno. Nell’esempio sopra riportato, i link verranno mostrati in verde, senza «decorazione»: non saranno sottolineati.
- Molteplici stati sono disponibili per i link con le « pseudo classi » (:hover, :visited, etc.). Quindi « a:hover » riguarda i link su cui « si passa sopra ». Nell’esempio sopra riportato i link diventano rossi e sottolineati quando il puntatore del mouse ci passa sopra.
Notare che la raccomandazione CSS 2 specifica che, al fine di essere presa in considerazione nella maniera più adeguata, la regola a:hover deve essere posta dopo le altre.
I link ipertestuali di SPIP
SPIP 1.2, SPIP 1.2.1 va oltre, permettendo di differenziare graficamente i diversi tipi di link, soprattutto i link interni al sito e i link verso altri siti. Ciò avviene usando alcune definizioni di stile specifiche che vi raccomandiamo di personalizzare secondo i vostri gusti:
- a.spip_in riguarda i link all’interno del proprio sito. Per esempio:
La scorciatoia [->article2771] genera un link interno, verso l’articolo numero 1177 del proprio sito, quindi: SPIP e i fogli di stile
- a.spip_out riguarda i link che puntano all’esterno del proprio sito. Per esempio:
La scorciatoia
[uZine->http://www.uzine.net]visualizza il link esterno seguente: uZine
- a.spip_url riguarda gli indirizzi URL trasformati in link ipertestuali. Per esempio:
La scorciatoia [->http://www.uzine.net] visualizza direttamente l’URL, con un link che punta a questo indirizzo, quindi: http://www.uzine.net
- a.spip_glossaire riguarda i link che puntano a un glossario esterno (nel caso l’enciclopedia online Wikipedia). Per esempio:
La scorciatoia [?SPIP] genera il link seguente: SPIP
Per non aggrovigliare i link
Si faccia attenzione al fatto che per un dato link intervengono più definizioni di stile. Per esempio, se è stato specificato:
a {
color: green;
text-decoration: underline;
}
a.spip_in {
color: orange;
}I link interni (appartenenti alla classe spip_in) sono di colore arancio ma ereditano anche la sottolineatura applicata a <a>. Gli altri link, compresi quelli che non sono generati da SPIP, verranno mostrati in verde sottolineato.
In questo esempio si nota una proprietà fondamentale dei fogli di stile: le regole grafiche si applicano nell’ordine che va dal più generico al più specifico. Ciò permette di specificare un comportamento generale per la maggior parte degli elementi e di modificare tale comportamento per un sottoinsieme più piccolo di elementi. Tale caratteristica è quel che rende i fogli di stile così potenti.
Evidenziare il link attivo
Dalla versione SPIP 1.8.2 è possibile mettere in evidenza, in un elenco di link, quel link che riguarda la pagina in cui ci si trova (vedi: Evidenziare un articolo in un elenco). La definizione di stile corrispondente è: a.on.