Kako spremeniti podčrtane povezave HTML na spletni strani

V tem članku je razloženo več načinov, kako lahko s CSS spremenite privzeti videz besedilnih povezav na svoji spletni strani tako, da odstranite podčrtaje, ga spremenite v pikčasto črto ali spremenite njegovo barvo. Vključene so dodatne informacije za spreminjanje podčrtaja v črtkano ali dvojno podčrtavanje.

Kako odstraniti podčrtaj na besedilnih povezavah

Privzeto imajo spletni brskalniki določene Slogi CSS da veljajo za določene elemente HTML. Če teh privzetih nastavitev ne prepišete z lastnimi slogovnimi listi vašega spletnega mesta, potem veljajo privzete. Za hiperpovezave, privzeti slog prikaza je, da je vsako povezano besedilo modro in podčrtano. Če želite, lahko spremenite videz teh podčrtajev ali jih popolnoma odstranite s spletne strani.

Če želite odstraniti podčrtaje z besedilnih povezav, uporabite okrasitev besedila lastnosti CSS. Tukaj je CSS, ki ga napišete za to:

a {dekoracija besedila: nobena; }

S to eno vrstico CSS odstranite podčrtaj iz vseh besedilnih povezav na vaši spletni strani. Čeprav je to zelo splošen slog (uporablja izbirnik elementov), ​​ima še vedno več specifičnosti kot privzeti slogi brskalnikov. Ker so ti privzeti slogi tisti, ki za začetek ustvarijo podčrtaje, je to tisto, kar morate prepisati.

Previdno pri odstranjevanju podčrtaj

Vizualno je odstranjevanje podčrtajev lahko točno tisto, kar želite doseči, vendar bodite previdni tudi pri tem. Ne glede na to, ali vam je všeč videz podčrtanih povezav ali ne, ne morete trditi, da jasno kažejo, na katero besedilo je povezano in katero ne. Če odvzamete podčrtanja ali spremenite privzeto modro barvo povezave, jih zamenjajte s slogi, ki še vedno omogočajo izstopanje povezanega besedila. Tako bodo obiskovalci vašega spletnega mesta dobili bolj intuitivno izkušnjo.

Ne podčrtajte povezav

Druga previdnost pri povezavah in podčrtajih, ne podčrtajte besedila, ki ni povezava, kot način poudarjanja. Ljudje so pričakovali, da bo podčrtano besedilo povezava, zato če podčrtate vsebino, da jo dodate poudarite (namesto da bi bili krepki ali ležeči), pošljete napačno sporočilo in boste zmedli spletno mesto uporabnikov.

Kako spremeniti podčrtaj v pike ali pomišljaje

Če želite obdržati podčrtano besedilno povezavo, vendar spremenite slog podčrtaja iz privzetega videza, ki je "polna" črta, lahko to storite tudi vi. Namesto te polne črte lahko s pomočjo pik podčrtate svoje povezave. Če želite to narediti, boste še vedno odstranili podčrtaj, vendar ga boste nadomestili z lastnostjo sloga border-bottom:

a {dekoracija besedila: nobena; rob-dno: 1px pikčasto; }

Ker ste odstranili standardno podčrtaj, se edino prikaže pikasta.

Enako lahko storite, da dobite pomišljaje. Preprosto spremenite slog obrobe-dna na črtkano:

a {dekoracija besedila: nobena; border-bottom: črtkano 1 px; }

Kako spremeniti barvo podčrtaja

Drug način, kako opozoriti na svoje povezave, je spremeniti barvo podčrtaja. Prepričajte se, da barva ustreza vaši barvna shema.

a {dekoracija besedila: nobena; rob-dno: 1px trdno rdeča; }

Dvojna podčrtaja

Trik pri uporabi dvojnih podčrtaj je, da morate spremeniti širino obrobe. Če ustvarite obrobo širine 1 slikovnih pik, boste na koncu dobili dvojno podčrtaj, ki je videti kot enojna podčrtaj.

a {dekoracija besedila: nobena; rob-dno: 3px dvojno; }

Obstoječo podčrtanje lahko uporabite tudi za dvojno podčrtavanje z drugimi funkcijami, kot je ena od črtkanih črt:

a {border-bottom: 1px dvojno; }

Ne pozabite na povezave

Svojim povezavam lahko dodate slog obrobe na dnu v različnih stanjih, kot so: hover,: active ali: obiskan. To lahko ustvari lepo izkušnjo sloga "prevračanja" za obiskovalce, ko uporabite ta psevdorazred "lebdenja". Če želite, da se s kazalcem miške nad povezavo prikaže drugo pikčasto podčrtanje:

a {dekoracija besedila: nobena; }
a: hover {border-bottom: 1px pikčasto; }