How To a cura di: www.wmportal.it


Come modificare l'aspetto dei links

Grazie alle nuove specifiche, introdotte dall'HTML 4 in poi, ci è consentito agire sull'aspetto dei links in diversi modi.

Con i cosiddetti fogli stile, infatti, possiamo rendere più elegante l'aspetto di tutti i collegamenti ipertestuali presenti in una data pagina web, oppure, addirittura, creare vere e proprie "classi" di collegamenti per distinguere un link normale da altri di diverso significato...ma andiamo subito al sodo!

Per comunicare al browser i nuovi parametri da utilizzare quando incontra un link dobbiamo porre in testa al documento la seguente sintassi, che spiegherò subito dopo.

<style type="text/css">

A:link { text-decoration: none; color: #0000C0 }
A:visited { text-decoration: none; color: #0000C0 }
A:hover { text-decoration: none; color: #FFFFFF ; background-color: #0000C0}

</style>


I comandi, come è chiaro, devono essere compresi tra i TAGs <style type="text/css"> e </style>, mediante i quali ordiniamo al browser di utilizzare le nostre preferenze in luogo ai parametri predefiniti.

link, visited ed hover sono degli attributi, due dei quali nuovi di zecca, del TAG anchor che nei fogli stile viene espresso dalla lettera A seguita dai due punti.

I suddetti rimpiazzano i classici attributi che, fino all'HTML 3, venivano inseriti nel <BODY> e che erano, rispettivamente, link, alink e vlink e con i quali si poteva agire esclusivamente sul colore: una bella limitazione no?

Con i fogli stile, invece, racchiudendoli tra parentesi graffe e separandoli con punto e virgola, possiamo agire su più parametri. Ecco un breve elenco di quelli più utilizzati:

text-decoration
Consente di scegliere se far apparire il testo sottolineato o meno. Le variabili accettate sono, pertanto, underline e none
E' utile far notare che può essere usato indifferentemente su tutti e tre i parametri, oppure su uno o due di essi: ad esempio si potrebbe scegliere di far apparire sottolineato un link non ancora visitato, e quindi togliere la sottolineatura quando è già stato visitato.

esempio:
link underline, link none



color
E', ovviamente, il comando che decreta il colore con il quale sarà visualizzato il testo.



background-color
Con questo comando, invece, viene cambiato il colore di sfondo di un link. In questo periodo va di moda utilizzarlo esclusivamente per l'hover, al passaggio del mouse.
Una tecnica più intelligente, invece, potrebbe essere quella di utilizzarlo come "effetto evidenziatore".

esempio:
al passaggio del mouse, come evidenziatore



font-size
Le dimensioni possono essere variate a piacimento esprimendole in punti (es: 16pt) oppure in pixels (es: 16px), alcuni lo usano nell'hover ma non è una procedura molto diffusa perchè può stravolgere il layout di una pagina.

esempio:
ingrandito, rimpicciolito

CorsoHTML
di Francesco Ricca