Naučite se preprost način odstranitve podčrta iz povezav v HTML-ju

Koraki za odstranjevanje podčrtajočih besedilnih povezav in vprašanj, s katerimi se zavedate

Privzeto je besedilna vsebina, ki je povezana z HTML-jem s pomočjo elementa ali "sidro", zasnovana s podčrtano. Pogosto se spletni oblikovalci odločijo za odstranitev tega privzetega stylinga tako, da odstranijo podčrtano.

Mnogi oblikovalci ne skrbijo za videz podčrtanega besedila, zlasti v gostih blokih vsebine z veliko povezavami. Vse te podčrtane besede lahko resnično zlomijo branje toka dokumenta. Mnogi so trdili, da ti poudarjajo, da se besede težje razlikujejo in hitro preberejo zaradi načina, kako podčrtava spremeni naravne črke.

Obstajajo legitimne koristi za ohranitev teh poudarkov na tekstovnih povezavah, vendar. Na primer, ko brskate po velikih blokih besedila, podčrtane povezave, povezane z ustreznim barvnim kontrastom, bralcem omogočijo, da takoj pregledajo stran in si ogledajo, kje so povezave. Če si ogledate članke spletnega oblikovanja tukaj na spletnem mestu About.com in drugih člankov na spletnem mestu, boste videli ta stil podčrtanih povezav.

Če se odločite odstraniti povezave iz besedila (preprost postopek, ki ga bomo kmalu zajeli), se prepričajte, da boste našli načine za oblikovanje besedila, da bi še vedno razlikovali, kaj je povezava s tem, kar je navadno besedilo. To se najpogosteje opravi s prej omenjenim barvnim kontrastom, vendar pa lahko samo barva predstavlja problem za obiskovalce z motnjami vida, kot je barvna slepota. Odvisno od njihove posebne oblike barvne slepote lahko kontrast na njih popolnoma izgublja, kar jim preprečuje, da vidijo razliko med povezanim in nezavezujočim besedilom. Zato je podčrtano besedilo še vedno najboljši način prikazovanja povezav.

Torej, kako izklopite podčrtaj, če še vedno želite to storiti? Ker je to vizualna značilnost, s katero se ukvarjamo, se bomo obrnili na del naše spletne strani, ki obravnava vse vidne stvari - CSS.

Uporabite Cascading Style Sheets, da izklopite podčrtane elemente na povezavah

V večini primerov ne želite, da bi podčrtali samo eno besedilno povezavo. Namesto tega vaš stil sloga verjetno zahteva odstranitev podčrta iz vseh povezav. To storite tako, da dodate sloge v svoj zunanji slogovni list.

{tekst-dekoracija: nič; }

To je to! Ta preprosta vrstica CSS bi izključila podčrtano (ki dejansko uporablja lastnost CSS za »tekstovno dekoracijo«) na vseh povezavah.

S tem slogom bi lahko postali bolj specifični. Na primer, če želite izključiti podčrtano ali povezave znotraj elementa »nav«, lahko napišete:

nav {{tekst-dekoracija: nič; }

Zdaj bi besedilne povezave na strani dobili privzeto podčrtano, toda tiste v navu bi jih odstranili.

Ena stvar, ki jo mnogi spletni oblikovalci želijo storiti, je, da vrne povezavo nazaj, ko nekdo lebdi nad besedilom. To bi storili z uporabo: hover CSS pseudo-class, na primer:

{tekst-dekoracija: nič; } a: hover {tekst-dekoracija: podčrtaj; }

Uporaba Inline CSS

Kot alternativo za spremembe v zunanji slogovni obliki lahko tudi sloge dodate neposredno v sam element v HTML-ju, na primer:

ta povezava ni podčrtana

Težava s to metodo je, da v svoje strukture HTML daje slogne podatke, kar ni najboljša praksa. Stil (CSS) in struktura (HTML) je treba ločiti.

Če bi želeli, da so vse spletne strani povezave z besedami, da je podčrtano odstraniti, dodajanje tega sloga informacije vsaki posamezni povezavi bi pomenilo pošten znesek dodatne oznake, ki se dodaja kode vaše spletne strani. Ta stran bloat lahko upočasni čas nalaganja spletnega mesta in celotno upravljanje strani bolj zahtevno. Iz teh razlogov je bolje, da se vedno obračate na zunanji slogovni list za potrebe stylinga vseh strani.

V zapiranju

Tako enostavno, kot je odstraniti podčrtano s tekstovnih povezav spletne strani, morate upoštevati tudi posledice tega. Čeprav lahko resnično očisti videz strani, lahko to stori na račun splošne uporabnosti. Upoštevajte to, ko boste naslednjič razmislili o spremembi lastnosti "besedila-dekoracije" strani.

Izvorni članek Jennifer Krynin. Uredi 19/19/16 z Jeremy Girard