Ang mga link komon kaayo sa mga panid sa web, apan daghang mga tigdisenyo sa web wala makaamgo sa gahum nga anaa kanila sa CSS aron sa pagmanipula ug pagdumala sa ilang mga link nga epektibo. Mahimo nimong ipasabut ang mga link nga gibisita, hover, ug aktibo nga mga estado. Mahimo ka usab nga magtrabaho uban ang mga utlanan ug mga background aron mahatag ang imong mga link nga pizzaz o himoon kini nga mga hitsura sama sa mga butones o bisan mga larawan.
Kadaghanan sa mga tigdisenyo sa web magsugod pinaagi sa pag-ila sa usa ka estilo sa "usa" nga tag:
usa ka kolor: pula; }Kini mag- estilo sa tanang aspeto sa link (hover, gibisita, ug aktibo). Sa estilo sa kada bahin, kinahanglan nimo gamiton ang mga pseudo-klase nga link.
I-link ang mga Pseudo-Klase
Adunay upat ka nag-unang mga matang sa sumpay nga mga pseudo-klase nga imong mahibal-an:
- : link - kini ang estilo sa default alang sa link
- : mibisita - human sa usa ka link nga na-klik
- : hover - sama sa usa ka mouse nga poised sa usa ka link (pre-click)
- : aktibo - husto nga ang pag-click ang link
Aron ipasabut ang usa ka link nga pseudo-klase, gamita kini gamit ang tag sa imong CSS selector . Busa, aron mausab ang gibisitahan nga kolor sa tanan nimo nga mga link ngadto sa gray, isulat:
a: gibisita {color: gray; }Kon ikaw mag-style usa ka link nga pseudo-klase, maayo nga ideya nga estiloan ang tanan. Nianang paagiha dili ka matingala sa dili maayong resulta. Busa kung buot nimo nga usbon ang duaw nga kolor nga abohon, samtang ang tanan nga mga pseudo-properties sa imong mga link magpabilin nga itom, imong isulat:
a: link, a: hover, a: active {color: black; } a: gibisita {color: gray; }Usba ang Link nga Mga Kolor
Ang pinakapopular nga paagi sa estilo nga mga kalabutan mao ang pag-usab sa kolor sa diha nga ang mouse naglihok ibabaw niini:
usa ka kolor: # 00f; } a: hover {color: # 0f0; }Apan ayaw kalimti nga maapektuhan nimo kung giunsa nga makita ang link samtang ilang gikuptan kini sa: aktibo nga kabtangan:
usa ka kolor: # 00f; } a: active {color: # f00; }O kung giunsa nga ang us aka pag-uswag nakit-an nga imong gibisitahan kini sa: mibisita sa propiedad
usa ka kolor: # 00f; } a: gibisita {color: # f0f; }Sa pagbutang niini sa tanan:
usa ka kolor: # 00f; } a: gibisita {color: # f0f; } a: hover {color: # 0f0; } a: active {color: # f00; }Ibutang ang mga Background sa mga Link aron sa pagdugang sa mga Icon o mga Bullet
Mahimo nimong ibutang ang background sa usa ka sumpay sama sa Arte nga Background nga artikulo, apan pinaagi sa pagdula sa background sa usa ka gamay, makahimo ka og usa ka sumpay nga adunay usa ka gigikanan nga icon. Pagpili og usa ka icon nga gamay, mga 15px sa 15px, gawas kung ang imong teksto mas dako. Ibutang ang background sa usa ka bahin sa link ug i-set ang repeat option nga dili-sublion. Dayon, padad-i ang link aron ang teksto sulod sa sumpay gibalhin ngadto sa wala o tuo aron makita ang icon.
a {padding: 0 2px 1px 15px; background: #fff url (ball.gif) left center no-repeat; kolor: # c00; }Sa higayon nga nakuha nimo ang imong icon, mahimo ka nga mag-set sa usa ka lainlaing hulagway sama sa imong hover, aktibo, ug mobisita sa mga icon aron mahimo ang kausaban sa link:
a {padding: 0 2px 1px 15px; background: #fff url (ball.gif) left center no-repeat; kolor: # c00; } a: hover {background: #fff url (ball2.gif) left center no-repeat; } a: aktibo {background: #fff url (ball3.gif) left center no-repeat; }Himoa ang Imong mga Links nga Sama sa mga Pindutan
Ang mga tono popular kaayo, apan hangtud nga ang CSS miabut, kinahanglan ka maghimo og mga butones gamit ang mga hulagway , nga nakapahimo sa imong mga panid nga magdugay sa pagkarga. Suwerte, adunay usa ka estilo sa utlanan nga makatabang kanimo sa paghimo sa usa ka button-like nga epekto sayon sa CSS.
a {border: 4px outset; padding: 2px; text-decoration: wala; } a: aktibo {border: 4px inset; }Hinumdomi, sa dihang ibutang nimo ang mga kolor sa sinugdanan ug estilo sa inset, ang mga browser dili ingon nga makahimo sa paghatag niini sama sa imong mapaabut. Busa, ania ang usa ka butang nga may kausarang butang nga may mga kolor nga mga border:
usa ka {border-style: solid; border-width: 1px 4px 4px 1px; text-decoration: wala; padding: 4px; hulagway nga kolor: # 69f # 00f # 00f # 69f; }Ug maka-apektar ka sa hover ug aktibong mga estilo sa usa ka button link ingon man, gamita lang ang mga pseudo-klase:
a: link {border-style: solid; border-width: 1px 4px 4px 1px; text-decoration: wala; padding: 4px; hulagway nga kolor: # 69f # 00f # 00f # 69f; } a: hover {border color: #ccc; }