Som standard tekstinnhold som er knyttet til HTML ved hjelp av eller "anker" -elementet er stylet med en understreking. Ofte velger webdesignere å fjerne denne standardstilen ved å fjerne understrekingen.
Årsaker til og mot understrekingen
Mange designere bryr seg ikke om utseendet til understreket tekst, spesielt i tette innholdsblokker med mange lenker. Alle disse understrekede ordene kan virkelig bryte lesestrømmen til et dokument. Mange har hevdet at disse understrekningene faktisk gjør det vanskeligere å skille ord og lese ord på grunn av måten understreking endrer de naturlige bokstavformene.
Det er imidlertid legitime fordeler med å beholde disse understrekningene på tekstlenker. Når du for eksempel blar gjennom store tekstblokker, gjør understregede lenker kombinert med riktig fargekontrast det enkelt for leserne å umiddelbart skanne en side og se hvor lenkene er.
Hvis du bestemmer deg for å fjerne lenker fra teksten (en enkel prosess som vi snart vil dekke), må du finne måter å style den teksten for å fremdeles skille hva som er en lenke fra hva som er ren tekst. Dette gjøres oftest med
fargekontrast, men farge alene kan utgjøre et problem for besøkende med synshemming som fargeblindhet. Avhengig av deres spesielle form for fargeblindhet, kan kontrasten gå tapt helt på dem, og hindre dem i å se forskjellen mellom koblet og ikke-koblet tekst. Dette er grunnen til at den understrekede teksten fremdeles regnes som den beste måten å vise lenker på.Så hvordan slår du av en understreking hvis du fortsatt vil gjøre det? Siden dette er en visuell egenskap vi er opptatt av, vil vi vende oss til den delen av nettstedet vårt som håndterer alt som er visuelt - CSS.
Bruk Cascading Style Sheets for å slå av understrekningene på koblinger
I de fleste tilfeller ønsker du ikke å slå av en understreking på bare en tekstlenke. I stedet krever designstilen din sannsynligvis at du fjerner understrekninger fra alle koblinger. Du vil gjøre dette ved å legge til stiler i din eksternt stilark.
en {
tekstdekorasjon: ingen;
}
Det er det! Den ene enkle linjen av CSS ville slå av understrekningen (som faktisk bruker CSS-egenskapen til "tekstdekorasjon") på alle koblinger.
Du kan også bli mer spesifikk med denne stilen. Hvis du for eksempel bare vil slå av understreken eller koblingene inne i "nav" -elementet, kan du skrive:
nav a {
tekstdekorasjon: ingen;
}
Nå vil tekstlenker på siden få standard understreking, men de i navet vil ha det fjernet.
En ting mange webdesignere velger å gjøre er å slå lenken på igjen når noen svever over teksten. Dette vil bli gjort ved å bruke: hover CSS pseudoklasse, som dette:
en {
tekstdekorasjon: ingen;
}
a: sveve {
tekstdekorasjon: understrek;
}
Bruke Inline CSS
Som et alternativ til å gjøre endringer i et eksternt stilark, kan du også legge til stilene direkte til selve elementet i HTML.
Problemet med denne metoden er at den plasserer stilinformasjon i HTML-strukturen, noe som ikke er en god praksis. Stil (CSS) og struktur (HTML) bør holdes adskilt.
Hvis du vil at alle nettstedets tekstlenker skal fjerne understreken, og legge til denne stilinformasjonen til hver lenke på individuell basis vil bety at det legges til ganske mye ekstra markering på nettstedets kode. Denne sideoppblåsningen kan redusere belastningstiden til et nettsted og gjøre den generelle sideadministrasjonen mye mer utfordrende. Av disse grunner er det å foretrekke å alltid slå til et eksternt stilark for alle sidestylingsbehov.
I Avslutning
Så enkelt som det er å fjerne understrekningen fra en nettsides tekstlenker, bør du også være oppmerksom på konsekvensene av å gjøre det. Selv om det faktisk kan rydde opp i utseendet på en side, kan det gjøre det på bekostning av total brukervennlighet. Ta hensyn til dette neste gang du vurderer å endre en sides "tekstdekorasjon" -egenskaper.