Kāu kiʻi kiʻi a me kāu mau Kiʻi ma nā Styles
He nui ka poʻe e hoʻohana i ka CSS e hoʻololi i ka'ōlelo, e hoʻololi i ka momona, ka lahilahi, ka nui, a me nā mea hou aʻe. Akā, hoʻokahi mea e hoʻopoina nuiʻia e nā poʻe he nui hiki iāʻoe ke hoʻohana i ka CSS me nā kiʻi.
Ke Hoʻololi nei i ka Hōʻike'Āina
CSS hiki iāʻoe ke hoʻololi i kaʻikeʻana o nā kiʻi ma kaʻaoʻao. Hiki iā ia ke hoʻohana nui no ka mālamaʻana i kāu mauʻaoʻao. Ma ka hoʻonohonohoʻana i nā kiʻina ma nā kiʻi a pau, hanaʻoe i kahi nānā maʻamau no kāu kiʻi. ʻO kekahi o nā mea hiki iāʻoe ke hana:
- Hoʻohui i kahi palena a iʻole ka hoʻopukaʻana a puni nā kiʻi
- Wehe i ka palena moana a puni nā kiʻi i hoʻohuiʻia
- Hoʻoponopono i ke ākea a me / a iʻole ke kiʻekiʻe o nā kiʻi
- E hoʻoulu i kahi anuanu iho
- E hoʻololi i ke kiʻi
- E hoʻololi i keʻano i ka uhiʻana o ke kiʻi
ʻO ka hāʻawiʻana i kou kiʻi he palena maikaʻi kahi e hoʻomaka ai. Akā, ponoʻoe e noʻonoʻo nui ma mua o ka palena - e noʻonoʻo e pili ana i ka holoʻokoʻa o kāu kiʻi a hoʻololi i nā palena a me ka pale . ʻO ke kiʻi me kahiʻiliʻeleʻeleʻeleʻele ke nānā aku i ka maikaʻi, akā e kau i kekahi mau pale ma waena o ka palena a nānā ke kiʻi i kahi maikaʻi.
img {
palena: 1px paʻakikīʻeleʻele;
ka pale: 5px;
}
He mea maikaʻi e hoʻohui mau i nā kiʻi non-decorative , inā hiki. Akā i kāu hanaʻana, e hoʻomanaʻo i ka nui o nā mea e kipa e hoʻonui i ka palena kala e pili ana i ke kiʻi. Inā hoʻohanaʻoe i ka helu i luna e hoʻololi i ka palena, e hoʻopauʻia ka loulou keʻoleʻoe e wehe a hoʻololi paha i ka palena ma ka loulou. No ka hanaʻana i kēia, ponoʻoe e hoʻohana i ke kaʻina keiki a CSS e wehe a hoʻololi paha i ka palena a puni nā kiʻi i hoʻohuiʻia:
img> a {
palena:ʻaʻohe;
}
Hiki iāʻoe ke hoʻohana i CSS e hoʻololi aiʻole e hoʻonohonoho i ke kiʻekiʻe a me ka whānui o kāu mau kiʻi. ʻOiaiʻaʻole he manaʻo nui e hoʻohana i ka polokalamu kele pūnaewele e hoʻololi i nā kiʻi kiʻi ma muli o ka wikiwikiʻana o ka wikiwiki, eʻoi aʻe ka maikaʻi o ka hoʻonuiʻana i nā kiʻi no ka maikaʻi. A me CSS hiki iāʻoe ke hoʻonoho i kāu mau kiʻi i nā mea āpau a iʻole ke kiʻekiʻe paha a i hoʻonohonohoʻia paha ka nui e pili ana i ka pahu.
E hoʻomanaʻo, i ka manawa e hoʻonui aiʻoe i nā kiʻi, no nā hualoaʻa maikaʻi loa, ponoʻoe e hoʻonui i keʻano hoʻokahi -ʻo ke kiʻekiʻe aiʻole ka laulā. Mālama kēia i ka hiʻohiʻona o kona hiʻohiʻona, a no laila,ʻaʻole ia he mea'ē. E hoʻonoho i kahi waiwai'ē aʻe no kahi kaʻa a haʻalele paha iā ia e haʻi aku i ka polokalamu kele pūnaewele no ka mālamaʻana i ke kūlana o kēlā me kēia.
img {
nui: 50%;
ke kiʻekiʻe: auto;
}
CSS3 ke hāʻawi nei i kahi hopena i kēia pilikia me nāʻano waiwai hou-pono a me kahi kūlana. Me kēia mau waiwai, e hiki iāʻoe ke ho'ākāka i ke kiko'ī o ke kiʻekiʻe a me ka laulā a me ka pehea e lawelaweʻia ai ka lālā o ka hiʻohiʻona. Hiki iā ia ke hana i nā hopena leta e pili ana i kāu mau kiʻi a iʻole ke kuʻi e kiʻi i ke kiʻi e hoʻohui i ka nui i makemakeʻia.
ʻOiaiʻaʻole i kākoʻo nuiʻia nā kāhua CSS3 a me nāʻoihana kikowaena, akā, aia nā mea'ē aʻe CSS3 i kākoʻo maikaʻiʻia i loko o nā pūnaewele hou e hiki ai iāʻoe ke hoʻololi i kāu mau kiʻi. Nā mea e like me ka malu o nā malu, nā kihi a puni, a me nā hoʻololi e hoʻololi, skew, a hoʻoneʻe paha i kāu mau kiʻi i kēia manawa i kaʻike pūnaewele hou. Hiki iāʻoe ke hoʻohana i ka hoʻopiʻi CSS e hoʻololi i nā kiʻi i ka wā e hoʻokuʻuʻia, aiʻole i ka pāʻana, aiʻole ma hope o ka manawa.
Ke hoʻohanaʻana i nā kiʻi e like me kaʻike
Hiki iā CSS ke maʻalahi i ka hana i nā hilinaʻi nani me kāu mau kiʻi.
Hiki iāʻoe ke hoʻohui i nāʻaoʻao i kaʻaoʻao a pau a iʻole kahi mea pono wale nō. He mea maʻalahi ka hanaʻana i kiʻi kiʻi ma luna o kaʻaoʻao me ka waiwai kiʻi kiʻi kiʻi:
ke kino
kiʻi kumu-kiʻi: url (background.jpg);
}
E hoʻololi i ka mea koho i ke kino i kahi huahana ma kaʻaoʻao e kau i ke kumu ma kahi hoʻokahi wale iho.
ʻO kekahi mea leʻaleʻa āu e hana ai me nā kiʻi e hana i kahi kiʻi kiʻiʻole iʻole e'ōwili me ke koena o kaʻaoʻao - e like me kahi kahawaiwai. Hoʻohana waleʻoe i ke kāʻei hoʻohālikelike. me kāu kiʻi kiʻi. ʻO nā koho'ē aʻe no kāu mauʻike e pili ana i ka hanaʻana iā lākou i ka'ōleʻa ma kahi ākea a iʻole ia i ka'ākau.
Kākau i ka hope-hoʻopau hou: repeat-x; e hoʻopili i ke kiʻi me ka pae a me ke kumu - hou: hou-y; e hoʻopili i ka'ākau. A e hiki iāʻoe ke hoʻonohonoho i kāu kiʻi kumu me kahi waiwai hope.
A ke hāʻawi hou aku neiʻo CSS3 i nāʻano'ē aʻe no kāu mauʻike. Hiki iāʻoe ke hoʻolālā i kāu mau kiʻi e like me ke kūlana o ka nui a iʻole e hoʻonohonoho i ke kiʻi kiʻi i ke ana me ka nui o ka puka . Hiki iāʻoe ke hoʻololi i kahi a laila e kiʻi i ke kiʻi. Akā,ʻo kahi o nā mea maikaʻi loa e pili ana iā CSS3, hiki iāʻoe ke hoʻonohonoho i kēia mau kiʻi kiʻi e hoʻonui i nā hopena iʻoi aku.
Hiki i nā kiʻi kiʻi HTML5 kōkua
Pono e hoʻonohoʻia ka pae ma luna o ka HTML5 ma nā kiʻi a pau e hiki ke kū hoʻokahi i loko o ka palapala. ʻO kahiʻaoʻao e noʻonoʻo ai inā hiki keʻikeʻia ke kiʻi ma kahi hoʻohui'āina, a laila, aia ma loko o ka mea i hōʻikeʻia. Hiki iāʻoe ke hoʻohana i kēlā mela a me ka hoʻohālike FIGSCAPTION e hoʻonui i nāʻano i kāu mau kiʻi.