I links  Abbiamo visto come i CSS siano in grado di cambiare attributi al testo,come e con quale facilità sia possibile posizionare con estrema precisione oggetti grafici e testuali. Esiste però anche un'altra novità introdotta dai CSS e riguarda la gestione dei links.

La tanto odiata sottolineatura e la possibilità di cambiare colore o il tipo di font sono soltanto alcune cose che possono essere gestite dai CSS, e magari decidere di farlo proprio nel momento esatto in cui il cursore del mouse passa sopra al link stesso.

Prima di tutto vediamo come si adoperano perché differiscono leggermente da quanto appreso fino a questo momento, anche loro possono essere dichiarati in una pagina o in un foglio di stile esterno ma non direttamente in linea, questa la relativa sintassi:

<style type="text/css">
<!--

A:LINK    {text-decoration: none}
A:VISITED {text-decoration: none; Color: green}
A:HOVER   {Color: red}

-->
</style>

Dove A:LINK sono i link ancora da visitare o da cliccare, A:VISITED sono invece i links visitati o già cliccati mentre  A:HOVER si riferisce all'evento del mouse nel momento preciso in cui viene posizionato sopra il link.

Risultato: sono un link non sottolineato e di colore verde  Provate a passarci sopra col puntatore del mouse... non succede nulla?

Dimenticavo di dirvi che HOVER, quello che cambia colore quando siete sopra ad un link, non è riconosciuto da tutti i browsers è forse questa l'occasione buona per aggiornare il vostro alla sua ultima versione?

Non vi piace il colore rosso?

Sostituite red con qualsiasi altro nome valido di un colore, oppure allo stesso modo divertitevi a cambiare il colore dei link visitati e/o di quelli da visitare. I colori possono essere espressi anche con il relativo codice easadecimale preceduto dal simbolo # pound (cancelletto) vedi anche la sez. dedicata ai parametri.

Il rosso per esempio equivale a #ff0000, dove le sei cifre vanno viste come tre coppie ben distinte di valori esadecimali ed esprimono i colori nella formula RGB, (rosso - verde - blu) dove i valori ammessi sono rappresentati da 00 ~ ff in notazione esadecimale per ogni coppia di numeri. Per cui ff = 16 x 16 = 256 (max valore ottenibile), da qui: ff ff ff = 256 x 256 x 256 = 16,7 Mil di colori.

Avete capito bene; 16,7 Milioni di colori, tutti quelli che la vostra scheda video è in grado di visualizzare comprese le relative sfumature.

Anche per i links una volta capito il meccanismo si potranno combinare i vari attributi fino a creare degli effetti di notevole impatto, il tutto con estrema semplicità e senza ricorrere a programmazione avanzata.

Ecco un altro esempio:

<style type="text/css"> <!-- A:LINK {text-decoration: none; font-size: 10pt;} A:VISITED {text-decoration: none; Color: green; font-size: 10pt;} A:HOVER {Color: red; font-size: 12pt;} --> </style>

Risultato: sono un link non sottolineato e di colore verde  Se provate a passare sopra col puntatore del mouse, il font passerà dai 10 pt (punti) del link da visitare ai 12 pt del link HOVER e dal colore verde a quello rosso, in questo modo avrete dato vita ad una vera e propria animazione. Notate che tutto il testo viene spostato per fare posto al font di dimensioni maggiori. Cliccate su  questo esempio   tanto per avere le idee ancora più chiare.

E' anche possibile avere link di colore diverso con comportamenti diversi all'interno della stessa pagina web, è sufficiente fare uso delle classi diverse a seconda del link:

Esempio 1
esempio 2
esempio 3

In questo caso le classi per i link si creano in maniera leggermente diversa ma molto simile alle classi viste precedentemente:

<style type="text/css">
<!--

A.xxx:link     { color:#cc66ff; text-decoration:none; }
A.xxx:visited  { color:#cc66ff; text-decoration:none; }
A.xxx:hover    { color:#ffcc00; text-decoration:none; font-size : 14pt;}

-->
</style>

Dove xxx è il nome della classe ed il suo richiamo per il link seguirà questa sintassi:

<a class="xxx" href="vostro link">esempio 3</a>

esempio 3

Vi ricordo due indirizzi sui quali reperire ulteriori informazioni:  specifiche del W3C , dove troverete tutti gli attributi e i parametri ammessi e supportati dai CSS1 e :  specifiche per i nuovi CSS2   dove alcuni di questi non sono ancora supportati da nessun browser, almeno non fino alle versioni 5.5 di IE e 6 di NS.

Andrea Bianchi

  Potete fare domande e discutere l'argomento sul Forum