Kusiyana pakati pa CSS2 ndi CSS3

Kumvetsa kusintha kwakukulu kwa CSS3

Kusiyana kwakukulu pakati pa CSS2 ndi CSS3 ndikuti CSS3 yapatulidwa mu magawo osiyanasiyana, otchedwa modules. Mmodzi mwa ma moduleswa akuyenda kudzera mu W3C mu magawo osiyanasiyana a ndondomeko yoyamikira. Kuchita izi kwathandiza kuti zikhale zosavuta pazinthu zosiyanasiyana za CSS3 kuti zivomerezedwe ndikugwiritsidwe ntchito pa osatsegula ndi opanga osiyana.

Ngati mukufanizira njirayi ndi zomwe zinachitika ndi CSS2, pamene zonse zidatumizidwa ngati chikalata chokha ndi zonse Zomwe Mumakonda Zithunzi Zamkatimu , mumayamba kuona ubwino woswa malangizowo kukhala zidutswa zing'onozing'ono. Chifukwa chakuti ma modules aliwonse akugwiritsidwa ntchito payekha, tili ndi mndandanda wambiri wawasakatuli wa ma modules CSS3.

Monga ndi chidziwitso chatsopano ndi chosinthika, onetsetsani kuti mukuyesera masamba anu a CSS3 bwino kwambiri m'masakayi ambiri komanso machitidwe omwe mungathe. Kumbukirani cholinga sichinapangitse masamba omwe amawoneka chimodzimodzi mu osatsegula aliyense, koma kuonetsetsa kuti mafashoni aliwonse omwe mumagwiritsa ntchito, kuphatikizapo mafashoni a CSS3, amawoneka okongola m'masewera omwe amawathandiza ndipo amabwerera mofulumira kwa asakatu akale omwe osa.

Zosankha Zatsopano za CSS3

CSS3 ikupereka mndandanda wa njira zatsopano zomwe mungathe kulembera malamulo a CSS ndi osankhidwa atsopano a CSS, komanso combinator yatsopano, ndi zina zatsopano zamwano.

Osankhidwa atatu atsopano:

• Ikani masanjidwe oyambira ndondomeko yeniyeni [foo ^ = "bar"] Choyambiracho chiri ndi malingaliro otchedwa foo omwe amayamba ndi "bar" mwachitsanzo
• Gwiritsani ntchito mapeto omwe amatsutsana ndendende chinthu [foo $ = "bar"] The element ali ndi chikhalidwe chotchedwa foo chomwe chimatha ndi "bar" mwachitsanzo,
• Chiphatikizi chili ndi chinthu chophatikiza [foo * = "bar"] The element ali ndi chidziwitso foo chomwe chiri ndi chingwe "bar" mwachitsanzo,

Maphunziro atsopano 16:

• : mizu
  • Mphulidwe yamtundu wa chikalata. Mu HTML izi nthawi zonse.
• : nth-child (n)
  • Gwiritsani ntchito izi kuti mufanane ndi zinthu zina za ana kapena mugwiritse ntchito mitundu kuti mutenge masewero ena.
• : mwana wa nth-last (n)
  • Gwiritsani ntchito zinthu zomwe ana akuwerengera kuchokera kumapeto.
• : nth-of-mtundu (n)
  • Match sibling zinthu zomwe ziri ndi dzina lomwelo patsogolo pake mu mtengo wa chikalata.
• : nth-last-of-type (n)
  • Match sibling elements omwe ali ndi dzina lomwelo akuwerengera kuchokera pansi.
• : mwana watha
  • Gwirizanitsani gawo lomaliza la mwana wa kholo.
• : yoyamba-mtundu
  • Gwirizanitsani mchimwene woyamba woyamba wa mtundu umenewo.
• : wotsiriza-wa-mtundu
  • Gwirizanitsani gawo lomaliza lachibale la mtundu umenewo.
