Stili CSS per i Link

Un link (l'elemento HTML <a>) è una delle cose più cliccate su qualsiasi pagina, quindi il suo stile è importante sia per l'aspetto visivo che per l'usabilità. In questo capitolo spiegheremo come stilizzare i link con CSS per renderli chiari, accessibili e visivamente accattivanti.

Gli stati del link (pseudo-classi)

CSS espone un link attraverso cinque pseudo-classi, ciascuna corrispondente al link in un determinato stato:

a:link — un link normale, non visitato
a:visited — un link che l'utente ha già visitato
a:hover — un link su cui si trova il puntatore del mouse
a:active — un link nel momento in cui viene cliccato
a:focus — un link che ha ricevuto il focus da tastiera (ad esempio, tramite il tasto Tab)

Puoi applicare ognuna di queste singolarmente, ma quando stili più stati contemporaneamente l'ordine è importante. Poiché :hover, :active e :visited hanno la stessa specificità, una regola successiva sovrascrive quella precedente. L'ordine convenzionale e funzionante è LVHA — :link, :visited, :hover, :active:

a:link    { color: #1c87c9; }  /* normal   */
a:visited { color: #8e44ad; }  /* visited  */
a:hover   { color: #f4511e; }  /* mouse over */
a:active  { color: #c0392b; }  /* clicked  */

Se metti :hover prima di :visited, il colore al passaggio del mouse non verrebbe mai mostrato sui link visitati. Un modo utile per ricordarlo è il mnemonico "LoVe HAte." Aggiungi :focus (solitamente insieme a :hover) in modo che gli utenti che usano la tastiera ricevano lo stesso feedback di quelli che usano il mouse — dimenticarlo è un errore di accessibilità comune.

Tratteremo le tre proprietà più usate per stilizzare i link:

Text Decoration

Per impostazione predefinita, il browser traccia una sottolineatura sotto ogni link. Per cambiarla o rimuoverla, usa la proprietà text-decoration. Impostare text-decoration: none rimuove la sottolineatura; ripristinarla con underline su :hover è un pattern molto diffuso che mantiene la pagina ordinata segnalando comunque la cliccabilità all'interazione.

Una parola di cautela: rimuovere del tutto la sottolineatura può rendere i link difficili da individuare, specialmente per gli utenti che non percepiscono bene i colori. Se la rimuovi, fai in modo che i link risaltino in un altro modo — con un colore distinto, un font-weight, oppure ripristinando la sottolineatura al passaggio del mouse e al focus.

Esempio di utilizzo della proprietà text-decoration per stilizzare un link:

Esempi CSS di text-decoration sui link

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        text-decoration: none;
      }
      a:visited {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      a:active {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <a href="#"> This is some link.</a>
  </body>
</html>

Provalo tu stesso »

Spieghiamo il significato del nostro codice.

Qui puoi vedere che il link nei suoi primo e secondo stati sarà senza sottolineatura. Il link viene sottolineato quando l'utente passa il mouse sopra di esso o lo clicca.

Puoi verificarlo nel tuo browser usando i tuoi editor o il nostro editor online.

Questi stili possono essere scritti nella sezione <head> oppure in un file CSS che userai per la tua pagina web.

Color

Usiamo la proprietà color per impostare il colore di un link.

Ad esempio, se vogliamo che il nostro link sia nero per impostazione predefinita e #1c87c9 nel suo terzo stato (a:hover), dobbiamo scrivere quanto segue:

Esempio di utilizzo della proprietà color per stilizzare un link:

Esempi CSS di color sui link

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        color: #000000;
      }
      a:visited {
        color: #000000;
      }
      a:hover {
        color: #1c87c9;
      }
      a:active {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Provalo tu stesso »

Risultato

Background Color

Cosa possiamo fare se vogliamo che il nostro link abbia uno sfondo?

Dobbiamo semplicemente applicare la proprietà background-color.

Ad esempio, il nostro link avrà uno sfondo grigio e, al passaggio del mouse, cambierà in #1c87c9.

Quando il primo (a:link) e il secondo (a:visited) stato hanno lo stesso colore di sfondo, possiamo usare semplicemente a.

Esempio di utilizzo della proprietà background-color per stilizzare un link:

Esempi CSS di background-color sui link

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        background-color: #555555;
      }
      a:hover {
        background-color: #1c87c9;
      }
      a:active {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Provalo tu stesso »

Puoi scegliere il tuo colore preferito usando il Color Picker.

Mettere tutto insieme

Nei progetti reali raramente si stilizza una sola proprietà. L'esempio seguente combina il colore, il pattern di sottolineatura al passaggio del mouse, un po' di padding in modo che lo sfondo abbia spazio, e una regola :focus che rispecchia :hover così gli utenti da tastiera ottengono un feedback visibile:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link,
      a:visited {
        color: #1c87c9;
        text-decoration: none;
        padding: 2px 4px;
        border-radius: 4px;
      }
      a:hover,
      a:focus {
        color: #ffffff;
        background-color: #1c87c9;
        text-decoration: underline;
      }
      a:active {
        color: #ffffff;
        background-color: #14679b;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Nota come raggruppare a:link, a:visited con una virgola applichi lo stesso stile predefinito a entrambi gli stati, e come abbinare a:hover, a:focus renda l'esperienza identica per gli utenti che usano il mouse e quelli che usano la tastiera.

Suggerimenti per l'accessibilità

Non fare mai affidamento solo sul colore. Gli utenti con daltonismo potrebbero non distinguere un link blu dal testo nero. Mantieni una sottolineatura, o abbina il colore a un altro segnale visivo.
Stilizza sempre :focus. Se rimuovi il contorno di focus predefinito, sostituiscilo con il tuo stile visibile — altrimenti gli utenti da tastiera non riescono a capire dove si trovano. Vedi la proprietà outline.
Mantieni un contrasto sufficiente. Il testo del link deve risaltare chiaramente rispetto allo sfondo e rispetto al testo del corpo circostante.

Riepilogo

Un link ha cinque stati, ognuno con la propria pseudo-classe: :link, :visited, :hover, :active e :focus.
Quando stili più stati, segui l'ordine LVHA in modo che le regole successive non sovrascrivano accidentalmente quelle precedenti.
text-decoration controlla la sottolineatura, color imposta il colore del testo e background-color aggiunge uno sfondo.
Stilizza sempre :focus ed evita di segnalare i link solo con il colore per mantenerli accessibili.

Pratica

Quali proprietà si usano in CSS per modificare l'aspetto dei link?