Kaip pakeisti nuorodą į tinklalapį

Pašalinti nuorodą pabrėžia arba Sukurkite brūkšninį kodą arba Dvigubo akcentuotų nuorodų

Pagal numatytuosius nustatymus žiniatinklio naršyklėse naudojami tam tikri CSS stiliai, kuriuos jie taiko konkretiems HTML elementams. Jei nenorite perrašyti šių numatytųjų nuostatų savo svetainės stiliaus lapais, bus taikomos numatytosios nuostatos. Hipersaitų atveju numatytasis rodymo stilius yra tas, kad bet koks susijęs tekstas bus mėlynas ir pabrauktas. Tai naršyklė taip, kad svetainės lankytojai galėtų lengvai pamatyti, koks tekstas yra susietas. Daugelis interneto dizainerių nesirūpina šiais numatytais stilius, ypač pabrėžia. Laimei, CSS leidžia lengvai pakeisti tų vaizdų išvaizdą arba pašalinti juos visiškai.

Pašalinti teksto nuorodų pabraukimą

Pabrėžtu tekstu gali būti sunkiau perskaityti, kad nėra pabrėžė tekstas. Be to, daugelis dizainerių tiesiog nesirūpina pabrėžtų tekstinių nuorodų išvaizda. Tokiais atvejais greičiausiai norėsite pašalinti šiuos akcentus.

Norėdami pašalinti pabrėžimus iš tekstinių nuorodų, naudosite CSS nuosavybės teksto apdailą. Čia yra CSS, kurį parašėte atlikdami šiuos veiksmus:

a {text-decoration: none; }

Naudodami šią vieną CSS eilutę, pašalinsite pabraukimą iš visų tekstinių nuorodų. Nors tai yra labai bendro pobūdžio (jis naudoja elementų parinkiklį), jis vis dar turi daugiau specifiškumo nei numatytosios naršyklių stiliai. Kadangi šie numatytieji stiliai yra tai, kas sukuria požymius nuo pat pradžių, tai yra tai, ką jums reikia perrašyti.

Perspėjimas apie šalinimą yra akivaizdus

Vizualiai, pabrėžimo šalinimas gali būti būtent tas, ko norite atlikti, tačiau jūs taip pat turėtumėte būti atsargūs. Nesvarbu, ar jums patinka paslėptų nuorodų išvaizda, ar ne, negalima teigti, kad jie akivaizdžiai nurodo, su kokiu tekstu susieti, o kuris ne. Jei pašalinate, pabrėžia arba pakeičia numatytąją mėlynos spalvos nuorodų spalvą, įsitikinkite, kad pakeisite jas stiliais, kurie vis dar leidžia susieti tekstą. Tai leis geriau suprasti savo svetainės lankytojų patirtį.

Nepamirškite ne nuorodų

Kitas atsargumo ryšys ir pabrėžiama, nepakeiskite teksto, kuris nėra nuoroda kaip būdas tai pabrėžti. Žmonės atėjo tikėtis, kad paryškintas tekstas bus nuoroda, taigi, jei pabrėžiate turinį, kad pridėtumėte dėmesio (vietoj to, kad jį paryškintumėte ar kursyvuokite), jūs siunčiate neteisingą pranešimą ir supainiojate svetainės naudotojus.

Pakeiskite akcentą į taškus ar brūkšnelius

Jei norite, kad jūsų tekstinė nuoroda būtų pabrėžta, bet pakeiskite tą stilių, kuris pabrėžiamas iš numatytojo išvaizdos, kuris yra "karo" linija, galite tai padaryti. Vietoj to, kad tvirta linija, galite naudoti taškus, norėdami pabrėžti savo nuorodas. Norėdami tai padaryti, vis tiek pašalinsite pabraukimą, bet jį pakeisite sienos apačioje esančio stiliaus savybe:

a {text-decoration: none; border-bottom: 1px dotted; }

Kadangi jūs pašalinote standartinį pabraukimą, taškinė yra vienintelė, kuri pasirodo.

Jūs galite padaryti tą patį, norėdami gauti brūkšnelius. Tiesiog pakeiskite sienos apačioje esantį stilių:

a {text-decoration: none; border-bottom: 1px dashed; }

Keiskite "Underline" spalvą

Kitas būdas atkreipti dėmesį į jūsų nuorodas - pakeisti pabrėžimo spalvą. Tiesiog įsitikinkite, kad spalva atitinka jūsų spalvų schemą .

a {text-decoration: none; border-bottom: 1px solid red; }

Dvigubas akcentas

Dvigubo akcento naudojimas yra tas, kad turite pakeisti sienos plotį. Jei sukursite 1 px pločio sieną, pasibaigsite dvigubu pabrėžimu, kuris atrodo kaip vienas pabraukimas.

a {text-decoration: none; border-bottom: 3px double; }

Galite taip pat naudoti esamą pabrėžti, kad padvigubintumėte antraštes su kitomis funkcijomis, pvz., Viena iš eilučių brūkšnys:

{{border-bottom: 1px double; }

Nepamirškite nuorodų valstybių

Galite pridėti sienų apačioje esantį stiliuką prie savo nuorodų įvairiose būsenose, tokiose kaip: užveskite, aktyvus arba: aplankytas. Tai gali sukurti gražią "perkėlimo" stiliaus patirtį lankytojams, kai naudojate "pervykimo" pseudo klasę. Jei užveskite žymeklį virš nuorodos, parodomas antrasis taško pabraukimas.

a {text-decoration: none; } a: hover (border-bottom: 1px dotted; }

Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard