INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Effetti sui link con i Css

Autore: Luca Ruggiero | Tell a Friend

Corso HTML
Impara il linguaggio di marcatura per il Web.

Corso CSS
Web Design ed Accessibilità secondo il W3C!

Corso Web Design
Disegno di siti Web con HTML, CSS e Dynamic HTML.

La potenza dei Css ci permette di gestire in maniera ottimale lo stile dei link di una pagina, ottenendo anche una serie di effetti particolarmente gradevoli.

Col normale Html possiamo agire sul colore dei link semplicemente implementando nel body il seguente codice: 

<body link="#0000FF" alink="#FF0000" vlink="#CECECE">
impostando in questo modo il colore del link da visitare in blu (#0000FF), il colore del link attivo il rosso (#FF0000) ed il colore dei link visitati in grigio (#CECECE).

Con i Css possiamo agire analogamente sulle stesse tre proprietà e non solo, possiamo utilizzare una quarta proprietà che ci consente di scatenare un effetto al passaggio del mouse su di un link, vediamole: 
a:link { color: #0000FF; } /* link da visitare */
a:active { color: #FF0000; } /* link attivo */
a:visited { color: #CECECE; } /* link visitato */
a:hover { color: #FF0000; } /* link al passaggio del mouse */
impostando, ad esempio, anche il colore del link al passaggio del mouse in rosso.

Specificate le quattro proprietà, vediamo come possiamo agire in maniera più snella e veloce, impostiamo il colore del link da visitare, attivo e visitato di una sola tonalità e con un solo passaggio, abbiamo due modi per fare questo, vediamoli entrambi: 
a:link, a:active, a:visited { color: #0000FF; } /* primo metodo */
a { color: #0000FF; } /* secondo metodo */
Altro vantaggio offerto dai Css è quello di eliminare la sottolineatura dei link e di reimpostarla ad esempio al passaggio del mouse, o volendo possiamo scegliere anche di far apparire la sottolineatura al di sopra della scritta, vediamo un esempio: 
a { color: #0000FF; text-decoration: None; } /* il link in partenza non è sottolineato */
a:hover { color: #FF0000; text-decoration: Underline; } /* il link diventa sottolineato  al passaggio del mouse */
in questo modo, invece, otteniamo l'effetto di "sopralineatura" 
a { color: #0000FF; text-decoration: None; }
a:hover { color: #FF0000; text-decoration: Overline; }
Possiamo anche combinare i due effetti: 
a { color: #0000FF; text-decoration: None; }
a:hover { color: #FF0000; text-decoration: Underline Overline; }
Gli effetti che si possono ottenere sono svariati, possiamo ad esempio scegliere di impostare un link che al passaggio del mouse aumenta le proprie dimensioni o viene evidenziato in grassetto o in corsivo, basta provare e riprovare finchè l'effetto desiderato no salta fuori!

Ricordo che è possibile consultare le Referenze Css messe a disposizione da questo sito per una lista completa delle proprietà a disposizione.

IN EVIDENZA
Una slidegallery con jQuery Pagamenti online con PayPal e PHP Breve guida a jQuery Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript
HOT LINKS
Servizi per Webmaster E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb