Formattare i link
Vedremo ora, brevemente, come fare uno stile più carino ai link che, normalmente, se non associati a nessuno stile, appaiono blu o viola.
a:link {
color: #000000;
text-decoration: underline;
}
a:visited {
color: #000000;
text-decoration: underline;
}
a:hover {
color: #990000;
text-decoration: none;
}
a:link costituisce un link non visitato.
a:visited è un link già visitato dall'utente.
a:hover è il link nel momento in cui l'utente ci passa sopra il mouse.
Possiamo dare uno stile ad ognuna di queste classi, di norma però a:link e a:visited hanno lo stesso stile o, per lo meno, uno stile molto simile.
Nell'esempio della textarea di sopra ho creato un link nero (#000000) che cambiava colore in rosso (#990000) e che era prima sottolineato e poi no.
Esempio:
Possiamo associare i seguenti valori alla proprietà text-decoration:
- underline (sottolinea il testo)
- none (non dà alcuna sottolineatura al testo)
- line-through (barra il testo a metà)
- overline (pone una riga in alto, sul testo)
- blink (fa "lampeggiare" il testo, ma non è supportato da tutti i browser)
è possibile anche combinare più di un text-decoration (nei limiti del "leggibile").
Abbinando un underline con un overline avremo un effetto di sottolineatura e di soprallineatura.
N.B. (Accessibilità) : Non sempre è un bene rimuovere la sottolineatura di un link o rendere lo stesso di un colore troppo uniforme al resto del testo.
La sottolineatura è infatti una convenzione standard e gli utenti si aspettano, di solito, che i link siano sottolineati.
Rimuovere la sottolineatura potrebbe essere un problema, soprattutto se il link è dello stesso colore del testo.
Qualora voleste togliere la sottolineatura, premuratevi che il link sia chiaramente definito da un colore acceso o comunque ben contrastato dal contesto.
Esercizi:
Perché non provate a combinare tra loro le proprietà dei link?
Ad esempio, perché non creare un link che sia dapprima sottolineato e di colore nero e poi (nel momento in cui ci si passa sopra il mouse) abbia uno sfondo che lo evidenzi di un color grigio chiaro?
Esempio:
a:link, a:visited {
text-decoration: underline;
color: #000000;
}
a:hover {
color: #000000;
background-color: #cccccc;
text-decoration: none;
}
N.B. (Consigli) : Come vedete ho voluto dare lo stesso stile sia a a:link che a a:visited. Invece di riscrivere due volte lo stesso stile ho unito
le due pseudo-classi tramite una virgola.
Ricordate sempre, al termine di ogni proprietà (es. background-color: #000000; ) di mettere un punto e virgola ( ; ), altrimenti il codice non verrà letto correttamente.
