3.40
Come Cambiare Colore e Stile ai Link
In questo articolo, esamineremo le diverse possibilità fornite dai CSS per personalizzare l’aspetto dei link sul web. La gestione dell’aspetto dei link non è solo una questione di estetica, ma anche di usabilità, dato che i link sono lo strumento principale di navigazione in un ambiente ipertestuale come il web. Dopo una panoramica sulle regole essenziali per la formattazione dei link utilizzando CSS, esploreremo gli aspetti relativi all’usabilità, fornendo suggerimenti sul colore e sugli attributi del testo.
Come i browser definiscono l’aspetto dei link Uno degli utilizzi più comuni dei CSS è la definizione dell’aspetto e del comportamento dei link all’interno di una pagina web. Questo permette di superare le limitazioni imposte dai browser.
I principali browser seguono uno standard consolidato nella rappresentazione dei link. A meno che non vengano specificati colori personalizzati durante la creazione del documento, un link non visitato è di colore blu, mentre un link visitato è di colore viola. Netscape e Internet Explorer consentono di modificare queste impostazioni dalle rispettive opzioni delle preferenze. Netscape consente di cambiare solo il colore e di scegliere se mostrare i link con o senza sottolineatura. Internet Explorer offre la possibilità di selezionare il colore dei link e di decidere quando applicare la sottolineatura ai link: mai, al passaggio del mouse o sempre.
Prima dell’ampia diffusione dei CSS, era possibile assegnare colori specifici ai link utilizzando gli attributi link, vlink e alink all’interno del tag <body>, per indicare rispettivamente i link non visitati, i link visitati e i link attivi. Il codice seguente mostrava un esempio di come venivano applicati questi attributi:
<body link="#0000FF" vlink="#FF00FF" alink="#FF0000"> Tuttavia, questi attributi sono considerati obsoleti secondo le specifiche HTML 4.01 del W3C. La tendenza generale è quella di separare il contenuto dagli elementi di formattazione, inclusi gli stili, nei fogli di stile.
Perché personalizzare l’aspetto dei link Come accennato, la personalizzazione dell’aspetto dei link non riguarda solo l’estetica. È necessario modificare i colori predefiniti dei link quando si utilizzano colori o immagini specifiche per lo sfondo di una pagina o di una tabella al fine di garantire una corretta visualizzazione degli elementi fondamentali.
I CSS consentono di assegnare colori, decorazioni del testo, font e sfondi diversi in base allo stato del link. Nella terminologia dei CSS, esistono quattro configurazioni possibili per i link, tutte rientranti nella categoria delle pseudoclassi, che definiscono uno stile per un elemento in base a determinate condizioni. La sintassi è la seguente: elemento:condizione. Le quattro possibili condizioni per i link nelle specifiche dei CSS sono:
a:link: Definisce lo stile di un link non ancora visitato.a:visited: Definisce lo stile di un link visitato, ossia presente nella cronologia del browser.a:hover: Definisce lo stile di un link quando l’utente posiziona il cursore su di esso.a:active: Definisce lo stile di un link mentre il tasto del mouse è premuto e non ancora rilasciato.
Per garantire la compatibilità, è importante definire queste pseudoclassi nell’ordine sopra indicato: link, visited, hover, active.
Limitazioni Le pseudoclassi hover e active non sono supportate da Netscape 4. Tuttavia, la loro definizione in un foglio di stile non causa problemi, poiché Netscape 4 ignora semplicemente queste specifiche.
Come procedere Per creare un foglio di stile CSS, esistono strumenti dedicati come StyleMaster Pro e TopStyle 2. Gli editor HTML di alta qualità dispongono di opzioni e funzionalità per assistere l’utente nella creazione di fogli di stile. Tuttavia, per il nostro esempio, il Blocco Note di Windows è sufficiente, poiché i CSS sono semplici file di testo.
Ecco come procedere con il Blocco Note:
- Aprire il Blocco Note.
- Inserire il seguente codice:
A:link { color : Blue; text-decoration: none;
} A:visited { color : Purple; text-decoration: none;
} A:hover { color : Red; text-decoration : underline;
} A:active { color : Red; text-decoration : underline;
} - Salvare il file con il nome “stile.css”.
Per incorporare il file CSS nella pagina HTML, utilizzare il seguente codice all’interno del tag <head>:
<link rel="stylesheet" type="text/css" href="stile.css"> Commentiamo il codice. Le regole CSS definite sopra assegnano i seguenti stili ai link:
A:link: I link non visitati saranno di colore blu e senza sottolineatura.A:visited: I link visitati saranno di colore viola e senza sottolineatura.A:hover: Quando il mouse passa sopra un link, il testo diventerà rosso e verrà sottolineato.A:active: Quando un link viene cliccato e mantenuto premuto, il testo diventerà rosso e verrà sottolineato.
È possibile personalizzare ulteriormente questi stili modificando i colori, le decorazioni del testo e altri attributi come il grassetto.
Tuttavia, è importante notare che definire font e dimensioni del carattere specifici per i link potrebbe non essere necessario, poiché spesso questi attributi vengono definiti a livello di elementi più ampi, come il <body>, i paragrafi o le tabelle. Inoltre, è fondamentale mantenere una coerenza visiva all’interno del sito.
Più tecnicamente, nell’esempio sopra, per ciascuna delle quattro pseudoclassi (A:link, A:visited, A:hover, A:active), abbiamo definito all’interno delle parentesi graffe due proprietà principali: color e text-decoration. È possibile assegnare il valore desiderato a ciascuna di queste proprietà in base alle vostre preferenze. Ecco cosa rappresentano queste proprietà:
color: Questa proprietà definisce il colore del testo dei link. Ad esempio, “color: Blue” imposta il colore del testo su blu per i link nella condizione specificata.text-decoration: Questa proprietà gestisce la decorazione del testo, ovvero gli stili aggiuntivi applicati al testo dei link. Ci sono diversi valori possibili:none: Rimuove qualsiasi decorazione dal testo, come sottolineature o linee attraverso il testo.underline: Aggiunge una sottolineatura al testo dei link.overline: Disegna una linea sopra il testo.line-through: Traccia una linea che attraversa il testo.blink: Causa un effetto di lampeggio del testo del link, anche se stilisticamente è poco comune e generalmente sconsigliato.
Nell’esempio fornito, è stato fatto un uso efficace di queste proprietà per creare stili differenti per i link in base al loro stato. I link non visitati sono in blu senza sottolineatura, i link visitati sono viola senza sottolineatura, i link cambiano colore in rosso e vengono sottolineati quando il mouse passa sopra, e diventano nuovamente rossi e sottolineati quando vengono cliccati e mantenuti premuti.
Quando si personalizzano gli stili dei link, è importante mantenere un equilibrio tra l’estetica e l’usabilità. La sottolineatura è universalmente riconosciuta come indicazione di un link, ma la sua utilità potrebbe variare a seconda delle preferenze e delle esigenze specifiche del sito. La scelta tra sottolineare o meno i link è una decisione discrezionale.
Inoltre, è importante notare che definire il tipo di carattere e la dimensione specifici per i link potrebbe non essere sempre necessario, poiché spesso questi attributi sono definiti a livello di elementi più ampi, come il <body>, i paragrafi o le tabelle. Mantenere la coerenza visiva all’interno del sito è fondamentale per garantire un’esperienza utente uniforme.
Infine, distinguere i link visitati da quelli non visitati con colori diversi è una pratica comune, con i link non visitati generalmente più evidenti. La scelta del colore dei link è soggettiva, ma è importante che sia in linea con il tema generale del sito e che non confonda i visitatori. La regola che suggerisce il colore blu per i link, proposta da Jacob Nielsen, potrebbe essere considerata eccessiva, ma la chiarezza nella differenziazione tra link visitati e non visitati è essenziale.