Kaip pakeisti HTML nuorodų pabrėžimus tinklalapyje

Šiame straipsnyje paaiškinami keli būdai, kaip galite naudoti CSS, kad pakeistumėte numatytąją teksto nuorodų išvaizdą savo tinklalapyje, pašalindami pabraukimą, pakeisdami jį punktyrine linija arba pakeisdami jo spalvą. Pridedama papildoma informacija, kaip pakeisti pabraukimą į punktyrinę arba dvigubą pabraukimą.

Kaip pašalinti teksto nuorodų pabraukimą

Pagal numatytuosius nustatymus interneto naršyklės turi tam tikrus CSS stiliai kad jie taikomi konkretiems HTML elementams. Jei neperrašysite šių numatytųjų nuostatų savo svetainės stiliaus lapuose, bus taikomi numatytieji nustatymai. Dėl

hipersaitai, numatytasis rodymo stilius yra tas, kad susietas tekstas yra mėlynas ir pabrauktas. Jei norite, galite pakeisti šių pabraukimų išvaizdą arba visiškai juos pašalinti iš savo tinklalapio.

Norėdami pašalinti pabraukimus iš tekstinių nuorodų, naudokite CSS nuosavybės teksto apdailą. Štai CSS, kurį rašote, kad tai padarytumėte:

a {teksto dekoravimas: nėra; }

Ta viena CSS eilute pašalinsite pabraukimą iš visų teksto nuorodų savo tinklalapyje. Nors tai yra labai bendras stilius (jame naudojamas elementų parinkiklis), jis vis tiek turi daugiau specifiškumo nei numatytieji naršyklės stiliai. Kadangi šie numatytieji stiliai sukuria pabraukimus, kuriuos reikia pradėti, būtent tai ir turite perrašyti.

Atsargiai šalinant pabraukimus

Vizualiai pabraukimų pašalinimas gali būti būtent tai, ko norite pasiekti, tačiau taip pat turėtumėte būti atsargūs. Nesvarbu, ar jums patinka pabrauktų nuorodų išvaizda, ar ne, negalite teigti, kad dėl jų tampa akivaizdu, kuris tekstas yra susietas, o kuris ne. Jei pašalinsite pabraukimus arba pakeisite numatytąją mėlyną nuorodos spalvą, turėtumėte įsitikinti, kad juos pakeitėte stiliais, kurie vis tiek leidžia susietam tekstui išsiskirti. Tai suteiks intuityvesnės patirties jūsų svetainės lankytojams.

Negalima pabrėžti ne nuorodų

Dar vienas atsargumas dėl nuorodų ir pabraukimų - neakcentuokite teksto, kuris nėra nuoroda, kaip būdas jį pabrėžti. Žmonės tikėjosi, kad pabrauktas tekstas bus nuoroda, todėl jei norite pabraukti turinį, norėdami jį pridėti kirčiavimas (užuot padarius jį paryškintu ar kursyvu), jūs siunčiate neteisingą pranešimą ir suklaidinsite svetainę vartotojų.

Kaip pakeisti pabraukimą į taškus ar brūkšnius

Jei norite, kad teksto nuoroda būtų pabraukta, tačiau pakeiskite tos pabraukimo stilių iš numatytosios išvaizdos, kuri yra „vientisa“ eilutė, taip pat galite tai padaryti. Vietoj tos vientisos linijos galite naudoti taškus, norėdami pabrėžti savo nuorodas. Norėdami tai padaryti, vis tiek pašalinsite pabraukimą, bet pakeisite jį krašto apačios stiliaus ypatybe:

a {teksto dekoravimas: nėra; apatinis kraštas: 1 taškelis taškuotas; }

Kadangi pašalinote standartinį pabraukimą, vienintelis pasirodo taškuotasis.

Norėdami gauti brūkšnelius, galite padaryti tą patį. Tiesiog pakeiskite krašto apačios stilių į brūkšninį:

a {teksto dekoravimas: nėra; apatinis kraštas: 1 tašk. brūkšninis; }

Kaip pakeisti pabraukimo spalvą

Kitas būdas atkreipti dėmesį į savo nuorodas yra pakeisti pabraukimo spalvą. Tiesiog įsitikinkite, kad spalva atitinka jūsų spalvų schema.

a {teksto dekoravimas: nėra; apatinis kraštas: 1px vientisas raudonas; }

Dvigubi pabraukimai

Apgaulė naudoti dvigubus pabraukimus yra ta, kad jūs turite pakeisti krašto plotį. Jei sukursite 1 taško pločio kraštinę, gausite dvigubą pabraukimą, kuris atrodo kaip vienas pabraukimas.

a {teksto dekoravimas: nėra; apatinis kraštas: 3 taškų dvigubas; }

Taip pat galite naudoti esamą pabraukimą, kad padarytumėte dvigubą pabraukimą su kitomis funkcijomis, pavyzdžiui, viena iš punktyrinėmis linijomis:

a {border-bottom: 1px double; }

Nepamirškite nuorodų būsenų

Galite pridėti kraštinės apačios stilių prie savo nuorodų skirtingose ​​būsenose, pvz.: užveskite pelės žymeklį,: aktyvus arba: aplankytas. Tai gali sukurti puikią „apvirtimo“ stiliaus patirtį lankytojams, kai naudojate tą „pakimba“ pseudo klasę. Norėdami, kad užvedus pelės žymeklį ant nuorodos būtų rodomas antras punktyrinis pabraukimas:

a {teksto dekoravimas: nėra; }
a: užveskite pelės žymeklį {border-bottom: 1px dotted; }