Umehluko Phakathi kweCSS2 no-CSS3

Ukuqonda izinguquko ezinkulu ku-CSS3

Umehluko omkhulu phakathi kwe-CSS2 no- CSS3 wukuthi i-CSS3 ihlukaniswe ngezigaba ezihlukene, ezibizwa ngokuthi amamojula. Ngamanye amamojula akwenza indlela yawo ngokusebenzisa iW3C ngezigaba ezihlukahlukene zenqubo yokuncoma. Le nqubo yenza kube lula ngezicucu ezihlukahlukene ze-CSS3 ukuthi zamukele futhi zisebenzwe kusiphequluli ngabakhiqizi abahlukene.

Uma uqhathanisa le nqubo kulokho okwenzekile nge-CSS2, lapho konke kuhanjiswe khona njengedokhumenti eyodwa nayo yonke imininingwane yeSascading Style Sheets ngaphakathi kwayo, uqala ukubona izinzuzo zokuphula izincomo zibe yizicucu ezincane, ngamanye. Ngenxa yokuthi ngayinye yamamojula asetshenziswa ngabanye, sinomkhawulo obanzi kakhulu wokusekela isiphequluli samamojuli we-CSS3.

Njenganoma yisiphi isichazamazwi esisha nesishintshayo, qiniseka ukuthi uvivinya amakhasi akho e-CSS3 ngokugcwele kuziphequluli eziningi nezinhlelo zokusebenza okusemandleni akho. Khumbula ukuthi umgomo awukona ukudala amakhasi wewebhu abonakala ngokufanayo kuzo zonke iziphequluli, kodwa ukuqinisekisa ukuthi yiziphi izitayela ozisebenzisayo, kuhlanganise nezitayela ze-CSS3, zibukeka zikhulu kuziphequluli ezizisekelayo futhi zibuyele kahle ngeziphequluli ezindala ungenzi.

Izinketho ezintsha ze-CSS3

I-CSS3 inikeza inqwaba yezindlela ezintsha ongabhala ngazo i-CSS ngokukhetha izikhethi ezintsha ze-CSS, kanye ne-combinator entsha, nezinye izakhi zangasese ezintsha.

Izinketho ezintathu ezintsha zezici:

• Faka umlingisi wokuqala ekuqaleni kwesici [foo ^ = "ibha"] Isici sinemfanelo ebizwa ngokuthi i-foo eqala nge "ibha" isib
• Isimiso sokuphela silinganisa ncamashi isici [foo $ = "ibha"] Isici sinemfanelo ebizwa ngokuthi i-foo ephela nge "bar" isib
• Isici sinezici zokufanisa [foo * = "ibha"] Isici sinemfanelo ebizwa ngokuthi i-foo equkethe "ibha" yochungechunge, isib.

Amashadi amasha angu-16 amasha:

• : izimpande
  • Isici sempande yedokhumenti. Ku-HTML lokhu njalo.
• : i-nth-child (n)
  • Sebenzisa lokhu ukufanisa izakhi zezingane eziqondile noma sebenzisa iziguquko ukuze uthole ukufana okuhlukile.
• : ingane yokugcina (n)
  • Qondanisa izinto eziqondile zezingane ezibalwa kusukela kokugcina.
• : nth-of-uhlobo (n)
  • Izakhi zokubambisana ezifanayo ngegama elifanayo ngaphambi kwalo muthi wedokhumenti.
• : i-nth-last-of-type (n)
  • Izakhi zozakwethu zokubambisana ezinegama elifanayo elibala kusukela phansi.
• : ingane yokugcina
  • Qondanisa ingane yokugcina yomzali womzali.
• : kokuqala kohlobo
  • Qhathanisa isici sokuthoma sokuqala salolo hlobo.
• : ukugcina koku-hlobo
  • Qhathanisa isici sokugcina salolo hlobo.
• :umtwana yena yedwa
  • Qondanisa isici esiyedwa yedwa womzali wayo.
• : kuphela-of-hlobo
  • Qondanisa isici esiwukuphela kohlobo lwaso.
