Il sito per imparare gratuitamente a fare pagine Web

I Links CSS

Questa guida Ŕ stampabile in modo agevole dalla versione off-line scaricabile dal men¨ laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida CSS Fogli di stile - Ver. 4.8.0 - Settembre 2011    
Ver. 1.0 - Novembre 1999

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 dinamici 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, in un foglio di stile esterno o direttamente in linea. Questa la sintassi:

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

a:link    {text-decoration: none; color: brown;}
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 marrone Provate a passarci sopra col cursore del mouse, noterete un cambio di colore, in questo caso rosso. Togliete il mouse ed il link tornerÓ del colore marrone impostato per il link. Adesso fate click su quel link, essendo visitato di conseguenza il suo colore passa al verde. Tutto come da impostazioni.

Non vi piace il colore rosso?

Sostituite nella 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 viene rappresentato con #ff0000, dove le sei cifre vanno viste come tre coppie ben distinte di valori esadecimali ed esprimono i colori nella forma RGB, (rosso - verde - blu) dove i valori ammessi sono rappresentati da numeri che vanno da 0 a f (16) in notazione esadecimale.

Per cui ff = 16 x 16 = 256 (max valore ottenibile), abbiamo tre coppie ff ff ff = 256 x 256 x 256 = 16,7 Milioni di colori. Non c'entra molto con i links dei css ma almeno sapete il perchŔ di quelle sigle usate per impostare i 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:

  1. link
  2. visited
  3. hover

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 il colore fisso assegnato a visited che essendo posizionato dopo sovrascriverebbe l'effetto precedente.

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; 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:

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, il . punto e i : 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>

Risultato:



Continua: Gli Attributi di style

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi