Definire stili dei link multipli in una stessa pagina
In un articolo precedente abbiamo imparato a definire lo stile e il comportamento dei link tramite i CSS sfruttando le quattro pseudoclassi a:link, a:visited, a:hover e a:active. Le esigenze poste in fase di progettazione e realizzazione della pagina possono rendere talvolta insufficiente questa soluzione che pure consente di superare alcune limitazioni dei browser.
Per capire perchè basta osservare per un attimo questa tabella:
Immaginiamo di dover usare la colonna sinistra (sfondo blu) per un menu e quella destra (sfondo grigio) per il testo principale della pagina. Impostiamo quindi le quattro pseudoclassi per definire lo stile dei link. Apriamo il Blocco Note, digitiamo il codice e salviamo il file come stile.css:
A:LINK {
color : Blue;
text-decoration: underline
}
A:VISITED {
color : Purple;
text-decoration: underline
}
A:HOVER {
color : Red;
text-decoration : underline;
}
A:ACTIVE {
color : Red;
text-decoration: underline }
Il risultato lo potrete vedere in questa tabella:
È evidente che scegliere come colore il blue per la colonna sinistra non è una scelta positiva. Ciò di cui abbiamo bisogno è naturalmente un colore chiaro. Ma così facendo il collegamento sarebbe poco evidente e leggibile nella colonna grigia!
Dove non arrivano le pseudoclassi arrivano le classi!
Non c'è bisogno di dannarsi l'anima alla ricerca di colori compatibili per le due colonne, la potenza dei CSS ci aiuta ad uscire con successo dall'empasse e con soluzioni tecnicamente impeccabili.
La soluzione, nel nostro caso, ha un nome: classe. Una classe, nel linguaggio dei CSS, si può definire come una sorta di stile personalizzato che può essere applicato a qualunque elemento della pagina. Per gli utenti più smaliziati di Word o di altri software di desktop publishing il concetto non dovrebbe suonare nuovo. Per chi invece è abituato a misurarsi con le ristrettezze e i vincoli dell'html, sono una risorsa da conoscere e sfruttare, quasi una liberazione.
Un esempio chiarirà meglio il concetto:
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF
}
Con questo codice ho definito una nuova classe chiamata menu (il nome di una classe in un CSS va sempre preceduto dal punto!) e ho definito le proprietà di alcuni elementi: in particolare l'aspetto del font e il colore (bianco). A questo punto posso applicare questo stile a qualunque elemento della pagina. Volendo applicarlo alla colonna sinistra della nostra tabella, quella con il menu, mi basterà aggiungere al tag <td> l'indicazione della classe:
<td bgcolor="#000066" class="menu">
Allo stesso modo posso creare una classe per la colonna destra chiamata .testo:
.testo { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000}
e applicarla al tag <td> corrispondente:
<td bgcolor="#CCCCCC" class="testo">.
Così facendo abbiamo però fatto solo il primo passo per risolvere il problema dei link. Applicando le classi .menu e .testo alle due colonne della tabella avremo testo bianco in quella sinistra e nero nella destra, testo ben visibile dunque. Ma appena definiamo una parte del testo come link essa assumerà i valori stabiliti con le pseudoclassi e saremmo al punto di partenza!
La soluzione ottimale sta nella possibilità di combinare in un foglio di stile due selettori, nel nostro caso la classe e la pseudoclasse per la definizione degli stili di link. Ecco il codice per realizzare i selettori contestuali da applicare alla colonna sinistra della tabella:
.menu a:link { color: #FFFFFF; text-decoration: none}
.menu a:visited { color: #FF00FF; text-decoration: none}
.menu a:hover { color: #FF0000; text-decoration: underline}
.menu a:active { color: #FF0000; text-decoration: underline}
In questo modo farò sì che che nelle parti della pagina cui ho applicato la classe .menu (in questo caso la colonna sinistra) non venga ereditato lo stile dei link definito con le pseudoclassi, ma quello stabilito con i selettori contestuali visti sopra. Il risultato lo lo potrete vedere in questa tabella
E questo è il codice del CSS:
a:link { color: Blue; text-decoration: underline}
a:visited { color: Purple; text-decoration: underline}
a:hover { color: Red; text-decoration: underline}
a:active { color: Red; text-decoration: underline}
.menu { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF}
.testo { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000}
.menu a:link { color: #FFFFFF; text-decoration: none}
.menu a:visited { color: #FF00FF; text-decoration: none}
.menu a:hover { color: #FF0000; text-decoration: underline}
.menu a:active { color: #FF0000; text-decoration: underline}
Questa soluzione si rivela utilissima soprattutto quando si decide di realizzare barre di navigazione o menu testuali: essi potranno così avere uno stile che li differenzi dal resto della pagina non solo negli attributi del testo, ma anche nell'aspetto dei collegamenti.
Due siti che fanno un uso estensivo di questa tecnica sono per esempio quello di IOL e di ZDNet, il portale di news tecnologiche del gruppo Ziff Davis. In quest'ultimo caso potete notare come le potenzialità di questa tecnica abbiano consentito di realizzare la barra di navigazione in alto e quella in basso in puro stile testuale e usando colori (bianco e giallo) ben evidenti sulle tonalità azzurro/blu dello sfondo. Per il resto della pagina, con sfondo bianco, è stata invece usata per le diverse impostazioni dei link una combinazione di blu e rosso (per l'hover).
Bene, credo che questo e il precedente articolo sugli stili dei link abbiano fornito un assaggio delle potenzialità dei CSS, uno strumento che andrebbe però trattato come certi giocattoli: se usati bene ti fanno divertire, ma possono anche diventare pericolosi. Quindi, avanti con i CSS, ma sempre con giudizio!
