_o°-Effetti sui link-°o

Cenni sui css

| torna all'elenco | creare un sito | Creare un sito | Creare pagine web | Ipswitch WS_FTP | cenni sui css | Tag di base 1.1 | Tag di base 1.2 | Front page | Creare un sito | Nuove pagine | Scegliere un layout | I collegamenti | script e css | Css utility | Effetto fading | Fav.icon | Effetti sui link | Ultima modifica | Data e ora | Tag board | Image tooltip |

Tutorial come creare un sito e cenni sui css by ©Fabulatia is licensed under a

Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License.

***

eliminare la sottolineatura

Inserendo questo codice di stile tra <head> e </head> della pagina, verranno eliminate le sottolineature a tutti i links, anche quelli visitati.

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

ecco come ci appare il link:

Copia il codice nel boxino qui sopra ed incollalo fra <head> e </head>:

Ecco il risultato:

link sottolineati

al passaggio del mouse i link verranno sottolineati .

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

ecco come ci appare il link:

Copia il codice nel boxino qui sopra ed incollalo fra <head> e </head>:

Ecco come ci apparirà al passaggio del mouse:

sottolineatura che scompare

al passaggio del mouse la sottolineatura dei link scomparirà .

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

ecco come ci appare il link:

Copia il codice nel boxino qui sopra ed incollalo fra <head> e </head>:

Ecco come ci apparirà al passaggio del mouse:

link che cambia colore

al passaggio del mouse i link cambieranno colore .

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

ecco come ci appare il link:

Copia il codice nel boxino qui sopra ed incollalo fra <head> e </head>:

Ecco come ci apparirà al passaggio del mouse:

link che cambia sfondo

al passaggio del mouse i link verranno evidenziati da uno sfondo colorato.

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

ecco come ci appare il link:

Copia il codice nel boxino qui sopra ed incollalo fra <head> e </head>:

Ecco come ci apparirà al passaggio del mouse:

link che viene ingrandito

al passaggio del mouse i link verranno ingranditi .

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

ecco come ci appare il link:

Copia il codice nel boxino qui sopra ed incollalo fra <head> e </head>:

Ecco come ci apparirà al passaggio del mouse:

Assegnare un'immagine ad un link

al passaggio del mouse i link verranno evidenziati da un'immagine di sfondo che può essere anche animata.

<style type="text/css">A:link { text-decoration: none;}A:hover { background: url(http://www.fabulatia.it/html_webmaster/effetti_sui_link/link.gif);} </style>

Supponiamo di avere questa immagine:

puoi realizzare un bannerino con un programma di grafica qualsiasi, le dimensioni sono: larghezza:153, altezza:33.

una volta creato il bannerino devi caricarlo sul tuo spazio web: altervista o Aruba, ed hostarlo.

se lo nomini link.gif dovrai inserire nel codice il link diretto all'immagine che sarà: http://www.mio_sito.it/link.gif vedi codice qui sotto:

<style type="text/css">A:link { text-decoration: none;}A:hover { background: url(http://www.mio_sito.it/link.gif);}
</style>

ecco come ci appare il link:

Copia il codice nel boxino qui sopra ed incollalo fra <head> e </head>:

Ecco come ci apparirà al passaggio del mouse: