CSS: stilizzare i link

• Pubblicato il
• 17/02/2015
• Autore
• Massimiliano Bossi

La stilizzazione dei link attraverso i codici CSS non prevede comandi specifici se non quelli che già abbiamo visto per il testo, una sua trattazione specifica, tuttavia, si rende opportuna in quanto si tratta di un elemento particolarmente importante e sovente oggetto delle più disparate stilizzazioni.

Una premessa si rende opportuna: quando si lavora sui link l'esigenza principale consiste nel mantenere intatta l'usabilità e la riconoscibilità di questi elementi: se di default i bowser prevedono un colore cangiante (il blu) e la sottolineatura è, appunto, per rendere i link immediatamente riconoscibili all'utente.

Abbiamo già trattato delle pseudo-classi in una precedente lezione della nostra guida e, come certo ricorderete, il W3C ne ha previste di apposite per i link:

• :hover
• :active
• :visited

Queste pseudo-classi, come già sappiamo, riguardano tre differenti eventi: il passaggio del mouse sul link, il click sul link ed il link già visitato:

a:hover
{
  /* Passaggio del mouse... */
}
a:active
{
  /* Link attivo, quindi all'atto del click... */
}
a:visited
{
  /* Link già visitato... */
}

Di questi tre sicuramente il più utilizzato è :hover in quanto consente di realizzare il famoso effetto mouseover, cioè una variazione grafica dell'elemento nel momento in cui il cursore del mouse entra nel suo perimetro. Facciamo un semplice esempio pratico di una semplice stilizzazione per un link con effetto mouseover:

a
{
  color: #FF0000;
  text-decoration: none;
}
a:hover
{
  color: #FF0000;
  font-weight: bold;
}

Nel nostro esempio i link sono stilizzati con un colore rosso e sono stati privati della sottolineatura di default. Al passaggio del mouse sopra al link, invece, il colore diventa rosso ed il testo assume un effetto grassetto.

Ovviamente possiamo utilizzare queste pseudo-classi per applicare le più svariate proprietà e generare effetti di diverso tipo.

Trasformare i link in bottoni

Una stilizzazione piuttosto comune è quella che prevede la presentazione di taluni link della pagina sotto forma di bottoni.

Normalmente, come sappiamo, il tag <a> appartiene alla famiglia degli elementi inline pertanto, come prima cosa, dobbiamo trasformarlo in un elemento block in questo modo:

a.bottone {
  display: block;  
}

Essendo diventato un elemento di tipo blocco abbiamo la possibilità di stabilirne larghezza, margine e bordo in questo modo:

a.bottone {
  display: block;
  width: 200px;
  margin: 0 auto;
  border: 5px solid #CC0000;
}

Possiamo inoltre specificare un colore per lo sfondo ed uno per il testo del nostro bottone:

a.bottone {
  display: block;
  width: 200px;
  margin: 0 auto;
  border: 5px solid #CC0000;
  background-color: #FF0000;
  color: #FFFFFF;
}

Per finire possiamo stabilire alcune regole di formattazione per il testo: ad esempio possiamo togliere la sottolineatura di default, applicare un allineamento centrato ed un line-height di un certo spessore:

a.bottone {
  display: block;
  width: 200px;
  margin: 0 auto;
  border: 5px solid #CC0000;
  background-color: #FF0000;
  color: #FFFFFF;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
}

Con questa semplice stilizzazione siamo riusciti a trasformare un comune link in un bottone vero e proprio: