back to top

HTML: cambiare il colore dei link (ed impostarne uno differente al passaggio del mouse)

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.

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

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

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

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.

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Video Background HTML e CSS: consigli, caratteristiche tecniche e best practices

Utilizzare un video come sfondo (noto anche come video background)...

Visualizzare il codice sorgente HTML di una pagina web su iPhone e iPad

Molti sviluppatori si trovano in difficoltà quando hanno bisogno...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...

Attributo "rel" per i link HTML

In HTML l’attributo rel può essere utilizzato esclusivamente in...

Humans.txt – cos’è, a cosa serve e come funziona

Humans.txt è un formato standard concepito per corredare un...
Pubblicità