Link CSS

Con CSS, è possibile impostare lo stile dei link in modi diversi.

link testuali link testuali pulsante di link pulsante di link

Impostare lo stile dei link

I link possono utilizzare qualsiasi proprietà CSS (ad esempio color,font-family,background e simili) per impostare lo stile.

esempio

a {
  color: hotpink;
}

Prova personalmente

Inoltre, è possibile impostare diversi stili per i link in base allo stato in cui si trovano.

Le quattro stati di link sono:

  • a:link - Link normale, non visitato
  • a:visited - Link visitato dall'utente
  • a:hover - Quando l'utente mette il mouse sopra il link
  • a:active - Quando il link viene cliccato

esempio

/* link non visitato */
a:link {
  color: red;
}
/* link visitato */
a:visited {
  color: green;
}
/* mouse sopra il link */
a:hover {
  color: hotpink;
}
/* link selezionato */
a:active {
  color: blue;
}

Prova personalmente

Se si impostano stili per più stati di link, seguire le seguenti regole di sequenza:

  • a:hover deve venire dopo a:link e a:visited
  • a:active deve venire dopo a:hover

decorazione del testo

text-decoration La proprietà è principalmente utilizzata per rimuovere il sottolineato dai link:

esempio

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Prova personalmente

colore di sfondo

background-color Le proprietà possono essere utilizzate per specificare il colore di sfondo dei link:

esempio

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Prova personalmente

pulsante di link

Questo esempio dimostra un esempio più avanzato, in cui combiniamo più proprietà CSS per visualizzare i link come caselle/pulsanti:

esempio

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Prova personalmente

Più esempi

Aggiungere diversi stili agli hyperlink
Questo esempio dimostra come aggiungere altri stili agli hyperlink.
Avanzato - Creazione di pulsanti link con bordi
Questo è un altro esempio di come creare caselle/link/bottoni.
Cambiare il cursore
L'attributo cursor specifica il tipo di cursore da visualizzare. Questo esempio mostra diversi tipi di cursore (utile per i link).