Pagsabot sa dagkong kausaban sa CSS3
Ang pinakadako nga kalainan tali sa CSS2 ug CSS3 mao nga ang CSS3 nahimulag sa nagkalain-laing mga seksyon, nga gitawag modules. Ang matag usa niini nga mga modules nag-agi sa W3C sa nagkalainlaing ang-ang sa proseso sa rekomendasyon. Kini nga proseso nahimong mas sayon alang sa lainlaing piraso sa CSS3 nga dawaton ug ipatuman sa browser sa lainlaing mga tiggama.
Kon imong itandi kini nga proseso sa unsay nahitabo sa CSS2, diin ang tanan gisumiter isip usa ka dokumento sa tanan nga impormasyon sa Cascading Style Sheets sulod niini, magsugod ka sa pagtan-aw sa mga kaayohan sa paglapas sa rekomendasyon ngadto sa gagmay, tagsa nga mga bahin. Tungod kay ang matag usa sa mga modulo nagtrabaho sa tagsa-tagsa, aduna kitay mas daghang lain nga suporta alang sa CSS3 modules.
Sama sa bisan unsa nga bag-o ug nausab nga espesipiko, siguroha nga sulayan ang imong CSS3 nga mga panid sa hingpit sa daghang mga browser ug mga operating system kutob sa imong mahimo. Hinumdomi nga ang tumong mao ang dili pagmugna sa mga web page nga parehas nga makita sa matag browser, apan aron maseguro nga ang bisan unsang mga estilo nga imong gigamit, lakip ang mga estilo sa CSS3, maayo nga makita sa mga browser nga nagsuporta kanila ug nga sila mahulog nga maayo sa mga daan nga mga browser nga ayaw.
Bag-ong CSS3 Selectors
Ang CSS3 nagtanyag sa usa ka hugpong nga mga bag-ong mga pamaagi nga mahimo ka magsulat sa mga lagda sa CSS nga adunay bag-o nga mga tigpili sa CSS, ingon man usa ka bag-o nga kombinador, ug pipila ka mga bag-ong elemento nga pseudo-element.
Tulo ka bag-ong mga tigpili sa kinaiya:
- Ang attribute nagsugod sa eksaktong elemento [foo ^ = "bar"] Ang elemento adunay usa ka hiyas nga gitawag og foo nga nagsugod sa "bar" eg
- Ang pagtapos sa attribute nga katugbang nga eksaktong elemento [foo $ = "bar"] Ang elemento adunay usa ka hiyas nga gitawag og foo nga natapos sa "bar" pananglitan
- Ang attribute naglangkob sa match element [foo * = "bar"] Ang elemento adunay usa ka hiyas nga gitawag og foo nga naglangkob sa string "bar" eg
16 ka bag-ong klase nga pseudo-klase:
- : gamut
- Ang gamut nga elemento sa dokumento. Sa HTML kini kanunay.
- : nth-bata (n)
- Gamita kini aron sa pagpares sa eksaktong mga elemento sa bata o paggamit sa mga variables aron makakuha og alternating nga mga posporo.
- : nth-last-child (n)
- Himua ang eksakto nga mga elemento sa bata nga nag-ihap gikan sa katapusan nga usa.
- : nth-of-type (n)
- Pagkomparar sa mga elemento sa sibling nga adunay sama nga ngalan sa wala pa kini sa dokumento nga kahoy.
- : nth-last-of-type (n)
- Pagkomparar sa mga elemento sa sibling nga adunay sama nga ngalan nga nag-ihap gikan sa ubos.
- : katapusan nga bata
- Itugma ang katapusang elemento sa bata sa ginikanan.
- : first-of-type
- Itandi ang unang elemento sa igsoong lalaki niana nga matang.
- : katapusan-of-type
- Itandi ang katapusang elemento sa igsoong lalaki niana nga matang.
- : lamang-bata
- Itugma ang elemento nga mao lamang ang anak sa ginikanan niini.
- : only-of-type
- Itugma ang elemento nga mao lamang ang tipo niini.
- : walay sulod
- Itandi ang elemento nga walay mga anak (lakip ang mga node sa teksto).
- : target
- Ipares ang usa ka elemento nga mao ang target sa nagtumong URI.
- : gipalihok
- Itandi ang elemento kung kini mahimo.
- : kakulangan
- Itandi ang elemento sa dihang kini adunay kakulangan.
- : gitan-aw
- Itugma ang elemento kon kini gisusi (radio button o checkbox).
- : dili (mga)
- Itandi kung ang elemento dili sama sa yano nga selector s.
Usa ka bag-ong kombinador:
- elementA ~ elementB
- Itugma kon ang elementB mosunod sa usa ka dapit human sa elementA, dili kinahanglan dayon.
Bag-ong mga Kinaiya
Gipaila usab sa CSS3 ang daghang mga bag-ong CSS properties. Daghan niini nga mga kabtangan mao ang pagmugna og mga estilo sa panan-aw nga lagmit makadugang sa usa ka programa sa graphic sama sa Photoshop. Ang uban niini, sama sa border-radius o kahon sa kahon, nahibilin sukad sa pasiuna kon CSS3. Ang uban, sama sa flexbox o bisan CSS Grid mas bag-o nga mga estilo nga kanunay gihunahuna nga mga pag-add sa CSS3.
Sa CSS3, ang modelo sa kahon wala mausab. Apan adunay usa ka pundok sa bag-ong estilo sa mga kabtangan nga makatabang kanimo sa pag-istilo sa mga background ug mga utlanan sa imong mga kahon.
Daghang Kaagi sa Kalagkalag I mages
Pinaagi sa paggamit sa background-image, background-position, ug background-pagsulit mga estilo nga imong mahibal-an ang daghang mga hulagway sa background nga mahimong layered ibabaw sa usag usa diha sa kahon. Ang unang hulagway mao ang layer nga labing duol sa user, nga ang mga mosunod gipintalan. Kon adunay usa ka kolor sa background, kini gipintalan ubos sa tanan nga mga hut-ong sa hulagway.
Bag-ong Estilo sa Kinaiyahan sa Estilo
Adunay usab mga bag-ong kabag-ohan sa CSS3.
- background-clip
- Kini nga kabtangan naghulagway kon unsaon nga ang hulagway sa kinaiyahan kinahanglan nga maputol. Ang default mao ang border box, apan kini mahimong mausab ngadto sa padding box o sa kahon sa sulod.
- kagikan-gigikanan
- Kini nga kabtangan nagtino kung ang background kinahanglan nga dapit sa padding nga kahon, ang border box, o ang kahon sa sulod.
- gidak-on sa background
- Kini nga kabtangan nagtugot kanimo sa pagpaila sa gidak-on sa hulagway sa likod. Kini nagtugot kanimo sa paghulma sa mas gagmay nga mga larawan aron mahaum ang panid.
Mga Kausaban sa Mga Kaugalingon nga Estilo sa Estilo
Adunay usab pipila ka mga kausaban sa kasamtangan nga mga kabtangan sa estilo sa kasinatian:
- balik-balik
- Adunay duha ka bag-ong mga bili alang niini nga kabtangan: sa luna ug sa lingin. Ang mga luna naglakip sa mga tiled image nga parehas sulod sa kahon nga wala giputol. Ang mga hulagway naglibre sa hulagway sa luyo aron kini magtapok sa tibuok nga numero sa kahon.
- background-attachment
- Ang usa ka bag-ong kantidad nga "lokal" gidugang aron ang background mag-scroll sa sulod sa elemento kung kana nga elemento adunay scroll bar.
- background
- Ang kasayuran sa pagkasuspenso sa yuta nagdugang sa gidak-on ug gigikanan nga mga kabtangan.
CSS3 Border Properties
Sa CSS3 nga mga utlanan mahimo ang mga estilo nga atong gigamit sa (lig-on, dobleng, dashed, ug uban pa) o kini mahimong usa ka larawan. Dugang pa, ang CSS3 nagdala sa abilidad sa pagmugna og mga lingin nga mga kanto. Ang mga hulagway sa hulagway makaiikag tungod kay naghimo ka og usa ka hulagway sa tanang upat ka mga utlanan ug dayon isulti ang CSS kon unsaon paggamit niana nga hulagway sa imong mga utlanan.
Bag-ong Border Style Properties
Adunay pipila ka bag-ong mga propiedad sa utlanan sa CSS3:
- border-radius
- utlanan-sa-kanan-radius , radius sa habagatang-kinatumyan-sa-kanan , border-bottom-left-radius , border-top-left-radius
- Kini nga mga kabtangan nagtugot kanimo sa paghimo sa mga lingin nga mga kanto sa imong mga utlanan.
- border-image-source
- Nagtino sa image source file nga gigamit imbis nga mga estilo sa utlanan nga gipaila na.
- border-image-slice
- Naglarawan sa sulod nga mga pagbalhin gikan sa mga kilid sa hulagway sa border
- border-image-width
- Gihubit ang bili sa gilapdon alang sa hulagway sa imong utlanan.
- border-image-outset
- Nagtumbok sa kantidad nga ang gilay-on nga hulagway sa hilit nga dapit lapas sa kahon sa utlanan.
- border-image-stretch
- Naghubit kon sa unsa nga paagi ang mga kilid ug tunga nga mga bahin sa hulagway nga hulagway kinahanglan nga tilingon o igkita.
- border-image
- Ang takus nga kabtangan alang sa tanan nga mga kabtangan sa hulagway sa utlanan.
Dugang nga CSS3 Properties nga may kalabutan sa mga utlanan ug mga Background
Sa diha nga ang usa ka kahon nabuak sa usa ka pahina nga break, ang kolum alang sa break line (alang sa inline nga mga elemento) ang kahon sa dekorasyon nga box-define nagpaila kung giunsa ang bag-ong mga kahon giputos sa border ug padding. Ang mga background mahimong bahinon sa daghang mga nasakupan nga mga kahon gamit kining maong propiedad.
Adunay usab usa ka kahon nga kahon sa kahon nga mahimong magamit aron makadugang sa mga anino ngadto sa mga elemento sa kahon.
Uban sa CSS3, dali ka na nga makahimo og usa ka Web page nga adunay daghang mga kolum nga walay mga lamesa o komplikado nga mga tag sa mga tag sa div. Gisulti mo lang sa browser kon pila ka mga kolum ang gikinahanglan sa elemento sa lawas ug kon unsa kini ka lapad. Plus ikaw makadugang sa mga utlanan (mga lagda), mga kolor sa background nga nagsangkad sa gitas-on sa kolum, ug ang imong teksto modagayday sa tanang mga kolum awtomatik.
Mga Column sa CSS3 - Ihubit ang Numero ug Lugway sa Mga Kolum
Adunay tulo ka mga bag-ong kabtangan nga nagtugot kanimo sa paghubit sa numero ug gilapdon sa imong mga kolum:
- kolum nga kolum
- Gihubit ang gilapdon sa imong mga haligi. Dayon ang browser moagos sa teksto aron mapuno ang luna sa mga haligi nga lapad.
- column count
- Gihubit ang gidaghanon sa mga kolum sa panid. Ang browser unya maghimo og mga kolum nga igo nga gilapdon aron mahaum sa luna, apan ang gidaghanon nga imong gitino.
- mga kolum
- Ang yutang natawhan diin imong mahibal-an ang gilapdon o gidaghanon (o ang duha, apan kini talagsa ra ang kahulogan).
CSS3 Column Gaps and Rules
Ang mga kal-ang ug mga kalagdaan gibutang sa mga kolum sa samang multicolumn scenario. Ang mga kulang magduso sa mga kolum, apan ang mga lagda dili magamit bisan asa. Kung ang usa ka lagda sa haligi mas lapad kaysa kini nga kal-ang, kini magsapawan sa mga kasikbit nga mga kolum. adunay lima ka mga bag-ong kabtangan alang sa mga lagda ug mga kal-ang sa kolum:
- kolum-gintang
- Gihubit ang gilapdon sa mga kal-ang tali sa mga kolum.
- kolum-lagda-kolor
- Gihubit ang kolor sa lagda.
- kolum-style-rule
- Gihubit ang estilo sa lagda (solid, dotted, double, ug uban pa).
- kolum-lagda-gilapdon
- Gihubit ang gilapdon sa lagda.
- kolum-lagda
- Usa ka takus nga pagpanalipod sa tanan nga tulo ka kolum sa pagmando nga mga kabtangan sa makausa.
CSS3 Column Breaks, Spanning Columns, ug Filling Columns
Ang mga break sa column naggamit sa parehas nga CSS2 nga mga kapilian nga gigamit sa paghubit sa mga break sa paged content, apan sa tulo ka bag-ong kabtangan: break-before , break-after , ug break-inside .
Sama sa mga lamesa, mahimo nimong itakda ang mga elemento sa mga haligi nga gitas-on sa propiedad sa column. Kini nagtugot kanimo sa paghimo sa mga headline nga adunay daghang mga kolum nga sama sa usa ka mantalaan.
Ang pagpuno sa mga haligi naghukom unsa kadaghan ang sulod sa matag kolum. Ang balanse nga mga haligi naningkamot nga ibutang ang sama nga gidaghanon sa sulod sa matag kolum samtang ang awtomatik nga pag-agos sa sulod sa sulod hangtud ang kolum puno ug unya moadto sa sunod nga usa.
Dugang nga mga Feature sa CSS3 Nga Dili Giapil sa CSS2
Adunay daghan nga dugang nga mga bahin sa CSS3 nga wala diha sa CSS2, lakip ang:
- CSS Template layout module ug CSS3 Grid positioning module : Paghimo grids uban sa CSS.
- CSS3 Text module : Outline text ug gani paghimo sa drop-shadows nga adunay CSS.
- CSS3 Colour module : Karon uban sa opacity.
- Mga kausaban sa modelo sa kahon : Lakip ang usa ka marquee property nga naglihok sama sa IE tag.
- Modulo sa CSS3 User Interface : Paghatag kanimo bag-o nga mga cursor, mga tubag sa mga aksyon, gikinahanglan nga mga natad, ug bisan pa ang pag-usab sa mga elemento .
- Media nga mga Pangutana : Ang mga pangutana sa media makapahimo kanimo nga labaw nga pagkalugwayan sa paghubad kon unsaon paggamit ang style sheet. Pananglitan, mahimo nimong ipasabot ang usa ka style sheet nga alang lamang sa mga handheld device nga adunay viewport nga mas dako kaysa 20em.
- CSS3 Ruby module : Naghatag og suporta alang sa mga pinulongan nga naggamit sa ruby sa teksto aron isulat ang mga dokumento.
- CSS3 Paged Media module : Alang sa dugang suporta alang sa paged media (papel, transparencies, etc).
- Gigama nga sulod : L nga nagpunting sa mga ulohan ug mga footer, mga footnote, ug ubang mga sulod nga gimugna sa programa, labi na sa paged media.
- CSS3 Speech module : Mga Kausaban sa aural CSS.