Kako promijeniti podcrtavanje HTML veze na web stranici

Ovaj članak objašnjava nekoliko načina na koje možete pomoću CSS-a promijeniti zadani izgled tekstualnih veza na vašoj web stranici uklanjanjem podcrtavanja, promjenom u točkastu crtu ili promjenom boje. Uključene su dodatne informacije za promjenu podcrtavanja u isprekidanu liniju ili dvostruko podcrtavanje.

Kako ukloniti podcrtavanje tekstualnih veza

Prema zadanim postavkama web preglednici imaju određene CSS stilovi da se primjenjuju na određene HTML elemente. Ako ove zadane postavke ne prepišete vlastitim stilskim tablicama web lokacije, tada se primjenjuju zadane postavke. Za hiperveze, zadani stil prikaza je da je svaki povezani tekst plave boje i podcrtan. Ako želite, možete promijeniti izgled tih podvlačenja ili ih u potpunosti ukloniti sa svoje web stranice.

Da biste uklonili podcrtavanje s tekstualnih veza, koristite CSS svojstvo uređenja teksta. Evo CSS-a koji ste napisali da biste to učinili:

a {ukras teksta: nijedan; }

S tim jednim retkom CSS-a uklanjate podcrtavanje sa svih tekstualnih veza na vašoj web stranici. Iako je ovo vrlo općenit stil (koristi selektor elemenata), i dalje ima više specifičnosti nego zadani stilovi preglednika. Budući da su ti zadani stilovi ono što za početak stvara podcrtavanje, to je ono što trebate prebrisati.

Oprez pri uklanjanju podvlaka

Vizualno uklanjanje podcrtavanja može biti upravo ono što želite postići, ali trebali biste biti oprezni i kada to radite. Bez obzira sviđa li vam se podcrtani link ili ne, ne možete tvrditi da oni čine očitim koji je tekst povezan, a koji nije. Ako uklonite podcrtane crte ili promijenite zadanu plavu boju veze, zamijenite ih stilovima koji i dalje omogućuju istaknuti povezani tekst. To će posjetiteljima vaše web stranice omogućiti intuitivnije iskustvo.

Ne podvlačite neveze

Još jedan oprez na vezama i podcrtavanjima, nemojte podvlačiti tekst koji nije poveznica kao način naglasivanja. Ljudi su očekivali da će podcrtani tekst biti veza, pa ako podcrtate sadržaj da biste dodali naglasak (umjesto da ga podebljate ili stavite u kurziv), šaljete pogrešnu poruku i zbunit ćete web lokaciju korisnika.

Kako promijeniti podcrtavanje u točkice ili crtice

Ako želite zadržati podcrtavanje tekstualne veze, ali promijenite stil podcrtavanja iz zadanog izgleda, koji je "puna" crta, možete i to učiniti. Umjesto te pune crte, možete upotrijebiti točkice za podcrtavanje svojih veza. Da biste to učinili, i dalje ćete uklanjati podcrtavanje, ali ćete ga zamijeniti svojstvom style-border-bottom:

a {ukras teksta: nijedan; obrub-dno: 1 piksela točkasto; }

Budući da ste uklonili standardno podcrtavanje, jedina se pojavljuje točkasta.

To isto možete učiniti i za dobivanje crtica. Samo promijenite stil rubnog dna u isprekidan:

a {ukras teksta: nijedan; dno obruba: crtkano 1 piksela; }

Kako promijeniti boju podcrtavanja

Još jedan način da skrenete pozornost na svoje poveznice je promjena boje podvlačenja. Samo pripazite da boja odgovara vašem Shema boja.

a {ukras teksta: nijedan; obrub-dno: 1px čvrsto crveno; }

Dvostruko podcrtavanje

Trik u korištenju dvostrukog podcrtavanja je u tome što morate promijeniti širinu obruba. Ako stvorite obrub širine 1 piksela, na kraju ćete dobiti dvostruko podcrtavanje koje izgleda kao jedno podvlačenje.

a {ukras teksta: nijedan; obod-dno: 3px dvostruko; }

Također možete upotrijebiti postojeće podcrtavanje kako biste napravili dvostruko podcrtavanje s drugim značajkama, kao što je jedna od linija koje su točkaste:

a {border-bottom: 1px dvostruko; }

Ne zaboravite na veze

Svojim vezama možete dodati stil obruba dna u različitim stanjima, kao što su: lebdenje,: aktivno ili: posjećeno. Ovo može stvoriti lijep doživljaj stila "prevrtanja" za posjetitelje kada koristite tu pseudo-klasu "lebdenja". Da biste prikazali drugu podcrtanu točku kad zadržite pokazivač iznad veze:

a {ukras teksta: nijedan; }
a: hover {border-bottom: 1px točkasto; }