Som standard har webbläsare vissa CSS-format som de gäller för specifika HTML-element. Om du inte skriver över dessa standardvärden med webbplatsens egna stilark, gäller standardvärdena. För hyperlänkar är standard visningsstil att varje länkad text blir blå och understryks. Webbläsaren gör det så att en webbplats besökare enkelt kan se vilken text som är länkad. Många webbdesigners bryr sig inte om dessa standardstilar, särskilt de som understryker. Lyckligtvis gör CSS det enkelt att ändra utseendet på dem som understryker eller tar bort dem helt.
Ta bort underskriften på textlänkar
Understruken text kan vara mer utmanande att läsa den icke-understrukna texten. Dessutom bryr sig många designers helt enkelt inte om utseendet på understrukna textlänkar. I dessa fall kommer du troligen att vilja ta bort dessa understreger helt och hållet.
För att ta bort understruken från textlänkar använder du CSS-egenskapens textdekoration. Här är CSS du skulle skriva för att göra detta:
en {text-decoration: none; }
Med den ena raden av CSS skulle du ta bort underskriften från alla textlänkar. Även om det här är en mycket generell stil (den använder en elementväljare), har den fortfarande mer specificitet än standardwebbläsarens stilar gör. Eftersom de här standardstilarna är vad som skapar understruken till att börja med, det är vad du behöver skriva över.
En försiktighet om att ta bort understrukningar
Visuellt kan borttagning av understreck vara exakt vad du vill uppnå, men du bör vara försiktig när du gör det också. Oavsett om du gillar utseendet på understrukna länkar eller inte, kan du inte argumentera för att de gör det uppenbart om vilken text som är länkad och vilken som inte är. Om du tar bort understryker eller ändrar den ursprungliga blå länkfärgen, bör du se till att du byter ut dem med stilar som fortfarande tillåter länkad text att sticka ut. Detta kommer att göra en mer intuitiv upplevelse för webbplatsens besökare.
Undersök inte icke-länkar
En annan försiktighet om länkar och understryker, understryker inte text som inte är en länk som ett sätt att betona det. Människor har kommit att förvänta sig understruken text som en länk, så om du understryker innehåll för att lägga till betoning (istället för att göra det djärvt eller kursivera det) skickar du felmeddelandet och kommer att förvirra webbplatsanvändare.
Ändra underlaget till prickar eller streck
Om du vill behålla din textlänk understryker du, men ändrar stilen på den understrykning från standardlooken, vilken är en "soldat" -linje, så kan du göra det också. I stället för den solida linjen kan du använda prickar för att understryka dina länkar. För att göra detta kommer du fortfarande att ta bort underlaget, men du kommer att ersätta det med egenskapen längst ner i stilen:
en {text-decoration: none; gränsbotten: 1px prickad; }
Eftersom du har tagit bort standardinstruktionen är den prickade den enda som visas.
Du kan göra samma sak för att få bindestreck. Ändra bara gränsbotten stilen till stupad:
en {text-decoration: none; border-bottom: 1px stupad; }
Byt underfärg
Ett annat sätt att uppmärksamma dina länkar är att ändra understreckets färg. Se bara till att färgen passar med ditt färgschema.
en {text-decoration: none; gränsbotten: 1px solid röd; }
Dubbel understreck
Tricket att använda dubbla understreck är att du måste ändra bredden på gränsen. Om du skapar en bredd på 1 px kommer du att sluta med en dubbel understrukning som ser ut som en enda understrukning.
en {text-decoration: none; gränsbotten: 3px dubbel; }
Du kan också använda den befintliga understruken för att göra en dubbel understregning med andra funktioner, till exempel en av linjerna prickade:
en {border-bottom: 1px double; }
Glöm inte länstaterna
Du kan lägga till gränsbotten stilen till dina länkar i olika stater som: svängare,: aktiv eller: besökta. Detta kan skapa en trevlig "rollover" stilupplevelse för besökare när du använder den pseudoklassen "sväva". För att göra en andra prickad undertryckning visas när du svävar över länken:
en {text-decoration: none; } a: svävar {gränsbotten: 1px prickad; }
Originalartikel av Jennifer Krynin. Redigerad av Jeremy Girard
