Skip to main content

Så här tar du bort understruken från länkar

Teachers, Editors, Businessmen, Publishers, Politicians, Governors, Theologians (1950s Interviews) (April 2025)

Teachers, Editors, Businessmen, Publishers, Politicians, Governors, Theologians (1950s Interviews) (April 2025)
Anonim

Som standard är textinnehåll som är länkat till HTML med hjälp av elementet eller "ankar" utformat med en underlinje. Ofta väljer webdesigners att ta bort denna standard styling genom att ta bort underlaget.

Många designers bryr sig inte om utseendet på understruken text, speciellt i täta block av innehåll med massor av länkar. Alla dessa understrukna ord kan verkligen bryta läsflödet i ett dokument. Många har hävdat att de som understryker faktiskt gör ord svårare att skilja och läsa snabbt på grund av det sätt som understryker förändringar av de naturliga brevformerna.

Det finns dock legitima fördelar med att behålla dessa understrukningar på textlänkar. När du till exempel tittar igenom stora textblock, understrukna länkar kopplade till rätt färgkontrast gör det lätt för läsarna 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 täcka inom kort), se till att du hittar sätt att utforma den texten för att fortfarande skilja vad som är en länk från vad som är vanlig text. Detta görs oftast med den ovannämnda färgkontrasten, men färg ensam kan utgöra ett problem för besökare med synskador som färgblindhet. Beroende på deras speciella form av färgblindhet kan kontrasten vara helt förlorad på dem, för att hindra dem från att se skillnaden mellan länkad och obelänkt 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 undersökning om du fortfarande vill göra det? Eftersom det här är en visuell egenskap som vi är bekymrade över, kommer vi att vända oss till den del av vår hemsida som hanterar allt visuellt - CSS.

Använd Cascading Style Sheets för att stänga av understrukena på länkar

I de flesta fall ser du inte ut att slänga en underskrift på bara en textlänk. I stället kräver din designstil sannolikt att du tar bort understreckningar från alla länkar. Du skulle göra det genom att lägga till stilar till ditt externa stilark.

a { text-dekoration: ingen;}

Det är allt! Den ena enkla raden av CSS skulle stänga av underskriften (som faktiskt använder CSS-egenskapen för "text-dekoration") på alla länkar.

Du kan också få mer specifika med denna stil. Om du till exempel bara vill stänga av underskriften eller länkarna inuti "nav" -elementet kan du skriva:

nav a { text-dekoration: ingen;}

Nu skulle textlänkarna på sidan få standardinställningen, men de i naven skulle ha tagit bort den.

En sak som många webdesigners väljer att göra är att slå länken tillbaka "på" när någon svänger över texten. Detta skulle göras med hjälp av: hover CSS pseudoklass, så här:

a { text-dekoration: ingen;}a: svävar { text-decoration: underline;}

Använda Inline CSS

Som ett alternativ till att göra ändringar i ett externt stilark, kan du också lägga till stilar direkt till själva elementet i HTML.

Problemet med den här metoden är att det placerar stilinformation i din HTML-struktur, vilket inte är en bra metod. Style (CSS) och struktur (HTML) ska hållas separata.

Om du vill att alla textlänkar för en webbplats ska ta bort underskriften, skulle det medföra att en viss extra markup läggs till i din webbplats kod, om du lägger till den här stilinformationen för varje länk individuellt. Den här sidan blockerar kan sakta ner en webbplatsens laddningstid och göra övergripande sidhantering mycket mer utmanande. Av dessa anledningar är det bättre att alltid vända sig till ett externt stilark för alla sidstilpassningsbehov.

I stängning

Så enkelt som det är att ta bort underskriften från en webbsidans textlänkar, bör du också vara medveten om konsekvenserna av att göra det. Även om det verkligen kan städa upp en sidas utseende kan det göra det på bekostnad av övergripande användbarhet. Tänk på detta när du överväger att ändra en sidas "text-decoration" -egenskaper.