Paano Baguhin ang Mga Binababa ng Link sa isang Webpage

Alisin ang Mga Link sa ilalim ng Salita o Lumikha ng Mga Dashed Dotted, or Double Underlined Links

Bilang default, ang mga web browser ay may ilang mga estilo ng CSS na nalalapat sa mga partikular na elemento ng HTML. Kung hindi mo pa-overwrite ang mga default na ito gamit ang sariling mga sheet ng estilo ng iyong site, ang mga default ay ilalapat. Para sa mga hyperlink, ang default na estilo ng display ay na ang anumang naka-link na teksto ay magiging asul at underline. Ginagawa ito ng browser upang ang mga bisita ng site ay madaling makita kung anong teksto ang naka-link. Maraming taga-disenyo ng web ang hindi nagmamalasakit sa mga default na estilo, lalo na ang mga binibigyang-diin. Sa kabutihang palad, ginagawang madali ng CSS na baguhin ang hitsura ng mga binibigyang-diin o ganap na alisin ito.

Pag-alis ng Underline sa Mga Link sa Teksto

Ang nakasulat na teksto ay maaaring maging mas mahirap na basahin ang di-guhit na teksto. Bukod pa rito, maraming taga-disenyo lamang ang hindi nagmamalasakit sa hitsura ng mga salungguhit na link ng teksto. Sa mga pagkakataong ito, malamang na nais mong alisin ang mga underline na ito nang buo.

Upang alisin ang mga salungguhit mula sa mga link ng teksto, gagamitin mo ang CSS property na teksto-dekorasyon. Narito ang CSS na nais mong isulat upang gawin ito:

isang {text-decoration: none; }

Gamit ang isang linya ng CSS, aalisin mo ang salungguhit mula sa lahat ng mga link ng teksto. Kahit na ito ay isang pangkalahatang estilo (gumagamit ito ng isang selector ng elemento), mayroon pa itong higit pang pagtitiyak kaysa sa mga estilo ng default na browser. Dahil ang mga default na estilo ay kung ano ang lumilikha ng mga salungguhit upang magsimula sa, iyon ang kailangan mong i-overwrite.

Isang Pag-iingat sa Pag-alis ng Mga Binababa

Sa paningin, ang pag-alis ng mga salungguhit ay maaaring maging eksakto kung ano ang gusto mong gawin, ngunit dapat kang maging maingat kapag ginawa mo rin ito. Kung gusto mo ang hitsura ng mga salungguhit na mga link o hindi, hindi mo maaaring magtaltalan na ginawa nila ito halata kung aling teksto ang naka-link at kung saan ay hindi. Kung kukuha ka ng mga salungguhit o baguhin ang default na kulay ng asul na link, dapat mong tiyakin na palitan mo ang mga ito ng mga estilo na pinapayagan pa rin ang naka-link na teksto upang tumayo. Gagawa ito para sa isang mas madaling maunawaan na karanasan para sa mga bisita ng iyong site.

Huwag I-underline ang Mga Non-Link

Isa pang pag-iingat sa mga link at mga salungguhit, huwag mag-salaysay ng teksto na hindi isang link bilang paraan ng pagbibigay-diin nito. Inaasahan ng mga tao na ang isang underlined text ay isang link, kaya kung binigyang-diin mo ang nilalaman upang madagdagan ang diin (sa halip na gawin itong naka-bold o i-italicize ito), ipapadala mo ang maling mensahe at malito ang mga gumagamit ng site.

Baguhin ang Underline sa Mga Dot o Dash

Kung nais mong panatilihin ang iyong text link sa ilalim ng linya, ngunit baguhin ang estilo ng na underline mula sa default na hitsura, na kung saan ay isang "soldi" na linya, maaari mo rin gawin ito. Sa halip na matatag na linya, maaari mong gamitin ang mga tuldok upang mai-underline ang iyong mga link. Upang gawin ito, aalisin mo pa rin ang underline, ngunit palitan mo ito ng ari-arian ng estilo sa hangganan:

isang {text-decoration: none; border-bottom: 1px tuldok; }

Dahil inalis mo ang standard na underline, ang may tuldok ay isa lamang na lumilitaw.

Maaari mong gawin ang parehong bagay upang makakuha ng mga gitling. Baguhin lamang ang estilo ng hangganan sa ibaba upang madulas:

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

Baguhin ang Kulay ng Underline

Ang isa pang paraan upang maakit ang pansin sa iyong mga link ay upang baguhin ang kulay ng underline. Siguraduhin na ang kulay ay angkop sa iyong scheme ng kulay .

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

Double Underlines

Ang bilis ng kamay sa paggamit ng double salungguhit ay na kailangan mong baguhin ang lapad ng hangganan. Kung lumikha ka ng isang 1px na malawak na hangganan, makakapunta ka sa isang double underline na mukhang isang solong underline.

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

Maaari mo ring gamitin ang umiiral na guhit upang gumawa ng isang double salungguhit sa iba pang mga tampok, tulad ng isa sa mga linya na may tuldok:

isang {border-bottom: 1px double; }

Huwag Kalimutan ang Link Unidos

Maaari mong idagdag ang estilo ng border-bottom sa iyong mga link sa iba't ibang mga estado tulad ng: hover,: aktibo, o: binisita. Maaari itong lumikha ng magandang estilo ng "rollover" na karanasan para sa mga bisita kapag ginamit mo ang "hover" na pseudo class. Upang lumitaw ang pangalawang dotted underline kapag nag-hover ka sa link:

isang {text-decoration: none; } a: hover {border-bottom: 1px tuldok; }

Orihinal na artikulo ni Jennifer Krynin. Ini-edit ni Jeremy Girard