• : mwana yekha
  • Gwirizanitsani chinthu chomwe chiri mwana yekhayo wa kholo lake.
• : yokha-ya-mtundu
  • Gwirizanitsani chinthu chomwe chiri chokhacho cha mtundu wake.
• : opanda
  • Gwiritsani ntchito chinthu chomwe alibe ana (kuphatikizapo ma node).
• : zolinga
  • Gwiritsani ntchito chinthu chomwe chiri chofunikanso cha URI.
• : yathandiza
  • Gwirizanitsani chinthucho pamene chatsegulidwa.
• : olumala
  • Gwiritsani ntchito chinthucho ngati chikulephereka.
• : anafufuzidwa
  • Gwiritsani ntchito chinthucho poyang'aniridwa (batani lawailesi kapena bokosi).

• : osati (s)
  • Lumikizani pamene chinthucho sichigwirizana ndi chosankha chosavuta.

Mmodzi watsopano combinator:

• elementA ~ elementB
  • Gwirizanitsani pamene elementB ikutsatira kwinakwake pamapeto a elementA, osati nthawi yomweyo.

Nyumba Zatsopano

CSS3 inayambitsanso katundu watsopano wa CSS. Zambiri mwazinthuzi zinali kupanga mawonekedwe owonetsera omwe angagwirizanitse kwambiri ndi mapulogalamu a zithunzi monga Photoshop. Zina mwa izi, monga malire-radius kapena mthunzi wa mthunzi, zakhala zikuzungulira kuyambira chiyambi ngati CSS3. Zina, monga flexbox kapena CSS Grid ndi mafashoni atsopano omwe amadziwikanso kuti Zowonjezera CSS3.

Mu CSS3, bokosi lachitsanzo silinasinthe. Koma pali mndandanda wa zojambula zatsopano zomwe zingakuthandizeni kutanthauzira maziko ndi malire a mabokosi anu.

Zambiri Zomwe ndimayendera

Pogwiritsa ntchito fano lachiyambi, malo apambuyo, ndi miyendo yobwereza-mmbuyo mukhoza kufotokozera zithunzi zam'mbuyo kuti zikhale pamwamba pa wina ndi mzake mu bokosi. Chithunzi choyamba ndi wosanjikizana kwambiri ndi wosuta, ndi zithunzi zotsatirazi. Ngati pali mtundu wachibadwidwe, ndijambulidwa patsinde pazithunzi zonse.

Zatsopano Zamakono Zamkati

Palinso katundu wina wamtundu wa CSS3.

• maziko-clip
  • Malo awa akufotokozera momwe chithunzi chakumbuyo chiyenera kukhalira. Chosoweka ndi bokosi la malire, koma lingasinthidwe ku bokosi lopukuta kapena bokosi.
• chiyambi
  • Malowa amatsimikizira ngati maziko akuyenera kukhala malo m'bokosi la padding, bokosi la malire, kapena bokosi lokhalamo.
• kukula kwazithunzi
  • Malo awa amakulolani kuti muwonetse kukula kwa chithunzi chakumbuyo. Ikuthandizani kutambasula zithunzi zazing'ono kuti zigwirizane ndi tsamba.

Kusintha kwa Zochitika Zamkatimu Zomwe Zilipo

Palinso kusintha kochepa kumayendedwe akale omwe alipo kale:

• mbiri-kubwereza
  • Pali malingaliro awiri atsopano pa malo awa: malo ndi kuzungulira. Malo amapanga chithunzi chojambulidwa mofanana mumkati mwa bokosi popanda kudulidwa. Kuzungulira kuzungulira chithunzi chakumbuyo kotero kuti icho chidzasintha nthawi zonse mu bokosi.
• chotsatira-chakumbuyo
  • Chofunika chatsopano cha "malo" chikuwonjezeredwa kuti maziko apindule ndi zinthu zomwe zilipo pamene chinthucho chiri ndi bar.
• mbiri
  • Chiyambi chachidule cha katundu chimapanga kukula ndi chiyambi cha katundu.

