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 come, appunto, i collegamenti ipertestuali.
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.
Fermo restando quanto detto, in questa lezione della nostra Guida CSS vedremo come stilizzare i link a piacimento.
Stilizzare i link: esigenze comuni
I link sono elementi di testo che, come tali, possono essere stilizzati mediante le medesime proprietà.
Di seguito alcune delle stilizzazioni più frequenti effettuate sui link:
Cambiare il colore dei link
Una delle esigenze più comuni quando si procede alla stilizzazione dei link consiste nel cambiarne il colore. L’operazione è molto semplice in quanto è sufficiente, come per il testo, ricorrere alla proprietà color in questo modo:
a { color: #FF00FF; }Nel nostro esempio ho impostato per i link un bel colore fucsia.
Di seguito alcuni esempi di classi per creare dei link colorati:
// Link blu
a.blu { color: #0000FF; }
// Link rosso
a.rosso { color: #FF0000; }
// Link verde
a.verde { color: #009900; }
// Link verde acido
a.verde-acido { color: #00FF00; }
// Link giallo
a.giallo { color: #FFFF00; }
// Link viola
a.viola { color: #6600CC; }Impostare un colore di sfondo per i link
Attraverso CSS è possibile impostare un colore di sfondo per i link creabdo una specie di effetto evidenziatore. Ad esempio possiamo decidere che tutti i link del sito siano caratterizzati da uno sfondo giallo e scritta nera. Per farlo utilizzeremo questo snippet di codice:
a {
color: #000000;
background-color: #FFFF00;
}Gestire la sottolineatura dei link
Uno degli aspetti tradizionali dei link è la sottolineatura: sin dagli albori del web questo semplice connotato estetico ha caratterizzato i collegamenti ipertestuali agevolandone il riconoscimento all’interno del testo.
Mediante CSS possiamo agire anche su questo aspetto, ad esempio eliminando la sottolineatura di default dei link attravsero al proprietà text-decoration:
a { text-decoration: none; }Impostando valore "none" il browser eliminerà la sottolineatura ai link.
Se volessimo poi impostarla per alcuni link soltanto potremmo creare una class ad hoc è definirne la sottolineatura in questo modo.
a.sottolineati { text-decoration: underline; }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 (o inline-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, quindi aggiungiamo:
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. Di seguito la regola di stile completa:
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:
Gestire gli stati dei link: hover, active e visited
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.
