Uzo esi esi n'elu uzo nke ederede na akwukwo Web

Jiri CSS iji dozie ihe oyiyi na n'akụkụ aka ekpe nke nhazi ihuenyo weebụ

Lelee ihe obula o bula n'uwa taa ma we hu ihe ederede na ihe ntanetiri elu nke akwukwo ndi ahu. Ọ dị mfe ịgbakwunye ederede na ihe oyiyi na ibe . A na-ederede ederede site na iji HTML mkpado dịka paragraf, ndepụta, na isiokwu, ebe a na-etinye ihe oyiyi ahụ site na iji element .

Ikike ime ihe odide ahụ na ihe oyiyi ahụ na-arụkọ ọrụ ọnụ bụ ihe na-eme ka ndị mmebe weebụ dị iche! Ịchọghị ka ederede na ihe oyiyi gị na-apụta otu mgbe, nke ahụ bụ otu a ga-esi mee ka ndagwurugwu ndị a kwụsị. Ee, ịchọrọ ka ụfọdụ na-achịkwa otú ederede na ihe oyiyi na-agbakọ ọnụ na ihe ga-abụ ntinye anya mmemme nke ebe nrụọrụ weebụ gị.

Enwe onyinyo nke kwekọrọ n'akụkụ aka ekpe nke ibe ka ederede nke na-agagharị na ya bụ usoro nhazi nke a na-eme maka ụdị e biri ebi yana maka ibe weebụ. N'okwu weebụ, a maara nke a dị ka ese onyinyo ahụ . A na-eji ụdị CSS maka "ese n'elu". Ihe a na-enye ohere ka ederede na-agagharị n'akụkụ oyiyi aka ekpe ya n'akụkụ aka nri ya. (Ma ọ bụ gburugburu ihe oyiyi ziri ezi na n'akụkụ aka ekpe ya.) Ka anyị lee anya iji nweta mmetụta a.

Malite na HTML

Ihe mbụ ị ga-eme bụ ịnweta ụfọdụ HTML iji rụọ ọrụ. Maka ihe atụ anyị, anyị ga-ede otu paragraf nke ederede ma gbakwunye ihe oyiyi na mmalite nke paragraf (tupu ederede, ma mgbe mmalite mmalite pp). Nke a bụ ihe akara HTML ahụ dị ka:

Ihe ederede nke paragraf na-aga ebe a. N'ihe atụ a, anyị nwere onyinyo nke foto headhot, ya mere ederede a ga-abụ banyere onye isi maka ya.

Site na ndabara, webpage anyị ga-egosipụta na oyiyi dị n'elu ederede. Nke a bụ n'ihi na ihe oyiyi bụ ihe ntụpọ na HTML. Nke a pụtara na ngosipụta ngosipụta ngosipụta na-agbaji n'ihu na mgbe ihe oyiyi ahụ dị na ndabara. Anyị ga-agbanwe ihu nlele a site na ịgbanwere CSS. Mbụ, Otú ọ dị, anyị ga-atụnye uru klas na ihe oyiyi anyị . Klas ahụ ga-eme dị ka "nko" nke anyị ga-eji na CSS anyị emesịa.

Ihe ederede nke paragraf na-aga ebe a. N'ihe atụ a, anyị nwere onyinyo nke foto headhot, ya mere ederede a ga-abụ banyere onye isi maka ya.

Rịba ama na klas nke "aka ekpe" anaghị eme ihe ọ bụla na ya! Maka anyị iji nweta ụdị ọchịchọ anyị, anyị kwesịrị iji CSS ọzọ.

CSS akpa

Site na HTML anyị, gụnyere àgwà nke klas anyị nke "aka ekpe", anyị nwere ike ugbu a gaa CSS. Anyị ga-agbakwunye usoro iwu anyị nke ga-ese onyinyo ahụ ma gbakwunye obere nkedo na-esote ya ka ederede nke ga-ekpuchi onyinyo ahụ adịghị adagide ya. Nke a bụ CSS ị nwere ike dee:

.feft {float: left; Na-akwagharị: 0 20px 20px 0; }

Ụdị ụdị a na-ese onyinyo ahụ n'aka ekpe ma na-agbakwụnye ntakịrị ihe mgbochi (iji ụfọdụ CSS shorthand) gaa n'aka nri na ala nke onyinyo ahụ.

Ọ bụrụ na ị nyochaa ihuenyo nke nwere HTML a na ihe nchọgharị, a ga-agbakwunye ihe oyiyi a n'akụkụ aka ekpe ma ihe ederede nke paragraf ahụ ga-apụta na ikike ya na ohere kwesịrị ekwesị n'etiti ohere abụọ ahụ. Rịba ama uru ọmụmụ nke "aka ekpe" nke anyị ji mee ihe bụ aka ike. Anyị nwere ike ịkpọ ya ihe ọ bụla n'ihi na okwu ahụ bụ "ekpe" anaghị eme ihe ọ bụla n'onwe ya. Nke a dị mkpa ka ị nwee ihe omume nke klas na HTML nke na-arụ ọrụ na ụdị CSS n'ezie nke na-achịkwa mgbanwe ihu igwe ị na-achọ ime.

Ụzọ ndị ọzọ ị ga-esi mezuo ndị a

Ụzọ a nke inye ihe oyiyi oyiyi a na-ekwu na klas na mgbe ahụ na-eji usoro CSS n'ozuzu ya na-arụ ọrụ ahụ bụ naanị otu ụzọ ị ga-esi mezuo "onyinyo ndị a kwekọrọ na ha". Ị nwekwara ike iwepụ uru nke klas ahụ na ihe oyiyi ahụ ma jiri ya mee ya na CSS site na ịde edepụtara onye ọzọ. Dị ka ọmụmaatụ, ka anyị lelee ihe atụ ebe onyinyo ahụ dị n'ime nkewa nke nwere uru nke "isi-ọdịnaya".

Ihe ederede nke paragraf na-aga ebe a. N'ihe atụ a, anyị nwere onyinyo nke foto headhot, ya mere ederede a ga-abụ banyere onye isi maka ya.

Iji mee ihe oyiyi a, ị nwere ike ide CSS a:

.ma-ọdịnaya img {float: left; Na-akwagharị: 0 20px 20px 0; }

Na nke a, onyinyo anyị ga-adaba n'aka ekpe, na ederede na-ese n'elu ya dị ka ọ dị tupu oge ahụ, mana anyị ekwesịghị itinye akwụkwọ ndị ọzọ ka anyị jiri akara. Ime nke a na ọnụ ọgụgụ nwere ike inyere aka mepụta obere faịlụ HTML, nke ga-adị mfe iji jikwaa ma nwee ike inye aka melite arụmọrụ.

N'ikpeazụ, ịnwere ike ịgbakwunye ụdị ahụ kpọmkwem na ntinye HTML gị, dị ka nke a:

Ihe ederede nke paragraf na-aga ebe a. N'ihe atụ a, anyị nwere onyinyo nke foto headhot, ya mere ederede a ga-abụ banyere onye isi maka ya.

A na-akpọ usoro a " ụdị inline ". Ọ bụghị ihe amamihe dị na ya n'ihi na ọ na-ejikọta ụdị nke mmewere ya na nhazi ya. Omume ọma kachasị mma na-ekwu na ịke na ụdị nke ibe ga-adị iche. Nke a na-enye aka karịsịa ma ọ bụrụ na ibe gị chọrọ ịgbanwe nhazi ya ma chọọ nha ihu na ntanetị dị iche iche na ebe nrụọrụ weebụ na-anabata. Inwe ụdị nke ibe a na-ejikọta na HTML ga-eme ka o siere ndị edemede akwụkwọ mgbasa ozi ike karị nke ga-eme ka saịtị gị gbanwee dịka ọ dị mkpa maka nzacha dị iche iche.

Ihe mbụ nke Jennifer Krynin dere. Edited by Jeremy Girard na 4/3/17.