Per impostazione predefinita, i browser Web hanno determinati stili CSS che applicano a specifici elementi HTML. Se non si sovrascrivono questi valori predefiniti con i fogli di stile del proprio sito, verranno applicati i valori predefiniti. Per i collegamenti ipertestuali, lo stile di visualizzazione predefinito è che qualsiasi testo collegato sarà blu e sottolineato. Il browser fa in modo che i visitatori di un sito possano vedere facilmente quale testo è collegato. Molti web designer non si preoccupano di questi stili predefiniti, specialmente quelli sottolineati. Fortunatamente, i CSS rendono facile cambiare l'aspetto di tali sottolineatura o rimuoverli completamente.
Rimozione della sottolineatura sui collegamenti di testo
Il testo sottolineato può essere più difficile da leggere che il testo non sottolineato. Inoltre, molti designer semplicemente non si preoccupano dell'aspetto dei collegamenti di testo sottolineati. In questi casi, è probabile che tu voglia rimuovere completamente questi sottotitoli.
Per rimuovere le sottolineature dai link di testo, si utilizzerà la decorazione del testo della proprietà CSS. Ecco il CSS che scriverebbe per fare questo:
a {decorazione del testo: nessuna; }
Con quella riga di CSS, rimuoverai la sottolineatura da tutti i link di testo. Anche se questo è uno stile molto generale (usa un selettore di elementi), ha ancora più specificità rispetto agli stili di browser predefiniti. Perché quegli stili predefiniti sono ciò che crea la sottolineatura per cominciare, questo è quello che devi sovrascrivere.
Un'attenzione a rimuovere le sottolineature
Visivamente, la rimozione delle sottolineature può essere esattamente ciò che si vuole realizzare, ma si dovrebbe essere cauti quando si fa anche questo. Indipendentemente dal fatto che ti piaccia l'aspetto dei link sottolineati o meno, non puoi obiettare che rendono ovvio quale testo sia collegato e quale no. Se togli sottolineature o modifichi il colore del collegamento blu predefinito, assicurati di sostituirli con stili che consentono ancora il testo collegato a risaltare. Questo renderà un'esperienza più intuitiva per i visitatori del tuo sito.
Non sottolineare i non-link
Un'altra cautela su collegamenti e sottolineature, non sottolinea il testo che non è un collegamento come modo per enfatizzarlo. Le persone si aspettano che il testo sottolineato sia un collegamento, quindi se si sottolinea il contenuto per aggiungere enfasi (anziché renderlo in grassetto o in corsivo), si invia il messaggio sbagliato e si confondono gli utenti del sito.
Cambia la sottolineatura su punti o trattini
Se vuoi mantenere il tuo link di testo sottolineato, ma cambia lo stile di quella sottolineatura dall'aspetto predefinito, che è una riga "soldi", puoi farlo anche tu. Invece di quella linea continua, puoi usare i punti per sottolineare i tuoi collegamenti. Per fare ciò, rimuoverai comunque la sottolineatura, ma la sostituirai con la proprietà di stile border-bottom:
a {decorazione del testo: nessuna; border-bottom: 1px punteggiato; }
Poiché hai rimosso la sottolineatura standard, quella tratteggiata è l'unica che viene visualizzata.
Puoi fare la stessa cosa per ottenere dei trattini. Basta cambiare lo stile border-bottom per tratteggiato:
a {decorazione del testo: nessuna; border-bottom: 1px tratteggiato; }
Cambia il colore della sottolineatura
Un altro modo per attirare l'attenzione sui tuoi link è cambiare il colore della sottolineatura. Assicurati solo che il colore si adatti alla tua combinazione di colori.
a {decorazione del testo: nessuna; border-bottom: 1px rosso fisso; }
Doppia sottolineatura
Il trucco per usare le doppie sottolineatura è che devi cambiare la larghezza del bordo. Se crei un bordo largo 1 pixel, ti ritroverai con una doppia sottolineatura che sembra una singola sottolineatura.
a {decorazione del testo: nessuna; border-bottom: 3px double; }
Puoi anche usare la sottolineatura esistente per fare una doppia sottolineatura con altre caratteristiche, come ad esempio una delle linee punteggiate:
a {border-bottom: 1px double; }
Non dimenticare gli stati dei collegamenti
Puoi aggiungere lo stile border-bottom ai tuoi link in diversi stati come: hover,: active, o: visited. Questo può creare una bella esperienza di stile "rollover" per i visitatori quando usi questa pseudo classe "al passaggio del mouse". Per fare apparire una seconda sottolineatura puntata quando passi il mouse sul link:
a {decorazione del testo: nessuna; } a: hover {border-bottom: 1px punteggiato; }
Articolo originale di Jennifer Krynin. A cura di Jeremy Girard
