Lezione 6: 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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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.
Lezione 7: Identificazione e gruppi di elementi (class e id) >>