CSS3 Properties Border

Mu malire a CSS3 akhoza kukhala mafilimu omwe timakonda (olimba, awiri, osweka, etc.) kapena akhoza kukhala fano. Komanso, CSS3 imabweretsa mphamvu yokonza ngodya zozungulira. Zithunzi zam'mbali ndi zosangalatsa chifukwa mumapanga chithunzi cha malire onse anayi ndikuuza CSS momwe mungagwiritsire ntchito fanoli kumalire anu.

Zatsopano Zamakono Zamakono

Pali zina zatsopano malire mu CSS3:

• malire-radius
  • m'mphepete-kumanja-kumtunda , kumadzulo-kumanja-kumtunda , kummwera-kumanzere- kumadzulo , kummwera-kumtunda-kumtunda
  • Zinthu zimenezi zimakulolani kuti mupange ngodya zozungulira m'malire anu.
• chitsime-chithunzi-chithunzi
  • Imafotokozera fayilo ya fayilo ya chithunzi kuti igwiritsidwe ntchito mmalo mwa mafashoni a malire omwe atchulidwa kale.
• chidutswa cha fano-malire
  • Kuwonetsa zamkati zamkati kuchokera m'mphepete mwazithunzi
• gawo lazitali-fano
  • Imatanthauzira kufunika kwa m'lifupi kwa chithunzi chanu chakumpoto.
• choyimira-fano-malire
  • Imafotokozera kuchuluka kwake komwe gawo la fano la malire limadutsa pa bokosi la malire.
• Kutambasula-fano-malire
  • Imatanthauzira momwe mbali ndi mapiri apakati a fano la malire ziyenera kumangirizidwa kapena kuziyika.
• fano-malire
  • Malo achidule a zithunzi zonse zam'mbali.

Zowonjezera Zina za CSS3 zokhudzana ndi malire ndi zochitika

Pamene bokosi liphwanyidwa pakumapeto kwa tsamba, mzere wolowa mzere wa mzere (chifukwa cha zinthu zofunikira) bokosi-katundu wokonzetsa zokongoletsera limafotokoza momwe mabokosi atsopano atakulungidwira ndi malire ndi padding. Miyambo ingagawanike pakati pa mabokosi ambiri osweka pogwiritsa ntchito malowa.

Palinso malo a mthunzi wa bokosi omwe angagwiritsidwe ntchito kuwonjezera mithunzi kuti aikepo zinthu.

Ndi CSS3, mukhoza tsopano kukhazikitsa tsamba la webusaiti ndi zipilala zambiri popanda matebulo kapena zovuta zogawanika. Mukungouza msakatuliyo kuti ndi zipilala zambiri zomwe thupi liyenera kukhala nazo komanso momwe ziyenera kukhalira. Kuwonjezera apo mukhoza kuwonjezera malire (malamulo), mitundu ya m'mbuyo yomwe imakhala kutalika kwa chigawocho, ndipo malemba anu adzayenda muzitsulo zonsezo.

Mizati ya CSS3 - Tchulani Namba ndi Kukula kwa Mizati

Pali zinthu zitatu zatsopano zomwe zimakulolani kufotokoza nambala ndi uzere wazomwe zilipo:

• mpafupi
  • Imatanthauzira m'lifupi ma columns anu ayenera kukhala. Wosatsegulayo amatha kuthamanga malemba kuti akwaniritse danga ndizomwe zilipo.
• ndondomeko ya chiwerengero
  • Imatanthauzira chiwerengero chazomwe zili pa tsamba. Wosatsegulayo ndiye adzalenga zikhomphana mokwanira kuti zizigwirizana ndi malo, koma nambala yokha yomwe mumayimilira.
• mizati
  • Malo achidule omwe mungathe kufotokozera m'lifupi kapena nambala (kapena zonse ziwiri, koma izo sizimveka bwino).

