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