Hvad man skal vide
- Fjern understregningen på tekstlinks med CSS-egenskabens tekstdekoration ved at skrive a {tekst-dekoration: ingen; }.
- Skift understregningen til prikker med egenskaben border-bottom style a {tekst-dekoration: ingen; kant-bund: 1 px prikket; }.
- Skift understregningsfarven ved at skrive a {tekst-dekoration: ingen; kant-bund: 1 px solid rød; }. Udskift fast rød med en anden farve.
Denne artikel forklarer flere måder, du kan bruge CSS til at ændre standardudseendet på tekstlinks på din webside ved at fjerne understregningen, ændre den til en stiplet linje eller ændre dens farve. Yderligere oplysninger er inkluderet for at ændre understregningen til en stiplet linje eller dobbelt understregning.
Sådan fjernes understregningen på tekstlinks
Som standard har webbrowsere visse CSS-stilarter at de gælder for specifikke HTML-elementer. Hvis du ikke overskriver disse standarder med dit websteds egne stilark, gælder standardindstillingerne. Til hyperlinkser standardvisningstilstanden, at enhver sammenkædet tekst er blå og understreget. Hvis du vil, kan du ændre udseendet på disse understregninger eller fjerne dem helt fra din webside.
For at fjerne understregningerne fra tekstlinks bruger du CSS-egenskabens tekstdekoration. Her er den CSS, du skriver for at gøre dette:
a {tekst-dekoration: ingen; }
Med den ene linje af CSS fjerner du understregningen fra alle tekstlinks på din webside. Selvom dette er en meget generel stil (den bruger en elementvælger), har den stadig mere specificitet end standardbrowserstilene. Fordi disse standardformater er det, der skaber understregningerne til at begynde med, det er det, du skal overskrive.
En advarsel om fjernelse af understregninger
Visuelt kan fjernelse af understregninger være præcis det, du vil opnå, men du skal være forsigtig, når du også gør dette. Uanset om du kan lide udseendet af understregede links eller ej, kan du ikke argumentere for, at de gør det indlysende, hvilken tekst der er knyttet, og hvilken der ikke er. Hvis du fjerner understregninger eller ændrer den standard blå linkfarve, skal du sørge for at erstatte dem med typografier, der stadig tillader, at linket tekst skiller sig ud. Dette giver en mere intuitiv oplevelse for besøgende på dit websted.
Understrege ikke ikke-links
En anden advarsel om links og understregninger må ikke understrege tekst, der ikke er et link som en måde at understrege den på. Folk er kommet til at forvente, at understreget tekst er et link, så hvis du understreger indhold for at tilføje vægt (i stedet for at gøre det fed eller kursiv), sender du den forkerte besked og vil forvirre webstedet brugere.
Sådan ændres understregningen til prikker eller bindestreger
Hvis du vil holde dit tekstlink understreget, men ændre stilen for denne understregning fra standardudseendet, som er en "solid" linje, kan du også gøre dette. I stedet for den faste linje kan du bruge prikker til at understrege dine links. For at gøre dette fjerner du stadig understregningen, men du vil erstatte den med egenskaben border-bottom style:
a {tekst-dekoration: ingen; kant-bund: 1 px prikket; }
Da du har fjernet standardunderstreget, er den punkterede den eneste, der vises.
Du kan gøre det samme for at få bindestreger. Skift bare stil til kant-bund til stiplede:
a {tekst-dekoration: ingen; kant-bund: 1 pixel stiplet; }
Sådan ændres understregningsfarven
En anden måde at gøre opmærksom på dine links er at ændre farven på understregningen. Bare sørg for, at farven passer til din farveskema.
a {tekst-dekoration: ingen; kant-bund: 1 px solid rød; }
Dobbelt understregning
Tricket ved at bruge dobbelte understregninger er, at du skal ændre bredden af grænsen. Hvis du opretter en 1px bred kant, ender du med en dobbelt understregning, der ligner en enkelt understregning.
a {tekst-dekoration: ingen; kant-bund: 3 px dobbelt; }
Du kan også bruge den eksisterende understregning til at lave en dobbelt understregning med andre funktioner, såsom en af linjerne, der er stiplet:
en {kant-bund: 1 px dobbelt; }
Glem ikke forbindelsesstaterne
Du kan tilføje stilen kant-nederst til dine links i forskellige tilstande, såsom: svæver,: aktiv eller: besøgt. Dette kan skabe en god "rollover" -stiloplevelse for besøgende, når du bruger den "svævende" pseudoklasse. Sådan får du en anden stiplet understregning til at vises, når du holder markøren over linket:
a {tekst-dekoration: ingen; }
a: svæver {border-bottom: 1px stiplet; }