Zvisungo zvakajairika pamapeji ewebhu, asi vazhinji vewebhu vakagadzira havazivi simba ravanoita neCSS kuti vashandise uye vagadzirise hukama hwavo zvakanaka. Iwe unogona kutsanangurira hukama nevakashanyira, hover, uye masangano anoshanda. Iwe unogonawo kushanda nemiganhu nemasitima kuti upe marangire ako mamwe pizzaz kana kuti uite kuti vatarise sehutsanangu kana kunyange mifananidzo.
Wakawanda web designers vanotanga nokujekesa chimiro che "a" tag:
a (muvara: tsvuku; }Izvi zvichaita zvose zvikamu zvehutano (hover, kushanyira, uye kushanda). Kuti utaure chikamu chimwe nechimwe zvakasiyana, unofanirwa kushandisa chikwata chishandiso-makirasi.
Link Pseudo-Classes
Iko kune maitiro mana ezvinyorwa zvekubatanidza mazita-makirasi iwe unogona kutsanangura:
- : link - iyi ndiyo yakasarudzika chimiro chekubatanidza
- : vakashanyira - mushure mekubatanidzwa kwave kwakanyorwa
- : hover - seguru rakagadzirirwa pamusoro pekubatanidza (pre-click)
- : kushingaira - pakarepo sezvo kubatana kuri kuiswa
Kuti urondedze chibatanidza chekusaziva-kirasi, shandisa nayo nekaiti muCS selector yako . Saka, kuti uchinje ruvara rwakashanyira rwehutano hwako hwose kuenda kune grey, nyora kuti:
a: vakashanyira {muvara: grey; }Kana iwe uchitaura mumwe unobatanidza pseudo-kirasi, inenge pfungwa yakanaka yekuita zvose. Nenzira iyo haungashamisi nemigumisiro yakawanda. Saka kana iwe uchingoda kuchinja ruvara rwakashanyira kuenda kune ruchena, nepo mamwe ose mazita-mazita ehutano hwako anoramba ari madema, iwe unogona kunyora:
a: link, a: hover, a: kushingaira {ruvara: rima; } a: vakashanyira {muvara: grey; }Shandisa Link Colors
Nzira inonyanya kuzivikanwa kuhutano hwemavara ndeyekuti uchinje ruvara apo mutsara inofamba pamusoro payo:
a {color: # 00f; } a: hover {ruvara: # 0f0; }Asi usakanganwa kuti iwe unogona kukanganisa kuti hukama huri kutaridzika sei pavari kuisa pairi ne: inoshandiswa pfuma:
a {color: # 00f; } a: kushingaira {ruvara: # f00; }Kana kuti iyo link inokutarisira sei wakashanyira nayo ne: yakashanyira imwe nzvimbo:
a {color: # 00f; } a: vakashanyira {muvara: # f0f; }Kuzviisa zvose pamwe chete:
a {color: # 00f; } a: vakashanyira {muvara: # f0f; } a: hover {ruvara: # 0f0; } a: kushingaira {ruvara: # f00; }Isa Nyaya Dzakanakira paZvibatanidza Kuwedzera Zviratidzo kana Bullets
Iwe unogona kuisa ruzivo pamusoro pekubatanidza sezvinowanikwa muSylish Backgrounds article, asi nekutamba nechekupedzisira zvishoma, unogona kugadzira chibatanidzi chine chinyorwa chinoenderana. Sarudza chiratidzo chiri chiduku, chakakomba 15px ne15px, kunze kwekuti rugwaro rwako rukuru. Isa nzvimbo kune rumwe rutivi rwekubatanidza uye sarudza kudzokorora kusarudzo kuti usadzokorora. Zvadaro, padd the link kuitira kuti zvinyorwa mukati mechibvumirano zvifambe zvakakwana kusvika kuruboshwe kana kurudyi kuona mufananidzo.
a {padding: 0 2px 1px 15px; mamiriro acho ezvinhu: #fff url (bhomba.gif) yakasara nzvimbo isina-kudzokorora; marara: # c00; }Kana uchinge watora chiratidzo chako, unogona kuisa chifananidzo chakasiyana sehover yako, yakashanda, uye yakashanyira zviratidzo kuitira kuti chikwata chichinje:
a {padding: 0 2px 1px 15px; mamiriro acho ezvinhu: #fff url (bhomba.gif) yakasara nzvimbo isina-kudzokorora; marara: # c00; } a: hover {mutsara: #fff url (ball2.gif) yakasara nzvimbo isina-kudzokorora; } a: kushingaira {mutsara: #fff url (ball3.gif) yakasara nzvimbo isina-kudzokorora; }Ita Zvikanano Zvako Tarisa seBhitani
Buttons zvakakurumbira, asi kusvika CSS yauya, iwe waifanira kugadzira zvishandisi uchishandisa mifananidzo , izvo zvinoita kuti mapeji ako atore nguva yakareba kuti atakure. Nenguva isipi, kune chimiro chemuganhu chinogona kukubatsira kuti uite bhodhi-sechiitiko chakanaka nyore neCSS.
muganhu: 4px kutanga; padding: 2px; text-decoration: none; } a: kushingaira {muganhu: 4px inset; }Cherechedza, kana iwe ukaisa mavara pamutambo uye pakusarudza mafashoni, vashandisi havakwanisi kuvabhadhara sezvaungatarisira. Saka, heino bhatani rinoshandiswa nemitsara ine mavara:
muganhu-chimiro: chakasimba; muganhu-width: 1px 4px 4px 1px; text-decoration: none; padding: 4px; border-color: # 69f # 00f # 00f # 69f; }Uye iwe unogona kukanganisa hover uye maitiro anoshingaira ebhokisi link pamwe chete, ingoshandisa izvo zvidzidzo zvemakwara:
a: link {border-style: yakasimba; muganhu-width: 1px 4px 4px 1px; text-decoration: none; padding: 4px; border-color: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }