Som standard, textinnehåll som är länkad till HTML med hjälp av eller "ankare" -elementet har en understrykning. Ofta väljer webbdesigners att ta bort denna standardformat genom att ta bort understrykningen.
Orsaker till och mot understrykningen
Många designers bryr sig inte om utseendet på understruken text, särskilt i täta innehållsblock med många länkar. Alla dessa understrukna ord kan verkligen bryta läsflödet i ett dokument. Många har hävdat att dessa understrykningar faktiskt gör det svårare att skilja ord och läsa ord på grund av hur understrykningen förändrar de naturliga bokstäverna.
Det finns dock legitima fördelar med att behålla dessa understrykningar på textlänkar. När du till exempel bläddrar igenom stora textblock gör understrukna länkar i kombination med rätt färgkontrast det enkelt för läsare att genast skanna en sida och se var länkarna är.
Om du bestämmer dig för att ta bort länkar från texten (en enkel process som vi kommer att behandla inom kort), se till att du hittar sätt att utforma texten för att fortfarande skilja vad som är en länk från vad som är vanlig text. Detta görs oftast med
färgkontrast, men färg ensam kan utgöra ett problem för besökare med synstörningar som färgblindhet. Beroende på deras speciella form av färgblindhet kan kontrasten gå helt förlorad på dem, vilket hindrar dem från att se skillnaden mellan länkad och icke-länkad text. Det är därför den understrukna texten fortfarande anses vara det bästa sättet att visa länkar.Så hur stänger du av en understrykning om du fortfarande vill göra det? Eftersom detta är en visuell egenskap som vi är intresserade av kommer vi att vända oss till den del av vår webbplats som hanterar allt som är visuellt - CSS.
Använd Cascading Style Sheets för att stänga av understruken på länkar
I de flesta fall vill du inte stänga av en understrykning på bara en textlänk. Istället kräver din designstil sannolikt att du tar bort understrykningar från alla länkar. Du skulle göra detta genom att lägga till stilar i din externt stilark.
en {
text-dekoration: ingen;
}
Det är allt! Den enda enkla raden av CSS skulle stänga av understrykningen (som faktiskt använder CSS-egenskapen för "text-dekoration") på alla länkar.
Du kan också bli mer specifik med den här stilen. Om du till exempel bara vill stänga av understrykningen eller länkarna inuti "nav" -elementet kan du skriva:
nav a {
text-dekoration: ingen;
}
Nu skulle textlänkar på sidan få standardstreck, men de i navet skulle ta bort det.
En sak som många webbdesigners väljer att göra är att aktivera länken igen när någon svävar över texten. Detta skulle göras med: sväva CSS-pseudoklass, så här:
en {
text-dekoration: ingen;
}
a: sväva {
text-dekoration: understrykning;
}
Använda Inline CSS
Som ett alternativ till att göra ändringar i ett externt formatmall kan du också lägga till formatmallen direkt till själva elementet HTML.
Problemet med den här metoden är att den placerar stilinformation i din HTML-struktur, vilket inte är en bästa praxis. Stil (CSS) och struktur (HTML) bör hållas åtskilda.
Om du vill att alla webbplatsens textlänkar ska ta bort understrykningen och lägga till denna stilinformation till varje länk på individuell basis skulle innebära att en hel del extra markering läggs till på din webbplats koda. Denna siduppblåsning kan sakta ner webbplatsens laddningstid och göra den totala sidhanteringen mycket mer utmanande. Av dessa skäl är det att föredra att alltid vända sig till ett externt formatmall för alla sidstylingsbehov.
I avslutning
Så enkelt som det är att ta bort understruken från en webbsides textlänkar, bör du också vara medveten om konsekvenserna av att göra det. Även om det verkligen kan rensa ut på en sida, kan det göra det på bekostnad av den övergripande användbarheten. Ta hänsyn till detta nästa gång du överväger att ändra en sidas egenskaper för "text-dekoration".