CSS, eliminare la sottolineatura dei link

di Michele Costanzo Commenta

CSS link sottolineatura
Convenzionalmente i collegamenti inseriti in una pagina web vengono rappresentati nel browser con un testo sottolineato. Attraverso i fogli di stile CSS è possibile modificare questo comportamento ed eliminare la sottolineatura, una soluzione utile per armonizzare i link al design della pagina.

CSS, la proprietà text-decoration

Abbiamo già visto qualche giorno fa che alcune caratteristiche dei link sono gestite in un foglio di stile CSS attraverso i selettori a:link (collegamenti non ancora visitati) e a:visited (collegamenti già visitati). Per eliminare la sottolineatuta dei link per entrambi questi selettori andrà definita la proprietà text-decoration. Utilizzeremo quindi un semplice codice CSS di questo tipo:

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}

Analisi del codice CSS

Il comportamento del codice è piuttosto semplice ed intuitivo. Per il selettore a:link si è definita la proprietà text-decoration a cui è stato attribuito il valore none. Questa formulazione indica al browser che il link andrà rappresentato senza ‘decorazioni’ del testo inclusa la sottolineatura predefinita.

Lo stesso codice usato per a:link è stato replicato anche per a:visited. Alcune versioni di alcuni browser estendono in maniera automatica le impostazioni di a:link anche ad a:visited, ma il codice proposto ha il vantaggio di funzionare correttamente su un maggior numero di browser.

All’interno del codice CSS la proprietà text-decoration può ovviamente essere abbinata anche ad altre proprietà. Ad esempio se oltre ad eliminare la sottolineatura dei link ne volessimo anche cambiare il colore potremmo abbinare la proprietà text-decoration con la proprietà color utilizzando un codice di questo genere:

a:link {
  text-decoration: none;
  color: #660000;
}