A differenza degli altri elementi HTML, l'elemento A (link) fa in modo che informazioni esterne influenzino il processo di formattazione.
Ad esempio, il testo viene tracciato in colore diverso e sottolineato; quando il mouse va sopra il contenuto dell'elemento, il puntatore cambia forma;
quando il collegamento è già stato visitato una volta, il browser gli cambia colore.
Gli stili CSS permettono di cambaire le caratteristiche di formattazione dell'elemento A.
Permettono non solo di stabilire la formattazione del testo del link, ma anche la formattazione del testo quando il mouse ci va sopra e la forattazione del testo quando
il collegamento viene visitato.
Per fare ciò si usano delle istruzioni particolari, dette
pseudo-classi sull'elemento A.
Queste si definiscono o nello stile della pagina o nello stile esterno, facendo seguire al nome dell'elemento due punti (
:) e le parole chiave che indicano lo stato del link.
Per il nome delle parole chiave ed il loro significato:
A:link { color: red } /* link non ancora visitati*/
A:visited { color: blue } /* link visitati*/
A:active { color: lime } /* link attivi, cioé l'utente ha fatto click su di esso con il mouse */
A:hover { color: black } /* link sorvolati, cioé l'utente ci sta passando sopra con il mouse */
Tutti gli elementi 'A' con un attributo 'HREF' saranno messi in uno ed uno solo di questi gruppi.
Nota
E' prassi diffusa differenziare solo lo stato di
hover rispetto gli altri, cioé dare la stessa formattazione sia ai link, che ai link attivi che ai link visitati.
Active non viene reso da tutti browser.
Esempio:
quando ci passi su cambia colore, sfondo e bordo
Se si desidera differenziare il comportamento degli elementi A della pagina, gli si attribuisce un nome con un attributo
class in essi e si usa la sintassi
A.nome:link { color: red } /* link di class nome */
