Per impostazione predefinita, il contenuto del testo che è collegato all'HTML usando l'elemento "anchor" è in stile con una sottolineatura. Spesso, i web designer scelgono di rimuovere questo stile predefinito rimuovendo la sottolineatura.
Molti designer non si preoccupano dell'aspetto del testo sottolineato, specialmente in blocchi densi di contenuti con molti link. Tutte queste parole sottolineate possono davvero rompere il flusso di lettura di un documento. Molti hanno sostenuto che tali sottolineatura rendono effettivamente le parole più difficili da distinguere e leggere rapidamente a causa del modo in cui la sottolineatura modifica le forme delle lettere naturali.
Esistono tuttavia dei legittimi vantaggi nel mantenere queste sottolineature sui collegamenti testuali. Ad esempio, quando si sfogliano grandi blocchi di testo, i collegamenti sottolineati e il contrasto cromatico appropriato facilitano l'esplorazione immediata di una pagina da parte dei lettori e la visualizzazione dei collegamenti.
Se decidi di rimuovere i collegamenti dal testo (un processo semplice che tratteremo a breve), assicurati di trovare dei modi per applicare lo stile a quel testo per differenziare ancora un link da ciò che è testo normale. Questo è il più delle volte fatto con il suddetto contrasto di colore, ma il colore da solo può rappresentare un problema per i visitatori con disabilità visive come il daltonismo. A seconda della loro particolare forma di daltonismo, il contrasto può essere completamente perso su di essi, impedendo loro di vedere la differenza tra testo collegato e non collegato. Questo è il motivo per cui il testo sottolineato è ancora considerato il modo migliore per mostrare i collegamenti.
Quindi, come si disattiva una sottolineatura se si desidera continuare a farlo? Poiché questa è una caratteristica visiva di cui ci occupiamo, ci rivolgeremo alla parte del nostro sito Web che gestisce tutte le cose visive - i CSS.
Utilizzare i fogli di stile CSS per disattivare le sottolineature sui collegamenti
Nella maggior parte dei casi, non stai cercando di disattivare una sottolineatura su un solo link di testo. Invece, lo stile di progettazione probabilmente richiede la rimozione di sottolineatura da tutti i collegamenti. Lo faresti aggiungendo stili al tuo foglio di stile esterno.
a { decorazione del testo: nessuna;}
Questo è tutto! Questa semplice linea di CSS disattiva la sottolineatura (che in realtà utilizza la proprietà CSS per "text-decoration") su tutti i link. Potresti anche diventare più specifico con questo stile. Ad esempio, se si desidera disattivare solo la sottolineatura oi collegamenti all'interno dell'elemento "nav", è possibile scrivere: nav a { decorazione del testo: nessuna;}
Ora, i link di testo nella pagina otterrebbero la sottolineatura predefinita, ma quelli nel nav lo avrebbero rimosso. Una cosa che molti web designer scelgono di fare è di "riaccendere" il link quando qualcuno aleggia sul testo. Questo sarebbe stato fatto usando la pseudo-classe: hover CSS, come questa: a { decorazione del testo: nessuna;}a: hover { text-decoration: underline;} In alternativa alle modifiche a un foglio di stile esterno, potresti anche aggiungere gli stili direttamente all'elemento stesso in HTML. Il problema con questo metodo è che inserisce le informazioni di stile all'interno della struttura HTML, che non è una best practice. Stile (CSS) e struttura (HTML) dovrebbero essere tenuti separati. Se si desidera che tutti i collegamenti di testo di un sito rimuovano la sottolineatura, aggiungere queste informazioni di stile a ciascun collegamento su base individuale significherebbe una buona quantità di markup extra aggiunto al codice del proprio sito. Questa pagina gonfia può rallentare il tempo di caricamento di un sito e rendere la gestione complessiva delle pagine molto più impegnativa. Per questi motivi, è preferibile rivolgersi sempre a un foglio di stile esterno per tutte le esigenze di stile di pagina. Per quanto sia facile rimuovere la sottolineatura dai link di testo di una pagina web, dovresti anche essere consapevole delle conseguenze di ciò. Anche se può effettivamente ripulire l'aspetto di una pagina, può farlo a scapito della fruibilità generale. Prendi questo in considerazione la prossima volta che consideri di modificare le proprietà di "text-decoration" di una pagina. Uso di CSS in linea
In chiusura
