Umehluko phakathi kweCSS2 kunye neCSS3

Ukuqonda iinguqu ezinkulu kwiCSS3

Ukwahluke kakhulu phakathi kweCSS2 kunye neCSS3 kukuba iCSS3 ihlukaniswe kwiindawo ezihlukeneyo, ezibizwa ngokuba yiimodyuli. Nganye yee modyuli yenza indlela yayo ngeW3C kwiindidi ezahlukahlukeneyo zenkqubo yokucebisa. Le nkqubo iye yenza kube lula kwiinqununu ezahlukeneyo zeCSS3 ukuba zamkelwe kwaye ziphunyezwe kwisiphequluli ngabavelisi abahlukeneyo.

Ukuba uthelekisa le nkqubo kwinto eyenzekayo ngeCSS2, apho yonke into ingeniswe njengoluxwebhu olulodwa kunye nayo yonke i- Cascading Style Sheet information ngaphakathi kwayo, uqala ukubona iingenelo zokuphula iziphakamiso ukuya kwiincinci zincinci. Ngenxa yokuba nganye iimodyuli isebenza ngabanye, sinalo uluhlu oluninzi lwabaxhasi be-browser kwiimodyuli zeCSS3.

Njengoko naluphi na uhlobo olutsha kunye nokutshintsha, qiniseka ukuba uvavanye amaphepha akho e-CSS3 ngokugqibeleleyo kwiinkqubo ezininzi zokuphequlula kunye nezindlela zokusebenza. Khumbula ukuba injongo ayiyikudala iphepha lewebhu elibukeka lifana nayo yonke i-browser, kodwa ukuqinisekisa ukuba nayiphi na izitayela ozisebenzisayo, kubandakanywa nezitayela ze-CSS3, zibukeka zikhulu kwiiphequluli ezizixhasayo kwaye zibuye zibuyele ngokukhawuleza kwiziphequluli ezindala suku.

Selektri ezintsha zeCSS3

I-CSS3 inikezela iqela leendlela ezintsha ongabhala imithetho yeCSS kunye nabakhethi be-CSS abatsha, kunye ne-combinator entsha kunye namanye amacandelo amasha.

Abakhethi abathathu bokuqala:

• Isiqalo sokuqala ngokumatshatshana kwinqanaba elifanayo [foo ^ = "ibha"] Isakhi sinomxholo obizwa ngokuba yi-foo oqala nge "bar" umzekelo
• Isicatshulwa sokuphela sichaphazela into ecacileyo [foo $ = "ibha"] Isalathisi sinomxholo obizwa ngokuba yi-foo ephela nge "bar" umzekelo
• Isalathiso sinomxholo womdlalo [foo * = "ibha"] Into leyo inomxholo obizwa ngokuba yi-foo equle umnqamlezo "ibha" umz

16 amatsha eklasi:

• : ingcambu
  • Ingcambu yeengcambu zexwebhu. Ku-HTML oku njalo.
• : umntwana-n (n)
  • Sebenzisa le nto ukufanisa izinto ezifanelekileyo zabantwana okanye sebenzisa iziguquko ukuze ufumane amatshana athile.
• : Umntwana wokugqibela (n)
  • Ukutshatshana ngokuchanekileyo kwimiba yomntwana ebalekela ekugqibeleni.
• : uhlobo lwesibini (n)
  • Umdlalo wokubambisana kunye negama elifanayo phambi kwalo kumthi womqulu.
• : i-nth-last-type-n (n)
  • Amatshana okubambisana kunye negama elifanayo elibala phezulu.
• : umntwana wokugqibela
  • Ukudibana nomntwana wokugqibela womzali.
• : lokuqala lohlobo
  • Qhathanisa iqabane lokuqala lomntwana waloo hlobo.
• : lokugqibela-uhlobo
  • Qhathanisa iqela lokugqibela lomzalwana waloo hlobo.
• :mntwna okuphela kwakhe
  • Qhathanisa umbandela owodwa ngumntwana womzali wakhe.
