Na mmemme nke weebụsaịtị, ntinye ederede na-arụ ọrụ dị oke mkpa na nhazi na ngosi nke ọdịnaya. Ma anyị na-eke ibe nkeonwe ma ọ bụ na-emepụta ihe njiri mara mgbagwoju anya, ntinye ederede nwere ike ime mgbanwe n'ọdịdị na ọgụgụ nke ọdịnaya. N'isiokwu a, anyị ga-enyocha usoro na ụzọ maka ịmebe ederede na HTML, na-enye ndị na-eme mmemme ihe ndị dị mkpa iji nweta ihe ngosi mara mma na nke na-arụ ọrụ. Anyị ga-amụta site na ụzọ ndị kachasị mkpa ruo na njirimara na usoro kachasị ọhụrụ na ntinye ederede, na-enye ndị mmepe ohere iji ngwá ọrụ a dị oke mkpa. na mmepe weebụ.
Okwu mmalite na ntinye ederede HTML
Ederede HTML bụ usoro a na-ahụkarị na mmepe webụ iji kwado ederede kwụ n'ahịrị na ibe HTML. Enwere ụzọ na usoro dị iche iche nwere ike iji nweta mmetụta a ma nye ọdịnaya anyị ka ọ bụrụ ọkachamara na ọdịdị mara mma.
Otu n'ime ụzọ kachasị mfe iji ederede etiti bụ site na iji njirimara "aligning" na mkpado mmeghe nke ihe HTML nke nwere ederede anyị chọrọ isi n'etiti. Dịka ọmụmaatụ, ọ bụrụ na anyị chọrọ itinye aha n'ime ihe nkụnye eji isi mee h1, anyị nwere ike itinye koodu HTML a:
Aha etiti
. Usoro a dị mfe iji mejuputa ya, ma a na-ewere ya na ọ bụ ihe na-adịghị mma ma na-atụ aro ka iji usoro ọgbara ọhụrụ.
Usoro ọzọ emelitere bụ iji ụdị CSS eme ihe. Site na ịtọ ntọala ụdị, dị ka oke na ndenye ederede, anyị nwere ike nweta ntinye ederede n'ụzọ ziri ezi na mgbanwe. Dịka ọmụmaatụ, ọ bụrụ na anyị chọrọ itinye paragraf n'etiti div, anyị nwere ike iji koodu CSS na-esonụ: div { text-align: center; } Usoro a na-atụ aro karịa ebe ọ bụ na ọ na-adaba na mkpa imewe ma dakọtara na nsụgharị ọhụrụ nke ihe nchọgharị weebụ.
Na nchịkọta, HTML ederede centering bụ usoro dị mkpa na imewe weebụ iji nweta ihe ngosi ziri ezi n'anya. Site na usoro na usoro dị iche iche, dị ka njiri mara na ụdị CSS, anyị nwere ike nweta nsonaazụ achọrọ ma melite ọdịdị ọdịnaya anyị. Ọ dị mkpa inyocha nhọrọ ndị dịnụ wee họrọ nke kachasị dabara dị ka mkpa anyị si dị na ndakọrịta ihe nchọgharị. Na-echeta mgbe niile idebe koodu gị dị ọcha yana hazie ya maka ịdị mma ka mma n'ọdịniihu. Nyochaa ụzọ dị iche iche wee chọpụta nke kacha mma maka ọrụ gị. Mụa ihe ma nwee ọ theụ na-emepụta atụmatụ mara mma ma lekwasịrị anya!
Ụzọ isi tinye ederede na HTML
Enwere ụzọ dị iche iche isi tinye ederede na HTML, ma n'ime paragraf, na isiokwu, ma ọ bụ na ndepụta. N'okpuru bụ ụfọdụ usoro na ụzọ a na-ejikarị eme ihe iji nweta ntinye ederede na HTML.
1. Jiri akara
2. CSS Text-align: Nhọrọ ọzọ bụ iji CSS na etiti ederede. I nwere ike ime nke a site n'itinye ihe onwunwe ederede-align: center; gaa na ihe HTML ma ọ bụ na klaasị CSS. Ọmụmaatụ:
Ederede gbadoro ụkwụ na CSS!
. Usoro a bara uru ma ọ bụrụ na ịchọrọ itinye ọtụtụ ihe ederede na ibe.
3. Jiri oke: Ị nwekwara ike n'etiti ederede site na iji akụkụ CSS na ịtọ akụkụ aka ekpe na aka nri na akpaaka. Nke a Enwere ike ime ya site na CSS inline ma ọ bụ site na klas CSS. Ọmụmaatụ:
Ederede gbadoro ụkwụ na oke!
. Usoro a nwere ike ịba uru karịsịa mgbe ị na-agbalị itinye akụkụ nke ederede ma ọ bụ onyonyo buru ibu.
Cheta na ntinye ederede na-emetụta akpa ederede dị na ya, yabụ ị kwesịrị ijide n'aka na ị na-etinye usoro na usoro ndị a na ihe ziri ezi. Ọzọkwa, buru n'uche na ụfọdụ ụzọ nwere ike ghara ịkwado dabere na ụkpụrụ HTML na CSS dị ugbu a, ya mere ọ dị mkpa ịmara maka omume kacha mma. Site na usoro ndị a, ị nwere ike nweta ntinye ederede kwesịrị ekwesị n'ọrụ gị mmepe weebụ na HTML.
Usoro ntinye ederede na CSS
Enwere ọtụtụ usoro na ụzọ isi tinye ederede na HTML site na iji CSS. Usoro ndị a dị oke mkpa iji nweta ọmarịcha anya na imewe kwụ ọtọ na ibe weebụ gị. Ọzọ, anyị ga-ewetara gị ụfọdụ usoro eji eme ihe.
Otu n'ime ụzọ kachasị mfe isi tinye ederede n'etiti bụ site na iji akụrụngwa CSS "ederede-aligning". Ihe onwunwe a enwere ike itinye ya n'ọrụ ka ma ngọngọ ihe na inline ọcha. Iji tinye ederede n'etiti ihe mgbochi, tinye naanị ahịrị koodu a na mpempe akwụkwọ gị:
«`
onye na-ahọpụta {
text-align: center;
}
«`
Usoro ọzọ a ma ama maka itinye ederede bụ site na iji » oke» akụrụngwa jikọtara yana uru akpaka nke akuku aka ekpe na aka nri. A na-enweta nke a site na ịgbakwunye koodu CSS ndị a:
«`
ahọpụtara{
margin-left: auto;
margin-right: auto;
}
«`
Ọ bụrụ na ịchọrọ itinye ederede n'ime otu akpa, ị nwere ike iji usoro Flexbox. Nke mbụ, tọọ akpa ahụ ka ọ bụrụ mmewere flexbox site na iji ihe “ngosi: flex”. Mgbe ahụ, dozie ọdịnaya ahụ n'ụzọ kwụ ọtọ site na iji akụrụngwa "justify-content" na uru "etiti". Ọmụmaatụ:
«`
.akpa {
ngosi: flex;
ezi-ọdịnaya: etiti;
}
«`
Ndị a bụ ụfọdụ usoro a na-ejikarị eme ihe maka itinye ederede site na iji CSS na HTML. Cheta na dabere na mkpa gị na imewe webụsaịtị gị, ọ nwere ike ịdị mma karịa iji otu usoro ma ọ bụ nnwale wee chọta nke dabara nke ọma. Ịmepụta ederede bụ akụkụ dị mkpa nke ịmepụta nhazi doro anya na ọkachamara na weebụsaịtị gị!
Iji ụdị njiri mara ederede etiti na HTML
Otu n'ime usoro a na-ahụkarị na nke kachasị mfe iji tinye ederede na HTML bụ iji njirimara "style". Njirimara a na-enye anyị ohere itinye ụdịdị ozugbo na ihe HTML, na nke a, ederede ederede. Iji tinye ederede n'etiti, anyị nwere ike iji akụrụngwa "ederede-align" nwere uru "etiti". Dịka ọmụmaatụ, ọ bụrụ na anyị chọrọ isi n'etiti paragraf, anyị na-agbakwunye àgwà "style" wee kenye ya uru "ederede-align: center".
Nhọrọ ọzọ iji tinye ederede na HTML bụ site na iji « mkpado
Na mgbakwunye na usoro ndị a bụ isi, enwere ụzọ ndị ọzọ dị elu maka itinye ederede na HTML, dị ka iji flexbox na grid. Usoro ndị a dị mgbagwoju anya, mana ha na-enye anyị mgbanwe dị ukwuu na nhazi ahụ ma na-enye anyị ohere itinye ederede ma n'ahịrị ma kwụ ọtọ. Iji tinye usoro ndị a, anyị ga-eji CSS kama iji HTML. Anyị nwere ike ịkọwapụta ụdị na akụrụngwa etiti na iwu CSS dị iche ma ọ bụ n'ụdị inline site na iji njirimara ụdị.
Ederede kwụ ọtọ na kwụ n'ahịrị na HTML
Ịmedo ederede kwụ ọtọ na kwụ n'ahịrị bụ usoro bara uru na mmepe weebụ iji nweta ihe ngosi mara mma. Na HTML, e nwere ụzọ dị iche iche iji nweta mmetụta a n'etiti, dabere na mkpa nke imewe. N'isiokwu a, anyị ga-enyocha ụfọdụ usoro a na-ejikarị eme ka ederede dị na HTML.
Otu n'ime ụzọ kachasị mfe isi tinye ederede na HTML bụ site na iji ihe onwunwe CSS "ederede-aligning". Ngwongwo a na-enye gị ohere ịkọwa n'usoro ederede n'ime ihe HTML. Site n'itinye uru ederede-nhazi ka ọ bụrụ etiti, ederede ga-adado n'ahịrị n'ahịrị na mmewere. Dịka ọmụmaatụ, iji tinye paragraf, anyị nwere ike kechie ya n'ime mkpado
Usoro ọzọ a na-ahụkarị maka itinye ederede na HTML bụ iji ihe onwunwe “ngosi” CSS yana ụkpụrụ “flex” na “align-items”. Site n'itinye ụkpụrụ ndị a n'ime akpa, anyị nwere ike itinye ederede dị n'ime ya ma kwụ ọtọ ma kwụ ọtọ. Usoro a bara uru karịsịa mgbe ịchọrọ itinye ederede n'etiti ihe ndị na-agbanwe agbanwe, dị ka ndepụta nke ihe. Iji mee nke a, anyị na-agbakwunye mkpado ahụ
- ma anyị na-etinye ụdị CSS kwekọrọ.
Site na usoro abụọ a a kpọtụrụ aha, yana nhọrọ ndị ọzọ dị ka iji akụkụ akpaaka ma ọ bụ mmejuputa igbe igbe na-agbanwe agbanwe, ndị mmepe webụ nwere ngwaọrụ dị iche iche dị n'aka ha iji nweta ntinye ederede na HTML. Ọ dị mkpa ịnwale usoro ndị a ma mee ka ha kwekọọ na mkpa dị iche iche nke nhazi ọ bụla. Cheta na n'ikpeazụ ebumnobi nke idebe ederede bụ imeziwanye ikike ịgụ na ngosi nke ihe weebụsaịtị.
Atụmatụ nnweta mgbe ị na-etinye ederede na HTML
Mgbe a bịara n'itinye ederede na HTML, ọ dị mkpa iburu n'uche ohere ịnweta n'uche iji hụ na ndị ọrụ niile nwere ike ịnụ ụtọ ahụmịhe nlele kacha mma. N'okpuru bụ ụfọdụ usoro na ụzọ iji nweta ebe etiti kwesịrị ekwesị na-emebighị ahụmịhe nke onye ọrụ ahụ na-adịghị ahụ anya:
1. Jiri mkpado semantic na njiri mara: Mgbe ị na-etinye ederede na HTML, ọ dị mma iji mkpado semantic dị ka.
yana njiri mara dị ka "nhazi" ma ọ bụ "style" iji guzobe ntọala kwụ ọtọ na kwụ ọtọ. Mkpado na njirimara ndị a na-enyekwara ndị na-agụ ihuenyo aka ịkọwa usoro nke ọdịnaya nke ọma.
2. Zere iji nanị ihe oyiyi mee ihe n'etiti ederede: Ọ bụ ezie na ọ pụrụ ịbụ ihe na-achọsi ike iji ihe oyiyi mee ihe dị ka ndabere iji nweta ebe mara mma nke anya, nke a nwere ike ime ka ịgụ ihe siere ndị nwere nsogbu anya ike. Kama, tụlee iji CSS ka itinye ụdị n'etiti na-adabereghị na ya site na onyonyo.
3. Gbaa mbọ hụ na ederede a na-agụgharị: Mgbe ị na-etinye ederede n'etiti, ọ dị mkpa iji hụ na ọ na-agụgharị ya, ọkachasị maka ndị nwere nsogbu ọhụụ. Jiri nha font kwesịrị ekwesị wee hụ na enwere ọdịiche zuru oke n'etiti ederede na ndabere. Ọ dịkwa mma ka ị zere iji mkpụrụedemede ukwu na ịdepụta akara n'ụzọ gabigara ókè, n'ihi na ha nwere ike ime ka ọgụgụ isi sie ike.
Nkwanye ka ebuli ederede dabere na ngwaọrụ mkpanaka
Otu n'ime ihe ndị dị mkpa mgbe ị na-emepụta ebe nrụọrụ weebụ maka ngwaọrụ mkpanaka bụ ntinye ederede kwesịrị ekwesị. Ịmepụta n'etiti etiti na-achọpụta na egosipụtara ọdịnaya nke ọma yana enwere ike ịgụ ya n'obere ihuenyo. Nke a bụ ụfọdụ ndụmọdụ na usoro ga-enyere gị aka imeta ederede nke ọma na ngwaọrụ mkpanaka.
1. Jiri àgwà "text-align" na CSS: Site na àgwà a, ị nwere ike ịkọwa nhazi nke ederede na ihe HTML. Iji mee ka ederede dị n'etiti, jiri "text-align: center." Nke a ga-ahụ na ederede na-akpaghị aka na-agbanye na etiti site na ihuenyo en dispositivos móviles.
2. Zere iji obosara edoziri: Otu ndudue a na-emekarị bụ ịkọwa obosara edozi maka ihe HTML. Nke a nwere ike ime ka ederede juputara ma ọ bụ bepụ ya na ihuenyo nta. Kama, tụlee iji obosara mmiri ma ọ bụ nkeji pasentị mee ka ọdịnaya dabara n'ụzọ na-agbanwe agbanwe. ngwaọrụ dị iche iche.
3. Jiri akụ “akara dị elu”: Njirimara “akara dị elu” nwere ike inyere gị aka imeziwanye ọgụgụ ederede na ngwaọrụ mkpanaka. Ịbawanye uru dị elu nke ahịrị ntakịrị, dị ka 1.5 ma ọ bụ 2, na-emepụta ohere kwụ ọtọ karịa n'etiti ahịrị, na-eme ka ọdịnaya dị mfe ịgụ. Nyochaa ụkpụrụ dị iche iche ruo mgbe ịchọtara nke kachasị dabara maka imewe gị.
Na-echeta mgbe niile ịme ule na ngwaọrụ mkpanaaka dị iche iche iji chọpụta na n'etiti ederede na-anọgide na-agbanwe agbanwe ma na-agụgharị na ihuenyo niile. Site na ndụmọdụ na usoro ndị a, ị nwere ike bulite ederede dabere na ngwaọrụ mkpanaka wee wepụta ahụmịhe onye ọrụ emelitere na ngwaọrụ mkpanaka. weebụsaịtị gị.
Na-edozi nsogbu ndị a na-ahụkarị mgbe ị na-etinye ederede na HTML
Otu n'ime nsogbu ndị a na-enwekarị n'itinye ederede na HTML bụ na mgbe ụfọdụ ederede anaghị etinye aka na ya nke ọma. Nke a nwere ike ime n'ihi ihe dị iche iche, dị ka iji akụrụngwa CSS eme ihe n'ụzọ na-ezighị ezi ma ọ bụ enweghị nghọta nke ka nhazi akwụkwọ HTML si arụ ọrụ. Agbanyeghị, enwere usoro na ụzọ ị nwere ike iji dozie nsogbu a.
Otu ụzọ isi tinye ederede na HTML bụ site na iji ihe onwunwe CSS `text-align: center;`. A na-eji akụrụngwa a kwado ọdịnaya, na nke a ederede, na etiti nke akpa ya. Iji tinye usoro a, naanị ị ga-agbakwunye koodu na-esonụ na gị css faịlụ ma ọ bụ n'ụdị njiri mara HTML kwesịrị ekwesị:
"`html"
Nke a bụ ọmụmaatụ nke ederede gbadoro ụkwụ.
«`
Usoro ọzọ a na-ejikarị bụ iji HTML ` mkpado.
"`html"
«`
Na mgbakwunye, ọ bụrụ na ịchọrọ itinye ederede na ibe niile, ịnwere ike iji akụrụngwa CSS 'oke' yana ụkpụrụ 'akpaaka'. Ọmụmaatụ:
"`html"
Nke a bụ ọmụmaatụ nke ederede gbadoro ụkwụ na ibe zuru ezu.
«`
Site n'ịgbaso usoro ndị a yana iji ngwo CSS kwesịrị ekwesị, ị nwere ike dozie nsogbu ndị a na-ahụkarị metụtara ntinye ederede na HTML. Na-echeta mgbe niile ịnwale na mezie ụdị dịka mkpa nke ọrụ gị siri dị.
Ngwa na akụrụngwa bara uru maka itinye ederede HTML n'etiti
Mgbe ị na-emepụta ọdịnaya weebụ, ntinye ederede bụ ọrụ dị mkpa iji nweta ọdịdị mara mma. Na post a, anyị ga-ewetara gị usoro usoro na ụzọ dị irè ka i wee nwee ike itinye ha n'ọrụ gị.
Otu n'ime ụzọ kachasị mfe isi tinye ederede na HTML bụ site na iji mkpado
Nhọrọ ọzọ iji CSS mee ederede n'etiti. Ị nwere ike iji akụ na-edozi ederede yana uru "etiti" dị na iwu CSS iji tinye ederede nke ihe ọ bụla HTML. Na mgbakwunye, ịnwere ike iji akụrụngwa CSS ndị ọzọ dị ka oke na padding dozie oghere gburugburu ederede gbadoro ụkwụ ka ị nweta nsonaazụ achọrọ. Na-echeta mgbe niile iji syntax ziri ezi ma tinye iwu ndị a na mmemme HTML akọwapụtara nke ịchọrọ itinye n'etiti.
Na nchịkọta, ntinye ederede na HTML bụ usoro dị mkpa nke enwere ike ime ya site na ụzọ dị iche iche iji nweta nhazi dị ọcha na ọkachamara na ngosi nke ọdịnaya. na weebụ. Ma ị na-eji akụrụngwa ederede CSS ma ọ bụ na-ejikọta ụdị dị iche iche, ederede centering nwere ike ịhazi ya dabere na mkpa nke ọ bụla. weebụsaịtị. Site n'ịghọta isi usoro ewepụtara n'isiokwu a, ndị mmepe nwere ike hụ na idobe ederede kwesịrị ekwesị na mma na ọrụ ha. Anyị na-atụ anya na ozi a bara uru ma anyị na-akpọ gị òkù ka itinye usoro ndị a iji melite ngosi nke ederede gị na webụ. Nyochaa wee jiri usoro na-edobe ederede ndị a wee were chepụta HTML gị gaa n'ọkwa ọzọ!
Abụ m Sebastián Vidal, onye injinia kọmpụta nwere mmasị na teknụzụ na DIY. Ọzọkwa, abụ m onye okike tecnobits.com, ebe m na-ekerịta nkuzi iji mee ka nkà na ụzụ nwetakwuo ohere na nghọta maka onye ọ bụla.