Izixhumanisi zivame kakhulu emakhasini ewebhu, kodwa abakhi abaningi bewebhu abaqapheli amandla abanakho nge- CSS ukuze basebenzise futhi baphathe izixhumanisi zabo ngokuphumelelayo. Ungakwazi ukuchaza izixhumanisi nezivakashi ezivakashelwe, ezihambelayo, nezisebenzayo. Ungaphinda usebenze nemingcele nezizinda ukuze unike izixhumanisi zakho ngaphezulu kwe-pizzaz noma uzienze zibukeke njengezinkinobho noma ngisho nezithombe.
Abakhiqizi abaningi bewebhu baqala ngokuchaza isitayela kumaki othi "a":
umbala: obomvu; }}Lokhu kuzothatha zonke izici zokuxhumanisa (ukuhamba, ukuhambela, nokusebenza). Ukuze udwebe ingxenye ngayinye ngokwehlukana, kufanele usebenzise isixhumanisi samakilasi amacu.
Xhumanisa ama-Pseudo-Classes
Kunezinhlobo ezine eziyisisekelo zokuxhumanisa amakilasi angama-pseudo ongawachaza:
- : link - lena isitayela esizenzakalelayo sesixhumanisi
- : bavakashele - ngemuva kokuxhumanisa okuchofoziwe
- : i-hover - njengoba igundane lihlelwe phezu kwesixhumanisi (chofoza kuqala)
- : isebenzayo - njengoba nje isixhumanisi sikchofoza
Ukuze uchaze isixhumanisi se-pseudo-class, sebenzisa ngetekisi kukhethi yakho ye- CSS . Ngakho, ukushintsha umbala ovakashelwe kuzo zonke izixhumanisi zakho kuya ku-grey, bhala:
a: wavakashela {umbala: grey; }}Uma uthayipha isixhumanisi esisodwa isixhumanisi-pseudo-class, umqondo omuhle ukuzitayela bonke. Ngaleyo ndlela ngeke umangale ngemiphumela engaphandle. Ngakho uma ufuna nje ukushintsha umbala ovakashelwe ukuya ku-grey, kuyilapho zonke ezinye izici zokungaboni kahle ezixhumanisi zakho zihlala zimnyama, ubhala:
a: isixhumanisi, i: hover, a: esebenzayo {umbala: omnyama; } a: wavakashela {umbala: grey; }}Shintsha i-Colors Link
Indlela ethandwa kakhulu ekuxhumaneni kwesitayela ukuguqula umbala lapho igundane lihamba phezu kwalo:
{umbala: # 00f; } a: i-hover {umbala: # 0f0; }}Kodwa ungakhohlwa ukuthi ungathinta indlela isixhumanisi esibukeka ngayo ngokuchofoza kuso nge: impahla esebenzayo:
{umbala: # 00f; } a: okusebenzayo {umbala: # f00; }}Noma ukuthi lesi sixhumanisi sikubukela kanjani ukuyivakashela nge: indawo evakashelwe kuyo:
{umbala: # 00f; } a: wavakashela {umbala: # f0f; }}Ukukubeka ndawonye ndawonye:
{umbala: # 00f; } a: wavakashela {umbala: # f0f; } a: i-hover {umbala: # 0f0; } a: okusebenzayo {umbala: # f00; }}Faka izizindla ezixhumaneni zokufaka izithonjana noma izinhlamvu
Ungakwazi ukubeka isizinda esixhumanweni njengesihlokweni seSici esiseStylish, kodwa ngokudlala ngemuva, ungakha isixhumanisi esinesithonjana esihambisanayo. Khetha isithonjana esincane, esingaba ngu-15px ngo-15px, ngaphandle uma umbhalo wakho ukhulu. Beka ingemuva kolunye uhlangothi lwesixhumanisi bese usetha okukhethwa kukho okuphindaphindiwe ukuze ungaphindaphindi. Khona-ke, phambela isixhumanisi ukuze umbhalo ngaphakathi kwesixhumanisi uthuthelwe ngaphezu kokwanele ngakwesobunxele noma kwesokudla ukubona isithonjana.
{padding: 0 2px 1px 15px; isizinda: #fff url (ibhola.gif) isikhungo esisele esingaphinde siphinde; umbala: # c00; }}Uma ususitholile isithonjana sakho, ungasetha isithombe esithile njengama-hover, asebenzayo, futhi avakashele izithombe ukuze wenze isixhumanisi sishintshe:
{padding: 0 2px 1px 15px; isizinda: #fff url (ibhola.gif) isikhungo esisele esingaphinde siphinde; umbala: # c00; } a: i-hover {ngemuva: #fff url (ball2.gif) isikhungo esisele ngakwesobunxele; } a: {imvelaphi esebenzayo: #fff url (ball3.gif) isikhungo esisele ngakwesokunxele; }}Yenza izixhumanisi zakho zibukeke njengezinkinobho
Izinkinobho zithandwa kakhulu, kodwa kuze kufike i-CSS, kwadingeka ukuthi udale izinkinobho usebenzisa izithombe , okwenza amakhasi akho athathe isikhathi eside ukulayisha. Ngenhlanhla, kukhona isitayela semingcele esingakusiza ukudala umphumela onjengebhokisi kalula nge-CSS.
Umngcele: 4px ekuqaleni; i-padding: 2px; umbhalo-umhlobiso: akekho; } a: umgudu osebenzayo {umngcele: 4px inset; }}Qaphela, uma ufaka imibala ekuqaleni nezitayela ze-inset, iziphequluli azikho amathuba okubahlinzeka ngendlela ongayilindela ngayo. Ngakho, nansi inkinobho ye-fancier enezimbala ezinemibala:
{isitayela somngcele: siqinile; umkhawulo-ububanzi: 1px 4px 4px 1px; umbhalo-umhlobiso: akekho; i-padding: 4px; umbala womngcele: # 69f # 00f # 00f # 69f; }}Futhi ungathinta izitayela ze-hover nezisebenzayo zokuxhumanisa kunkinobho futhi, sebenzisa nje kuphela lawo makilasi amabizo:
a: isixhumanisi {isitayela semngcele: siqinile; umkhawulo-ububanzi: 1px 4px 4px 1px; umbhalo-umhlobiso: akekho; i-padding: 4px; umbala womngcele: # 69f # 00f # 00f # 69f; } a: i-hover {umngcele-umbala: #ccc; }}