Livello di difficoltà: |
|
I Css, Cascade style sheets, che in italiano significa fogli di stile a cascata, sono una tecnologia per migliorare le proprie pagine Web. Sono stati implementati dal W3 Consorzium nella quarta versione di Html.
|
| |
Effetti interattivi sui links
Cascade style sheets
Nel passaggio precedente abbiamo visto tutti dei bellissimi stili, ma nessuno di essi era interattivo, ovvero non modificava in alcun modo a seconda delle azioni eseguite dall'utente.
I Css, come Javascript d'altronde, permette di interagire (anche se in maniera prettamente estetica) con gli eventi generati dal visitatore.
Tutti gli effetti che vedremo adesso hanno come oggetto gli hyperlink.
LINK NON SOTTOLINEATO
Cominciamo eliminando la comune sottolineatura ai link ipertestuali. Sia Explorer che Netscape 4, permettono di eliminare la sottolineatura ai collegamenti. Ecco come fare.
<STYLE>
A:link, A:visited { text-decoration: none }
</STYLE>
LINK NON SOTTOLINEATO AL PASSAGGIO DEL MOUSE
E' uno degli effettipiu' aggrazziati tra quelli che vi presenteremo. Elimina la sottolineatura solo quando ci si passa sopra con il mouse. Invertendo i valori underline con none si otterra' l'effetto contrario.
<STYLE>
A:link, A:visited { text-decoration: underline }
A:hover { text-decoration: none }
</STYLE>
LINK SOPRALINEATO AL PASSAGGIO DEL MOUSE
Essendo un effetto poco usato, potrebbe diventare la peculiarita' del vs sito web. Anche in questo caso, invertendo i valori overline e none, si otterra' un effetto opposto.
Ecco come fare:
<STYLE>
A:link, A:visited { text-decoration: overline }
A:hover { text-decoration: none }
</STYLE>
LINK CON CAMBIO DI COLORE AL PASSAGGIO DEL MOUSE
Una volta che il mouse passa sopra il link, questo cambia di colore. Il colore puo' essere espresso sia in valori esadecimali (per es. #000080) sia in inglese (navy). Ecco il codice:
<STYLE>
A:link, A:hover { color:navy }
</STYLE>
CAMBIO DEL COLORE DI SFONDO AL PASSAGGIO DEL MOUSE
E' possibile impostare un colore di sfondo ai link, anche solo quando si passa sopra con il mouse.
<STYLE>
A:link, A:hover { background:red }
</STYLE>
|
