I Links - in Css." ESEMPI " Pratici

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, si perché differiscono leggermente da quanto appreso fino a questo momento, possono essere dichiarati in una pagina o in un foglio di stile esterno, 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 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, non è riconosciuto da tutti i browser, NetScape per esempio è uno di questi, per cui soltanto gli utenti Microsoft Internet Explorer, Google, Firefox, Opera, Brave ecc.. 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:

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

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: sono un link non sottolineato e di colore verde  Se provate a passarci sopra col puntatore del mouse, il font passerà dai 10 pt (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. 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 : 14 pt;}
-->
</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