Link
I link, assieme ai form, naturalmente, rappresentano la vera forma di interattività che una pagina HTML ti può offrire. Ai link puoi applicare tutti gli stili visti finora, con un’aggiunta: i link presentano anche degli stati.
Quando porti il puntatore sopra ad un link, oltre al cambio di icona, potresti notare un qualche altro cambiamento (ad esempio di colore). Oppure, poni attenzione ad una pagina HTML senza nessuno stile applicato, al cui interno ci siano dei link. Forse qualcuno fra questi lo vedi in viola, piuttosto che in blu, questo succede perché quelli viola li hai già visitati.
Questi stati prendono il nome di pseudo classi (perché non sono delle classi vere e proprie) e vanno definiti con il simbolo dei due punti prima del nome. Vediamoli nel dettaglio:
:link; un normale link, non ancora visitato. Solitamente è raro vederlo in qualche foglio di stile perché equivale, più o meno, ad applicare lo stile direttamente ad<a>(anch’io credo di averlo usato solo un paio di volte!).:hover; questo stato avviene quando poniamo il puntatore del mouse sopra ad un link. A differenza di:link, è molto utilizzato, in quanto possiamo variare lo stile del link in tutti i modi possibili. Ricorda solo una cosa: sui dispositivi mobile l’hover sui link non esiste, in quanto non hai un puntatore ma le tue dita! Questo significa che, con molta probabilità, questo effetto non verrà visualizzato su dispositivi touch1.:focus; simile a:hover, con l’eccezione che l’evento viene richiamato quando si seleziona un link con il tasto “Tabulazione” della tastiera. Questo stato è bene impostarlo sempre, ed è bene che esso sia anche uguale a:hover.2:visited; questo stato viene applicato se un link è già stato visitato da parte dell’utente. Anche questo, così come:link, è molto raro vederlo in qualche CSS, anche se buone norme di usabilità dovrebbero indurlo ad utilizzarlo, in quanto potrebbe essere utile per l’utente capire quali pagine ha già visitato.:active; l’ultimo stato viene richiamato dopo aver fatto clic su un link. Questo, purtroppo, viene visualizzato per un tempo veramente ridotto, ecco perché è ancora più raro da vedere rispetto a tutti gli altri.3
Se vuoi utilizzare le pseudo classi, ricorda che esse devono essere definite secondo un’ordine particolare, altrimenti qualche stato potrebbe non venir applicato in quanto risulterebbe sovrascritto (per la legge della cascata nei CSS). L’ordine da seguire, è, qundi, il seguente:
a:link{}
a:visited{}
a:hover
a:focus{}
a:active{}
Un ultimo suggerimento. Ricordati che le pseudo classi si applicano solo ai link, con l’unica eccezione di :hover: questo stato può essere di fatto applicato a qualsiasi elemento!
div:hover{}