Fahmidda isbedelada weyn ee CSS3
Farqiga ugu weyn ee u dhexeeya CSS2 iyo CSS3 waa in CSS3 loo kala qaybiyay qaybo kala duwan, oo loo yaqaano modules. Mid kasta oo ka mid ah qaybahaas ayaa ka dhigaya iyada oo loo marayo W3C marxalado kala duwan oo ka mid ah geeddi-socodka soo-jeedinta. Nidaamkani wuxuu ka dhigtay mid sahlan in qaybo kala duwan oo CSS3 ah la aqbalo oo lagu hirgeliyo barta shabakada ee soo saarayaasha kala duwan.
Haddii aad isbarbardhigto nidaamkan waxa ka dhacay CSS2, halkaas oo wax waliba lagu soo gudbiyay dukumiinti hal oo leh dhammaan waraaqaha Cascading Style Sheets ee gudaha, waxaad bilowday inaad aragto faa'iidooyinka soo jiidashada talooyinka ilaa yaryar, shakhsi ahaan. Sababtoo ah mid kasta oo ka mid ah qaybaha waxaa loo shaqeynayaa si gooni ah, waxaan leenahay ballan aad u ballaaran ee shabakadda taageerada ee CSS3 modules.
Sida wax kasta oo cusub iyo isbeddelka isbeddelka, hubi inaad ku tijaabiso boggaga CSS3 si buuxda daalacayaasha iyo nidaamyada hawlgalka sida aad kartid. Xusuusnow hadafku ma aha in la abuuro bogag internet ah oo si isku mid ah u eegaya shabakad kasta, laakiin si loo hubiyo in nooc kasta oo aad isticmaashid, oo ay ku jiraan qaababka CSS3, aad u eegto daalacayaasha iyaga taageera iyo inay dib ugu dhacaan si quruxsan ha sameyn.
Doorayaasha cusub ee CSS3
CSS3 wuxuu bixiyaa farabadan siyaabo cusub oo aad u qorto xeerarka CSS oo leh xulashooyinka cusub ee CSS, iyo sidoo kale kombuyuutar cusub, iyo qaar ka mid ah waxyaalahan cusub.
Saddex xulasho cusub oo sifeynaya:
- Tilmaamaha bilawga ah waxay u dhigmaan calaamadda foo ^ foo ^ = "bar"] Caantu waxay leedahay sifo loo yaqaan foo oo ka bilaabma "bar" tusaale ahaan
- Qodobka ugu dambeeya ee isku xirnaanta calaamad [elemental] = foo $ = "bar"] Caantu waxay leedahay sifo la yiraahdo foo oo ku eg "bar" eg
- Tilmaamku wuxuu ka kooban yahay xiriirka [foo * = "bar"] Calaamad wuxuu leeyahay sifo loo yaqaan foo oo ku jira "bar" tusaale
16 fasallo cusub oo cusub:
- : asalka
- Qeybta aasaasiga ah ee dukumeentiga. In HTML waa had iyo jeer.
- : u-ilmaha (n)
- Isticmaal tan si aad ula jaan qaaddo saxdaada caruurta ama isticmaalka doorsoomayaasha si aad u hesho qalab kale.
- : S-da-ugu-yar-ilmaha (n)
- Calaamadee saxaarada carruurta ee tirinta ugu dambaysa.
- : nooca-ka-ah (n)
- Walxaha walaalaha ah ee isku midka ah oo isku magaca leh ka hor geedka dukumeentiga.
- : nooca ugu dambeeyay ee nooca (n)
- Walxaha walaalaha ah ee la wadaago magac isku mid ah oo ka soo jeeda dhinaca hoose.
- : ilmihii ugu dambeeyey
- Isku xir qaybta ugu dambeysa ee waalidka.
- : marka hore-of-nooca
- Isku dhaji walxaha walaalaha ah ee ugu horreeya ee noocaas.
- : ugu dambeyntii
- Isku habee qaybta walaalaha ugu dambeeya ee noocan ah.
- : kaliya-ilmaha
- Isku dhaji jaantuska oo ah ilmaha keliya ee waalidkiis.
- : kaliya-of-of-nooca
- Isku dhaji halbeegga oo ah nooca kaliya ee nooceedu yahay.
- : madhan
- Iskuxiraan walxaha aan laheyn carruur (oo ay ku jiraan nuqulka qoraalka).
- : bartilmaameed
- Isku habee hal element oo ah bartilmaameedka URI soo jeedinta.
- : karti leh
- Isku habee alaabta marka la awoodo.
- : naafada
- Isku habee alaabta marka ay naafo tahay.
- : hubin
- Isku habee alaabta marka la hubiyo (badhanka raadiyaha ama sanduuqa).
- : ma aha (s)
- Isku duub marka jajabku aanu ku habboonayn doorka fudud ee fudud.
Mid ka mid ah shanlaha cusub:
- elementA ~ elementel
- Isku duub marka elementiddu ay raacdo meel ka dambeysa elementA, ma ahan mid deg deg ah.
Guryaha Cusub
CSS3 ayaa sidoo kale soo bandhigtay tiro cusub oo cusub oo CSS ah. Qaar badan oo ka mid ah guryahaas waxay ahaayeen inay abuuraan muuqaalo muuqaal ah oo u badan inay la xidhiidho barnaamijka sawirada sida Photoshop. Qaar ka mid ah kuwan, sida radius-radius ama sanduuq-hoosaadka, waxay ahaayeen kuwo ku dhow ilaa tan barashada haddii CSS3. Kuwa kale, sida flushboorka ama xitaa CSS Grid waa noocyo cusub oo waliba marar badan loo tixgeliyo ku darida CSS3.
In CSS3, qaabka sanduuqa lama bedelin. Laakiin waxaa jira farabadan qaababka cusub ee qaabka ah ee kaa caawin kara inaad ku muujiso asalka iyo xuduudaha sanduuqyadaada.
Maqnaanshaha Aasaasiga ah I mages
Isticmaalka sawirka asalka ah, qaabka asalka ah, iyo qaababka soo noqnoqda oo aad u sheegi karto sawirro asal ah oo kala duwan si loo dhigo dusha sare ee sanduuqa. Sawirka hore waa lakabka ugu dhow ee isticmaalaha, iyadoo kuwa soo socda ay rinji yihiin. Haddii uu jiro midab asal ah, waxaa lagu rinjiyeeyaa hoosta sawirada muuqaalka.
Muujinta Muuqaalka Cusub ee Cusub
Waxaa sidoo kale jira qaar ka mid ah guryaha asaasiga ah ee CSS3.
- asalka ah
- Qalabkani wuxuu qeexayaa sida sawirka asalka ah loo xiri lahaa. Badbaadinta waa sanduuqa xuduudaha, laakiin waxaa loo bedeli karaa sanduuqa sanduuqa ama sanduuqa content.
- asalka asalka
- Qalabkani wuxuu go'aamiyaa haddii taariikhda ay tahay in ay ahaato meelo sanduuqa sanduuqa, sanduuqa xuduudaha, ama sanduuqa content.
- cabbirka asalka ah
- Qalabkani wuxuu kuu ogolaanayaa inaad muujiso xajmiga sawirka. Waxay kuu ogolaaneysaa inaad sawirro yar yar siisid si aad uhesho bogga.
Isbeddelka Goobaha Muuqaalka ah ee Hore
Waxa kale oo jira isbeddel yar oo ku yimaada guryaha asaasiga ah ee jira:
- dib-u-celin
- Waxaa jira laba qiimo oo cusub oo loogu talagalay hantidan: meel iyo wareeg. Meelaha bannaan ee muuqaalka sawirka ah si siman u dhexeysa sanduuqka iyada oo aan la xoqin. Miyuu ka badbaadiyaa sawirka asalka ah si uu u dhajiyo tiro idil oo sanduuq ah.
- astaanta astaanta
- Qiime cusub oo "maxaliga ah" ayaa lagu daraa si uu asalka u ekaado content-ka marka walxahaas uu leeyahay barbaro.
- asalka
- Hantidhawrka asalka ah ee gundhigga ah wuxuu ku darsadaa hantida weyn iyo asalka.
CSS3 Xuduudaha Xuduudaha
Xuduudda CSS3 waxay noqon kartaa qaababka aynu u isticmaalnay (adag, laba jibbaar, googo'an, iwm) ama waxay noqon karaan sawir. Waxaa intaa dheer, CSS3 wuxuu keenaa awooda lagu abuurayo geesaha wareegsan. Sawirada xuduudaha ayaa xiiso leh maxaa yeelay waxaad abuureysaa muuqaal afarta xuduudaha ah ka dibna u sheeg CSS sida loo isticmaalo sawirka xuduudahaaga.
Guryaha Cusub ee Xuduudaha Cusub
Waxaa jira qaar ka mid ah guryaha xuduudaha cusub ee CSS3:
- radius-radius
- xuduudaha sare-dhinaca midig-yar-yar-yar-yar-yar-yar-yar-yar , farqiga -hoose-midig-yar-yar , raadiye -hoose-bidix , farqiga u dhexeeya dhinaca sare-bidix
- Qalabkani wuxuu kuu oggolaanayaa inaad abuurto xuduudaha wareegsan xuduudahaaga.
- xadka sawirka
- Muujinaya faylka isir-yar ee muuqaalka ah ee loo isticmaali lahaa halkii ay ka muuqan lahaayeen qaababka xuduudaha hore loo qeexay
- xudduudaha-sawir-cad
- Muujineysaa meelaha la galo ee ka soo baxa geesaha muuqaalka xuduudaha
- xadka-sawirka-width
- Wuxuu qeexayaa qiimaha ballaaran ee sawirkaaga xadka.
- xuduudaha-muuqaalka-muuqaalka
- Waxay caddaynaysaa tirada xadka sawirka xuduudaha ka baxsan sanduuqa xadka.
- xuduudaha-muuqaalka-muuqaalka
- Wuxuu qeexayaa sida dhinacyada iyo qaybaha dhexe ee sawirka xuduudaha loo baahan yahay in la dhigo ama la cabiro.
- xuduudda-sawirka
- Qalabka shiftand ee hantida image xuduudaha.
Qalabka CSS3 oo dheeraad ah oo la Xidhiidha Xuduudaha iyo Goobaha
Marka sanduuqa la jebiyo bogga nasashada, jibbaar jebinta jebinta xariijinta (qalabyada qulqulka) qalabka sanduuq-qurxinta-jajabku wuxuu qeexayaa sida sanduuqyada cusub loogu duubo xuduudaha iyo caanaha. Goobta waxaa loo kala qaybin karaa sanduuqyo badan oo jaban iyadoo la adeegsanayo hantidan.
Waxaa sidoo kale jira hanti sanduuq-hoos ah oo loo isticmaali karo in lagu daro hooskii sanduuqa.
Iyada oo CSS3, waxaad si sahlan u samayn kartaa bogga Webka leh iskujiro badan oo aan lahayn jadwal ama qaab dhismeedka dhismaha madaarka adag. Waxaad si fudud u sheegi kartaa barta shabakadda intee le'eg ee isdabajoogga jirka waa inuu lahaadaa iyo sida ay ugu baahantahay. Plus waxaad ku dari kartaa xuduudaha (xeerarka), midabada asalka ah ee sarreeya sarajoogga, iyo qoraalkaagu wuxuu ku socon doonaa dhamaan sirta si toos ah.
CSS3 Columns - Qeexaan Tirada iyo Weynaanta Columnska
Waxaa jira saddex siyood oo cusub oo kuu oggolaanaya inaad qeexdo tirada iyo ballaadhanka saldhiggaaga:
- width width
- Wuxuu qeexayaa wadiiqadaada ay tahay in ay noqoto. Browserka ayaa markaa ka dibna qoraya qoraalka si uu u buuxiyo booska leh iskumar leh ballaaran.
- tiir-tirin
- Wuxuu qeexayaa tirada tiirarka ee bogga. Browserku wuxuu markaa abuuri doonaa iskuxirad ku filan oo ku habboon booska, laakiin kaliya lambarka aad sheegeyso.
- columns
- Shorthand hantida halkaas oo aad ku qeexi karto ballanka ama lambarka (ama labadaba, laakiin taasi dhif ayey ka dhigaysaa).
CSS3 Fursadaha Kombiyuutarka iyo Xeerarka
Nusqaamaha iyo qawaaniinta waxaa lagu dhejiyaa isku-xirnaanta isku-dabeecad isku mid ah. Nusqaamaha ayaa ka riixi doona tiirarka, hase yeeshee xeerarku ma qaadaan meel bannaan. Haddii xeerka tiirarka uu ka ballaaran yahay farqiga u dhexeeya, waxay isku dhejin doonaan tiirar ku dhow. waxaa jira shan shay oo cusub oo loogu talagalay shuruucda jaantusyada iyo meelaha banaan:
- farqiga u dhexeeya
- Wuxuu qeexayaa dhererka baqshadaha u dhexeeya tiirarka.
- midab-xeer-midab-midab
- Wuxuu qeexayaa midabka xeerka.
- tiirarka-qaanuunka
- Qeexaya qaabka xukunka (adag, calaamadeyn, laba jeer, iwm.).
- width-rule-width
- Wuxuu qeexayaa xajinta xeerka.
- tiirarka-qaanuunka
- Qalabka shorthand oo qeexaya dhamaan sadexda qaanuun ee xeerka.
CSS3 Sababaha Jajabay, Columnska Dalbashada, iyo Xargaha Buuxda
Fasaxyada taxan waxay isticmaalaan isku midka CSS2 oo loo isticmaalo si loo qeexo fasaxyada ku jira mawduuca, laakiin leh seddex siyood oo cusub: jebinta ka hor , jebinta ka dib , iyo jebinta gudaha .
Sida jadwalka, waxaad sameyn kartaa walxo si aad u xajisid xayawaanka ku yaal hantida santuuqa ah. Tani waxay kuu ogolaaneysaa inaad abuurto cinwaano ku yaalla tiirar badan oo badan sida wargeys.
Suunka buuxinta ayaa go'aaminaya inta ay le'eg tahay qaybta. Sumeerada dheellitiran waxay isku dayaan in ay isku dhigaan tiro isku mid ah oo ka mid ah tiir kasta inta ay baabuurtu ku socoto mowduucyada illaa inta ka dambeysa ay ka buuxsanyihiin kadibna tagaan midka xigta.
Qaabab Dheeraad ah oo CSS3 ah Aren & # 39; Waxa ku jira CSS2
Waxaa jira waxyaabo badan oo dheeraad ah oo ku jira CSS3 oo aan ka jirin CSS2, oo ay ku jiraan:
- Qaabdhismeedka CSS Template iyo CSS3 Qaabka Meelaynta Muujinta : Abuuritaanka waraaqaha CSS.
- CSS3 Qaababka qoraalka : Qoraalka qoraalka ah iyo xitaa samaynta hoos-hoosaadka CSS.
- CSS3 Midabka midabka : Hadda oo leh dhexdhexaad.
- Isbedelada qaabka sanduuqa : oo ay ku jiraan hantida marquee ah ee u dhaqma sida IE tag.
- Qalabka CSS3 Interface User : Ku siinaya cursado cusub, jawaabaha tallaabooyinka, meelaha loo baahan yahay, iyo xitaa dib u milicsiga .
- Waraaqaha Warbaahinta : Su'aalaha warbaahintu waxay kuu oggolaanayaan inaad bedbedesho markaad qeexayso sida xaashida qaabka loo isticmaalo. Tusaale ahaan, waxaad qeexi kartaa xaashida qaabka ah ee loogu talagalay oo keliya qalabka gacanta lagu hayo oo leh aragti ka badan 20em.
- CSS3 Module Ruby : Waxay bixisaa taageero loogu talagalay luuqadaha isticmaala rubyaha qoraalka si ay u sharaxaan dokumentiyada.
- CSS3 Module Media loo yaqaan : Xitaa taageero dheeraad ah oo loogu talagalay warbaahinta la xakameynayo (waraaqaha, daahfurnaanta, iwm).
- Waxyaabaha la soo saarey: Maareyasha iyo calaamadaha, laydhka, iyo waxyaabo kale oo la soo saaro barnaamijka, gaar ahaan warbaahinta la xakumay.
- CSS3 Nidaamka Hadalka : Isbedelka CSS-ka aural.