• : kuphela uhlobo lohlobo
  • Qhathanisa into ebalulekileyo yoluhlobo lwayo.
• : ayinanto
  • Qhathanisa into engenazo abantwana (kubandakanywa nodes zombhalo).
• : kujoliswe
  • Qhathanisa umbandela ojoliswe kwi-URI yokubhekisa.
• : inikwe amandla
  • Qhathanisa iqela xa inikwe amandla.
• : abakhubazekile
  • Qhathanisa into xa ikhubazekile.
• : uhlolwe
  • Hlanganisa iqela xa likhangela (inkinobho yomsakazo okanye ibhokisi lokukhangela).

• : a (a)
  • Umdlalo xa iqela lingalingani nomkhethi olula.

Omnye umhlanganisi omtsha:

• elementA ~ elementB
  • Umdlalo xa i-elementB ilandela emva kwendawo emva kwe-elementA, kungekhona ngokukhawuleza.

Iipropati ezintsha

I-CSS3 yazisa kwakhona inani elitsha leempahla zeCSS. Uninzi lwezi mpawu kwakuzokwenza izitayela ezibonakalayo ezinokuthi zidibanise ngakumbi kunye neprogram efana ne-Photoshop. Ezinye zazo, njengomda we-border-radius okanye ibhokisi-isithunzi, sele zijikeleze ukususela xa kungeniswa ukuba i-CSS3. Abanye, njenge-flexbox okanye i-CSS Grid yimizila emitsha esoloko ixutyushwa njenge-CSS3.

Kwi CSS3, imodeli yebhokisi ayitshintshi. Kodwa kukho iqela lezakhiwo ezintsha zesakhiwo ezingakunceda ukuba ulandele imvelaphi kunye nemida yeebhokisi zakho.

Imvelaphi emininzi

Ukusebenzisa imifanekiso engemvelaphi, isikhundla semvelaphi, kunye nezitayela zokuphindaphinda-mva ungacacisa imifanekiso emininzi imvelaphi ukuba ikhetshwe ngaphezulu komnye ebhokisini. Umfanekiso wokuqala ngumgca osondeleyo kumsebenzisi, ezi zilandelayo zidwetswe emva. Ukuba kukho umbala wesiqendu, udwezwe ngezantsi phantsi kwayo yonke imizobo yomfanekiso.

Imvelaphi emitsha yeZakhiwo zeMpawu

Kukho ezinye iipropati ezintsha kwi-CSS3.

• isiqalo-clip
  • Le propati ichaza indlela imvelaphi engemmiselo ifanele ifakwe. Okungagqibekanga ibhokisi lomda, kodwa lingatshintshwa kwibhokisi lokudada okanye ibhokisi lokuqukethwe.
• imvelaphi yangemvelaphi
  • Le propati inquma ukuba imvelaphi kufuneka ibe yindawo kwibhokisi yokudada, ibhokisi lomda, okanye ibhokisi lokuqukethwe.
• ubungakanani bemvelaphi
  • Le propati ikuvumela ukuba ubonise ubungakanani bomfanekiso ongasemva. Ikuvumela ukuba welula imifanekiso encinane ukuze ulungele iphepha.

Utshintsho kwiiNdawo zeMpawu zoLuntu ezikhoyo

Kukho neenguqu ezimbalwa kwiimpawu zendawo ezikhoyo zangaphambili:

• ukuphindaphinda
  • Kukho imilinganiselo emibini yeli propati: indawo kunye nokujikeleza. Izithuba zendawo ezixutywe ngomfanekiso ngokufanelekileyo ngaphakathi kwebhokisi ngaphandle kokucinywa. Ujikeleziso lukhupha umfanekiso wesiqhelo ukwenzela ukuba luyi-tile inani eliphindwe kwiibhokisi.
• uqhotyoshelweyo
  • Ixabiso elitsha "lendawo" longezwa ukuze imvelaphi izakrola kunye nomxholo wento xa loo nto inomqolo wempuphu.
• imvelaphi
  • Imvelaphi emfutshane yipropati yongeza ubungakanani kunye nemvelaphi yeempahla.

