Come formatto i link con i css?

Innanzitutto parliamo un poco dei link a livello di usabilità.

I link sono da sempre identificati come parole sottolineate e di colore blu (viola se già visitati). Ebbene, a seconda di dove li usiamo non sempre è necessario che siano sottolineati o colorati con i colori standard, anzi!

Guardiamo un paio di esempi:

Questo menu ad esempio è graficamente impostato con css e immagini (tramite una lista orizzontale), pertanto una sottolineatura, nonchè un colore diverso da quello usato, sarebbe assolutamente fuori luogo. Ecco un motivo per formattare in modo diverso questi links.

 

Altro esempio:

Questo è invece un esempio di come alcuni links, usati in una lista verticale e formattati graficamente con puntatori e soprattutto un bordo inferiore, non necessitino della sottolineatura in quanto risulterebbe ridondante. Infatti si capisce bene che sono link cliccabili e che fanno parte di un menu: perchè ribadirlo con una nuova sottolineatura?

 

Invece:

Ecco invece il caso in cui la sottolineatura è necessaria a distinguere un link dal testo normale. E usare un colore che sia in tema con il sito, in questo caso, non stona e non discosta dall’idea di link, che è ribadita dalla sottolineatura. Pertanto ben vengano i colori che preferite, purchè usiate sempre e solo quelli nei link contenuti nei vostri testi (ad esclusione dei summenzionati menu verticali o orizzontali).

 

Detto ciò, vediamo come formattarli nel css.

Esistono per i link alcune cosiddette "pseudoclassi", cioè delle classi predefinite per quel tipo di tag (in questo caso A di link) e sono le seguenti:

• a:link  (stato del link base, ma deve essere usato solo per essere distinto dagli altri. se dobbiamo definire il link in modo generico, ad esempio usando sempre lo stesso colore per tutti gli stati, basta usare il tag senza pseudoclassi)

• a:visited (stato in cui il link è stato visitato)

• a:hover (stato in cui passiamo con il mouse sullo stesso)

• a:focus (stato in cui il link è selezionato tramite comandi via tastiera, ad esempio il tab)

• a:active (link attivo in tutti gli altri casi possibili)

E fate bene attenzione a segnalarle, nel vostro css, con questo preciso ordine, affinchè non vi siano conflitti e imprecisioni nella lettura degli stessi. Normalmente infatti, a meno che non abbiano stili completamente differenti, vengono associati con la stessa regola i link con pseudoclasse link e visited e gli altri tre insieme.

Che stili possiamo associare? I più disparati, segnaliamo un paio di esempi fra i più usati:

a{

color: red;

font-weight: bold;

}

a:link, a:visited {

text-decoration: none;

}

a:hover, a:focus, a:active {

text-decoration: underline;

}

In questo modo semplicemente abbiamo segnalato che tutti i links dovranno essere rossi e bold, e lo stato attivo dello stesso sarà evidenziato con una sottolineatura, mentre allo stato normale no.

Uno stile che si può usare in alternativa alla sottolineatura è il bordo:

a{

text-decoration: none;

border-bottom: 1px dotted #666666;

}

Provate e divertitevi!!

Fonte: Italianwebdesign