Kuidas muuta HTML-lingi allajoonimisi veebilehel

Selles artiklis selgitatakse mitut viisi, kuidas CSS-i abil saate oma veebisaidil tekstilinkide vaikevälimust muuta, eemaldades allajooni, muutes selle punktiirjooneks või muutes selle värvi. Lisateavet on alljooni muutmiseks katkendjooneks või topeltjooneks.

Kuidas eemaldada tekstilinkide allajoonimine

Vaikimisi on veebibrauseritel kindel CSS-i stiilid et need kehtivad konkreetsetele HTML-elementidele. Kui te ei kirjuta neid vaikeseadeid oma saidi enda stiililehtedega üle, kehtivad vaikesätted. Sest hüperlingid, vaikimisi kuvamisstiil on see, et mis tahes lingitud tekst on sinine ja allajoonitud. Soovi korral saate nende allajoonimiste välimust muuta või need oma veebisaidilt täielikult eemaldada.

Tekstilinkide altjoonte eemaldamiseks kasutage CSS-i atribuudi tekstikaunistust. Selleks on CSS, mille kirjutate:

a {tekstikaunistus: puudub; }

Selle CSS-i reaga eemaldate joone kõigilt oma veebilehe tekstilingitelt. Ehkki see on väga üldine stiil (see kasutab elementide valijat), on see siiski spetsiifilisem kui brauserite vaikestiilid. Kuna need vaikestiilid loovad alustuseks allajoonimise, peate selle üle kirjutama.

Tähelepanu allajoonte eemaldamisel

Visuaalselt võib allajoonimiste eemaldamine olla täpselt see, mida soovite saavutada, kuid ka seda tehes peaksite olema ettevaatlik. Sõltumata sellest, kas teile meeldib allajoonitud linkide välimus või mitte, ei saa te väita, et need teevad selgeks, milline tekst on lingitud ja milline mitte. Kui võtate allajoonimised ära või muudate seda sinist lingi vaikevärvi, peaksite kindlasti asendama need stiilidega, mis võimaldavad lingitud tekstil endiselt silma paista. See annab teie saidi külastajatele intuitiivsema kogemuse.

Ärge tõmmake mittelinke alla

Teine hoiatus linkide ja allajoonimiste osas - ärge rõhutage teksti, mis pole link, selle rõhutamise viisina. Inimesed on eeldanud, et allajoonitud tekst on link, nii et kui lisate sisu lisamiseks allajoonimise rõhuasetus (selle asemel, et muuta see paksuks või kursiiviks), saadate vale sõnumi ja ajate saidi segadusse kasutajad.

Kuidas muuta joon alla punktideks või kriipsudeks

Kui soovite hoida oma tekstilinki allajoonituna, kuid muutke selle allajoonimise stiili vaikimisi välimuselt, mis on "kindel" rida, saate ka seda teha. Selle kindla joone asemel saate linkide allajoonimiseks kasutada punkte. Selleks eemaldate ikkagi joone, kuid asendate selle atribuudiga border-bottom stiilis:

a {tekstikaunistus: puudub; ääris-põhi: 1px punktiir; }

Kuna olete tavalise allajoonimise eemaldanud, kuvatakse ainus punktiirjoon.

Kriipsude saamiseks võite teha sama. Lihtsalt muutke piiri alumine stiil katkendlikuks:

a {tekstikaunistus: puudub; ääris-põhi: 1px katkendlik; }

Kuidas muuta joone värvi

Teine võimalus oma linkidele tähelepanu juhtida on joone värvi muutmine. Lihtsalt veenduge, et värv sobib teie värviga värvilahendus.

a {tekstikaunistus: puudub; ääris-põhi: 1px ühtlane punane; }

Topeltjooned

Topeltjoonte kasutamise nipp on see, et peate muutma piiri laiust. Kui loote 1px laiuse ääre, saate lõpuks topeltjooni, mis näeb välja nagu üks allajoon.

a {tekstikaunistus: puudub; ääris-põhi: 3px topelt; }

Olemasolevat allajooni saate kasutada ka topeltjoonistamiseks teiste funktsioonidega, näiteks ühe punktireaga:

a {border-bottom: 1px double; }

Ärge unustage lingi olekuid

Saate lisada allserva stiili oma linkidele erinevates olekutes, näiteks: hõljutamine,: aktiivne või: külastatud. See võib luua külastajatele toreda "rollover" -stiili, kui kasutate seda "hover" pseudoklassi. Teise punktiirjoonega jooni kuvamiseks lingi kohal hõljutades tehke järgmist.

a {tekstikaunistus: puudub; }
a: hõljutage kursorit {border-bottom: 1px dotted; }