• : ayinalutho
  • Qhathanisa isici esingenabantwana (kufaka phakathi amakhodi wombhalo).
• : target
  • Qondanisa isici esibhekene ne-URI ekhuluma.
• : inikwe amandla
  • Qondanisa isici uma inikwe amandla.
• : kukhutshaziwe
  • Qondanisa isici uma sikhutshaziwe.
• : ihlolwe
  • Qondanisa isici uma ihlolwe (inkinobho yomsakazo noma ibhokisi lokuhlola).

• : hhayi (s)
  • Qhathanisa uma isici singavumelani nesilawuli esilula.

Enye ihlanganisi entsha:

• elementA ~ elementB
  • Qhathanisa uma i-elementB ilandela indawo ngemuva kwe-elementA, hhayi ngokushesha.

Izakhiwo ezintsha

I-CSS3 iphinde yafaka izinto eziningi ze-CSS. Eziningi zalezi zakhiwo kwakungukudala izitayela ezibukwayo ezingase zihlobanise kabanzi ngehlelo lemifanekiso efana ne-Photoshop. Amanye alawa, afana nomngcele-radius noma ibhokisi-shadow, kuye kwaba khona kusukela isingeniso uma CSS3. Abanye, njenge-flexbox noma i-CSS Grid kukhona izitayela ezintsha ezisaziwa njengezingxenye ze-CSS3.

Ku-CSS3, imodeli yebhokisi ayishintshile. Kodwa zikhona izakhiwo zesitayela ezintsha ezingakusiza ukuthi udwebe izizinda nemingcele yamabhokisi akho.

Ingemuva Eningi Ngiyajabula

Ukusebenzisa umfanekiso wesithombe sangemuva, isimo sangemuva, nezitayela eziphindaphinda ngemuva ungacacisa izithombe eziningi ezingemuva ukuze zikhishwe phezulu phezulu komunye ebhokisini. Isithombe sokuqala isendlalelo esiseduze nomsebenzisi, okulandelayo kubonwe ngemuva. Uma kukhona umbala wangemuva, upende ngezansi zonke izendatshana zesithombe.

Izakhiwo zangasese zendatshana entsha

Kukhona nezinye izakhiwo zangasese ezintsha ku-CSS3.

• isizinda-isiqeshana
  • Le mpahla ichaza ukuthi isithombe esingemuva kufanele senziwe kanjani. Okuzenzakalelayo ibhokisi lomngcele, kodwa lingashintshwa ebhokisini lokunamathisela noma ibhokisi lokuqukethwe.
• imvelaphi yangemuva
  • Lo mhlaba unquma ukuthi imvelaphi kufanele ibe yizindawo ebhokisini lokudada, ibhokisi lomngcele, noma ibhokisi lokuqukethwe.
• ubukhulu obungemuva
  • Le ndawo ikuvumela ukuba ubonise usayizi wesithombe sangemuva. Ikuvumela ukuthi welula izithombe ezincane ukuze uvumelane nekhasi.

Izinguquko ezakhiweni zezakhiwo zendatshana ekhona

Kukhona nezinguquko ezimbalwa ezakhiweni zesitayela zasemuva ezikhona:

• isizinda-phinda
  • Kukhona amanani amabili amasha walesi sakhiwo: isikhala nokujikeleza. Isikhala sibeka isithombe esihlanganisiwe ngendlela efanayo ngaphakathi kwebhokisi ngaphandle kokuchofoza. Ukujikeleza kususa isithombe sangemuva ukuze sikhiphe inani eliphindwe izikhathi ebhokisini.
• okunamathiselwe kwangemuva
  • Inani elisha "lendawo" lengezwe ukuze isizinda sivule okuqukethwe kokuqukethwe lapho leso sici sinomqulu wokuphenya.
• isizinda
  • Isici sangemuva nesakhiwo sinezela ngobukhulu nezakhiwo zangempela.

I-CSS3 Properties Border

