Som standard har nettlesere bestemte CSS-stiler som de gjelder for bestemte HTML-elementer. Hvis du ikke overskriver disse standardinnstillingene med nettstedets egne stilark, vil standardverdiene gjelde. For hyperkoblinger er standard visningsstil at enhver koblet tekst vil være blå og understreket. Nettleseren gjør dette slik at et nettsted besøkende kan enkelt se hvilken tekst som er koblet til. Mange webdesignere bryr seg ikke om disse standardstilene, særlig de understreker. Heldigvis gjør CSS det enkelt å endre utseendet til de som understreker eller fjerner dem helt.
Fjerner understreken på tekstkoblinger
Understreket tekst kan være mer utfordrende for å lese den ikke-understrekte teksten. I tillegg er det mange designere som ikke bryr seg om utseendet på understrekte tekstforbindelser. I disse tilfellene vil du sannsynligvis ønske å fjerne disse understrekkene helt.
For å fjerne understrekkene fra tekstkoblinger, bruker du CSS-egenskapens tekstdekorasjon. Her er CSS du vil skrive for å gjøre dette:
en {tekst-dekorasjon: ingen; }
Med den ene linjen med CSS, ville du fjerne understreken fra alle tekstkoblinger. Selv om dette er en veldig generell stil (den bruker en elementvelger), har den fortsatt mer spesifisitet enn standard nettlesere stiler gjør. Fordi disse standardstilene er det som skaper understreker til å begynne med, det er det du trenger å overskrive.
En advarsel om fjerning av understreker
Visuelt kan fjerning av understreker være akkurat det du vil oppnå, men du bør være forsiktig når du gjør dette også. Enten du liker utseendet på understrekte koblinger eller ikke, kan du ikke argumentere for at de gjør det klart hva tekst er koblet til og som ikke er. Hvis du tar bort understreker eller endrer den standardblå lenkefarge, bør du sørge for at du erstatter dem med stiler som fortsatt tillater koblet tekst å skille seg ut. Dette vil gi en mer intuitiv opplevelse for nettstedets besøkende.
Ikke understreker ikke-linker
En annen advarsel om koblinger og understreker, ikke understreke tekst som ikke er en lenke som en måte å understreke den på. Folk har kommet til å forvente at understreket tekst skal være en lenke, så hvis du understreker innhold for å legge vekt på (i stedet for å gjøre det fet eller kursivere det), sender du feil melding og vil forvirre nettstedbrukerne.
Endre understreken til prikker eller bindestreker
Hvis du vil beholde tekstlenken din understreker, men endre stilen til den understreken fra standardutsnittet, som er en "soldat" -linje, kan du også gjøre dette. I stedet for den solide linjen kan du bruke prikker for å understreke koblingene. For å gjøre dette, vil du fortsatt fjerne understreken, men du vil erstatte den med egenskapen for bunndyrstil:
en {tekst-dekorasjon: ingen; border-bottom: 1px prikket; }
Siden du har fjernet standard understreket, er den prikkede den eneste som vises.
Du kan gjøre det samme for å få bindestreker. Bare endre grensebunnstilen til dashed:
en {tekst-dekorasjon: ingen; border-bottom: 1px dashed; }
Endre underlinjens farge
En annen måte å trekke oppmerksomheten til koblingene er å endre fargene på understreken. Bare vær sikker på at fargen passer med fargevalg.
en {tekst-dekorasjon: ingen; grensebunn: 1px solid rød; }
Dobbel understreker
Trikset med å bruke doble understreker er at du må endre bredden på grensen. Hvis du lager en 1px bred ramme, kommer du til en dobbel understreke som ser ut som en enkelt understreke.
en {tekst-dekorasjon: ingen; grensebunn: 3px dobbel; }
Du kan også bruke den eksisterende understreken for å lage en dobbel understreke med andre funksjoner, for eksempel en av linjene som er prikket:
en {border-bottom: 1px double; }
Ikke glem koblingslandene
Du kan legge grensebunnstilen til koblingene dine i forskjellige tilstander som: svever,: aktiv eller: besøkt. Dette kan skape en hyggelig "rollover" stilopplevelse for besøkende når du bruker den "hover" pseudoklassen. For å lage en annen stiplet understrekk vises når du svinger over koblingen:
en {tekst-dekorasjon: ingen; } a: svever {grensebunn: 1px punktert; }
Opprinnelig artikkel av Jennifer Krynin. Redigert av Jeremy Girard
