Ịghọta mgbanwe ndị dị na CSS3
Nnukwu ihe dị iche n'etiti CSS2 na CSS3 bụ na e kewara CSS3 na ngalaba dị iche iche, a na-akpọ modulu. Nke ọ bụla n'ime modulu ndị a na-agafe W3C n'akụkụ dị iche iche nke usoro nkwenye ahụ. Usoro a emeela ka ọ dịkwuo mfe maka ụdị CSS3 dị iche iche ka a nabata ya ma tinye ya na ihe nchọgharị ahụ site n'aka ndị nrụpụta dị iche iche.
Ọ bụrụ na ị jiri usoro a tụnyere ihe merenụ na CSS2, bụ ebe e debere ihe niile dị ka otu akwụkwọ na ozi Cascading Style Sheets n'ime ya, ị ga-amalite ịhụ uru nke ịkwanye ndụmọdụ ahụ dịka obere, akụkụ nke ọ bụla. Ebe ọ bụ na a na-arụ ọrụ nke ọ bụla n'otu aka ahụ, anyị nwere nkwado dị ukwuu nke nkwado nchọgharị maka CSS3 modules.
Dị ka ọ bụla nkọwa na agbanwe agbanwe, jide n'aka na ị nyochaa CSS3 ibe gị nke ọma dị ka ọtụtụ nyocha na sistemụ arụmọrụ dịka i nwere ike. Cheta na ihe mgbaru ọsọ abụghị ịmepụta ibe weebụ nke na-ele anya n'otu ihe ahụ na ihe nchọgharị ọ bụla, kama iji hụ na ụdị ọ bụla ị na-eji, tinyere ụdị CSS3, na-ele anya na ihe nchọgharị ndị na-akwado ha ma na ha ga-adaghachi azụ maka ndị nchọgharị ochie emela.
New CSS3 Họrọ
CSS3 na-enye otu ụyọkọ nke ụzọ ọhụrụ ị nwere ike ide CSS iwu na ndị ọhụrụ CSS nhọrọ, nakwa dị ka onye ọhụrụ na-agụnye, na ụfọdụ ọhụrụ pseudo-ọcha.
Ụdị àgwà atọ dị iche iche:
- Mbido na-amalite mmalite mmemme [foo ^ = "mmanya"] Ihe mmewere nwere àgwà a na-akpọ foo nke na-amalite site na "mmanya" eg
- Ebumnuche na-agwụcha ihe kpọmkwem mmemme [foo $ = "mmanya"] Ihe mmewere nwere àgwà a na-akpọ foo nke na-agwụ na "mmanya" eg
- Egwuregwu nwere ihe egwuregwu ahụ [foo * = "mmanya"] Ihe mmewere nwere àgwà a na-akpọ foo nke nwere "nkpọrọ" eg
16 ọhụrụ pseudo-klas:
- : mgbọrọgwụ
- Ihe mgbakwasị ụkwụ nke akwụkwọ ahụ. Na HTML nke a bụ mgbe niile.
- : nth-nwa (n)
- Jiri nke a iji jikọta kpọmkwem ihe ụmụaka ma ọ bụ jiri mgbanwe dị iche iche iji nweta ihe ọkụkọ ọzọ.
- : nth-last-child (n)
- Gbanyere kpọmkwem ụmụaka ndị na-agụta site na nke ikpeazụ.
- : nth-nke-ụdị (n)
- Mmekọrịta nwanne na otu aha n'ihu ya na osisi akwukwo.
- : nth-nke ikpeazụ (nke) (n)
- Ejikọta ihe ndị dị na ya na otu aha na-agụta site na ala.
- : nwa ikpeazụ
- Gbanyere nwa mmechi nke nne na nna.
- : mbụ-nke-ụdị
- Gbanyere nkeji nke mbụ nke ụdị ahụ.
- : ikpeazụ-nke-ụdị
- Gbanyere ihe mmechi ikpeazụ nke ụdị ahụ.
- : naanị nwa
- Gbanwee mmewere nke bụ nanị nwa nke nne na nna ya.
- : naanị-nke-ụdị
- Gbanwee mmewere nke bụ naanị otu ụdị ya.
- : efu
- Gbanwee mmewere nke enweghị ụmụ (gụnyere ederede ederede).
- : lekwasịrị anya
- Gbanwee otu mmewere nke bụ ihe mgbaru ọsọ nke URI na-ezo.
- : nyeere
- Gbanwee mmezi mgbe enyere ya aka.
- : nkwarụ
- Gbanwee mmezi ahụ mgbe ọ nwere nkwarụ.
- : enyocha
- Mee ka mmewere ya ma ọ bụrụ na elele ya (bọtịnụ redio ma ọ bụ igbe nlele).
- : ọ bụghị (s)
- Tulee mgbe mmewere adịghị adaba na onye nnwere onwe dị mfe s.
Otu onye nhazi ọhụrụ:
- elementa ~ elementB
- Gbasara ya mgbe elementb na-eso ebe ebe elementa, ọ bụchaghị ozugbo.
Ihe Njirimara ọhụrụ
CSS3 gwakwara ọtụtụ nọmba CSS ọhụrụ. Ọtụtụ n'ime ihe ndị a bụ ịmepụta ụdị anya dị iche iche nke ga-ejikọta ya na usoro mmemme dị ka Photoshop. Ụfọdụ n'ime ndị a, dị ka mgbidi ókè ma ọ bụ igbe-onyinyo, anọwo ebe ọ bụ na mmeghe ọ bụrụ na CSS3. Ndị ọzọ, dị ka flexbox ma ọ bụ ọbụna CSS Grid bụ ụdị ọhụrụ ndị a ka na-atụlekarị CSS3.
Na CSS3, ụdị igbe ahụ agbanwebeghị. Ma, enwere ụyọkọ ụdị ihe eji emepụta ọhụrụ nke nwere ike inyere gị aka ịhazi ọdịda na ala nke igbe gị.
Otutu ihe m na-eme
N'iji ndabere, onyinyo, na usoro imeghari-imeghari ị nwere ike ịdepụta ọtụtụ ihe oyiyi dị iche iche ka ha dịrị n'elu ibe gị. Ihe oyiyi mbụ bụ oyi akwa kachasị na onye ọrụ ahụ, ya na ndị na-esonụ na-ese n'azụ. Ọ bụrụ na agba agba, a na-ese ya n'okpuru ihe oyiyi niile.
Ọdịdị Atụmatụ Ọdịnihu ọhụrụ
Enwekwara ụfọdụ ihe nzụlite ọhụrụ na CSS3.
- ndabere-clip
- Ihe onwunwe a na-akọwa otú e kwesịrị isi kpochapụ onyinyo ya. Ndabere bụ akara ókè, mana enwere ike ịgbanwe ya ma ọ bụ igbe nchekwa.
- ndabere-si
- Ihe a na-ekpebi ma nzụlite kwesịrị ịbụ ebe dị na igbe mgbochi, igbe dị n'ókè, ma ọ bụ igbe ọdịnaya.
- ndabere-size
- Nke a na-enye gị ohere igosi nha nke ndabere. Ọ na-enye gị ohere igbatịa obere foto iji dabara na peeji nke.
Mgbanwe na-adị ugbu a na-emepụta Njirimara Style
Enwerekwa mgbanwe ole na ole dị iche iche dị iche iche dị iche iche dị na ya:
- ndabere-ikwugharị
- E nwere ụkpụrụ ọhụrụ abụọ maka ihe a: ohere na gburugburu. Oghere na-etinye ihe oyiyi ahụ awụlitere n'eleghị anya n'ime igbe n'ebughị ụzọ kpochapụ. Gburugburu gbanwee ndabere ihe oyiyi nke mere na ọ ga-abanye ọtụtụ ugboro n'ime igbe.
- mgbakwunye na-agbakwunye
- A na-agbakwunye "obodo" ọhụụ ọhụrụ ka ndabere wee gụgharịa na ihe mmemme mgbe ihe ahụ nwere ogwe akwụkwọ mpịakọta.
- ndabere
- Ihe a na-eji eme ihe n'ụzọ na-ezighị ezi na-agbakwụnye na nha na mmalite.
CSS3 Njirimara Ógbè
Na CSS3 ókèala nwere ike ịbụ ụdị anyị na-eji (nke siri ike, okpukpu abụọ, gbadaa, wdg) ma ọ bụ na ha nwere ike ịbụ ihe oyiyi. Ọzọ, CSS3 na-eweta ike ịmepụta akụkụ nkuku. Ihe oyiyi dị n'èzí na-adọrọ mmasị n'ihi na ị mepụtara ihe oyiyi nke mpaghara anọ niile ma gwa CSS otú ị ga-esi tinye onyinyo ahụ na ala gị.
Ngalaba Border Style ọhụrụ
Enwere ụfọdụ ihe ndị ọzọ dị na CSS3:
- radius ókè
- ụda-elu-nri-radius , ụda -ala-nri-radius , ụda -ala-ekpe-radius , akara -elu-ekpe-radius
- Njirimara ndị a na-enye gị ohere ịmepụta akụkụ nkuku n'akụkụ ala gị.
- isi-iyi-oyiyi
- Na-akọwapụta faịlụ faịlụ isi iyi nke a ga-eji mee ihe kama ịhọrọ n'ụdị ókèala akọwapụtara.
- akara-ese onyinyo-eserese
- Na-egosiputa esemokwu n'ime ime site na mpaghara ihu mpaghara
- obosara ihu-ala
- Akọwa uru nke obosara maka ọdịda ala gị.
- mbido esemokwu ókè-ala
- Na-egosiputa ego nke ebe eserese ókè mpaghara na-agafe n'ofe igbe.
- akara-ókè-ala
- Kọwaa otú e kwesịrị isi tụọ akụkụ ma akụkụ nke ọdịdị ala ahụ ma ọ bụ abawanye.
- oyiyi ókè-ala
- Ihe na-ezighi ezi maka ihe oyiyi niile nke ala.
Ihe ọzọ CSS3 dị na Njikọ na Ama
Mgbe igbe gbajiri agbaji na nkwụsị nke iwe, nkwụsịtụ kọlụm maka nkwụsịtụ akara (maka ihe ndị na-edepụta aha) ihe nkwụsị nke ihe nkedo na-akọwa otú igbe ọhụrụ ahụ si ejikọta ókè na nkwụsị. Enwere ike kewaa n'etiti etiti agbaji agbaji iji ihe a.
Enwekwara igbe nchekwa onyinyo nke nwere ike iji tinye onyinyo ka ọ bụrụ ihe dị na igbe.
Na CSS3, ị nwere ike ugbu a ịmepụta otu Weebụ na ọtụtụ ogidi na-enweghị tebụl ma ọ bụ mgbagwoju mgbagwoju anya. Naanị ị ga-agwa onye nchọgharị ahụ ka ọtụtụ akụkụ ahụ kwesịrị inwe nakwa otú ha kwesịrị ịdị. Ịnwere ike ịgbakwunye ókèala (iwu), agba gburugburu na ogologo oge nke kọlụm ahụ, ihe ederede ga-agbanyekwa na ogidi niile na-akpaghị aka.
CSS3 Ogidi - Kọwaa ọnụọgụgụ na ọnụọgụ nke ogidi
E nwere ihe atọ dị ọhụrụ nke na-enye gị ohere ịkọwa nọmba na obosara nke ogidi gị:
- ogidi-obosara
- Akọwara obosara ogidi gị kwesịrị ịbụ. Ihe nchọgharị ahụ ga-emegharị ederede iji jupụta oghere na mbara ebe.
- kọlụm-ọnụ
- Akọwara ọnụ ọgụgụ nke ogidi dị na ibe ahụ. Ihe nchọgharị ahụ ga - emepụta ogidi niile iji dabara na ohere, mana naanị ọnụ ọgụgụ ị ezipụta.
- ogidi
- Ihe na-adịghị anya ebe ị nwere ike ịkọwa ma obosara maọbụ ọnụ ọgụgụ (ma ọ bụ abụọ, mana nke ahụ adịghị adị ụda).
CSS3 Kọlụl Gaps na Iwu
A na-etinye ọdịiche na iwu na etiti ogidi na otu ọnọdụ dị iche iche. Akwụsị ga-eme ka ogidi dị iche iche, ma iwu anaghị ewere ohere ọ bụla. Ọ bụrụ na ịchịkwa kọlụm ka mbara karịa ọdịiche ya, ọ ga-agafe n'akụkụ ogidi dị n'akụkụ ya. enwere ihe omuma abuo ise maka iwu ndi ogugu na uzo:
- kọlụm-ọdịiche
- Akọwara obosara nke ọdịiche dị n'etiti ogidi.
- ndepụta-agba-agba
- Akọwara agba nke iwu ahụ.
- nchịkọta-akara-akara
- Nkọwapụta ụdị nke iwu (siri ike, nke nwere ntụpọ, okpukpu abụọ, wdg).
- nchịkwa-ọchịchị-obosara
- Akọwara obosara nke iwu ahụ.
- nchịkwa-akara
- Ngwongwo abuo nke na-achikota atumatu ato na-acho ochichi ozugbo.
CSS3 Mpempe akwụkwọ na-agbaji, Nkọwapụta ogidi, na-ejuputa Ogidi
Nkeji edemede na-agbaji otu CSS2 nhọrọ a na-eji kọwaa oge agbaji na ọdịnaya, ma na atọ nwere ihe ọhụrụ: agbaji-tupu , ezumike , na imebi .
Dị ka tebụl, ị nwere ike ịtọọ ihe ndị ọzọ iji gbasaa ogidi ndị nwere okpukpu. Nke a na-enye gị ohere ịmepụta ndetu ndị na-agbanye ọtụtụ ogidi dị ka akwụkwọ akụkọ.
Idoju ogidi na-ekpebi ókè ọdịnaya ga-adị na kọlụm ọ bụla. Ogidi ndị kwesịrị ekwesị na-agbalị itinye otu ọdịnaya nke ọdịnaya ahụ na kọlụm ọ bụla ka ntinye aka na-agagharị ọdịnaya ahụ ruo mgbe kọlụm jupụtara wee gaa na nke na-esote.
Atụmatụ ndị ọzọ na CSS3 na Aren & Nbsp; G Gụnyere na CSS2
Enwere ọtụtụ atụmatụ ndị ọzọ na CSS3 nke na-adịghị na CSS2, gụnyere:
- CSS Template Module module na CSS3 Grid nhazi modul : Ịmepụta grids na CSS.
- CSS3 Edemede ederede : ederede ederede na ọbụna mepụta ndo-ndoro na CSS.
- CSS3 Agba modul : Ugbu a na opacity.
- Mgbanwe na ihe nlereanya igbe : Gụnyere ihe na marke nke na-eme dị ka tag IE.
- CSS3 Interface module module : Na-enye gị ndị mmechi ọhụụ, nzaghachi na omume, mpaghara chọrọ, na ọbụna na- emegharị ihe .
- Ajụjụ Mgbasa Ozi : Ajụjụ ajụjụ mgbasa ozi na-enye gị ohere inwekwu mgbanwe mgbe ịkọwapụtara otú e kwesịrị isi jiri mpempe akwụkwọ mee ihe. Dịka ọmụmaatụ, ị nwere ike ịkọwapụta akwụkwọ eji ede ihe bụ naanị maka ngwaọrụ ndị nwere ngwaọrụ nwere nnukwu elekere karịa 20m.
- CSS3 Ruby module : Na-enye nkwado maka asụsụ ndị na-eji ruby ederede ka ha dee akwụkwọ.
- CSS3 Paged Media module : Maka nkwado ndị ọzọ maka mgbasa ozi mebiri (akwụkwọ, transparencies, wdg).
- Ejiri ọdịnaya : L na-agbazi isi na footers, akara ihu ala, na ọdịnaya ndị ọzọ a na-eme n'usoro ihe omume, karịsịa maka mgbasa ozi rụrụ arụ.
- CSS3 Okwu modul : Mgbanwe na CSS.