Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Link e css

Link e css

di GDesign, 05 Settembre 2002

Versione StampabileDownload in pdf


In questo articolo vedremo come personalizzare i link delle nostre pagine web utilizzando i fogli di stile CSS. Per comodità prenderemo in considerazione i fogli di stile interni (quindi inseriremo le proprietà dei nostri link tra i tag <HEAD> e </HEAD> della nostra pagina web) ma nessuno ci vieta di utilizzare i fogli di stile esterni. Possiamo anche definire uno stile all'interno del link stesso (all'interno del tag <A HREF>) e questo risulta molto utile nel caso in cui vogliamo creare in una stessa pagina link che abbiano proprietà diverse tra loro.

Cominciamo impostando un link che non presenti la classica sottolineatura. Il codice da utilizzare è:

<STYLE TYPE="text/css">
A:link { text-decoration: none; }
</STYLE>

e questo è il risultato che si ottiene: Test-Link.
Vi ricordo che eliminare la sottolineatura di un link diminuisce notevolmente l'usabilità delle pagine web e quindi è sconsigliabile. Tramite "A:link" si definisce lo stile (font, dimensione, colore, sottolineatura, ecc.) di ogni collegamento ipertestuale.

Vediamo adesso come realizzare un link con la sottolineatura variabile al passaggio del puntatore del mouse. Specifichiamo lo stile del link utilizzando sempre un CSS interno; quindi tra i tag <HEAD> e </HEAD> della nostra pagina web scriviamo:

<STYLE TYPE="text/css">
A:hover { text-decoration: none; }
</STYLE>

ed il risultato che otteniamo è: Test-Link.
Tramite "A:hover" si definisce definire lo stile (font, dimensione, colore, sottolineatura, ecc.) di ogni collegamento ipertestuale al passaggio del puntatore del mouse. È possibile inoltre definire lo stile dei link già visitati tramite "A:visited".

Con A:link, A:hover e A:visited siamo in grado allora di personalizzare i nosti link ed ottenere effetti interessanti.

Ad esempio definiamo uno stile che ci dia link sprovvisti di sottolineatura in partenza, con sottolineatura quando ci passa sopra il puntatore del mouse e poi di nuovo senza sottolineatura quando il puntatore va via. Il codice da utilizzare è:

<STYLE TYPE="text/css">
A:link, A:visited { text-decoration: none; }
A:hover { text-decoration: underline; }
</STYLE>

ed il risultato che otteniamo è: Test-Link.

Oppure facciamo in modo che i nostri link siano di colore rosso ed al passaggio del puntatore del mouse presentino uno sfondo giallo. Il codice da utilizzare è:

<STYLE TYPE="text/css">
A:link , A:visited { color: #FF0000; }
A:hover { color: #FF0000; background: #FFFF00; }
</STYLE>

ed il risultato che otteniamo è:Test-Link.

Bene, adesso dovreste avere un certa familiarità con i CSS per i link; fate tante prove e sbizzarritevi nel personalizzare i vostri link.

Vi raccomando infine di utilizzare i CSS per i link in modo oculato, tenendo sempre in considerazione che in una pagina web i link devono essere facilmente riconoscibili dagli utenti senza che si ci debba necessariamente passare sopra con il puntatore del mouse.

^Top

Dai un voto a questo articolo:   HITS: 161 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 3