|
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
|