CSS3 Properties Properties

Kwimijelo ye-CSS3 ingaba izitayela esisetyenzisiweyo (eziqinileyo, ezimbini, ezidibeneyo, njl.) Okanye zinokuba ngumfanekiso. Ngaphezu koko, i-CSS3 izisa amandla okudala iikona ezijikeleziweyo. Imida yamanqabileyo inomdla kuba udala umfanekiso wemida emine uze uxele iCSS ukuba ungayisebenzisa njani loo mfanekiso kwimida yakho.

Iipropati ezintsha zohlobo lweBorder

Kukho iipropathi ezintsha zomda kwiCSS3:

• emngceleni
  • umda ophezulu-ongakwesokudla-umda , umda we-right-right-radius , umda osezantsi-ngasekhohlo-umda , umda ophezulu-ongasese-kwesobunxele
  • Ezi zakhiwo zivumela ukuba udale iingqungquthela ezijikelezayo kwimida yakho.
• umthombo wendawo yomda
  • Icacisa ifayile yomthombo wesitrato ukuba isetyenziswe endaweni yeendlela zokugqibela ezichazwe.
• slice-image-slice
  • Ikhuphela i-offsets yangaphakathi ukusuka kwimida yezomda
• ububanzi bomda
  • Ichaza ubunani bobubanzi kumfanekiso wakho womda.
• ekuqaleni komfanekiso
  • Icacisa isixa ummandla wendawo yomda ufikelela ngaphaya kwebhokisi lomda.
• ukuthungulwa komfanekiso
  • Icacisa indlela amahlangothi kunye namacandelo aphakathi komfanekiso womda kufuneka afakwe ngayo okanye atyathwe.
• umfanekiso womda
  • Ipropati yecandelo layo yonke imifanekiso yomda.

Iimpahla zee-CSS3 ezongezelelweyo ezihambelana neMida kunye neendawo eziMvelaphi

Xa ibhokisi liphukile ekuphumeni kwekhasi, ikhefu yokuphuka komgca (kwimimiselo engundoqo) ibhokisi yeprogram-break-decoration ichaza indlela iibhokisi ezitsha zifakwe ngayo umda kunye nokudibanisa. Imvelaphi ingahlukaniswa phakathi kweebhokisi ezininzi eziphukileyo zisebenzisa le propati.

Kukho nendawo yebhokisi yesithunzi engasetyenziselwa ukufaka izithunzi kwizinto zebhokisi.

Nge CSS3, ngoku unokwenza lula iWebhu ikhasi elinamakholomu amaninzi ngaphandle kwetafile okanye izakhiwo zetek tag. Uvele utshele isiphequluli ukuba zingaphi iikholomu umzimba womzimba onokuthi ube nazo nokuba zibubanzi kangakanani. Ngaphezu koko ungeze imida (imigaqo), imibala yangemvelaphi ephakamileyo ubude bekholomu, kunye nesicatshulwa sakho siya kuhamba phakathi kwazo zonke iikholamu ngokuzenzekelayo.

Iikholomu ze-CSS3 - Chaza inani kunye nobubanzi bekholamu

Kukho izinto ezintathu ezitsha ezikuvumela ukuba uchaze inani kunye nobubanzi beikholomu zakho:

• ububanzi bekholomu
  • Uchaza ububanzi bakho iikholomu kufuneka zibe. Umkhangeli uzakugqithisa isicatshulwa ukugcwalisa isikhala ngamakholomu avulekileyo.
• kubalo lwekholomu
  • Uchaza inani lamakholomu kwiphepha. Umkhangeli uzakudala iikholomu ezinkulu ngokwaneleyo ukuze zilungele indawo, kodwa kuphela inombolo ochazayo.
• iikholomu
  • Iprojeythi ye-Shorthand apho unokuchaza khona ububanzi okanye inombolo (okanye zombini, kodwa loo nto ayifumanekanga ingqiqo).

Iimpawu zeekholamu zeCSS3 kunye neMithetho

