Som standard har webbrowsere visse CSS-stilarter, som de gælder for specifikke HTML-elementer. Hvis du ikke overskriver disse standardindstillinger med dit websteds eget stilark, gælder standardindstillingerne. For hyperlinks er standard visningsstil, at enhver linket tekst bliver blå og understreget. Browseren gør dette, så et websteds besøgende nemt kan se, hvilken tekst der er linket. Mange webdesignere er ligeglade med disse standardstile, især de understreger. Heldigvis gør CSS det nemt at ændre udseendet af dem understreger eller fjerner dem helt.
Fjernelse af understreget på tekstlinks
Understreget tekst kan være mere udfordrende at læse den ikke-understregede tekst. Derudover er mange designere ikke ligeglad med udseendet af understregede tekstforbindelser. I disse tilfælde vil du sandsynligvis vil fjerne disse understreger helt og holdent.
For at fjerne understregerne fra tekstlinks, bruger du CSS-ejendoms tekstdekoration. Her er CSS du ville skrive for at gøre dette:
en {tekst-dekoration: ingen; }
Med den ene linje af CSS ville du fjerne understreget fra alle tekstforbindelser. Selv om dette er en meget generel stil (den bruger en elementvælger), har den stadig mere specificitet end standard browsers stilarter gør. Fordi disse standardstile er, hvad der skaber understregerne til at begynde med, det er det, du skal overskrive.
En advarsel om fjernelse af understreger
Visuelt kan fjernelsen af understreger være præcis det, du vil opnå, men du bør være forsigtig, når du gør det også. Uanset om du synes om udseendet af understregede links eller ej, kan du ikke argumentere for, at de gør det klart, hvilken tekst der er forbundet, og som ikke er. Hvis du tager væk understreger eller ændrer den standard blå linkfarve, skal du sørge for at erstatte dem med stilarter, som stadig giver mulighed for linket tekst at skille sig ud. Dette vil skabe en mere intuitiv oplevelse for dit websteds besøgende.
Undersøg ikke-links
En anden advarsel om links og understreger, understreg ikke tekst, som ikke er et link som en måde at understrege det på. Folk har forventer, at understreget tekst er et link, så hvis du understreger indhold for at tilføje vægt (i stedet for at gøre det modigt eller kursivere det), sender du den forkerte besked og vil forvirre webstedets brugere.
Skift understregen til prikker eller bindestreger
Hvis du vil holde din tekstlinje understreget, men ændre stilen på den understregning fra standardlooket, som er en "soldi" -linje, kan du også gøre det. I stedet for den solide linje kan du bruge prikker til at understrege dine links. For at gøre dette vil du stadig fjerne understregen, men du vil erstatte den med egenskaben til bundformat stil:
en {tekst-dekoration: ingen; border-bottom: 1px punkteret; }
Da du har fjernet standard understregningen, er den stiplede en den eneste der vises.
Du kan gøre det samme for at få bindestreger. Du skal bare ændre grænsebundstypen til stiplede:
en {tekst-dekoration: ingen; border-bottom: 1px stiplede; }
Skift underlinjens farve
En anden måde at henlede opmærksomheden på dine links er at ændre understrejsets farve. Bare sørg for, at farven passer til dit farveskema.
en {tekst-dekoration: ingen; border-bottom: 1px solid rød; }
Dobbelt understreger
Tricket til at bruge dobbelt understreger er, at du skal ændre bredden af grænsen. Hvis du opretter en 1x bred kant, kommer du ender med en dobbelt understregning, der ligner en enkelt understregning.
en {tekst-dekoration: ingen; grænsebund: 3px dobbelt; }
Du kan også bruge den eksisterende understregning til at gøre en dobbelt understregning med andre funktioner, som f.eks. En af linjerne stiplede:
en {grænse-bund: 1px dobbelt; }
Glem ikke Link-staterne
Du kan tilføje grænsebundstypen til dine links i forskellige tilstande som: svævning,: aktiv eller: besøgt. Dette kan skabe en dejlig "rollover" stiloplevelse for besøgende, når du bruger denne "hover" pseudoklasse. For at lave en anden stiplede understregning vises, når du svæver over linket:
en {tekst-dekoration: ingen; } a: svever {grænse-bund: 1px punkteret; }
Originalartikel af Jennifer Krynin. Redigeret af Jeremy Girard