Mipata ndi Malamulo a CSS3

Mipata ndi malamulo amagawidwa pakati pa zigawo zofananazo. Mipata idzasuntha pazitsulo, koma malamulo samatenga malo alionse. Ngati lamulo lachigawo liri lalikulu kuposa kusiyana kwache, ilo lidzaphatikizana ndi zipilala zoyandikana. pali zisanu zatsopano za malamulo ndi malamulo:

• mphindi
  • Imatanthauzira kuchuluka kwa mipata pakati pa zipilala.
• mtundu wa malamulo
  • Imatanthauzira mtundu wa ulamuliro.
• ndondomeko ya chigamulo
  • Imatanthauzira kalembedwe ka lamulo (lolimba, laling'ono, lachiwiri, ndi zina zotero).
• chigawo-chigawo-chigawo
  • Imatanthauzira kuchuluka kwa ulamuliro.
• malamulo a pamtundu
  • Malo achidule omwe akufotokozera zonse zitatu zomwe zikulamulira malamulo nthawi imodzi.

Mapulogalamu a CSS3, Mapulaneti Ophwanyika, ndi Kudzaza ma Columns

Kupuma kwa column kumagwiritsa ntchito njira zomwezo za CSS2 zomwe zimagwiritsidwa ntchito kutanthauzira zosweka zomwe zimagwiritsidwa ntchito, koma ndi zinthu zitatu zatsopano: kusweka-kutsogolo , kusweka-pambuyo , ndi kusweka-mkati .

Mofanana ndi matebulo, mungathe kuyika zinthu kuti ziwononge zipilala ndi katundu wachinsinsi. Izi zimakulolani kupanga zolemba zapamwamba zomwe zimalemba zipilala zambiri monga nyuzipepala.

Kudzaza zipilala kumasankha kuchuluka kwa zinthu zomwe zidzakhale mu gawo lililonse. Masalimo oyenerera amayesa kuyika zofanana zomwe zili mu gawo liri lonse pamene galimoto imangoyenderera mpaka mndandanda uli wodzaza ndikupita ku yotsatira.

Zina Zambiri mu CSS3 Kuti Aren & # 39; t Kuphatikizidwe mu CSS2

Pali zina zambiri zowonjezera pa CSS3 zomwe zinalibe mu CSS2, kuphatikizapo:

• Moduli ya CSS Template Layout ndi CSS3 Grid posing module : Kupanga grids ndi CSS.
• CSS3 Mutu wa ndondomeko: Pembedzani malemba ndipo ngakhale kupanga mithunzi yojambulidwa ndi CSS.
• Mutu wa CSS3 Mtundu : Tsopano ndi opacity.
• Kusintha kwa chitsanzo cha bokosi : Kuphatikizapo malo a marquee omwe amafanana ndi IE tag.
• CSS3 Pulogalamu Yowonjezeramo : Kukupatsani malonda atsopano, mayankho kuntchito, madera oyenera, komanso ngakhale zinthu zosintha .
• Media Queries : Mafunso omasulira amakulolani kuti mukhale osinthasintha pamene mukufotokozera momwe tsambali liyenera kugwiritsiridwa ntchito. Mwachitsanzo, mungathe kufotokozera pepala lamasewera lomwe lili ndi zipangizo zogwiritsira ntchito zomwe zili ndi mawonekedwe akuluakulu kuposa 20em.
• Mutu wa Ruby wa CSS3 : Amapereka chithandizo cha zinenero zomwe zimagwiritsa ntchito mawu a ruby ​​kuti afotokoze zikalata.
• CSS3 Paged Media module : Kuti mudziwe zambiri zowonjezera pa pepala (media, pepala, etc).
• Zosinthidwa : L kupitiliza mutu ndi zolemba, mawu a m'munsi, ndi zina zomwe zimapangidwa pulogalamu, makamaka pa TV.
• Mutu wa Mawu a CSS3 : Kusintha kwa aural CSS.