Pehea e holoi i ka kikokikona i kahi kiʻi

E nānā i kekahi pūnaewele pūnaewele aʻikeʻoe i kahi hui pūnaewele a me nā kiʻi. ʻO kēia mauʻokoʻaʻelua he mea nui e pili ana i ka holomua o kahi pūnaewele. ʻO ka mea kikokikona kahi e heluhelu ai ka poʻe malihini kipa a me nā mea e hoʻohanaʻia ai nā engines hulina ma kahi o ko lākou papahana algorithms. Hiki i nā kiʻi ke hoʻoulu i ka'eneʻeneʻi kiʻi i ka pūnaewele a kōkua i ke kuhikuhiʻana i ka mea kikokikona.

Hoʻoponopono ka'ōlelo a me nā kiʻi i nā pūnaewele. Hoʻokomoʻia nā hua'ōlelo me nā helu HTML maʻamau e like me nā palaka, nā pane, a me nā papa inoa,ʻoiai kiʻiʻia nā kiʻi ma kahiʻaoʻao me ka element. I ka manawa āu i hoʻohui ai i kahi kiʻi i kāu pūnaewele, e makemake pahaʻoe e hele ka puna ma kaʻaoʻao o ka kiʻi, ma mua o ka kauʻana i lalo (ʻo ia ke ala kūpono e hāʻawiʻia kekahi kiʻi i ka pūnaewele HTML i ka polokalamu kele pūnaewele). Hoʻohanaʻia,ʻelua mau ala e hiki ai iāʻoe ke hoʻokō i kēia nānā, ma o ka hoʻohanaʻana i ka CSS (i'ōleloʻia) aiʻole ma ka pākuʻiʻana i nā kulekeleʻike i ka HTML (ʻaʻole i manaʻoʻia, no ka mea e makemake anaʻoe e mālama i ka kaʻawaleʻana o keʻano a me ka papa no kāu pūnaewele).

E hoʻohana ana iā CSS

ʻO ke ala pololei e hoʻololi i ke ala o kaʻaoʻao o kahiʻaoʻao a me ka hoʻolālā kiʻi a me pehea e hōʻikeʻia ai nāʻaoʻao i loko o ka polokalamu kele pūnaewele me CSS . E hoʻomanaʻo wale nō, no ka mea e kamaʻilio ana mākou i kahi hoʻololiʻikeʻia ma kaʻaoʻao (kahi e holo ai nā kiʻi a puni kekahi kiʻi),ʻo ia hoʻi ka māhele o nā Hōʻaleʻa Style Style.

1. ʻO ka mea mua, e hoʻohui i kāu kiʻi i kāu pūnaewele pūnaewele. E hoʻomanaʻo i ka hoʻokuʻuʻana i nā hiʻohiʻona (e like me ka laulā a me nā helu kiʻekiʻe) mai kēlā HTML. He mea nui kēia, akā, no kahi pūnaewele pane i kahi eʻokoʻa ai ka nui o ka kiʻi ma muli o ka polokalamu kele pūnaewele. ʻO kekahi mau polokalamu, e like me Adobe Dreamweaver, e hoʻonui i kaʻike a me ke kiʻekiʻe i nā kiʻi i hoʻokomoʻia me kēlā mea hana, no laila e pale i kēiaʻikepili mai ka helu HTML! E hōʻoia naʻe, e komo i kahi kikokikona kūpono . Eia kekahi hiʻohiʻona o keʻano o kāuʻikepili HTML e nānā:
2. No nā kumu hanaʻana, hiki iāʻoe ke hoʻohui i kahi papa i kahi kiʻi. ʻO kēia papa waiwai ka mea a mākou e hoʻohana ai i kā mākou kāʻei CSS. E hoʻomaopopo i ka nui o ka waiwai a mākou e hoʻohana nei maʻaneʻi, akā, no kēiaʻanoʻano, makemake mākou e hoʻohana i nā helu o ka "hema" a "kūpono", e like me keʻano o kā mākou makemake e hoʻolāʻihi i ko mākou kiʻi. Loaʻa iā mākou kahi hana maʻalahi e hana pono a maʻalahi i nā mea'ē aʻe i hiki ke mālama i kahi pūnaewele i ka wā e hiki mai ana e hoʻomaopopo, akā, hiki iāʻoe ke hāʻawi i kēia kūlana i kēlā me kēia papa.
   2. ʻOe iho,ʻaʻole e hana kekahi i kekahi mea. ʻAʻole hiki ke hoʻokomoʻia ke kiʻi i kaʻaoʻao hema o ke kikokikona. No kēia, pono kākou e huli i kā mākou kāʻei CSS.

1. Ma kāu kāʻeikehula, hiki iāʻoe ke hoʻohui i kēiaʻano hou:
   1. .hema {
   2. ka lana: haʻalele;
   3. paliha: 0 20px 20px 0;
   4. }
   5. ʻO kāu hana i hana ai maʻaneʻi e hoʻohana i ka waiwai CSS "float" , ka mea e huki ai i ke kiʻi mai kahi kahe o ka palapala maʻamau (keʻano e hōʻike mau ai ke kiʻi, me ka kikokikona e pili ana ma lalo) a hoʻohālike ia i kaʻaoʻao hema o kāna pahu . ʻO ka'ōlelo e hiki mai ma hope o ka hōʻailona HTML me ka hoʻopuniʻana a puni. Ua hoʻohui pū mākou i kekahi mau mea pale i hikiʻole i kēia kikokikona ke kū pololei i ke kiʻi. Ma kahi kūpono, e loaʻa ana i kahi spacing maikaʻi e nānā maikaʻiʻia i ka hoʻolālā o kaʻaoʻao. Ma ka CSS shorthand no ka pale, ua hoʻohui mākou i nā helu 0 i kaʻaoʻao a me kaʻaoʻao hema o ke kiʻi, a he 20 mau pika i ka hema a me lalo. E hoʻomanaʻo, ponoʻoe e hoʻohui i kekahi pale ma kaʻaoʻao'ākau o ka kiʻiʻokoʻa hema. ʻO ke kiʻi pono (kahi a mākou e nānā ai i loko o ke minute) e hanaʻia ka paleʻana i konaʻaoʻao hema.
2. Ināʻikeʻoe i kāu pūnaewele pūnaewele i kahi polokalamu kele pūnaewele, ponoʻoe eʻike i keʻano o kāu kiʻi i kaʻaoʻao hema o kaʻaoʻao a ua hoʻopili ponoʻia ka kikokikona a puni. ʻO kekahiʻano e haʻi aku i kēia,ʻo ia ke kiʻi "e lele ana i ka hema".

1. Inā makemakeʻoe e hoʻololi i kēia kiʻi e hoʻopiliʻia i ka'ākau (e like me ka hiʻohiʻona hiʻohiʻona e hele pū me kēiaʻatikala), he mea maʻalahi. ʻO ka mea mua, ponoʻoe e hōʻoia, ma waho aʻe o keʻano i kākoʻoʻia e mākou i kā mākou CSS no ke kumu o ka "hema", loaʻa iā mākou kahi no ke kaulike. E nānāʻia kēia:
   1. .akau {
   2. ke lana: pololei;
   3. ka pale: 0 0 20px 20px;
   4. }
   5. Hiki iāʻoe keʻike ua aneane like kēia me ka CSS mua i kākau ai mākou. Hoʻokahi wale nō ka mea i hoʻohanaʻia e mākou no ka "float" waiwai a me nā kumukūlou lilo a mākou e hoʻohana ai (e hoʻonui i kekahi ma kaʻaoʻao hema o kā mākou kiʻi ma kahi o ka'ākau).
2. Ma hope, e hoʻololi i ka nui o ka papa o ke kiʻi mai ka "hema" a "'ākau" i kāu HTML:
3. E nānā i kāuʻaoʻao ma ka polokalamu kelepona i kēia manawa ae hoʻokomoʻia kāu kiʻi i ka'ākau me ka kikokikona e hoʻopili mau ana iā ia. Hoʻokomo mākou i ka hoʻokomo i kēia mauʻanoʻelua, "hema" a "kūpono" i ko mākou mau style style a hiki iā mākou ke hoʻohana i kēiaʻanoʻike e pono ai i ka wā e hana ana mākou i nā pūnaewele pūnaewele. Kūpono kēia mauʻanoʻelua, nā hiʻohiʻona hou e hiki iā mākou ke huli i nā manawa a mākou e makemake ai i nā kiʻi kiʻi me ka hoʻopili kikokikona a puni lākou.

Ke hoʻohana nei i ka HTML Ma mua o CSS (a me ke kumu e hana aiʻoe i kēia)

ʻOiai hiki ke hiki ke kāpili i ka pepa e pili ana i kahi kiʻi me ka HTML, nā kulekele pūnaewele e kuhikuhi iā CSS (a me nā kapuaʻi i hōʻikeʻia ma luna nei)ʻo ia ke ala e hele ai i hiki iā mākou ke mālama i kahi kaʻawale (HTML) a me keʻano (CSS). He mea nui loa kēia ma ka noʻonoʻoʻana i kēlā, no kekahi mau meahana a me nā papahana, iʻole e pono ka holoʻana o kēlā kikokikona a puni ke kiʻi. No ka liʻiliʻi liʻiliʻi, hiki i kahi papahana o ka pūnaewele pane ka mea e hōʻoia pololei i ka palapala ma lalo o ke kiʻi a e hoʻonui ke kiʻi i ka whānui o kaʻili. Hoʻomaʻamaʻalahiʻia kēia me nā hulina i ka'umepili inā ke kaʻawale kāu mauʻaoʻao mai kāu hōʻailona HTML. I kēia ao honua nui, kahi eʻikeʻia ai nā kiʻi a me nā'ōlelo no nā malihini'ē aʻe a ma nā pale'ē aʻe, he mea nui kēia kaʻawaleʻana i ka holomua a me ka hoʻolālāʻana o kahi pūnaewele.