Izixhumanisi ziqhelekileyo kumaphepha ewebhu, kodwa abaninzi abakhi bewebhu abaqapheli amandla ababenayo neCSS ukuze basebenzise nokulawula izixhumanisi zabo ngokufanelekileyo. Ungachaza izixhumanisi kunye neendawo ezivakatyeweyo, ezihambelayo kunye nezisebenzayo. Unokusebenza kunye nemida kunye nemvelaphi ukuze unike izixhumanisi zakho ngaphezulu kwe-pizzaz okanye wenze ukuba zibukeke njengamaqhosha okanye imifanekiso.
Uninzi lwabakhi bewebhu baqala ngokuchaza isitayela kwi "tag" ithegi:
{umbala: obomvu; }Oku kuya kufaka yonke imiba yekhonkco (ukuhamba, ukutyelela, nokusebenza). Ukusebenzisa isahlulo ngasinye ngokwehlukileyo, kufuneka usebenzise ikhonksi zeeklasi.
Qhagamshelana neCseudo-Classes
Kukho iintlobo ezine ezisisiseko zokudibanisa iiklasi ezidibanisayo ongachaza:
- : unxibelelwano-le isitayela esingagqibekanga soqhagamshelwano
- : watyelelwa - emva kokuqhagamshela iqhosha
- : i-hover - njengoko imouse igqityiweyo phezu kwekhonkco (ngaphambi kokuchofoza)
- : esebenzayo - kanye njengoko ikhonkco icatshulwa
Ukuchaza isiqhagamshelo somnxeba, sebenzisa ngetekisi kukhethi yakho yeCSS . Ngoko, ukutshintsha umbala ohanjelwe kuwo onke amaqhosha akho ukuya kwi-grey, bhala:
: uhanjelwe {umbala: grey; }Ukuba uthayipha enye yekhonkco kwiklasi ye-pseudo-class, ingcinga efanelekileyo yokuyibala bonke. Ngaloo ndlela awuyi kumangaliswa yimiphumo engaphandle. Ngoko ukuba ufuna nje ukutshintsha umbala ovakatyeweyo ukuya ku-grey, ngelixa zonke ezinye iziganeko zokungabonakali kwezikhonkco zakho zihlala zimnyama, ubhala:
: ikhonkco: a: hover, a: esebenzayo {umbala: omnyama; }: uhanjelwe {umbala: grey; }Tshintsha i-Colors Link
Indlela eyaziwayo kakhulu kwizikhonkwane zesitayela ukuguqula umbala xa i mouse igxotha phezu kwayo:
{umbala: # 00f; } a: hover {umbala: # 0f0; }Kodwa ungakulibali ukuba unokuchaphazela indlela ikhonkco ekhangele ngayo njengoko echofoza kuyo nge: ifayili esebenzayo:
{umbala: # 00f; }: asebenzayo {umbala: # f00; }Okanye indlela ikhonkco ikujonga ngayo ukuba uyivakatye kunye ne: yepropati:
{umbala: # 00f; }: uhanjelwe {umbala: # f0f; }Ukuyibeka ndawonye:
{umbala: # 00f; }: uhanjelwe {umbala: # f0f; } a: hover {umbala: # 0f0; }: asebenzayo {umbala: # f00; }Faka iMvelaphi kwiZiqhagamshelo zokufaka iiConfon okanye iBullets
Ungayifaka imvelaphi kwikhonkco njengesiqendu saseStylish, kodwa ngokudlala ngokusemgangathweni, ungakha ikhonkco ene-icon ehambelana nayo. Khetha uphawu oluncinci, malunga ne-15px nge-15px, ngaphandle kokuba isicatshulwa sakho sikhulu. Beka imvelaphi kwicala elinye lekhonkco uze usethe ukhetho lokuphinda ungaziphinda. Emva koko, phawula ikhonkco ukwenzela ukuba itekisi ngaphakathi kwinqhagamshelo ihanjiswe ngokude ngokwaneleyo ukuya kwesobunxele okanye ilungelo lokubona i icon.
{padding: 0 2px 1px 15px; imvelaphi: #fff url (ibhola.gif) ishiywe kwindawo engekho; Umbala: # c00; }Emva kokuba unayo i-icon yakho, unokwenza umfanekiso ohlukileyo njengendlela yakho yokuhamba, esebenzayo, kunye neefowuni ezivakatyekileyo ukuze wenze unxibelelwano luguqule:
{padding: 0 2px 1px 15px; imvelaphi: #fff url (ibhola.gif) ishiywe kwindawo engekho; Umbala: # c00; }: hover {imvelaphi: #fff url (ibhola2.gif) isikhungo sokushiya singaphindi; }: esebenzayo {imvelaphi: #fff url (ball3.gif) isikhungo esishiye singaphindi; }Yenza izixhumanisi zakho Jonga njengeeBhobho
Amaqhosha athandwa kakhulu, kodwa de ifike kwiCSS, kufuneka wenze amaqhosha usebenzisa imifanekiso , eyenza amaphepha akho athathe ixesha elide ukulayisha. Ngenhlanhla, kukho isimbo semida esingakunceda ukuba wenze i-inkqubela efana neqhosha kalula ngeCSS.
{umda: 4px ekuqaleni; ukupakisha: 2px; umbhalo-mboniso: akukho; }: asebenzayo {umda: 4px inset; }Qaphela, xa ubeka imibala ekuqaleni kunye neendlela ezifakiwe, abaphequluli abanakwenzeka ukuba banikeze njengoko unokulindela. Ngoko, nantsi inkinobho yomqhubi kunye nemida embala:
{umgca womda: uqinile; ububanzi bomda: 1px 4px 4px 1px; umbhalo-mboniso: akukho; ukupakisha: 4px; Umbala womda: # 69f # 00f # 00f # 69f; }Kwaye unokuphazamisa i-hover kunye neendlela ezisebenzayo zeqhosha lekhonkco ngokunjalo, sebenzisa kuphela ezo zifundo zengqondo:
: isiqhagamshelo {isitayela somda: siqinile; ububanzi bomda: 1px 4px 4px 1px; umbhalo-mboniso: akukho; ukupakisha: 4px; Umbala womda: # 69f # 00f # 00f # 69f; } a: hover {umbala-umda: #ccc; }