Izikhala kunye nemithetho zibekwe phakathi kweikholomu kwimeko efanayo ye-multicolumn. Izikhefu ziya kuluhlula iikholam, kodwa imigaqo ayithathi naliphi na indawo. Ukuba umgaqo wekholomu ububanzi kunokuba igebe, iya kubamba iikholam ezikufutshane. kukho iindawo ezinhlanu ezitsha zeemigaqo yekholomu kunye nezikhefu:

• ikhefu-gap
  • Uchaza ububanzi bezithuba phakathi kwamakholomu.
• umbala wemibala
  • Uchaza umbala wolawulo.
• isitayela sokulawula ikholomu
  • Icacisa isitala somgaqo (uqinile, udibeneyo, kabini, njl.).
• ububanzi bekholamu
  • Uchaza ububanzi bomgaqo.
• lawula ikholomu
  • Ipropati emfutshane ichaza zonke iipropati ezintathu zolawulo lwekholomu ngexesha elilodwa.

I-CSS3 Ukuphulwa kwekholomu, iikholam zokuqhawula kunye nokuzalisa iikholam

Ikhefu lekhefu sebenzisa iindlela ezifanayo ze-CSS2 ezisetyenziselwa ukucacisa ukuphuka kwimixholo emiselweyo, kodwa ngeepropati ezintsha ezitsha: ukuphuka-ngaphambili , emva kwekhefu , kunye nokuphuka ngaphakathi .

Njengamatafula, unokusetha izinto ukuze usebenzise iikholomu kunye neprogram yekholomu-span. Oku kukuvumela ukuba udale iintloko ezithatha iikholomu ezininzi njengephephandaba.

Ukuzalisa iikholomu kuthatha isigqibo sokuthi umxholo ungakanani kwiikholamu nganye. Amakholomu alinganisiweyo azama ukubeka umlinganiselo ofanayo nomxholo kwikholam nganye ngelixa umzenzele umgca kuphela umxholo ukuya kwikholamu igcwele uze ulandele.

Ezinye izinto kwi-CSS3 Aren & # 39; t Kuqukwa kwi-CSS2

Kukho izinto ezininzi ezongezelelweyo kwi-CSS3 ezingekho kwiCSS2, kubandakanywa:

• Iimodyuli ze-Template yeCSS kunye neCSS3 Imodyuli yokubeka igridi : Ukudala i-grids ngeCSS.
• I-CSS3 Imodyuli yombhalo : Inkcazo yenkcazo kunye nokudala izithunzi ze-CSS.
• I-CSS3 Imodyuli yombala : Ngoku nge-opacity.
• Utshintsho kumzekelo webhokisi : Kubandakanya indawo ye- marquee efana ne-IE tag.
• Ikhompyutyana yomsebenzisi we-CSS3 : Ukunika izikratshi ezintsha, iimpendulo kwizenzo, kwiimfuno ezifunekayo, kunye nezinto zokuguqula .
• Imibuzo yeMidiya : Imibuzo yeMidiya ikuvumela ukuba uguquke ngakumbi xa uchaza indlela ifayile yesitawu isetyenziswe ngayo. Ngokomzekelo, ungachaza ishidi lomshicileli kuphela lweefowuni eziphathekayo ezinobungakanani obukhangayo ngaphezu kwe-20em.
• Imodyuli ye-Ruby yeCSS3 : Inikeza inkxaso kwiilwimi ezisetyenziselwa ukusebenzisa i-ruby yamagama ukuchaza amaxwebhu.
• Umxube we-CSS3 we-Paged Media : Ukwesekwa ngakumbi kwi-media media (iphepha, i-transparencies, njl.
• Umxholo oqulunqiweyo : L eziqhutywayo zeentloko kunye neenyawo, amanqaku angaphantsi, kunye nezinye iziqulatho eziveliswe ngokweenkqubo, ngokukodwa kwiimidiya ezisezantsi.
• Inkcazo yeNtetho yeCSS3 : Iinguqu kwiCSS yaseburhulumenteni.