Ang mga link ay karaniwan sa mga web page, ngunit maraming mga taga-disenyo ng web ang hindi nakakaalam ng kapangyarihan na mayroon sila sa CSS upang manipulahin at pamahalaan ang kanilang mga link nang epektibo. Maaari mong tukuyin ang mga link sa binisita, hover, at aktibong estado. Maaari ka ring magtrabaho sa mga hangganan at mga background upang bigyan ang iyong mga link ng higit pang pizzaz o gawin itong mga hitsura ng mga pindutan o kahit na mga larawan.
Ang karamihan sa mga taga-disenyo ng web ay nagsisimula sa pamamagitan ng pagtukoy ng estilo sa "a" na tag:
isang {kulay: pula; }Susuriin nito ang lahat ng aspeto ng link (hover, binisita, at aktibo). Upang estilo nang hiwalay ang bawat bahagi, dapat mong gamitin ang mga link na pseudo-klase.
I-link ang mga Pseudo-Class
Mayroong apat na pangunahing uri ng mga link na pseudo-klase na maaari mong tukuyin:
- : link - ito ang default na estilo para sa link
- : binisita - matapos na na-click ang isang link
- : mag-hover - habang ang isang mouse ay naka-poised sa isang link (pre-click)
- : aktibo - kanan habang naka-click ang link
Upang tukuyin ang isang link na pseudo-class, gamitin ito sa isang tag sa iyong CSS selector . Kaya, upang baguhin ang binisita na kulay ng lahat ng iyong mga link sa kulay-abo, isulat ang:
a: binisita {color: grey; }Kung nag-estilo ka ng isang link na pseudo-class, magandang ideya na estilo ang lahat ng ito. Sa ganoong paraan hindi ka mabigla sa pamamagitan ng mga resulta sa labas. Kaya kung gusto mo lamang baguhin ang binisita na kulay sa kulay abo, habang ang lahat ng iba pang mga hindi tunay na pag-aari ng iyong mga link ay mananatiling itim, nais mong isulat:
a: link, a: hover, a: active {color: black; } a: binisita {color: grey; }Baguhin ang Mga Kulay ng Link
Ang pinaka-popular na paraan sa estilo ng mga link ay upang baguhin ang kulay kapag ang mouse hovers higit sa ito:
isang {color: # 00f; } a: hover {color: # 0f0; }Ngunit huwag kalimutan na maaari mong makaapekto kung paano tumingin ang link habang pinindot nila ito sa: aktibong pag-aari:
isang {color: # 00f; } a: aktibo {color: # f00; }O kung paano nakikita ng link pagkatapos mong bisitahin ito sa: binisita ang ari-arian:
isang {color: # 00f; } a: binisita {color: # f0f; }Upang ilagay ang lahat nang sama-sama:
isang {color: # 00f; } a: binisita {color: # f0f; } a: hover {color: # 0f0; } a: aktibo {color: # f00; }Ilagay ang Mga Background sa Mga Link upang Magdagdag ng Mga Icon o Mga Bullet
Maaari kang maglagay ng background sa isang link tulad ng sa naka-istilong Mga artikulo sa background, ngunit sa pamamagitan ng pag-play sa background ng kaunti, maaari kang lumikha ng isang link na may nauugnay na icon. Pumili ng isang icon na maliit, sa paligid ng 15px sa pamamagitan ng 15px, maliban kung ang iyong teksto ay mas malaki. Ilagay ang background sa isang bahagi ng link at i-set ang ulit na opsyon upang hindi ulitin. Pagkatapos, padd ang link upang ang teksto sa loob ng link ay inilipat sa malayo sapat sa kaliwa o kanan upang makita ang icon.
isang {padding: 0 2px 1px 15px; background: #fff url (ball.gif) kaliwa center no-repeat; kulay: # c00; }Sa sandaling nakuha mo na ang iyong icon, maaari kang magtakda ng ibang imahe bilang iyong hover, aktibo, at binisita ang mga icon upang baguhin ang link:
isang {padding: 0 2px 1px 15px; background: #fff url (ball.gif) kaliwa center no-repeat; kulay: # c00; } a: hover {background: #fff url (ball2.gif) left center no-repeat; } a: aktibo {background: #fff url (ball3.gif) kaliwa center no-repeat; }Gumawa ng Iyong mga Link Tulad ng Mga Pindutan
Ang mga pindutan ay napakapopular, ngunit hanggang sa dumating ang CSS, kailangan mong lumikha ng mga pindutan gamit ang mga imahe , na ginagawang mas mahaba ang iyong mga pahina upang mai-load. Sa kabutihang-palad, mayroong isang estilo ng hangganan na maaaring makatulong sa iyo na lumikha ng isang pindutan-tulad ng epekto madali sa CSS.
isang {border: 4px outset; padding: 2px; text-decoration: none; } a: aktibo {border: 4px inset; }Tandaan, kapag naglagay ka ng mga kulay sa mga panimula at mga estilo ng inset, ang mga browser ay hindi malamang na i-render ang mga ito tulad ng maaari mong asahan. Kaya, narito ang isang magaling na button na may kulay na mga border:
isang {border-style: solid; hangganan-lapad: 1px 4px 4px 1px; text-decoration: none; padding: 4px; hangganan-kulay: # 69f # 00f # 00f # 69f; }At maaari mong maapektuhan ang hover at aktibong mga estilo ng isang pindutan na link pati na rin, gamitin lamang ang mga pseudo-klase:
isang: link {border-style: solid; hangganan-lapad: 1px 4px 4px 1px; text-decoration: none; padding: 4px; hangganan-kulay: # 69f # 00f # 00f # 69f; } a: hover {border color: #ccc; }