Ruo ọtụtụ afọ, CSS na-agba ụgbọ mmiri, ma ọ dị mkpa, na-emepụta mkpokọta ebe nrụọrụ weebụ. Ọ bụrụ na imewe gị na-akpọ ọtụtụ ogidi, ị tụgharịrị n'ụgbọ mmiri . Nsogbu a na usoro a bụ na, n'agbanyeghị nkà nke dị ukwuu ndị na-emepụta weebụ / ndị mmepe egosiputa na ịmepụta usoro ihe ntanetị dị mgbagwoju anya, ọ dịghị mgbe a na-eme ka ụgbọ mmiri CSS dị otú a.
Ọ bụ ezie na ụgbọ mmiri na CSS na-ejide n'aka na ị ga-enwe ebe na imewe weebụ ruo ọtụtụ afọ ịbịa, usoro nhazi ọhụrụ ndị gụnyere CSS Grid na Flexbox na-enyezi ndị na-emepụta weebụ ndị ọhụrụ ụzọ ọhụrụ iji mepụta ebe obibi ha. Usoro ozo ohuru ohuru nke gosiputara otutu ihe nwere ike bu CSS otutu ogidi.
CSS ogige anọwo ebe a ruo afọ ole na ole ugbu a, ma enweghị nkwado na ihe nchọgharị ochie (tumadi nsụgharị nke Internet Explorer) emeela ọtụtụ ndị ọkachamara weebụ site na iji ụdị ndị a na arụ ọrụ ha.
Na njedebe nke nkwado maka nsụgharị nke IE, ụfọdụ ndị na-emepụta weebụ na-anwale ụdị nhọrọ CSS ọhụrụ, CSS ogige gụnyere, na-achọpụta na ha nwere ọtụtụ njikwa na ụzọ ọhụrụ ndị a karịa ka ha mere na ụgbọ mmiri.
Isi ihe nke CSS ogidi
Dị ka aha ya na-egosi, CSS ọtụtụ ederede (a makwaara dị ka CSS3 nhazi okpukpu abụọ) na-enye gị ohere ịkekọrịta ọdịnaya n'ime ọnụ ọgụgụ nke ogidi. Ihe CSS kachasị mkpa ị ga - eji bụ:
- kọlụm-ọnụ
- kọlụm-ọdịiche
Maka kọlụm-ọnụ, ị ezipụta ọnụ ọgụgụ nke ogidi ịchọrọ. Oghere nke kọlụm ga-abụ nkedo ma ọ bụ spacing n'etiti ogidi ndị ahụ. Ihe nchọgharị ahụ ga-ewere ụkpụrụ ndị a ma kewaa ọdịnaya ahụ n'ime ọnụ ọgụgụ nke kọlụm ị ezipụta.
Ihe omuma atu nke CSS otutu ogugu n'omume ga-abia ihe nkesa nke ederede n'ime otutu ogidi, dika ihe igahu na akwukwo akwukwo. Kwuo na ị nwere ntinye akara HTML ndị a (dee na maka ebumnuche ebumnuche, naanị m na-etinye mmalite nke otu paragraf, ebe ọ bụ na omume a, enwere ike ịbụ ọtụtụ paragraf nke ọdịnaya na akara ngosi a):
Isi nke isiokwu gị
Cheedị ọtụtụ paragraf nke ederede ebe a ...
Ọ bụrụ na ị deere ha CSS ụdị:
.content {-moz-column-count: 3; -nkpokọta -onye-gụọ: 3; kọlụm-agụ: 3; -moz-kọlụm-ọdịiche: 30px; -obodo ihe ntinye akwukwo-agbapu: 30px; kọlụm-ọdịiche: 30px; }Ọchịchị CSS a ga-ekewaa nkewa "ọdịnaya" n'ime ogidi 3 hà na oghere nke 30 pikselụ n'etiti ha. Ọ bụrụ na ịchọrọ ogidi abụọ karịa 3, ị ga-agbanwe naanị uru ahụ ma ihe nchọgharị ahụ ga-agbakọọ obosara ọhụrụ nke ogidi ndị ahụ iji kewaa ọdịnaya ahụ. Rịba ama na anyị na-eji ihe ndị na-ere ihe na mbụ, na-esochi nkwupụta ndị a na-adịghị akọwapụta.
Dị mfe dị ka nke a bụ, ojiji ya n'ụzọ dị otú a bụ ihe na-enyo enyo maka ojiji weebụ. Ee, ị nwere ike ịkekọrịta ụyọkọ ọdịnaya n'ime ọtụtụ ogidi, ma nke a nwere ike ọ gaghị abụ ihe kachasị mma ịgụ na Weebụ, karịsịa ma ọ bụrụ na ịdị elu nke ogidi ndị a daa n'okpuru "ogige" nke ihuenyo ahụ.
Ndị na-agụ akwụkwọ ga-ahụrịrị ịpịgharịa na ala iji gụọ ọdịnaya zuru ezu. N'agbanyeghị nke ahụ, isi nke CSS kọlụm dị mfe dịka ị na-ahụ ebe a, ọ pụkwara iji ya rụọ ọtụtụ ihe karịrị nanị kewaa ọdịnaya nke paragraf ụfọdụ - ọ nwere ike, n'ezie, a ga-eji maka nhazi.
Nhazi na CSS ogidi
Gwa na ị nwere webpage na mpaghara nwere ọdịnaya nwere 3 ogidi ọdịnaya. Nke a bụ ihe ntanetịime ebe nrụọrụ weebụ, na iji nweta nkeji atọ ahụ, ị ga-ejikarị esemokwu nke dị na ya. Ị ga-enweta ọtụtụ CSS, ọ dị mfe.
Nke a bụ ụfọdụ ụdị HTML:
Akụkọ kacha ọhụrụ
Ọdịnaya ga-aga ebe a ...
Site na anyị Blog
Ọdịnaya ga-aga ebe a ...
Ihe ndị na-abịanụ
Ọdịnaya ga-aga ebe a ...
CSS iji mee ka ogidi ndị a malite na ihe ị hụrụ na mbụ:
.content {-moz-column-count: 3; -nkpokọta -onye-gụọ: 3; kọlụm-agụ: 3; -moz-kọlụm-ọdịiche: 30px; -obodo ihe ntinye akwukwo-agbapu: 30px; kọlụm-ọdịiche: 30px; }Ugbu a, ihe ịma aka ebe a bụ na, ebe ọ bụ na ihe nchọgharị ahụ chọrọ ịkekọrịta ọdịnaya a, ọ bụrụ na ogologo oge dị na nkewa ndị a dị iche, ihe nchọgharị ahụ ga-ekewaa ọdịnaya nke otu nkewa, na-agbakwunye mmalite ya na kọlụm otu. wee gaa n'ihu (ị ga-ahụ nke a site na iji koodu a mee ihe nnwale ma gbakwunye ogologo oge nke ọdịnaya n'ime nkebi nke ọ bụla)!
Nke ahụ abụghị ihe ị chọrọ. Ịchọrọ ka nke ọ bụla n'ime nkewa ndị a mepụta kọlụm dị iche na, n'agbanyeghị agbanye ma ọ bụ obere ihe nke ọdịnaya nke onye ọ bụla nwere ike ịbụ, ị chọghị ka ọ kewaa. Ị nwere ike mezuo nke a site na ịgbakwụnye otu akara ọzọ nke CSS:
.content div show: inline-block; }Nke a ga - amanye nkewa ndị ahụ dị n'ime "ọdịnaya" iji nọgide na-emebi emebi dịka ihe nchọgharị na-agbawa nke a n'ime ọtụtụ ogidi. Ọbụna nke ka mma, ebe ọ bụ na anyị enyeghị ihe ọ bụla n'ebe a, ọ ga-eme ka ọ bụrụ ebe a na-emegharị ya, na-eme ka ha bụrụ ihe dị mma maka ebe nrụọrụ weebụ na-anabata . Site na ụdị "nbibi" nke ahụ, ebe nke ọ bụla nke 3 gị ga-abụ ihe ederede dị iche.
Iji mpempe akwụkwọ-ibu
E nwere ihe ọzọ ma e wezụga "kọlụm-ọnụ" nke ị nwere ike iji, yana dabere na mkpa gị, ọ nwere ike ịbụ nhọrọ dị mma maka saịtị gị. Nke a bụ "kọlụm-obosara". Iji otu ntinye HTML dị ka egosiri na mbụ, anyị nwere ike ime nke a na CSS anyị:
.content {-moz-column-width: 500px; -obodo-na-kọlụm-obosara: 500px; okpuru-obosara: 500px; -moz-kọlụm-ọdịiche: 30px; -obodo ihe ntinye akwukwo-agbapu: 30px; kọlụm-ọdịiche: 30px; } .content div [ngosi: inline-block; }Ụzọ nke a bụ na ihe nchọgharị ahụ na-eji "ogidi-obosara" a dị ka uru kachasị na kọlụm ahụ. Ya mere, ọ bụrụ na windo windo dị ihe dị ka pixels 500, ọ ga-apụta na otu kọlụm, otu n'ime elu nke ọzọ. Nke a bụ ụdị ihe eji eme ihe maka mkpanaka igwe / obere ihuenyo.
Dika ogwe aka nchọgharị na-abawanye ruo oke zuru ezu iji daa ogidi abụọ na kọlụm kọlụm a kapịrị ọnụ, ihe nchọgharị ahụ ga-esi na otu nhazi kọlụm gaa na ogidi abụọ. Nọgidenụ na-amụba obosara ihuenyo na n'ikpeazụ, ị ga-enweta nhazi nke kọlụm 3, nke ọ bụla n'ime nhazi nke atọ anyị gosipụtara na kọlụm ha. Ọzọ, nke a bụ ụzọ dị mma isi nweta usoro ihe omume enyi , ọtụtụ ngwaọrụ , na ọbụghị na ị ga-eji ajụjụ ndị ntanetị gbanwee ụdị usoro a!
Ihe Njirimara Mbụ
Na mgbakwunye na ihe ndị e kpuchiri ebe a, e nwekwara ihe maka "akara-kọchị", gụnyere agba, ụdị, na obosara obosara nke na-enye gị ohere ịmepụta iwu n'etiti ogidi gị. A ga-eji ihe ndị a mee ihe karịa ala ma ọ bụrụ na ịchọrọ ịmepụta ụfọdụ ịwapu ogidi gị.
Oge Ịnwa
Ka ọ dị ugbu a, a na-akwado CSS Multiple Layout Column. Na prefixes, ihe karịrị 94% nke ndị ọrụ weebụ ga-enwe ike ịhụ ụdị ndị a, na òtù a na-ejighị n'aka ga-abụ nnọọ nsụgharị nke Internet Explorer nke i nwere ike ghara ịkwado ọzọ.
Site n'enyemaka nkwado a ugbu a, ọ dịghị ihe mere ị ga-eji malite ịnwale CSS oghere ma jiri ụdị ndị a na-emepụta weebụsaịtị. Ị nwere ike ịmalite nyocha gị site na iji HTML na CSS dị na isiokwu a ma na-egwu gburugburu dị iche iche ụkpụrụ iji hụ ihe ga-arụ ọrụ kacha mma maka nhazi ihuenyo gị.