Te mohio ki nga huringa nui ki te CSS3
Ko te rerekëtanga nui i waenga i te CSS2 me te CSS3 ko te CSS3 kua wehehia ki nga waahanga rereke, e kiia ana ko nga taputapu. Ko enei o nga waahanga kei te haere i roto i te W3C i nga waahanga o te tukanga taunakitanga. Ko tenei tukanga he mea tino maama ake mo nga waahanga o te CSS3 kia whakaaetia, kia whakatinanahia ki te rorohiko e nga kaihanga rereke.
Mena ka whakatauritehia e koe tenei tukanga ki te mea i tupu ki te CSS2, i tuhia ai nga mea katoa hei tuhinga kotahi me nga korero Papatuhi Cascading katoa i roto i te reira, ka timata koe ki te kite i nga painga o te wawahi i te taunakitanga ki nga waahanga iti, takitahi. No te mea kei te mahi takitahi nga waahanga, he nui noa atu te awhina o te tautoko pūtirotiro mo nga waahanga CSS3.
Kia rite ki nga korero hou me te rereke, kia tino whakamatautau i o raatau CSS3 ki te maha o nga kaitoro me nga punaha whakahaere ka taea e koe. Kia mahara ko te whaainga ko te hanga tuhinga tukutuku e titiro ana i nga ahuatanga katoa i roto i nga pukumahi katoa, engari ki te whakarite i nga momo ka whakamahia e koe, tae atu ki nga ahua CSS3, titiro nui ki nga kaitirotiro e tautoko ana ia ratau, ka hoki whakamuri hoki mo nga kaituhi tawhito kaua e.
Nga Kaitautoko CSS3 hou
CSS3 whakaratohia he huinga o nga huarahi hou ka taea e koe te tuhi i nga ture CSS me nga kaiwhiwhi CSS hou, me te kaiwhakahaere hou, me etahi pseudo-huinga hou.
E toru nga kaitono huanga hou:
- Ko te tīmatanga o te huanga e rite ana ki te ahua [foo ^ = "bar"] Ko te huanga he huanga e tohu ana i te maatau e timata ana me te "pa" hei tauira
- Ko nga huanga e pa ana ki te horopaki rite [foo $ = "pa"] Ko te huanga he huanga e kiia ana ko te kaore e mutu ki te "pa" hei tauira
- Kei roto i te huanga ko te waeine takaro [foo * = "bar"] Ko te huānga he huanga e tohu ana i te kohinga e mau ana i te aho "pa" hei tauira
16 pseudo-papa hou:
- : pakiaka
- Ko te kaupapa pakiaka o te tuhinga. I roto i te HTML ko tenei tonu.
- : nth-tamaiti (n)
- Whakamahia tenei ki te whakaoti i nga waahanga tamariki tika ranei, te whakamahi ranei i nga taurangi hei whakaeke i nga hoapaki.
- : nth-last-child (n)
- Whakaritea nga waahanga o te tamaiti e pa ana mai i te whakamutunga.
- : nth-of-type (n)
- Whakatikahia nga huānga teina me te ingoa ano i mua i te rakau tuhinga.
- : nth-whakamutunga-o-momo (n)
- Whakaritehia nga huānga teina me te ingoa kotahi e pa ana mai i te raro.
- : tamaiti whakamutunga
- Whakatikahia te kaupapa whakamutunga a te tamaiti.
- : te tuatahi-o-momo
- Whakatikahia te huānga tuatahi o taua momo.
- : te whakamutunga-o-momo
- Whakamahia te waahanga whakamutunga o taua momo.
- : anake-tamaiti
- Whakatauritea te huānga ko te tamaiti anake o tana matua.
- : anake-o-momo
- Whakatauritea te huānga ko te anake o tona momo.
- : kore
- Whakatauritea te huānga kaore he tamariki (tae atu ki nga kuputuhi kuputuhi).
- : whāinga
- Whakamahia tetahi huanga e ko te whainga o te URI rapu.
- : kua whakahohea
- Whakamahia te huānga ka taea te mahi.
- : kua monokia
- Whakatauritea te huānga ina ka monokia.
- : tirohia
- Whakatikahia te huānga ka tirohia (panuku reo).
- : kāore (s)
- Whakatauhia ka kore te huanga e rite ki te kaitono o te kuware.
Ko tetahi kaiwhakahaere hou:
- elementA ~ elementB
- Whakauruhia ka whai i te wahi e whai ana i tetahi wahi i muri i te kaupapaA, kaore e tika tonu.
Ngā Āhuatanga Hou
I whakaurua hoki e CSS3 etahi maha o nga āhuatanga CSS hou. Ko te nuinga o enei waahanga ko te hanga i nga ahua ataata ka kaha ake te whakauru atu ki te mahinga whakairoiro rite Photoshop. Ko etahi o enei, ano he raina-rohe, he pouaka-atarangi, kei te huri noa mai i te whakauru mai ki te CSS3. Ko etahi atu, ko te pouaka whakawhiti, ko te CSS Grid ranei he momo hou ake e whakaarohia ana i nga wahanga CSS3.
I te CSS3, kaore te tauira pouaka i whakarereke. Engari he potae o nga momo ahuaa hou ka taea te awhina ia koe ki te hanga i nga papamuri me nga rohe o o pouaka.
He Mahinga Nui Ma Nga Maama
Mā te whakamahi i te pikitia-muri, te tuhi-korero, me nga momo taapiri-muri ka taea e koe te tautuhi i nga whakaahua papamuri maha kia noho ai ki waenganui i te pouaka. Ko te ahua tuatahi ko te paparanga e tata ana ki te kaiwhakamahi, me nga mea e whai ake nei i peitahia. Mena he karaehe papamuri, ka peitahia i raro i nga papahanga pikitia katoa.
Nga Taaputa Tae Papamuri Hou
He maha ano hoki nga ahuatanga papamuri hou i CSS3.
- kaupapa-papanga
- Ka tautuhia e tenei taonga te pakaru o te whakapakoko papamuri. Ko te taunoa ko te pouaka rohe, engari ka taea te whakarereke ki te pouaka whakamau, ki te pouaka ihirangi ranei.
- te takenga mai
- Ka whakatauhia e tenei rawa mehemea me waiho nga korero i roto i te pouaka whakamau, te pouaka rohe, te pouaka ihirangi ranei.
- rahi-rahi
- Ka taea e tenei mahinga te tohu i te rahi o te ahua o te papamuri. Ka taea e koe te toro atu i nga whakaahua iti hei whakauru ki te whārangi.
Nga huringa ki nga Taonga Ahua Whakaatu Papakupu
He torutoru ano hoki nga huringa ki nga āhuatanga o te hanganga taipitopito o mua:
- whakamārama-whakahou
- E rua nga uara hou mo tenei rawa: te waahi me te taiao. Ka mokowhiti te mokowhiti i te whakapakoko taraihia i roto i te pouaka, kaore i pakaru. Ko te Rauna e whakaatu ana i te ahua o te papamuri kia taea ai e ia te maha o nga wa i roto i te pouaka.
- whakawhitinga korero
- Ka tapiritia he uara hou "rohe" kia uru ai te papamuri me te ihirangi o te huānga ina he papa taatai tera.
- Tuhinga
- Ko te taonga papamuri o te papanga e whakanui ana i nga momo me te takenga mai.
Ngā Āhuatanga Taitapa CSS3
I roto i nga rohe CSS3 ko nga momo e whakamahia ana e tatou (maoa, rua, pakaru, me etahi atu), ka taea hoki te kii. Ano, ka kawea mai e CSS3 te kaha ki te waihanga i nga kokonga. He mea whakamiharo nga whakaahua taarai no te mea kei te hangaia e koe he ahua o nga rohe e wha katoa ka korero ki te CSS ki te whakamahi i taua ahua ki o rohe.
Nga Tahua Tae Taitapa Hou
He maha nga waahanga hou kei CSS3:
- rarangi-rohe
- raina-teitei-tika-raiti , raina -matau-raorao , raina -raro-maui-raiti , raina -runga-maui-raiti
- Ko enei āhuatanga ka taea e koe te hanga i nga kokonga hurihia i ou rohe.
- puna-rohe-puna
- Tautuhia ai te whakamahi i te kōnae puna pikitia hei utu mo nga momo rohe kua tautuhia.
- pikitia-rohe-waa
- Whakaatu ai i nga whara ki roto mai i nga taha o te taha rohe
- whanui-whanui-whanui
- Te tautuhi i te uara o te whanui mo to tautuhi rohe.
- tautuhi-pikitia
- Tautuhia ai te nui o te waahanga rohe rohe e toro ana i tua o te pouaka rohe.
- pikitia-te-awa
- Te tautuhi i te waahanga me te rahi o nga taha me nga waahanga waenganui o te taatai rohe.
- pikitia-rohe
- Ko te taonga poto mo nga āhuatanga taapete rohe katoa.
Ko etahi atu Ingoa CSS3 e hono ana ki nga Taitapa me nga Papamuri
Ina pakaru te pouaka ki te wehenga o te whārangi, te waahi tīwae mo te wehenga raina (mo nga huinga tautuhinga) ka whakaatuhia e te pouaka-whakapaipai-a-waa te pehea e takaihia ai nga pouaka hou ki te rohe me te paera. Ka taea te wehewehea o nga korero i waenga i nga pouaka pakaru maha e whakamahi ana i tenei taonga.
Kei reira hoki he taonga pouaka-atarangi ka taea te whakamahi hei whakapiri i nga atarangi ki nga huinga pouaka.
Ki te CSS3, ka taea e koe te whakatakoto i tetahi whārangi Tukutuku ki te maha o nga pou kaore he papapu, he hanganga tohu tautuhi pakeke ranei. Ka korero noa koe ki te tirotiro i te maha o nga pou o te tinana me te pehea te whanui. Ka taea e koe te tapiri i nga rohe (ture), nga tae papamuri e toro ana i te teitei o te tīwae, ka rere tonu to kuputuhi i roto i nga tīwae katoa.
CSS3 Tīwae - Tautuhia te Tau me te Whānui o nga Tīwae
E toru nga mea hou e tuku ana ki a koe ki te tautuhi i te tau me te whanui o ou pou:
- tīwae-whānui
- Te tautuhi i te whanui o nga pou. Ka rere te kaituhi i te tuhinga hei whakaki i te waahi me nga pou e whanui ana.
- tīwae-tatau
- Te tautuhi i te maha o nga pou i runga i te whārangi. Ka hangaia e te kaituhi nga pou e nui ana hei whakauru ki te waahi, engari ko te tau anake ka tohua e koe.
- tīwae
- Nga waahi poto ka taea e koe te tautuhi i te whanui me te tau (me nga mea e rua, engari he iti noa te tikanga).
CSS3 Kaiaka Tīwae me nga Ture
Ka whakanohoia nga waahi me nga ture i waenga i nga pou i roto i te ahuatanga maha o te maha. Ka pakaru nga taapiri i nga pou, engari kaore nga ture e tango i tetahi waahi. Mena he whanui ake te ture o te kohinga i te waahi, ka kapohia e ia nga pou e tata ana. e rima nga mea hou mo nga ture o te pou me nga waahi:
- tīwae
- Te tautuhi i te whanui o nga waahi i waenga i nga pou.
- tīwae-ture-tae
- Te tautuhi i te tae o te ture.
- he ahua-ture
- Te tautuhi i te ahua o te ture (piripiri, tohu, rua, me etahi atu).
- ture-ture-whānui
- Te tautuhi i te whanui o te ture.
- ture-tīwae
- He riihi riihi e tohu ana i nga tikanga ture toru e toru i te wa kotahi.
CSS3 Nga Pakaru o te Tīwae, Te Taerangi Whakaaro, me te Whakaki i nga Tīwae
Ka whakamahia nga waahanga CSS2 ano ki te tautuhi i nga waahi i roto i te ihirangi kua paarua, engari me nga mea hou e toru: te pakaru-i mua , te pakaru , me te pakaru .
Ka rite ki nga tepu, ka taea e koe te tautuhi i ngaa huinga ki te whakaeke i nga pou me te waahi tīwae. Ma tenei ka taea e koe te hanga i nga upoko korero ka huri i nga pou maha ano he niupepa.
Ko te whakakī i nga tīwae ka whakatau i te nui o te ihirangi ki ia kohinga. Ka ngana nga kohinga panoni ki te whakatakoto i te nui o nga mea kei roto i ia tīwae ka rere noa te ihirangi i te ihirangi tae noa ki te katoa o te pourangi ka haere ki te waa o muri.
Nga Mahi atu i roto i te CSS3 Aren & # 39; T Kua whakauruhia ki CSS2
He maha nga waahanga atu i roto i te CSS3 iore i te wa i CSS2, tae atu ki:
- CSS tauira raupapa tahora tauira me te kōwae tūnga CSS3 Mātiti : Te waihanga i nga taputapu me CSS.
- CSS3 Kuputuhi Kuputuhi : Kuputuhi Whakaritea me te hanga ano hoki i nga atarangi-taurangi me CSS.
- CSS3 Tauira Tae : Na inaianei me te opacity.
- Nga huringa ki te tauira pouaka : Kei roto he taonga tohu tohu e mahi ana i te ingoa IE.
- CSS3 Kaiwhakahaere Atanga Kaiwhakamahi : Ka hoatu ki a koe nga kaitohu hou, nga urupare ki nga mahi, nga waahi e hiahiatia ana, me te whakahou ano i nga huanga .
- Nga Uiui Miihini : Ko nga uiuinga Media ka taea e koe te pai ake i te wa e whakaatuhia ai me pehea te whakamahi i te waahua. Hei tauira, ka taea e koe te tautuhi i tetahi pepa kāhua e whakamahia ana mo nga taputapu a ringa noa atu i te 20em.
- CSS3 Kaupapa Ruby : Ka whakarato i te tautoko mo nga reo e whakamahi ana i te rihi kuputuhi hei tuhi i nga tuhinga.
- CSS3 Paarua Media : Mo te awhina ake mo te pakiwaituhi paari (pepa, nga whakawhitiwhiti, me etahi atu).
- Ko nga mea e whai mana ana : Ko nga pane me nga waewae, me nga atu tuhinga e hangaia ana i te kaupapa, ina koa mo nga purongo paari.
- CSS3 Kōwae Kōrero : Ngā rerekētanga ki te CSS.