Ihe ntanetịime, ederede, na ihe nkwụsị mgbe ị na-arụ ọrụ weebụsaịtị
Ọ bụrụ na ị na- amụta otú e si arụ ọrụ weebụ , otu n'ime usoro ndị kachasị mkpa ị ga-achọ ịmụta bụ otu esi etinye ihe dị na windo nchọgharị. Nke a nwere ike ịpụta ịtọbe ihe oyiyi na ibe ahụ, ma ọ bụ ọ nwere ike ịbụ ebe etiti-na-eme ka ederede dị ka akụkọ dịka akụkụ nke imewe.
Ụzọ kwesịrị ekwesị iji mezuo anya nke a nke ihe oyiyi ma ọ bụ ederede ma ọ bụ ọbụna na ibe weebụ gị dum bụ site na iji Cash Cascading Style (CSS) . Ihe ka ọtụtụ n'ime ihe ndị a na-eche maka ịbanye na CSS bụ na ọ bụ na nke 1.0, ha na-arụ ọrụ dị ukwuu na CSS3 na ihe nchọgharị weebụ .
Dị ka ọtụtụ akụkụ nke imewe weebụ, e nwere ọtụtụ ụzọ iji CSS na-etiti ihe dị na ibe weebụ. Ka anyị leba anya n'ụdị ụzọ dị iche iche iji CSS iji nweta akara ngosi a.
Na Isi nke Iji CSS gaa Ogige Ihe Nleba na HTML
Ịnweta CSS nwere ike ịbụ ihe ịma aka maka ịmalite ndị na-emepụta weebụ n'ihi na e nwere ọtụtụ ụzọ dị iche iche iji mezuo otu ụdị eserese a. Ọ bụ ezie na usoro dịgasị iche iche nwere ike ịdị mma ma ọ bụ ndị na - emepe emepe weebụ bụ ndị maara na ọ bụghị usoro nile na - arụ ọrụ na mmepụta ọ bụla, nke a nwere ike isi ike maka ndị ọkachamara na weebụ ebe ọ bụ na ụzọ dị iche iche pụtara na ha kwesịrị ịma mgbe ha ga - eji mee ihe. Ihe kacha mma ị ga-eme bụ ịnweta nghọta nke ụzọ ole na ole. Ka ị na-amalite iji ha mee ihe, ị ga-amata usoro nke kachasị mma.
N'elu ọkwa dị elu, ịnwere ike iji CSS na:
- Ihe ederede
- Wụnye ihe mmepe nkwụsị (dịka nkewa)
- Tinye ihe oyiyi
- N'ihe na-eme ka etiti ma ọ bụ ihe oyiyi
Ọtụtụ (ọtụtụ) afọ gara aga, ndị na-emepụta weebụ nwere ike iji
Nhazi ederede na CSS
Ihe kachasị mfe ka ị banye na ibe weebụ bụ ederede. Enwere naanị otu ụdị ụlọ ị chọrọ ịma iji mee nke a: ederede-kwekọọ. Were CSS ụdị dị n'okpuru, dịka ọmụmaatụ:
p.center {ederede-ndokwa: etiti; }
Site na nke CSS, paragraf ọ bụla edere ya na klas ahụ ga-etinyere n'akụkụ ya. Dịka ọmụmaatụ, ọ bụrụ na paragraf ahụ dị n'ime nkewa, nke pụtara na ọ bụ nwata nke nkewa ahụ, ọ ga-etinye ya na ntanetị n'ime
Nke a bụ ihe atụ nke klas a etinyere na akwụkwọ HTML:
Ederede a na-adabere.
Mgbe ederede ederede na ihe edere ederede, cheta na a ga-etinyere ya n'ime ihe nwere ya ma obughi etinyere n'ime akwukwo zuru oke n'onwe ya. Na-echetakwa na ederede etiti etiti nwere ike isi ike ịgụ maka nnukwu ihe dị n'ime ya, ya mere, jiri ụdị ejiji a. Ihe odide na obere blocks nke ederede, dị ka ederede teaser maka isiokwu ma ọ bụ ọdịnaya ndị ọzọ, na-adịkarị mfe ịgụ ma gbanwee mgbe etinyere, ma buru ibu nke ederede, dị ka isiokwu zuru ezu n'onwe ya, ga-abụ ihe ịma aka iji rie ma ọ bụrụ na ọdịnaya ahụ zuru ezu ziri ezi. Cheta na ịgụ ihe bụ igodo mgbe ọ na-abịa na ederede weebụ!
Ihe Mgbochi Na-eme Nhazi na CSS
Mgbochi bụ ihe ọ bụla dị na peeji nke gị nwere obosara kọwaa ma guzosie ike dị ka ihe ngwugwu. Ọtụtụ mgbe, a na-eji nkan ndị a eme ihe site n'iji HTML
onye na -
oke: 0 bọtịnụ;
obosara: 80em;
}
Nke a CSS na-eji aka ya eme ihe maka akụkụ ala ahụ ga-eme ka akụkụ ala na ala dị elu wee baa uru nke 0, ma aka ekpe na aka nri ga-eji "akpaaka." Nke a na-ewe ohere ọ bụla dịnụ ma kewaa ya n'etiti akụkụ abụọ nke window windo ahụ, na-etinye aka na ntinye aka na ibe.
N'ebe a, a na-etinye ya na HTML:
ma ederede ederede n'ime ya ga-adabara.
Ọ bụrụhaala na ngọngọ gị nwere obosara ọhụụ, ọ ga-etinye aka n'ime ya. Ederede ndị dị na ngọngọ ahụ agaghị etinye ya n'ime ya, ma a ga-ahapụ ya. Nke a bụ ederede becaus na-adabere na ndabara na ihe nchọgharị weebụ. Ọ bụrụ na ịchọrọ ka ederede a, ị nwere ike iji ihe eji ederede ederede nke anyị kpughere na mbụ na usoro a iji debe nkewa.
Na-etinye foto na CSS
Ọ bụ ezie na ọtụtụ ihe nchọgharị ga-egosipụta ihe oyiyi etinyere site na iji otu ederede - idowe ihe onwunwe anyị lere maka paragraf ahụ, ọ bụghị ezi echiche ịdabere na usoro ahụ dịka W3C adịghị akwado. Ebe ọ bụ na akwadoghị ya, enwere ohere ọ bụla na nsụgharị nke nchọgharị ga-ahọrọ ịhapụ usoro a.
Kama iji ederede - kwadoo na etiti ihe oyiyi, ị ga-agwa onye nchọgharị ahụ na ihe oyiyi ahụ bụ ihe ngwugwu. N'ụzọ dị otú a, ị nwere ike ịkwado ya dịka ị ga-enwe ngọngọ ọ bụla. Nke a bụ CSS ime ka nke a mee:
img.center {
igosi: ngọngọ;
oke-aka ekpe: akpaaka;
oke-nri: akpaaka;
}
Na ebe a bụ HTML na maka oyiyi ahụ anyị ga - achọ ka etinyere:
Ị nwekwara ike ịchekwa ihe eji eji CSS na-akara (lee n'okpuru ebe a), ma usoro a esiteghị na ya ọ bụrụ na ọ na-agbakwụnye ụdị ọdịdị na ntinye HTML gị. Cheta na anyị chọrọ ịkekọrịta ụdị na nhazi, yabụ na-agbakwụnye koodu CSS na koodu HTML gị na agbaji nkewa na, dị ka ndị dị otú ahụ, a ghaghị izere ya mgbe o kwere mee.
Ejikọta ihe dị iche iche na CSS
Ịmegharị ihe na-emekarị ka ọ bụrụ ihe ịma aka na ntanetị weebụ, ma site na ntọhapụ nke CSS Flexible Box Layout Module na CSS3, ugbu a bụ ụzọ ime ya.
Mmeghari ihuenyo na-arụ ọrụ n'otu aka ahụ na ntinye nkedo kpuchie n'elu. Ihe CSS dị na-eche ihu na-etinyere uru dị n'etiti.
.vcenter {
nhazi ihu-aka: n'etiti;
}
Ọdịda ala a bụ na ọ bụghị ihe nchọgharị niile na-akwado CSS FlexBox, ọ bụ ezie na ọtụtụ na ndị ọzọ na-abịa gburugburu na usoro ọhụrụ a CSS! N'eziokwu, ihe nchọgharị ọgbara ọhụrụ taa na-akwado ụdị CSS a. Nke a pụtara na naanị nchegbu ị na-eche na Flexbox ga-abụ ụdị ihe nchọgharị dị oke mkpa.
Ọ bụrụ na ị nwere nsogbu na nchọgharị ndị ochie, W3C na-atụ aro na ị na-ederede ederede n'ụzọ ziri ezi na akpa ma jiri usoro ndị a:
- Mee ka ihe ndị ahụ dịrị n'ime ihe ndị dị na ya, dịka nkedo.
- Debe elu kachasị elu na nke nwere ihe.
- Kwuputa na inwe mmewere dị ka tebụl table.
- Debe nhazi ihu na "n'etiti."
Dịka ọmụmaatụ, ebe a bụ CSS:
.vcenter {
nke dị elu: 12am;
igosi: table-cell;
nhazi ihu-aka: n'etiti;
}
Na ebe a bụ HTML:
Ederede a na-adabere na ndabara na igbe.
Ogige ntụrụndụ na mmegwoju anya nke Internet Explorer
Enwere ụfọdụ ụzọ ịmanye Internet Explorer (IE) ka ha nọrọ n'etiti ma jirizie nkwupụta nkwenye mee ka naanị IE hụ ụdị ahụ, mana ha bụ ntakịrị verbose na jọrọ njọ. Ozi ọma ahụ bụ na site na mkpebi Microsoft n'oge na-adịbeghị anya ịkwado nkwado maka nsụgharị nke IE, ndị na-ejighị ihe nchọgharị ahụ kwesịrị ịdị na-apụ na nso nso, na-eme ka ọ dịkwuo mfe maka ndị na-emepụta weebụ ka ha jiri oge a dị ka CSS FlexBox nke ga- ọ bụghị nanị ịtọgharị, dị mfe maka ndị na-emepụta weebụ.