I Fogli di Stile (CSS) di Web-Link: Tutto per la costruzione delle tue pagine web

Sharing is caring!

CSSVisita il sito di Web-Link

 
Menù Argomenti
Home Page Web-Link
Introduzione
Sintassi
In Linea
Nella Pagina
Nel Foglio Esterno
Le Classi
I Selettori ID
La Grafica
I Links
Attributi di Testo
Attrib. Carattere
Attrib. Colore Sfondo
Attrib. di Posizione
Parametri
Conclusioni
Forum di supporto

Valid CSS!

Valid HTML 4.01 Transitional

  Rev. 3.0 – Agosto 2005    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 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  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

Continua: Gli Attributi di style

    Andrea Bianchi 
   

per stampare questa pagina


Potete fare domande e discutere l’argomento sul Forum gratuito di supporto.

© Andrea Bianchi 1997 ~ 2006

Valid CSS!

Valid HTML 4.01 Transitional

shares