Nā kiʻi kikowaena, nā kikokikona, a me nā papa hana i ke kūkuluʻana i nā pūnaewele hale
Inā e aʻo anaʻoe i ke kūkuluʻana i nā pūnaewele , kahi o nā hana maʻamau loa āu e mālama ai, pehea e hoʻonohonoho ai i nā mea i ka puka polokalamu kele pūnaewele. Hiki ke hoʻohālikelike i kahi kiʻi ma kaʻaoʻao, aiʻole hiki iā ia ke kau waena-e hōʻoia i nā mea e like me nā kiʻi e like me keʻano o ka hoʻolālā.
ʻO ke ala kūpono e hana ai i kēia nānāʻike o nā kiʻi i hoʻohuiʻia ma kahi o ka'ōlelo aiʻole kāu pūnaewele pūnaewele paha ma o ka hoʻohanaʻana i nā Sheets Style Style (CSS) . ʻO ka hapa nui o nā waiwai no ke kauwaena i ka CSS mai ka polokalamu 1.0, a hana nui lākou me CSS3 a me nā polokalamu pūnaewele hou .
E like me nāʻanoʻokoʻa o ka hoʻolālā pūnaewele, nui nāʻano e hoʻohana ai iā CSS i mea e hoʻonohonoho i nā mea i kahi pūnaewele pūnaewele. E nānā i kekahi mauʻano likeʻole e hoʻohana ai iā CSS i mea e hiki ai keʻike i kēia nānā.
Ma kaʻaoʻao o ka hoʻohanaʻana iā CSS i ka Pūnaewele Pūnaewele i ka HTML
Hiki ke hoʻokolohua me CSS he mea paʻakikī no ka hoʻomakaʻana i nā mea hoʻolāki pūnaewele no ka mea he nui nāʻano likeʻole e hiki ai ke hana i kēiaʻano kiʻi like. ʻOiaiʻo nāʻano hana likeʻole he mea maikaʻi a hoʻolālā paha i nā mea hana pūnaewele eʻike anaʻaʻole nā hana a pau e hana i kēlā me kēia māhele, hiki i kēia ke paʻakikī nui loa no nāʻoihana pūnaewele hou mai nāʻano likeʻole e pono ai lākou eʻike i ka wā e hoʻohana ai i kēlāʻano. ʻO ka mea maikaʻi loa e hanaʻia,ʻo ia no kaʻikeʻana i kahi mau mea e hiki ai. I kāu hoʻomakaʻana e hoʻohana i kēia mau mea, e aʻoʻoe i keʻano o ka hana e hana maikaʻi i nā manawa.
Ma kahi kiʻekiʻe, hiki iāʻoe ke hoʻohana i CSS i:
- Kaena kikowaena
- E hoʻomohohua i kahiʻenehana papa (e like me ka māhele)
- Ke kikowaena kahi kiʻi
- Hoʻonohonoho pono i kahi poho aiʻole kekahi kiʻi
He mau makahiki i hala aku nei, hiki i nā mea hoʻolālā pūnaewele ke hoʻohana i ka "center> element e hoʻokumu i nā kiʻi a me nā kikokikona, akā ua hoʻopauʻia kēia manaʻo HTML a ua kākoʻo houʻia i nā mea pūnaewele pūnaewele hou. Ponoʻoe e palekana i ka hoʻohanaʻana i kēia HTML me ka makemakeʻoe e hōʻike pololei i kāu mauʻaoʻao i nā kūlana hou o kēia ao! ʻO ke kumu i hoʻohohoʻia ai kēia kumumanaʻo, ma ka hapa nui, no ka mea, he pono ka weheʻana o nā pūnaewele hou i ka hale a me keʻano. Hoʻohanaʻiaʻo HTML e hana i ka papa i ke kuhikuhiʻana o CSS i ka pāʻani. Ma muli o ke kuhikuhiʻana i ke kikowaena o kahi mea (pehea kona nānāʻana ma mua o ka mea i loaʻa), ua lawelaweʻia kēlāʻano me CSS,ʻaʻole HTML. ʻO ke kumu kēia e hoʻohui i kahi
Kuhi Pūnaewele me CSS
ʻO ka mea maʻalahi loa e kau ma luna o kahi pūnaewele pūnaewele. Hoʻokahi wale nō pono kāhua e pono aiʻoe eʻike e hana i kēia: paʻi kikokikona. E lawe i ka CSS ma lalo nei, e like me kēia:
p.center {kikokikona inoa: waena; }
Me kēia laina o CSS, kēlā me kēlā me kēia māhele i kākauʻia me ka papa waena e kauʻia ma ka pae 'ākau ma loko o kona māmā makua. Eia kekahi laʻana, inā i loko o ka mahele o ka paukū,ʻo ia hoʻi ke keiki o kēlā māhele, e kauʻia ma ka pae ākea ma loko o
Eia kekahi hiʻohiʻona o kēia papa i hoʻohanaʻia ma ka palapala HTML:
Ua hoʻokumuʻia kēia kikokikona.
Ke hoʻokipa i ke kikokikona me ka waiwai o nā hua'ōlelo, e hoʻomanaʻo i ka mea i kauʻia ma loko o kona waihona me ka hoʻokomoʻoleʻia i loko o kaʻaoʻao piha pono'ī. E hoʻomanaʻo hoʻi i ka'ōlelo paʻakikī i waena o ka mea hiki ke paʻakikī e heluhelu ai no nā'āpana nui, no laila e hoʻohana pono i kēia kāhili. ʻO nā kiʻi a me nā'āpana liʻiliʻi o nā hua'ōlelo, e like me ka teaser kikokikona no kekahiʻatikala a mea'ē aʻe paha, he maʻalahi ke heluhelu a maikaʻi i ke kauʻana, akā,ʻoi aku ka nui o nā kikokikona, e like me ka paukū piha iho, kūpono. E hoʻomanaʻo, hiki ke heluhelu pinepineʻia i ka wā e pili ana i ka kikokikona pūnaewele!
Nā Palekana o kaʻenehana me CSS
ʻO nā palaka kekahi mau mea i kāuʻaoʻao i loaʻa ka laulā iʻikeʻia a ua hoʻokumuʻia ma keʻano he pae papa. I ka manawa pinepine, ua hanaʻia kēia mau poho ma o ka hoʻohanaʻana i ka HTML
Kakuhihewa {
'āpana: 0 auto;
whānui: 80em;
}
Hiki i kēia CSS shorthand no ka waiwai o ka palena e hoʻonoho i nā palena ma luna a me lalo i kahi waiwai o 0, aʻo ka hema a me ka'ākau e hoʻohana i ka "auto." Mālama kēia i kekahi manawa i loaʻa a māhele maoli i waena o nāʻaoʻaoʻelua o ka puka makani puka, kahi e kau pono ai i ka mea ma kaʻaoʻao.
Ke hoʻohanaʻia nei ma ka HTML:
akā ua haʻaleleʻia ka kikokikona i loko.
ʻOiai ka lōʻihi o ka'āpana o kāu poho, e hoʻokau i loko o ka pūnaewele. ʻAʻole e kauʻia ma loko o nā poʻomanaʻo i loko o kēlā poʻomanaʻo, akā, e hoʻokuʻuʻia. Ua waihoʻia kēia kikokikona o ka huliʻana i ka'ōlelo kuhihewa i ka paʻamau i nā pūnaewele pūnaewele. Inā makemakeʻoe e pili pono ka hua'ōlelo, hiki iāʻoe ke hoʻohana i ka waiwai o nā hua'ōlelo i uhiʻia ma mua me keʻano o kēiaʻano no ka hoʻokumu i ka māhele.
Kuhi i nā kiʻi me CSS
ʻOiaiʻo ka hapanui o nā pūnaewele e hōʻike i nā kiʻi i hoʻolālāʻia ma ka hoʻohanaʻana i ka'āpana o nā mea a mākou i nānā mua ai no ka paukū,ʻaʻole maikaʻi ka hilinaʻiʻana i kēlāʻanoʻoihana e like me ka meaʻaʻole i'ōleloʻia e ka W3C . No ka meaʻaʻole i hāpaiʻia, hiki i nā manawa hou ke kohoʻia e hiki i ka hoʻokeleʻana o nā mea kelepona ke koho i kēiaʻano.
Ma mua o ka hoʻohanaʻana i ka paʻi kiko'ī e hoʻonohonoho i kahi kiʻi, ponoʻoe e haʻi pololei aku i ka polokalamu kelepona i keʻano o kahi kiʻi. Ma kēiaʻano, hiki iāʻoe ke hoʻokumu iā ia e like me kāu e hana ai i kekahi poho'ē aʻe. Eia ka CSS e hana i kēia hana:
img.center {
hōʻike i ka pahu;
ma ka hema-hema: ke kaʻa;
'ākau-'ākau: ke kaʻa;
}
A eia hoʻi ka HTML no ka kiʻi a mākou e makemake nei e kauʻia:
Hiki iāʻoe ke hoʻonohonoho i nā mea me ka hoʻohanaʻana i ka CSS-line (ʻike i lalo), akāʻaʻole makemakeʻia kēia'ānai no ka mea e hoʻohui ana i nāʻanoʻike i kāu hōʻailona HTML. E hoʻomanaʻo, makemake mākou e hoʻokaʻawale i keʻano a me ka hoʻolālā, pēlā e hoʻonui ai i nā kāhua CSS i kāu palapala helu HTML me ka uhakiʻana i kēlā me ke kaʻawale a, no laila, pono keʻaeʻia i ka wā hiki.
Hoʻolaha i nā Elements Vertically me CSS
ʻO ka hoʻonāukiʻana i nā mea i ke kikowaena he mea paʻakikī wale nō i ka hoʻolālā pūnaewele, akā me ka weheʻana o ka Modena Layout Box CSS Flexible Box i CSS3, he manawa kēia e hana ai.
ʻO ke kūlike o ke kikowaena e like me ka paepae pale i uhiʻia ma luna. ʻO ka waiwai CSS kahi i kaulike me ke kumukūʻai waena.
.vcenter {
'ākau-kaulike: waena;
}
ʻO kaʻaoʻao ma kēia ala keʻaʻole nā kākoʻo pūnaewele e kākoʻo iā CSS FlexBox,ʻoiaiʻoi aku ka nui o nā mea e hele mai nei i kēia alahana hoʻolālā CSS hou! ʻO kaʻoiaʻiʻo, ua kākoʻoʻia nā kākoʻo o nā mea hou i kēia lā i kēiaʻano CSS. ʻO kēia keʻano o kāu mau manaʻo wale nō me Flexbox ka meaʻoi loa o ka pūnaewele.
Inā loaʻa iāʻoe nā pilikia me nā pūnaeweleʻoi aku, e'ōlelo ana ka W3C e hoʻokomo i ka kikokikona i loko o ka pahu me ka hoʻohanaʻana i kēiaʻano:
- E kau i nā mea i hoʻohui i loko o kahiʻene i hoʻopaʻaʻia, e like me ka div.
- E hoʻolālā i kahi kiʻekiʻe liʻiliʻi ma luna o ka mea i loaʻa.
- E wehewehe i ka helu o ka'enela e like me ka pūnaewele.
- E hoʻonohonoho i ke kuhi pololei i "waena."
Eia kekahi laʻana, eia ka CSS:
.vcenter {
minu ke kiʻekiʻe: 12em;
hōʻike: ke kelepona;
'ākau-kaulike: waena;
}
A eia hoʻi ka HTML:
Ua hoʻokomo ponoʻia kēia kikokikona i ka pahu.
ʻO Centering Vertical a me nā Mokuna Hou o Internet Explorer
Aia kekahi mauʻano e hoʻoikaika ai i Internet Explorer (IE) e hoʻokumu a hoʻohana i nā'ōlelo kūlana no kaʻike waleʻo IE i keʻano, akā, heʻano verbose a heʻino. ʻO ka lono maikaʻi me ka hoʻoholo o Microsoft i kēia manawa no ka hāʻuleʻana i nā kākoʻo o ka IE,ʻo ia ka mea e hiki ai i nā mea nānā pūnaewele ke maʻalahi i nā mea hana pūnaewele e like me CSS FlexBox e hana i ka hoʻolālā CSS a pau, ʻaʻole wale ke kikowaenaʻana,ʻoi aku ka maʻalahi no nā mea hoʻolālā pūnaewele.