In questo articolo vediamo come cambiare i colori ai link all’interno di una pagina web. Prima di vedere come agire è opportuna qualche premessa.
L’importanza del colore dei collegamenti ipertestauli
All’interno di una pagina web i link rappresentano, certamente, un elemento importante, fondamentale. L’utilizzo del colore per contraddistinguere un link dal semplice testo, quindi, non è una semplice questione estetica ma una vera e propria esigenza connessa all’usabilità del sito web.
A prescindere dalle valutazioni estetiche, quindi, è bene che i link siano facilmente identificabili e per essi si utilizzi un colore differente rispetto a quello del testo.
I colori standard dei link
Il colore standard dei link è il blu. Più precisamente, i browser hanno sempre impostato i collegamenti ipertestuali con dei colori standard per i tre stati principali:
- Link: #0000FF // blu
- Link attivi: #FF0000 // rosso
- Link visitati: #800080 // viola
I colori indicati sono quelli più frequenti, ma non tutti i browser li impostano esattamente nello stesso modo e nelle medesime tonalità.
Modificare i colori dei link
Come detto, i web-designer possono modificare a piacimento il colore dei link all’interno delle proprie pagine web.
Utilizzare attributi del tag body
Per farlo, fino all’avvento di HTML5, era possibile impostare dei semplici attributi all’interno del tag <body> in questo modo:
<body link="#008000" alink="#00ff00" vlink="#008080">I tre attributi corrispondono, come avrete già capito, ai tre stati dei link visti sopra (link corrisponde al valore di default, alink corrisponde ai link attivi, vlink ai link visitati). I colori sono definti mediante la notazione esadecimale ma, se si decide di utilizzare i Web Safe Color, nulla vieta di utilizzare i nomi dei colori:
<body link="green" alink="lime" vlink="teal">Come detto i tre attributi in questione sono oggi deprecati da HTML5 quindi il loro utilizzo non è consigliato (a dire il vero, questa tecnica è già in disuso da diversi anni).
Utilizzare CSS per cambiare il colore dei link
Il modo corretto per cambiare il colore dei link è utilizzare i fogli di stile. Possiamo farlo, semplicemente, valorizzando l’attributo style del tag <a> in questo modo:
<a href="pagina.html" style="color:#008000">clicca qui</a>In pratica abbiamo utilizzato la proprietà color per assegnare un colore specifico al link che andrà a sovrascrivere il colore di defult impostato nel browser per i collegamenti ipertestuali.
In alternativa all’utilizzo degli stili in linea è possibile definire una regola all’interno del nostro foglio di stile, in questo modo:
a { color: #008000; }
a:active { color: #00ff00; }
a:visited { color: #008080; }Come avrete notato abbiamo utilizzato le pseudo-classi :active e :visited per stilizzare i differenti stati dei link della pagina.
Attraverso lo stile visto sopra tutti i link della pagina assumeranno le nuove colorazioni. Qualora avessimo voluto agire selettivamente solo su singoli link avremmo potuto usare delle classi, ad esempio:
a.verde { color: #008000; }
a.verde:active { color: #00ff00; }
a.verde:visited { color: #008080; }A questo punto gli unici link ad essere stilizzati, coi colori definiti nel foglio di stile, saranno solo quelli aventi classe "verde".
Cambiare il colore dei link al passaggio del mouse
Attraverso la pseudo-classe :hover è possibile modificare il colore dei link nel momento in cui l’utente ci passa sopra con il mouse. Per raggiungere questo risultato sarà sufficiente aggiungere una linea di codice CSS:
a.verde:hover { color: #ffff00; }Grazie a questa singola linea di codice, i link aventi classe "verde" verranno colorati di giallo al momento del passaggio del mouse.
