Guida Fogli di Stile CSS

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 anche un'altra novità introdotta dai CSS e riguarda la gestione dei links, si tratta di pseudo classi dinamiche.

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

Prima di tutto vediamo come si adoperano perché differiscono leggermente da quanto appreso fino a questo momento. Anche i Link possono essere dichiarati in una pagina o in un foglio di stile esterno ma non possono essere dichiarati direttamente in linea. Questa la loro 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 (da cliccare). a:visited sono invece i links visitati (già cliccati) e a:hover si riferisce all'evento del mouse nel momento preciso in cui viene posizionato sopra il link.

Risultato: sono un link privo di sottolineatura e di colore verde Provate a passarci sopra col puntatore del mouse, noterete un cambio di colore, in questo caso rosso. Togliete il mouse ed il link tornerà del colore blu impostato per i link. Adesso fate click su quel link. Adesso il suo colore è verde.

Non vi piace il colore rosso?

Sostituite alla pseudoclasse a:hover il parametro red (rosso in inglese) con qualsiasi altro nome "valido" di un colore. 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 esadecimale preceduto dal simbolo # (pound o cancelletto) vedi anche la sezione dedicata ai parametri di questa stessa guida.

Il rosso 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 copie di numeri che vanno da 00 a 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 Milioni di colori.

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

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. Da fare molta attenzione a non invertire l'ordine di dichiarazione:

Si deve rispettare questo ordine per evitare conflitti, se per esempio si invertisse hover con visited passando sopra ad un link già visitato non si avrebbe l'effetto hover del cambio di colore ma soltanto quello assegnato a visited.

Ci sarebbero altre due pseudoclassi dinamiche: focus ed active che possono essere applicate ad altri elementi di html oltre a link, non essendo però supportate dal browser IE è forse meglio non farne uso.

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 Se provate a passarci sopra col puntatore del mouse noterete che il font cambia dimensione, passando dai 10pt (punti) del link da visitare ai 12pt del link hover e di colore rosso. Così facendo 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 e leggete i consigli, tanto per avere le idee ancora più chiare.

E' anche possibile avere links all'interno della stessa pagina web con colori e comportamenti diversi. Sarà sufficiente fare uso di classi diverse da assegnare ai vari links:

Esempio 1
esempio 2
esempio 3

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>

Notate la sintassi col . punto e : due punti, dove xxx è il nome assegnato alla classe. Il suo richiamo da html segue la stessa sintassi degli altri elementi di html:

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