Ke hoʻomaopopo i nā hoʻololi nui i ka CSS3
ʻO kaʻokoʻa nui ma waena o CSS2 a me CSS3 ,ʻo ia ka CSS3 i hoʻokaʻawaleʻia i nā'āpana likeʻole, i kapaʻia he modula. Ke holo nei kēia mau modula ma o ka W3C ma nāʻano likeʻole o ke kaʻina hana aʻo. ʻO kēia hana ua maʻalahi ka maʻalahi o nā'āpana CSS3 i ka'āpono a hoʻokomoʻia ma ka polokalamu kele pūnaewele e nā mea hana'ē aʻe.
Inā hoʻohālikelikeʻoe i kēia kaʻina hana i ka mea i hanaʻia me CSS2, kahi i waihoʻia nā mea a pau e like me kahi palapala me nā'ōlelo Cascading Style Sheets a pau i loko, e hoʻomakaʻoe eʻike i nā pono o ka uhakiʻana i ka'ōlelo i loko o nā liʻiliʻi liʻiliʻi. Ma muli o ka hana 'ana o kēlā me kēia' ano o nā modules ma luna o ke kanaka, ua nui ka laulā o ka polokalamu kele pūnaewele no nā kāʻei CSS3.
E like me kekahi'ōlelo hou a me ka hoʻololi hou, e hōʻoia e hōʻoiaʻiʻo i kāu mau CSS3 i ka nui o nā pūnaewele a me nā pūnaehana hana e like me kou hiki. E hoʻomanaʻo i ka pahuhopuʻaʻole e hana i nā pūnaewele e nānā like ana i kēlā me kēia pūnaewele, akā, e hōʻoia i nāʻano āu e hoʻohana ai, e pili ana i nā kāhua CSS3, e nānā nui i nā pūnaewele e kākoʻo iā lākou a e hoʻi hope hoʻi lākou no nā pūnaewele kahiko. mai.
Nā mea koho hou CSS3
CSS3 hāʻawi aku i ka hui o nā ala hou e hiki ai iāʻoe ke kākau i nā kānāwai CSS me nā mea koho CSS hou, a me ka hui pūʻali hou, a me kekahi mau pono pūnaewele hou.
ʻEkolu haku koho hou:
- Nā huahana e hoʻomaka ana me nā māmā like me nā mea like [foo ^ = "bar"]ʻO ka māmā i kahi inoa i kapaʻia he foo e hoʻomaka me ka "pā"
- Nā huahana pili hope e pili ana i ka hoʻohālike [foo $ = "bar"]ʻO ka mea i loaʻa kahi inoa i kapaʻia he foo e pau i ka "pā"
- Loaʻa ka pilina o ka mea hoʻohālike [foo * = "bar"]ʻO ka māmā me kahi inoa i kapaʻia he foo i loko o ka "pa" string
16 mau inoa hou:
- : ke kumu
- Ke kumu kumu o ka palapala. I ka HTMLʻo ia mau.
- : nth-keiki (n)
- E hoʻohana i kēia e hoʻohālikelike i nāʻano pono'ī o nā keiki a hoʻohana i nā kānana no ka loaʻaʻana o nā hāmeʻe likeʻole.
- : nth-hope-keiki (n)
- E hoʻohālike i nā kikowaena o nā keiki e helu ana mai ka mea hope.
- : nth-of-type (n)
- E hoʻohui i nā huʻupuʻu hoʻohui me ka inoa like ma mua o ka palapala.
- : nth-hope-o-ʻano (n)
- ʻElua mau'enemoku me nā inoa hoʻokahi e helu ana mai ka lalo.
- : hope hope
- E hoʻohālikelike i ka mea hope loa o ka makua.
- :ʻano mua
- E hoʻohālikelike i ka māmā mua o iaʻano.
- : hope hope loa
- E hoʻohālikelike i ka mea hope loa o iaʻano.
- : ke keiki wale nō
- E hoʻohālikelike i ka waehana kahi wale nō keiki a kona makua.
- : kekahi-o-ʻano wale nō
- E hoʻohālikelike i ka mea hoʻokahi wale nō o konaʻano.
- : hoʻonele
- E hoʻohālikelike i ka māheleʻaʻohe keiki (e like me nā nodes).
- : ūmua
- E hoʻohālikelike i kahi'ulina i loaʻa ke kumu o ka URI e kuhikuhi nei.
- : ua hiki
- E hoʻohālikelike i ka mea i ka hiki ke hiki.
- : ua pōʻino
- E hoʻohālikelike i ka mea i ka manawa i nele.
- : wehe
- E hoʻohālikelike i ka mea i ka manawa e nānāʻia (pāʻoihana radio) aiʻole ka pahu helu.
- :ʻaʻole (s)
- E hoʻohālikelike ināʻaʻole like ka wae i ka mea koho koho .
Hoʻokahi hui hou:
- elementA ~ elementB
- E hoʻohālikelike i ka wā e hahai ai ka huahana ma kahi o ka elementA,ʻaʻole pono.
Nā Mea Hou
Ua hoʻolako hou akuʻo CSS3 i kahi mau CSS hou. ʻO ka hapanui o kēia mau waiwai e hana i nāʻanoʻike e like paha me ka papa kiʻi kiʻi like Photoshop. ʻO kekahi o kēia mau mea, e like me ka palena palena-āpau paha, ua puni i kahi hoʻolauna inā CSS3. ʻO nā mea'ē aʻe, e like me ka flexbox a iʻole CSS Grid, he mauʻokoʻa hou ia i manaʻoʻia he mau kākoʻo CSS3.
Ma CSS3,ʻaʻole i loli ke kālai pahu. Akā, he mau pūʻano hou nā mea e hiki ke kōkua iāʻoe e hana i nā hiʻona a me nā palena o kāu pahu.
Ka nui o nāʻike
Ma ka hoʻohanaʻana i ke kiʻi kumu, kahi'ikelana, a me nāʻano hana hou-e hiki ai iāʻoe ke hoʻomaopopo i nā kiʻi iʻikeʻia he nui ma luna o kekahi ma ka pahu. ʻO ke kiʻi mua ka papa kokoke i ka mea hoʻohana, me nā mea i kākauʻia ma hope. Inā he leʻaleʻa kahi, e penaʻia ma lalo o nā kiʻi āpau.
Nā Kiʻikuhi Kālena Hou
Aia kekahi mau hanana hou i CSS3.
- kiʻi kumu
- Hōʻike kēia waiwai i kahi e weheʻia ai ke kiʻi kumu. ʻO ka paʻakikī ka pahu palena, akā hiki ke hoʻololi i ka pahu holoi a iʻole ka pahu waihona.
- ʻike mua
- E hoʻoholo ana kēia waiwai inā paha he mau wahi i loko o ka pahu holoi, ka pahu palena, a iʻole ka pahu waihona.
- ʻike nui
- Mālama kēia waiwai iāʻoe e hōʻike i ka nui o ke kiʻi kumu. Hiki iāʻoe ke kau i nā kiʻi liʻiliʻi e hoʻohui i kaʻaoʻao.
Nā Hoʻololi i nā Mea Kūlana Kūlana Ma Mua
Aia kekahi mau hoʻololi i nāʻanoʻano o nāʻano o kaʻike.
- ʻike hou-hou
- ʻElua mau helu hou no kēia pono: kahi a puni. Hiki ke kikowaena i nā kiʻi i kālaiʻia i loko o ka pahu me kaʻole e weheʻia. E hoʻopili ana ka'ōpili i ke kiʻi kumu e hiki ai ke kau i ka manawa a pau i loko o ka pahu.
- ʻike mua
- Hoʻopiliʻia kekahi "kūpono" hou e hiki ai i kaʻaoʻao ke hoʻololi me ka mea o ka mea pono inā he pae palalau kahi.
- ʻike
- Hoʻonui ka waiwai kākoʻa pili i ka nui a me nā kumu hānau.
Nā Kuleana Border CSS3
Ma ka CSS3 palena'āina keʻano i hoʻohanaʻia e (paʻakikī, pālua, paʻi, a me nā mea'ē aʻe) aiʻole hiki ke lilo i kiʻi. Hoʻolako, CSS3 hoʻokomo i ka hiki ke hana i nā kihi i'ōwiliʻia. He mea hoʻonani nā kiʻi kūhaka no ka mea e hanaʻoe i kiʻi o nāʻaoʻaoʻehā a laila e haʻi i ka CSS pehea e hoʻohana ai i kēlā kiʻi i kou mau palena.
Nā Kuleana Mea Kālena Hou
Aia kekahi mau palena palena'āina hou ma CSS3:
- palena palena
- ka palena-'ākau-pololei-radius , ka palena-'ākau-pololei-radius , ka palena'ākau-hema-hapa , ka palena-luna-hema-radius.
- ʻO kēia mau pono eʻae iāʻoe e hana i nā kihi ma luna o kou mau palena.
- kiʻi kiʻi palena
- Hoʻonohonoho i ka faila puna kiʻi e hoʻohanaʻia ma mua o nāʻaoʻao palena i ho'ākāka muaʻia.
- palapala kiʻi palena
- Hōʻike i nā'ōpū i loko mai nāʻaoʻaoʻaoʻao palena
- ka whānui o ka palena'āina
- Ke wehewehe nei i ka nui o ka whānui no kou kiʻi palena.
- kiʻi palena palena
- Hōʻike i ka nui i hoʻolālāʻia ka palena kiʻi palena ma waho aʻe o ka pahu pahu.
- palena palena-palena
- E wehewehe i ka hoʻopiliʻiaʻana o nāʻaoʻao a me nāʻaoʻao waena o ke kiʻi palena.
- kiʻi kiʻi palena
- ʻO ka hale pōkole no nā mea kiʻi kiʻi palena.
Nā Kiʻi CSS3'ē aʻe e pili ana i nā Borders a me nā Background
Ke haʻihaʻiʻia kahi pahu i kahi'ūki o kaʻaoʻao, ka wāwae paewae no ka papa laina (no nā'enewa inline) hōʻike ka pahu-decoration-break property i ka hoʻohuiʻiaʻana o nā pahu hou me ka palena a me ka pale. Hiki i nāʻike ke hoʻokaʻawaleʻia ma waena o nā pahu nui i hoʻohanaʻia i kēia waiwai.
Aia kekahi mea hoʻolālā palekū hiki ke hoʻohanaʻia e hoʻouka i nā malu i nā mea pono.
Me CSS3, hiki iāʻoe ke hoʻonohonoho koke i kahi palapala pūnaewele me nā kolamu nui me kaʻole o nā papa a iʻole nā hōʻailona o ka hoʻohālikeʻana i nā hale. E haʻi waleʻoe i ka pūnaewele pehea ka nui o nā pou e loaʻa i ke kino a me keʻano o ka whānui. Hiki iāʻoe ke hoʻokuʻi i nā palena (nā rula), nā hōʻailona kala e like me ke kiʻekiʻe o ke kolamu, a e kahe ana kāu mau'ōlelo ma o nā kolamu a pau.
CSS3 Pā'ālua - E hoʻoholo i ka helu a me ka nui o nā kolamu
ʻEkolu mau mea hou e'āpono iāʻoe e wehewehe i ka helu a me ka whānui o kāu mau pou:
- ka whānui o ke kolamu
- E wehewehe i ka whānui o kāu mau pou. E kahe ana ka polokalamu kelepona i ka kikokikona e hoʻopiha i kahi me nā koluma i whānui.
- ka helu helu helina
- Ke wehewehe i ka helu o nā pola ma kaʻaoʻao. Hiki i ka polokalamu kelepona ke hana i nā pou i ka nui a hiki i ka manawa, akāʻo ka helu wale nō āu i helu ai.
- nā pou
- ʻO kahi waiwai pokole kahi e hiki ai iāʻoe ke ho'ākāka i ka whānui a iʻole ka helu (aiʻole nā meaʻelua, akāʻaʻole i maʻalahi).
CSS3 nā Laikini Kālena a me nā'Ōlelo
Hoʻonohoʻia nā laikini a me nā lula ma waena o nā pou i kahi hiʻohiʻona multicolumn. Haʻaleʻa nā Gaps i nā kolamu, akā,ʻaʻohe o nā hoʻolālā e lawe i nā wahi. Ināʻoi aku ka laulā o ke kolamu pae ma mua o kaʻaeʻana, e piʻiʻo ia ma nāʻaoʻao e pili ana. aiaʻelima mau mea hou no nā kaʻula a me nā āpau:
- ʻO ke āpau
- Ke wehewehe i ka whānui o nā lapa i waena o nā pae.
- ke kaʻina-āpau
- Hōʻike i kaʻula o ke kānāwai.
- ke kālai'āina-style-style
- Ke wehewehe i keʻano o ke kaulike (ikaika, paʻakikī,ʻelua, a pēlā aku).
- ka pā'ālua-rule-width
- Ke wehewehe i ka whānui o ke kaulike.
- ke kaʻina hoʻomalu
- ʻO kahi'āpana pōkole e ho'ākāka ana i nā mana āpauʻekolu i ka manawa hoʻokahi.
CSS3 Pākī Palena, Naku Kolamu, a me nā Kūwae Kūhaka
Hoʻopauʻia ka papahana e like me nā koho CSS2 i hoʻohanaʻia e wehewehe i ka wāwahi i loko o nā mea i hoʻopihapihaʻia, akā meʻekolu mau mea hou: pale -mua , ka wāwae , a me ka wāwae .
E like me nā papa, hiki iāʻoe ke hoʻonohonoho i nā kumuhana no ka hoʻolahalahaʻana i nā pou me ka'āpana wāwae. Hiki iāʻoe ke hana i nā poʻo'ī e pānaʻi pinepine i nā pou e like me kahi nūpepa.
ʻO ka pihaʻana o nā koluma e hoʻoholo ana i ka nui o ka helu i kēlā me kēia kolamu. Hoʻokomo nā papa kaulike e kau i ka nui o nā mea ma loko o kēlā me kēia kolamu aʻo ka pahu wale nō e holo i ka mea i loko a hiki i ka pihaʻana o ke kolamu a laila hele i ka mea e hiki mai ana.
Nā mea hou aku i CSS3 i hōʻailonaʻia me'Aren & # 39; i loko o CSS2
Nui nāʻano hou aku i CSS3 iʻole i loaʻa ma CSS2, me kēia:
- CSS Hōʻolālā hoʻohālikelike hōʻaia a me ka module Chip3 Grid3 Grid : Hoʻonohonoho i nā grids me CSS.
- CSS3 Pūnaewele kikokikona : Hoʻopuka kikokikona a hana pū i nā hulu me CSS.
- CSS3 Pūnaeʻu Loe : Aia me ka opacity.
- Nā Chaloli i ka pahu pahu : Me kahi waiwai marke e hana like me ka inoa IE.
- CSS3 Pūnaewele Interface : Hāʻawi iāʻoe i nā mea hou, nā pane i nā hana, nā kahua i makemakeʻia, a me ka hoʻouluʻana i nāʻano .
- Nā Nīnau Pinepine : nā nīnau hulina e hāʻawi iāʻoe i ka maʻalahi i ka weheweheʻana i ka pehea e hoʻohanaʻia ai kahi kāhua kapa. No ka laʻana, hiki iāʻoe ke ho'ākāka i kahi pepa lole i hoʻohanaʻia no nā mea hana lima wale nō iʻoi aku kaʻoi aku o kaʻike nui ma mua o 20em.
- CSS3 Mody Ruby : Hāʻawi i ke kākoʻo no nā 'ōlelo e hoʻohana ana i ka ruby kikokikona e hoʻopau i nā palapala.
- CSS3 Pūnaewele Media Packaged : No kaʻoi aku ke kākoʻo no ka paʻi paʻi (pepa, nā palapala hōʻailona, a me nā mea'ē aʻe).
- Nā mea i hoʻolālāʻia : L nā pane a me nā footers, footnotes, a me nā mea'ē aʻe i hanaʻia ma ka polokalamu polokalamu, ma kahi pūnaewele paʻi.
- CSS3 Kōnae'Ōlelo : Nā hoʻololi i ka CSS ākea.