Lezione06: Link

Puoi applicare tutto quello che hai imaprato nelle lezioni precedenti anche ai link (cioè, cambiare il colore, i font, la sottolineatura, ecc.). La cosa nuova è che i CSS ti permettono di definire queste proprietà in modo diverso a seconda se il link è stato visitato o no, è attivo o se il cursore è proprio sopra il link. In questo modo è possibile aggiungere un po' di fantasia ed utili effetti al tuo sito web. Per controllare questi effetti devi usare quella che viene chiamata una pseudo-classe (pseudo-classes).

Cosa è una pseudo-classe?

Una pseudo-classe ti permett di tenere in considerazione condizioni o eventi diversi quando definisci una proprietà epr una tag HTML.

Guardiamo un esempio. Come sai, in HTML i link vengono specificati con il tag <a>. Possiamo quindi usare a come selettore nei CSS:

 a {
  color: blue;
 }
 
 

Un link può assumere diversi stati. Per esempio, può essere già stato visitato o no. Puoi usare una pseudo classe per asssegnare uno stile diverso ai link visitati e ai link non ancora visitati.

 a:link {
  color: blue;
 }

 a:visited {
  color: red;
 }
 
 

Usa a:link e a:visited rispettivamente per i link non ancora visitati e per i link già visitati. I link attivi avranno come pseudo-classe a:active, mentre a:hover verrà usato per definire il cursore sopra il link.

Adesso vedremo in dettaglio ciascuna delle quattro pseudo-classi.

Pseudo-classe: link

La pseudo-classe :link viene usata per i link che non sono stati ancora visitati dall'utente.

Nel codice di esempio riportato sotto i link non visitati appariranno di colore blu chiaro.

 a:link {
  color: #6699CC;
 }
 
 

• Visualizza l'esempio

Pseudo-classe: visited

La pseudo-classe :visited viene usata per i link che sono già stati visitati dall'utente. Per esempio, nel codice sotto faremo tutti i link visitati con un colore viola scuro:

 a:visited {
  color: #660099;
 }
 
 

• Visualizza l'esempio

Pseudo-classe: active

La pseudo-classe :active viene usata per i link attivi.

Nell'esempio inseriamo un colore di sfondo giallo per i link attivi:

 a:active {
  background-color: #FFFF00;
 }
 
 

• Visualizza l'esempio

Pseudo-classe: hover

La pseudo-classe :hover viene usata quando il cursore del mouse passa sopra ad un link.

Questa proprietà può essere usata per creare un effetto interessante. Per esempio, se vogliamo tutti i link arancioni e in italico quando ci passiamo sopra con il mouse, allora il nostro CSS dovrebbe essere:

 a:hover {
  color: orange;
  font-style: italic;
 }
 
 

• Visualizza l'esempio

Esempio 1: quando il cursore è sopra un link

E'molto diffuso creare effetti diversi quando il cursore passa sopra un link. Guarderemo quindi altri esempi legati alla pseudo-classe :hover.

Esempio 1a: Spazio tra i caratteri

Come ricorderai dalla lezione 5, lo spazio tra i caratteri può essere modificato usando la proprietà letter-spacing. E' possibile applicare questa proprietà ai link per creare degli effetti speciali:

 a:hover {
  letter-spacing: 10px;
  font-weight:bold;
  color:red;
 }
 
 

• Visualizza l'esempio

Esempio 1b: MAIUSCOLE e minuscole

Nella lezione 5 abbiamo visto anche la proprietà text-transform che permette di rendere le lettere maiuscole o minuscole. Anche questa proprietà può essere usata per creare un effetto particolare sui link:

 a:hover {
  text-transform: uppercase;
  font-weight:bold;
  color:blue;
  background-color:yellow;
 }
 
 

• Visualizza l'esempio

I due esempi sopra ti danno un'idea delle infinite possibilità che si hanno nel combinare insieme le diverse proprietà. Puoi creare i tuoi effetti speciali - prova!

Esempio 2: Elimina la sottolineatura dai link

Una domanda molto frequente è come si fa per eliminare la sottolineatura dai link?

Dovresti considerare attentemente se è necessario eliminare la sottolineatura dei link poichè questo potrebbe diminuire significativamente l'usabilità del tuo sito web. Le persone sono abituate a vedere i link sottolineati di blu e sanno che possono cliccarci sopra. Perfino mia madre lo sa! Se cambi la sottolineatura e il colore dei link ci potrebbero essere dei casi in cui l'utente si potrebbe confondere e quindi non sfruttare a pieno tutti i benefici del contenuto del tuo sito.

Detto questo è molto semplice eliminare la sottolineatura dei link. Come ricorderai dalla lezione 5, la proprietà text-decoration può essere usata per definire se volgiamo o meno la sottolineatura del testo. Per rimuovere la sottolineatura devi semplicemente definire il valore di text-decoration a none.

 a {
  text-decoration:none;
 }
 
 

In alternativa puoi definire la proprietà text-decoration insieme alle altre proprietà per tutte le quattro pseudo-classi.

 a:link {
  color: blue;
  text-decoration:none;
 }

 a:visited {
  color: purple;
  text-decoration:none;
 }

 a:active {
  background-color: yellow;
  text-decoration:none;
 }

 a:hover {
  color:red;
  text-decoration:none;
 }
 
 

• Visualizza l'esempio

Riepilogo

In questa lezione hai imparato ad usare le pseudo-classi insieme ad alcune delle proprietà viste nelle lezioni precedenti. Questo dovrebbe darti un'idea di alcune delle possibilità fornite dai CSS.

Nella prossima lezione ti insegneremo a definire le proprietà per elementi specifici o gruppi di elementi.

Postato sotto: Lezioni CSS