|
I Links
Ora sappiamo che css sono in grado di
assegnare e cambiare attributi al testo e con estrama semplicitā sono anche in
grado di oggetti grafici e testuali. Vediamo ora come i css gestiscono i
link con la possibilitā di cambiare tipo di font e colore,
utilizzare o no la sottolineatura e farlo magari al passaggio del cursore
del mouse.
Anch'essi possono essere dichiarati in
una pagina o in un foglio 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;
font-weight: bold}
-->
</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. |
Il risultato sarā un
link non sottolineato di colore verde
che diventa rosso e bold al passaggio del cursore
Per cambiare i colori basta
sostituire red o green con un qualsiasi altro nome di colore
valido oppure esprimendolo con il codice esadecimale (
vedi pagina e pagina )
preceduto dal solito simbolo # pound (cancelletto). Avete a disposizione; 16,7 Milioni di colori, tutti quelli che la vostra scheda video č in grado di visualizzare comprese le relative sfumature.
Anche per i link, 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-weight: bold}
-->
</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 10 pt
bold
di colore rosso del link HOVER . Notate che tutto il testo viene spostato per fare posto al font di dimensioni maggiori.
|
Per ottenere dei link di colore
e comportamenti diversi all'interno della stessa pagina web č sufficiente fare
uso, ancora una volta, delle classi diversificandole a seconda del
link desiderato.
<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 1
esempio 2
esempio 3
|
Continua:
Attributi Testo |
