Xidhiidhka ayaa aad u caan ah bogagga shabakadda, laakiin naqshadeeyayaasha webka oo badan ma ogaan karaan awooda ay leeyihiin CSS inay ku hagaajiyaan ayna maamulaan xiriirkooda si tayo leh. Waxaad qeexi kartaa xiriirka lala yeesho gobollada la booqday, hoyga, iyo firfircoonaanta. Waxaad sidoo kale ka shaqeyn kartaa xuduudaha iyo asalka si aad u bixiso xiriiriyeyaasha badan ee pizzaz ama waxaad u eegi kartaa sida badhamada ama xitaa sawirrada.
Inta badan naqshadayaasha webka waxay billaabaan iyagoo qeexaya qaabka ku qoran "a" tag:
[midab: casaan; }Tani waxay ka tarjumaysaa dhammaan dhinacyada xiriirka (Hover, booqday, iyo firfircoon). Si aad u qorto qayb kasta si gooni ah, waa inaad isticmaashaa fasalada qaaska ah.
Isku-xirka "Pseudo-Classes"
Waxaa jira afar nooc oo ah noocyada aasaasiga ah ee isku-xirxireedka fasal ee aad qeexi kartid:
- : link - waa qaabka caadiga ah ee isku xirka
- : booqdey - ka dib markii la isku duubay
- : Hover - sida jiirka ah ayaa lagu soo rogay isku-xire (hor-riix)
- : mid firfircoon - midig sida xiriirka la riixayo
Si aad u qeexdid fasal lakulanka ah, waxaad u isticmaashaa tikidhka ku yaal khariidadahaaga CSS . Haddaba, si aad u bedesho midabka soo booqday ee dhammaan isku xirnaantaada cawl, qor:
a: booqday {midabka: midabka; }Haddii aad isku sharaxdo halbeegga fasalka, waa fikrad fiican inaad ku dhajiso dhammaantood. Sidaa daraadeed lama yaabi doontid natiijooyinka dheeraadka ah. Sidaa darteed haddii aad rabto inaad bedesho midabka booqashada ee cawlka, halka dhamaan sifooyinka kale ee khadadkaaga ee xiriiriyayaashu ay yihiin kuwo madow, waxaad qori laheyd:
a: link, a: hover, a: mid firfircoon {midab: madow; } a: booqday {midabka: midabka; }Bedel nambarada Link
Habka ugu caansan ee isku xirnaanta qaabka waa isbedelka midabka marka cayayaanka ay ka soo baxayaan:
[color: # 00f; } a: hover {color: # 0f0; }Laakiin ha iloobin in aad saameyn karto sida xiriirku u egyahay sida ay kuugu soo riixayaan: hantida firfircoon:
[color: # 00f; } a: midab firfircoon {color: # f00; }Ama sida xiriirku u egyahay markaad soo booqatay: guriga booqday:
[color: # 00f; } a: booqday {color: # f0f; }Si wada loo wada dhajiyo:
[color: # 00f; } a: booqday {color: # f0f; } a: hover {color: # 0f0; } a: midab firfircoon {color: # f00; }Ku dheji faahfaahinta kudubyada ku darka Ikon ama Bullets
Waxaad ku dhejin kartaa asalkaaga sida ku qoran maqaalkan Stylish Backgrounds, laakiin adoo ku ciyaaraya taariikhda wax yar, waxaad abuuri kartaa xiriir isku xiran. Dooro astaanta yar yar, qiyaastii 15px ilaa 15px, haddii qoraalkaagu ka weyn yahay. Ku dhaji asalkaaga hal dhinac oo xiriiriyaha ah oo dooro xulashada soo noqnoqoshada si aan loo celin. Kadibna, ku dheji khadka si uu qoraalka kuugu xiro farriin ku filan dhinaca bidix ama midig si aad u aragto astaanta.
dhererka: 0 2px 1px 15px; asalka: #fff url (ball.gif) xariiqda bidix ee mar-celin; midabka: # c00; }Marka aad heshay astaantaada, waxaad samayn kartaa sawir ka duwan sida jilbahaaga, firfircoon, iyo booqashooyinka soo booqda si aad u bedesho iskuxirka:
dhererka: 0 2px 1px 15px; asalka: #fff url (ball.gif) xariiqda bidix ee mar-celin; midabka: # c00; } a: hover {asalka: #fff url (ball2.gif) xariiqda bidix ee ku celiska ah; } a: Hawlgal firfircoon {asalka: #fff url (ball3.gif) xariiqda bidix ee mar-celin; }Samee Xirfadahaaga Fiiri sida Button
Buttons waa mid aad u caan ah, laakiin ilaa CSS yimaado, waxaad ku qasabtey in aad abuurto badhamada adigoo isticmaalaya sawirro , taas oo ka dhigaysa boggagaaga inay qaadaan waqti dheer si ay u raraan. Nasiib wanaag, waxaa jira qaabka xuduudaha oo kaa caawin kara inaad abuurto saamiga la midka ah ee baaskiilka leh si fudud oo leh CSS.
a: xadka: 4px horudhac; caarada: 2px; qoraalka-qurxinta: midna; } a: firfircoon {xuduudaha: 4px gaaban; }Xasuuso, markaad midabada ku dhejiso qaababka hore iyo qaababka gundhigga, daalacayaashu uma eka inay u dhiibaan iyaga sida aad filan kartid. Sidaa daraadeed, halkan waxaa ah khaanad fanaaniin leh xuduudaha midabada leh:
qaabka xuduudaha: mid adag; xuduudaha xuduudaha: 1px 4px 4px 1px; qoraalka-qurxinta: midna; dhererka: 4px; midabka xuduudaha: # 69f # 00f # 00f # 69f; }Waxa kale oo aad saameyn kartaa hiddaha iyo qaababka firfircoon ee isku xirka badhanka, sidoo kale isticmaal kaliya casharrada jimicsiga:
a: link link {qaabka xuduudaha: adag; xuduudaha xuduudaha: 1px 4px 4px 1px; qoraalka-qurxinta: midna; dhererka: 4px; midabka xuduudaha: # 69f # 00f # 00f # 69f; } a: hover {xadka-midabka: #ccc; }