Emingceleni ye-CSS3 ingaba izitayela esisetshenziselwa (eziqinile, eziphindwe kabili, eziphahlazekile, njll) noma zingaba isithombe. Ngaphezu kwalokho, i-CSS3 iletha ikhono lokudala amakhonkqo ahlangene. Izithombe zamaphethelo zithakazelisayo ngoba udala umfanekiso wazo zonke imingcele bese utshela i-CSS ukuthi ungayisebenzisa kanjani leso sithombe kumingcele yakho.

Izakhiwo zesitayela ezintsha

Kukhona ezinye izindawo zomngcele omusha ku-CSS3:

• umda-umngcele
  • umngcele-phezulu-kwesokudla-umzila , umngcele-ngezansi-kwesokudla-umzila , umngcele-ngezansi-kwesokunxele-radius , umngcele-phezulu-kwesokunxele-radius
  • Lezi zakhiwo zikuvumela ukuba udale amakolanga azungezile emingceleni yakho.
• umthombo wesithombe-umngcele
  • Icacisa ifayela lomthombo wesithombe okufanele lisetshenziswe esikhundleni sezitayela zomngcele ezichazwe kakade.
• umkhawulo-wesithombe-slice
  • Ibuyisa izinto ezingaphakathi ukusuka emaphethelweni wesithombe somngcele
• umkhawulo-wesithombe-ububanzi
  • Ichaza inani lobubanzi besithombe sakho somngcele.
• umkhawulo-wesithombe-ekuqaleni
  • Icacisa inani ukuthi indawo yesithombe somngcele ihamba ngaphezu kwebhokisi lomngcele.
• Ukwelula kwesithombe somngcele
  • Ichaza indlela izingxenye nezinhlangothi eziphakathi kwesithombe somngcele okufanele ziboshwe noma zihlanganiswe.
• isithombe sezomngcele
  • I-shorthand impahla yawo yonke impahla yesakhiwo semingcele.

Izakhiwo ze-CSS3 ezengeziwe ezihlobene ne-Borders and Backgrounds

Uma ibhokisi liphukile ekuphumeni kwekhasi, ikholomu yokuphumula komugqa wendabuko (izakhi ezitholakala ngaphakathi) impahla yebhokisi-yokuhlobisa-imfucuza ichaza ukuthi amabhokisi amasha ahlanganiswe kanjani nomngcele nendawo yokugqoka. Ingemuva ingahlukaniswa phakathi kwamabhokisi amaningi aphukile esebenzisa le ndawo.

Kukhona futhi indawo yebhokisi-shadow ongasetshenziselwa ukwengeza izithunzi ezakhiweni zebhokisi.

Nge-CSS3, manje usungakha kalula ikhasi leWebhu elinamakholomu amaningi ngaphandle kwamatafula noma izakhiwo ze-div tag eziyinkimbinkimbi. Uvele utshele isiphequluli ukuthi zingaki amakholomu isici somzimba okufanele sibe nawo nokuthi kufanele kube nzima kangakanani. Ngaphezu kwalokho ungangeza imingcele (imithetho), imibala yangemuva ehlanganisa ukuphakama kwekholomu, futhi umbhalo wakho uzothambela kuzo zonke izinsika ngokuzenzakalelayo.

Amakholomu we-CSS3 - Chaza inombolo nobubanzi bekholomu

Kukhona izindawo ezintathu ezintsha ezikuvumela ukuba uchaze inombolo nobubanzi bekholomu yakho:

• ikholomu-ububanzi
  • Ichaza ububanzi amakholomu akho kufanele abe. Isiphequluli sizogeleza umbhalo ukuze ugcwalise isikhala ngamakholomu avulekile.
• ikholomu-count
  • Ichaza inani lamakholomu ekhasini. Isiphequluli sizobe sakha amakholomu kabanzi ngokwanele ukuze afane nesikhala, kodwa kuphela inombolo oyicacisayo.
• amakholomu
  • I-shorthand impahla lapho ungachaza khona ububanzi noma inombolo (noma kokubili, kodwa lokho akuvamile ukuthi kunengqondo).

