Stile dei link ipertestuali

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.

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

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.

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.

Autore Fausto Barbarito Publié le : Mis à jour : 26/10/12

Traductions : català, English, français, italiano, Nederlands