Effetto su link

In questa lezione parleremo dell'aspetto che possiamo dare ad un link:

)> Link senza sottolineatura:
i link testuali vengono visualizzati dai browser con una sottolineatura che ne evidenzia la funzione. Con i fogli di stile si ha la possibilita' di eliminare questo effetto grazie all'uso di un semplice codice da inserire nel tag BODY: 

<style type="text/css">
A:link, A:visited { text-decoration: none }
</style>

)> Link sottolineato solo al passaggio del mouse:
e' anche possibile, visualizzare un effetto di sottolineatura solo al passaggio del mouse:

<style type="text/css">
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</style>

)> Link cambiano colore al passaggio del mouse:
e' possibile creare un effetto che permette di dare ai link un colore di default, che cambia quando il mouse vi passa sopra. Il colore puo' essere impostato come parola chiave (red, green, blue ecc.) o con RGB:

<style type="text/css">
A:hover { color: blue }
</style>

)> Link cambiano colore di sfondo al passaggio del mouse:
grazie a questo effetto quando il puntatore del mouse passa sul link, lo stesso mostra un colore di testo e di sfondo diversi:

<style type="text/css">
A:hover { color: red; background:blue }
</style>

)> Link cambia dimensione al testo quando attivato dal mouse
grazie a questo effetto e' possibile al passaggio del mouse far ingrandire il testo:

<style type="text/css">
A:link { font-size: 18px }
A:visited { font-size: 18px }
A:hover { font-size: 18px }
</style>

Torna all'indice