I-CSS3 Imikhawulo Yekholomu Nemithetho

Amaphutha nemithetho zibekwa phakathi kwamakholomu esimweni esifanayo se-multicolumn. Izikhala zizophambana namakholomu, kepha imithetho ayithathi isikhala. Uma umthetho wekholomu ububanzi kunengqikithi yesikhala, izoba ngaphezulu kwamakholomu athile. kunezindawo ezinhlanu ezintsha zezimiso zekholomu kanye namajuba:

• ikholomu-gap
  • Ichaza ububanzi beziphala phakathi kwekholomu.
• ikholomu-umbuso-umbala
  • Ichaza umbala wokubusa.
• isitayela sokubusa kwikholomu
  • Ichaza isitayela somthetho (oqinile, oshayishiwe, ophindwe kabili, njll).
• ikholamu-ububanzi-ububanzi
  • Ichaza ububanzi bokubusa.
• ukubhala ikholomu
  • Impahla encane echaza zonke izinto ezintathu zokulawula ikholomu ngesikhathi esisodwa.

Ama-Breaks ekholomu we-CSS3, Amakholomu wokuPhala, nama-Columns egcwalisa

Ikhefu lamakholomu isebenzisa izinketho ezifanayo ze-CSS2 ezisetshenziselwa ukuchaza ukuphumula kokuqukethwe okwenziwe, kepha ngezindawo ezintathu ezintsha: ukuphuka-ngaphambili , ukuphumula ngemuva , nokuphumula ngaphakathi .

Njengamatafula, ungasetha izakhi ukuze uphendule amakholomu ngempahla yekholomu-span. Lokhu kukuvumela ukuthi udale izinhloko ezithinta amakholomu amaningi njengephephandaba.

Ukugcwalisa amakholomu kunquma ukuthi kungakanani okuqukethwe okuzoba khona kukholomu ngayinye. Amakholomu alinganisiwe azama ukulinganisa okuqukethwe okufanayo kukholomu ngayinye ngenkathi u-auto egijima nje okuqukethwe kuze kube yilapho ikholomu igcwele bese uya kwesinye.

Izici eziningi ku-CSS3 Aren & # 39; t Kuhlanganisiwe ku-CSS2

Kunezici eziningi ezengeziwe ku-CSS3 ezazingekho ku-CSS2, kufaka phakathi:

• Imodi yokuhlela yesifanekiso se-CSS ne-CSS3 Igridi yokubeka igridi : Ukwakha ama-gridi nge-CSS.
• I-CSS3 Umthamo wombhalo : Umbhalo we-Outline bese wenza ngisho nezithunzi ze-CSS.
• I-CSS3 Umbala wombala : Manje nge-opacity.
• Izinguquko kumodeli ebhokisi : Kufaka impahla ye- marquee efana nomaka we-IE.
• I-CSS3 I-module Interface yomsebenzisi : Ukunika izinkomba ezintsha, izimpendulo ezenzweni, amasimu adingekayo, ngisho nezakhi zokuguqula .
• Imibuzo yemidiya : Imibuzo yemidiya ikuvumela ukuba uguquguquke lapho uchaza indlela isitayela sesitayela okufanele sisetshenziswe ngayo. Isibonelo, ungachaza ishidi lesitayela kuphela lamasevisi aphathekayo ane-viewport emikhulu kunama-20m.
• Igumbi le-Ruby le-CSS3 : Inikeza ukwesekwa kwezilimi ezisetshenziswa i-ruby textual ukuze ichaze amadokhumenti.
• I-CSS3 I-Paged Media module : Ukuze uthole ukwesekwa okungaphezulu kwemithombo ye-paged (iphepha, ukukhanya, njll).
• Okuqukethwe okhiqizwayo : L ezihlokweni eziqhutshwayo nezinyawo, ama-footnotes, nokunye okuqukethwe okukhiqizwa ngokuhlelekile, ikakhulukazi kumaphephandaba.
• I-CSS3 Inkulumo yokukhuluma : Izinguquko ku-CSS ye-aural.