Uso dei Css sui Link

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, riguarda la gestione dei links.

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

Prima di tutto vediamo come si adoperano: possono essere dichiarati in una pagina o in un foglio di stile esterno, questa la relativa sintassi:

<!-- 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 cliccare, A:VISITED sono invece i links visitati e A:HOVER si riferisce all'evento del mouse nel momento preciso in cui viene posizionato sopra il link stesso.

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, non è riconosciuto da tutti i browser, NetScape per esempio è uno di questi, per cui soltanto gli utenti Microsoft Internet Explorer potranno vederlo.

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:

<!-- A:LINK {text-decoration : none; font-size : 10 pt;}

A:VISITED {text-decoration : none; Color :green; font-size : 10 pt;}

A:HOVER {Color : red; font-size : 12 pt;}

--> </style>

Risultato: Quando provate a passarci sopra col puntatore del mouse, il font passerà dai 10pt (punti) del link da visitare ai 12 pt del link HOVER, 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.