Kunzwisisa kuchinja kukuru kweCSS3
Kusiyana kukuru pakati peCSS2 neCSS3 ndechokuti CSS3 yakakamurwa kuva zvikamu zvakasiyana, zvinonzi modules. Chimwe chezvikwata zvemu modules chiri kuita nzira yayo kuburikidza neW3C mumatanho akasiyana-siyana emitemo yekukurudzira. Iyi nzira yakaita kuti zvive nyore kune zvidimbu zvakasiyana-siyana zveCSS3 kuti zvigamuchirwe uye zvishandiswe mukutsvaga nevashambadzi vakasiyana.
Kana iwe uchienzanisa izvi nenzira yezvakaitika neCSS2, apo zvinhu zvose zvakatumirwa sechimwe chikwangwani nezvose zveCascading Style Sheets information mukati maro, unotanga kuona zvakanakira kuputsa mazano kusvika kuva maduku, zvimedu. Nemhaka yokuti imwe yemamodhura iri kushandiswa pane mumwe nomumwe, tine huwandu hwakawandisa hwekushandura mutsvaga weCSS3 modules.
Sezvimwe chero zvitsva uye kuchinja kwekutsanangurwa, iva nechokwadi chekuedza mapeji ako eCSS3 zvakakwana mumavhuraji akawanda uye maitiro ekushanda sezvaungagona. Yeuka chinangwa hachisi kuumba mapeji epawebhu anotarisa zvakafanana mubhasiki rese, asi kuti uone kuti chero michina yaunoshandisa, kusanganisira CSS3 maitiro, inotarisa mumavheeresi anovatsigira uye kuti anodzoka zvakanaka kune vashandisi vakwegura usa.
Zvitsva CSS3 Selector
CSS3 inopa boka remitemo mutsva iwe unogona kunyora CSS mitemo nevevatori vatsva veCSS, pamwe chete neine combinator itsva, uye zvimwe zvitsva-zvinyorwa.
Vatatu vatsva vanosarudza:
- Ita mavambo ekutanga masikati chaiwo [foo ^ = "bar"] The element ine chirevo chinonzi foo chinotanga ne "bar" eg
- Ita kuti kuguma kunomirira chaiwo chinhu [foo $ = "bar"] The element ine chirevo chinonzi foo chinoguma ne "bar" eg
- Chimwe chinhu chine mutsara wokutanga [foo * = "bar"] The element ine chirevo chinonzi foo chine tambo "bar" eg
16 matsva-makirasi:
- : root
- Icho chikamu chemukati chebhuku racho. Mu HTML izvi nguva dzose.
- : nth-child (n)
- Shandisa izvi kuti ufanane chaiwo nevana vana kana kushandisa shanduko kuti uwane mimwe mitambo.
- : nth-last-child (n)
- Match chaiwo vana vana zvinhu vachiverenga kubva kune yekupedzisira.
- : nth-of-type (n)
- Match sibling elements ane zita rimwe chete pamberi payo mumagwaro.
- : nth-last-of-type (n)
- Match sibling elements ane zita rimwe chete kuverenga kubva pasi.
- : mwana wokupedzisira
- Bata mwana wekupedzisira wechikamu chemubereki.
- : chokutanga-chengetedza
- Tanidza mwana wekutanga wekutanga chechipiri ichocho.
- : yekupedzisira-ye-type
- Batai mukoma wekupedzisira wechikamu chechimiro ichocho.
- :zai regondo
- Tora chikamu icho chiri mwana oga wemubereki wake.
- : yega-ye-yakadaro
- Match the element that is the only one of it.
- : zvisina chinhu
- Shandisai chinhu chisina vana (kusanganisira mashoko nodes).
- : chinangwa
- Shandisa chimwe chinhu icho chiri chinangwa cheRI rinoreva URI.
- : enabled
- Match the element when it is enabled.
- : akaremara
- Match the element kana yakaremara.
- : checked
- Match the element kana ichitaridzwa (bhodhi redhiyo kana bhokisi rekuongorora).
- : kwete (s)
- Match kana chikamu chisingafanani nesarudzo sarudzo s.
Mumwe mutsva pamwe chete:
- elementA ~ elementB
- Match kana elementB inotevera pane imwe nzvimbo mushure mechikamuA, kwete kwete pakarepo.
Zvitsva Zvitsva
CSS3 yakatumirawo zvimwe zvitsva zveCSS. Zvizhinji zvezvinhu izvi zvaive zvekusika michina yekuona iyo inogona kunge ichibatanidza zvakare ne chirongwa chine mafananidzo se Photoshop. Zvimwe zveizvi, zvakadai semuganhu-radius kana bhokisi-mumvuri, zvave zviripo kubva pakatanga kushandiswa kana CSS3. Vamwe, kufanana ne-flexbox kana kuti CSS Grid ndiyo matsva matsva anowanzoonekwa seCSS3 kuwedzera.
MuCSS3, bhokisi remufananidzo harina kuchinja. Asi pane boka remaitiro matsva maitiro anogona kukubatsira kuti utaure mamiriro ezvinhu nemiganhu yemabhokisi ako.
Nhungamiro Yakawanda I mages
Uchishandisa musimboti-chifananidzo, mamiriro ekutanga-nzvimbo, uye mamiriro ekudzoka-kudzokorora maitiro iwe unogona kutsanangura mifananidzo yakawanda yekunze kuti ive yakanyorova pamusoro peumwe neumwe mubhokisi. Chifananidzo chekutanga chiyero chiri pedyo nemushandisi, uye zvinotevera zvakavezwa shure. Kana pane ruvara rwemukati, rwakarongedzwa pasi pemifananidzo yose.
Mutsva Yakaitwa Style Properties
Iko kunewo dzimwe nzvimbo itsva mumamiriro eCSS3.
- background-clip
- Iyi pfuma inotsanangura kuti sei chifananidzo chemukati chinofanira kuiswa. Izvo zvisipo ndeyebhokisi remuganhu, asi rinogona kuchinjwa ku padding bhokisi kana bhokisi rekushandisa.
- background-origin
- Iyi dzimba inosarudza kana nzvimbo yacho inofanirwa kuva nzvimbo munzvimbo ye padding, bhokisi remuganhu, kana bhokisi rekushandisa.
- background-size
- Iyi pfuma inokubvumira kuti uratidze hukuru hwemufananidzo wekupedzisira. Iko inokubvumira kutambanudza mifananidzo maduku kuti uwane peji.
Kuchinja Kunzvimbo Yacho Iripo Mavara Properties
Pano panewo zvishoma kuchinja kune maitiro akange aripo maitiro:
- mhemberero-dzokorora
- Pane mairi maviri matsva edzimba iyi: nzvimbo uye zvakapoteredza. Nzvimbo dzomukati mufananidzo wakavharidzirwa pamwe chete mukati mebhokisi risina kuiswa. Pasi pose panotarisa mifananidzo yekare kuitira kuti ive yakavhara kazhinji kanoverengeka mubhokisi.
- background-attachment
- Chinhu chitsva che "nzvimbo" chinowedzerwa kuitira kuti rutivi ruchapukunyuka nehutano hwezvinyorwa apo ichocho chine bhari yepumburu.
- mamiriro ezvinhu
- Mhedziso shorthand property inowedzera muhukuru uye mavambo zvinhu.
CSS3 Border Properties
Munharaunda yeCSS3 inogona kuva iyo mitambo yatinoshandiswa nayo (yakasimba, kaviri, yakashata, nezvimwewo) kana inogona kuva mufananidzo. Kunyanya, CSS3 inounza kukwanisa kugadzira makona akapoteredza. Mifananidzo yemiganhu inofadza nokuti iwe unogadzira mufananidzo wemiganhu mina uye wotaurira CSS kuti ungashandisa sei mufananidzo iwoyo kumiganhu yako.
Nzvimbo Itsva Border Style Properties
Kune dzimwe mitsva yemiganhu muCSS3:
- border-radius
- border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
- Izvi zvinokubvumira kuti ugadzire makona akapoteredza pamiganhu yako.
- border-image-source
- Inotsanangurira firimu refaira rekushandisa rinoshandiswa panzvimbo yemigwagwa yemuganhu yave ichatsanangurwa.
- border-image-slice
- Inodzokorora zvinyorwa zvemukati kubva kumiganhu yemuganhu
- border-image-width
- Inotsanangura kukosha kwehupamhi nokuda kwemufananidzo wako wemuganhu.
- border-image-outset
- Inotsanangura chiyero icho muganhu wemuganhu unopfuurira mberi kwebhokisi remuganhu.
- border-image-stretch
- Inotsanangura kuti mazamu uye mativi epakati emuganhu wemuganhu anofanira kuvharwa kana kuputika.
- border-image
- Iyo shorthand pfuma yevose muganhu wemifananidzo.
Zvimwe Zvimwe CSS3 Zvimwe Zvakaenzana neGuritsa uye Nheyo
Kana bhokisi rakaputsika pakurambidzwa kwepaji, hutatu hunovhara mutsara (yezvakanyatsogadzirwa) bhokisi-chekugadzirisa-pfuma yezvigadziro rinotsanangura kuti mabhokisi matsva akavharwa sei nemuganhu uye kuputika. Nheyo dzinogona kugoverwa pakati pezvikwata zvakaputsika zvakashandisa ichi chivako.
Ikokowo pane bhokisi-mumvuri pfuma inogona kushandiswa kuwedzera mithunzi yekuvhara zvinhu.
NeCSS3, iwe zvino unogona kuisa nyore peji peji neine ma column akawanda asina matafura kana zvakaoma div tag zvivako. Iwe unongoudza muchengeti kuti mazamu mangani emuviri wemukati anofanira kuva nawo uye kuti yakafanira sei. Kunyanya iwe unogona kuwedzera miganhu (mitemo), mavara emumvuri ayo anotarisa kukwirira kwendarama, uye mharidzo yako ichayerera kuburikidza nemamwe mapuranga nemazvo.
CSS3 Columns - Tsanangura Nhamba uye Upamhi hweMa Columns
Pane zvinhu zvitatu zvitsva zvinokubvumira kutsanangura nhamba uye upamhi hwemashure ako:
- column-width
- Inotsanangura upamhi yako mapuranga anofanira kunge ari. Tsvakurudzo ichazoyerera rugwaro kuti ruzadze nzvimbo nemadzuru akareba.
- column-count
- Rinotsanangura huwandu hwemaseri peji. Tsvakurudzo ichazogadzirisa mapuranga akawandisa kuti akwane munzvimbo, asi nhamba chete yaunotsanangura.
- columns
- Shorthand nzvimbo uko iwe unogona kutsanangura kana upamhi kana nhamba (kana zvose zviri zviviri, asi izvo zvisinganzwisisiki).
CSS3 Column Mapoka uye Mitemo
Zvikwereti nemitemo zvinowanikwa pakati pehurukuro mune imwecheteyo yakawanda yemamiriro ezvinhu. Zvikwangwani zvichange zvichinyaradzanisa mapuranga, asi zvinotonga hazvitore chero nzvimbo. Kana chikamu chekutonga chiri chakakura kudarika chikamu, chinozobatana nemirasi yakatarisana. kune zvishanu zvitsva zvemitemo yekombomira uye zvikamu:
- column-gap
- Inotsanangura upamhi hwepakati pakati pematombo.
- column-rule-color
- Rinotsanangura ruvara rwekutonga.
- koromo-kutonga-chimiro
- Rinotsanangura nzira yekutonga (yakasimba, yakazara, yakapetwa, yakawanda).
- koromo-kutonga-upamhi
- Rinotsanangura upamhi hwehutongi.
- korome-mutemo
- A shorthand property inofananidzira zvose zvitatu zvekombani kutonga zvinhu panguva imwe chete.
CSS3 Column Breaks, Spanning Columns, uye Kuzadza Columns
Kuputsa kwemaawa kunoshandisa nzira imwecheteyo yeCSS2 inoshandiswa kutsanangura kuputsika kwepaged content, asi nezvinhu zvitatu zvitsva: kupera-mberi , kupera-shure , nekuputsa-mukati .
Kufanana nematafura, unokwanisa kuisa zvikamu kuti zvive zvinyorwa ne column-span property. Izvi zvinokubvumira iwe kugadzira zvinyorwa zvepamusoro zvinowedzera mazamu akawanda zvakadai sepepanhau.
Kuzadza columns inosarudza kuti zvinyorwa zvichave zvakadini mumutsara mumwe nomumwe. Mienzaniso yakaenzana inoedza kuisa zvakaenzana zvehutano mumutsetse wega wega apo auto inongotenderera zvinyorwa muhutori kusvikira iyo column yakazara uye inoenda kune inotevera.
Zvimwe Zvimwe muCSS3 Kuti Aren & # 39; t Akabatanidzwa muCSS2
Pane zvakawanda zvakawanda zvezvikamu zveCSS3 zvisina kumbovapo muCSS2, kusanganisira:
- CSS Template layout module uye CSS3 Grid positioning module : Kugadzira grids neCSS.
- CSS3 Mharidzo yemutambo : Rongedza rugwaro uye kunyange kutora dhoni-shadows neCSS.
- CSS3 Muchuru wemuviri : Iye zvino ane opacity.
- Kuchinja kune muenzaniso webhokisi : Kusanganisira marquee pfuma inoshanda seyo IE tag.
- CSS3 User Interface module : Kukupa iwe itsva cursors, mhinduro kune zviito, nzvimbo dzinodiwa, uye kunyange zvinhu zvinoshandiswa .
- Media Queries : Mibvunzo yeMedia inokubvumira kuti uchinje kushanduka pakujekesa kuti chidimbu chemavara chinofanira kushandiswa sei. Semuenzaniso, unogona kutsanangura chidimbu chemafirimu chinongova chezvigadzirwa zvakachengetwa zvine maziso makuru kupfuura 20em.
- CSS3 Ruby module : Inopa rubatsiro rwemirimi inoshandisa textual ruby kuti iparidze zvinyorwa.
- CSS3 Paged Media module : Nokuda kwekuwedzera kutsigirwa kwepaged media (pepa, zvinyorwa, nezvimwe).
- Yakagadzirwa : L runomhanya musoro nemakumbo, zvinyorwa zvinyorwa, uye zvimwe zvigadzirwa zvinogadziriswa purogiramu, kunyanya pamashiripiti emagetsi.
- CSS3 Mutsara wekutaura : Kuchinja kune aural CSS.