Nifhmu l-bidliet ewlenin għal CSS3
L-akbar differenza bejn CSS2 u CSS3 hija li CSS3 ġiet maqsuma f'sezzjonijiet differenti, imsejħa moduli. Kull wiehed minn dawn il-moduli qed jghaddi mill-W3C f'diversi stadji tal-proćess ta 'rakkomandazzjoni. Dan il-proċess għamilha aktar faċli għal diversi biċċiet ta 'CSS3 biex jiġu aċċettati u implimentati fil-browser minn manifatturi differenti.
Jekk tqabbel dan il-proċess ma 'dak li ġara mal-CSS2, fejn kollox kien sottomess bħala dokument uniku bl-informazzjoni kollha tal- Cascading Style Sheets fiha, tibda tara l-vantaġġi li tinkiser ir-rakkomandazzjoni f'biċċiet iżgħar u individwali. Minħabba li kull wieħed mill-moduli qed jitħaddem individwalment, għandna firxa usa 'ta' appoġġ tal-browser għall-moduli CSS3.
Bħal kull speċifikazzjoni ġdida u li qed tinbidel, kun żgur li tittestja l-paġni tiegħek tas-CSS3 sewwa f'ħafna browsers u sistemi operattivi kif tista '. Ftakar li l-għan mhuwiex li jinħolqu paġni tal-web li jħarsu eżattament l-istess f'kull browser, iżda biex jiżguraw li kwalunkwe stili li tuża, inklużi stili CSS3, tħares sew fil-browsers li jsostnuhom u li jaqgħu lura b'mod grazzju għal browsers anzjani li le.
Għażliet ġodda tas-CSS3
CSS3 joffri bosta modi ġodda kif tista 'tikteb regoli CSS b'seletturi ġodda tas-CSS, kif ukoll kombinatur ġdid, u xi psewdo elementi ġodda.
Tliet seletturi ta 'attributi ġodda:
- Il-bidu tal-attribwit jaqbel eżattament mal- element [foo ^ = "bar"] L-element għandu attribut imsejjaħ foo li jibda b '"bar" eż.
- Il-finitura tal-attribwiti taqbel eżattament mal- element [foo $ = "bar"] L-element għandu attribut imsejjaħ foo li jispiċċa b '"bar" eż.
- Attribut fih l- element tal- logħba [foo * = "bar"] L-element għandu attribut imsejjaħ foo li fih is-sekwenza "bar" eż.
16 psewdo-klassijiet ġodda:
- : għerq
- L-għerq tad-dokument. Fl-HTML dan huwa dejjem.
- : nth-child (n)
- Uża dan biex tqabbel l-elementi eżatti tat-tfal jew tuża varjabbli biex tikseb logħbiet li jalternaw.
- : nth-last-child (n)
- Agħmel elementi eżatti tat-tfal li jingħaddu mill-aħħar wieħed.
- : nth-of-type (n)
- Agħmel flimkien elementi ta 'aħwa bl-istess isem qabel fis-siġra tad-dokument.
- : nth-last-of-type (n)
- Iġbor elementi ta 'aħwa bl-istess isem li jingħaddu mill-qiegħ.
- : l-aħħar tarbija
- Irranġa l-aħħar element tat-tfal tal-ġenitur.
- : l-ewwel tat-tip
- Iqabbad l-ewwel element ta 'aħwa ta' dak it-tip.
- : l-aħħar tat-tip
- Issettja l-aħħar element ta 'aħwa ta' dak it-tip.
- : biss-tfal
- Issettja l-element li huwa l-uniku wild tal-ġenitur tiegħu.
- : tat-tip biss
- Iqabbad ma 'l-element li huwa l-uniku wieħed mit-tip tiegħu.
- : vojta
- Taqsam l-element li m'għandux tfal (inklużi l-għoqiedi tat-test).
- : mira
- Tqabbil ma 'element li huwa l-mira ta' l-URI li tirreferi.
- : attivata
- Irranġa l-element meta tkun attivata.
- : b'diżabilità
- Irranġa l-element meta tkun diżattivat.
- :iċċekkjat
- Irranġa l-element meta tkun ikkontrollat (buttuna tar-radju jew kaxxa ta 'kontroll).
- : mhux (i)
- Irranġa meta l-element ma jaqbilx mas- selettur sempliċi s.
Kombinatur wieħed ġdid:
- elementA ~ elementB
- Irranġa meta elementB isegwi x'imkien wara elementA, mhux neċessarjament immedjatament.
Proprjetajiet Ġodda
CSS3 introduċa wkoll għadd ta 'proprjetajiet CSS ġodda. Ħafna minn dawn il-proprjetajiet kellhom joħolqu stili viżwali li x'aktarx jassoċjaw aktar ma 'programm tal-grafika bħal Photoshop. Xi wħud minn dawn, bħal raġġ tal-fruntiera jew box-shadow, ilhom madwar mill-introduzzjoni jekk CSS3. Oħrajn, bħal flexbox jew saħansitra CSS Grid huma stili ġodda li għadhom jitqiesu bħala żidiet CSS3.
F'CSS3, il-mudell tal-kaxxa ma nbidilx. Iżda hemm mazz ta 'proprjetajiet ġodda ta' stil li jistgħu jgħinuk tistudja l-isfondi u l-fruntieri tal-kaxex tiegħek.
Sfond multipli I mages
Bl-użu ta 'l-immaġni ta' sfond, l-isfond tal-pożizzjoni u l-istili li jirrepeti l-isfond tista 'tispeċifika immaġini ta' sfond multipli li għandhom jiġu mqassma fuq xulxin fil-kaxxa. L-ewwel immaġini huwa l-eqreb l-eqreb utent, b'dawn li ġejjin imżejjen wara. Jekk hemm kulur fl-isfond, huwa miżbugħ taħt is-saffi kollha ta 'l-immaġini.
Propjetajiet Ġodda ta 'Sfond
Hemm ukoll xi proprjetajiet ta 'sfond ġodda f'CSS3.
- clip tal-isfond
- Din il-proprjetà tiddefinixxi kif l-immaġini tal-isfond għandha tiġi kklippjata. L-inadempjenza hija l-kaxxa tal-fruntiera, iżda tista 'tinbidel għall-kaxxa tal-padding jew il-kaxxa tal-kontenut.
- oriġini tal-isfond
- Din il-proprjetà tiddetermina jekk l-isfond għandux ikun postijiet fil-kaxxa tal-padding, il-kaxxa tal-fruntiera, jew il-kaxxa tal-kontenut.
- Daqs ta 'l-isfond
- Din il-proprjetà tippermettilek tindika d-daqs ta 'l-immaġni ta' l-isfond. Dan jippermettilek li tistira immaġini iżgħar biex taqbel mal-paġna.
Bidliet fil-Proprjetajiet tal-Istil Sfond Eżistenti
Hemm ukoll ftit bidliet fil-proprjetajiet eżistenti ta 'sfond ta' sfond:
- irrepeti l-isfond
- Hemm żewġ valuri ġodda għal din il-proprjetà: l-ispazju u t-tond. Spazju ta 'l-ispazji l-immaġni bil-madum b'mod uniformi fil-kaxxa mingħajr ma jkun imqaxxar. Round iġib lura l-immaġni ta 'l-isfond sabiex ikun jista' jimla numru sħiħ ta 'drabi fil-kaxxa.
- twaħħil ta 'sfond
- Jiżdied valur ġdid "lokali" sabiex l-isfond jiċċaqlaq bil-kontenut ta 'l-element meta dak l-element ikollu bar tal-iscroll.
- sfond
- Il-proprjetà tal-isfond tal-isfond iżżid fid-daqs u l-proprjetajiet tal-oriġini.
Proprjetajiet tal-Fruntiera CSS3
Fil-fruntieri tas-CSS3 jistgħu jkunu l-istili li nkunu użati biex (solidi, doppji, miksija, eċċ) jew jistgħu jkunu immaġini. Plus, CSS3 ġġib il-ħila li toħloq kantunieri ttundjati. Stampi tal-fruntiera huma interessanti għaliex inti toħloq stampa tal-erba 'fruntieri kollha u mbagħad għid lis-CSS kif tapplika dik l-immaġni lejn il-fruntieri tiegħek.
Proprjetajiet ġodda ta 'Stil tal-Fruntiera
Hemm xi proprjetajiet ġodda tal-fruntiera f'CSS3:
- raġġ tal-fruntiera
- raġġ tal-lemin ta 'fuq tal-lemin , raġġ tal-lemin tal-qiegħ , tar-raġġ tax-xellug tal-qiegħ għal fuq ix-xellug
- Dawn il-proprjetajiet jippermettu li inti toħloq kantunieri fit-tond fuq il-fruntieri tiegħek.
- sors tal-immaġni tal-fruntiera
- Jispeċifika l-fajl tas-sors ta 'l-immaġini li għandu jintuża minflok l-istili tal-fruntiera diġà definiti
- fruntiera-immaġni-porzjon
- Tirrappreżenta t-tpaċijiet 'il ġewwa mit-truf tal-immaġini tal-fruntiera
- wisa 'tal-immaġni tal-fruntiera
- Jiddefinixxi l-valur tal-wisa 'għall-immaġni tal-fruntiera tiegħek.
- bidu tal-immaġni fuq il-fruntiera
- Jispeċifika l-ammont li l-erja tal-immaġni tal-fruntiera testendi lil hinn mill-kaxxa tal-fruntiera.
- strixxa tal-immaġni tal-fruntiera
- Tiddefinixxi kif il-ġnub u partijiet tan-nofs tal-immaġni tal-fruntiera għandhom ikunu mgeżwra jew skalati.
- immaġni tal-fruntiera
- Il-proprjetà ta 'l-istan dard għall-proprjetajiet kollha ta' immaġini tal-fruntiera
Karatteristiċi addizzjonali CSS3 Relatati ma 'Fruntieri u Sfond
Meta kaxxa tinqasam f'waqfa ta 'pawża, waqfa tal-kolonna għall-waqfa tal-linja (għal elementi inline) il-proprjetà ta' kaxxa-dekorazzjoni-qasma tiddefinixxi kif il-kaxex il-ġodda huma mgeżwra mal-fruntiera u l-ikkuttunar. L-isfondi jistgħu jinqasmu bejn kaxxi mkissrin multipli li jużaw din il-proprjetà.
Hemm ukoll proprjetà ta 'kaxxa shadow li tista' tintuża biex iżżid dellijiet fuq elementi tal-kaxxa.
Ma 'CSS3, issa tista' faċilment twaqqaf paġna tal-Web b'ħafna kolonni mingħajr tabelli jew strutturi kkumplikati ta 'div diviżjonijiet. Inti sempliċement tgħid lit-browser kemm hemm kolonni li għandu jkollu l-element tal-ġisem u kemm għandhom ikunu wesgħin. Barra minn hekk tista 'żżid il-fruntieri (regoli), il-kuluri ta' l-isfond li jkopru l-għoli tal-kolonna, u t-test tiegħek se jgħaddi mill-kolonni kollha awtomatikament.
CSS3 Kolonni - Iddefinixxi n-Numru u l-Wisa 'tal-Kolonni
Hemm tliet proprjetajiet ġodda li jippermettulek tiddefinixxi n-numru u l-wisa 'tal-kolonni tiegħek:
- wisa 'tal-kolonna
- Iddefinixxi l-wisa 'tal-kolonni tiegħek. Il-browser mbagħad sejjer it-test biex jimla l-ispazju b'kolonni wiesgħa.
- l-għadd tal-kolonni
- Jiddefinixxi n-numru ta 'kolonni fuq il-paġna. Il-browser imbagħad joħloq kolonni wesgħin biżżejjed biex joqogħdu fl-ispazju, iżda biss in-numru li tispeċifika.
- kolonni
- Proprjetà ta 'shorthand fejn tista' tiddefinixxi jew il-wisa 'jew in-numru (jew it-tnejn, iżda rarament jagħmel sens).
Diskussi u Regoli tal-Kolonna CSS3
Lakuni u regoli jitqiegħdu bejn kolonni fl-istess xenarju ta 'ħafna kuluri. Il-lakuni se jxekklu l-kolonni, iżda r-regoli ma jieħdu l-ebda spazju. Jekk regola tal-kolonna hija usa 'mill-vojt tagħha, din tirkeb fuq il-kolonni li jmissu magħhom. hemm ħames proprjetajiet ġodda għar-regoli u d-distakki tal-kolonna:
- differenza fil-kolonna
- Iddefinixxi l-wisa 'tal-lakuni bejn il-kolonni.
- kulur tar-regola tal-kolonna
- Jiddefinixxi l-kulur tar-regola.
- kolonna-regola-istil
- Jiddefinixxi l-istil tar-regola (solidu, bit-tikek, doppju, eċċ.).
- kolonna-regola-wisa '
- Iddefinixxi l-wisa 'tar-regola.
- regola tal-kolonna
- Proprjetà ta 'tifrik li tiddefinixxi l-proprjetajiet tar-regola kollha ta' tliet kolonni f'daqqa.
Brejkijiet tal-Kolonna CSS3, Kolonni li Jxerrdu, u Kolonni tal-Mili
Il-waqfiet tal-kolonna jużaw l-istess għażliet CSS2 użati biex jiddefinixxu pawżi f'kontenut imħallas, iżda bi tliet proprjetajiet ġodda: break-before , break-after u break-inside .
Bħal ma 'tabelli, tista' tissettja elementi biex tkabbar il-kolonni mal-proprjetà tal-kolonna span. Dan jippermettilek li toħloq aħbarijiet li jkopru kolonni multipli aktar bħal gazzetta.
Il-kolonni tal-mili jiddeċiedu kemm se jkun il-kontenut f'kull kolonna. Il-kolonni bilanċjati jippruvaw ipoġġu l-istess ammont ta 'kontenut f'kull kolonna filwaqt li l-awtur biss jiċċirkola l-kontenut sakemm il-kolonna hija sħiħa u mbagħad tmur għall-waħda li jmiss.
Karatteristiċi aktar fil CSS3 Dik Aren & # 39; t Inklużi fil CSS2
Hemm ħafna karatteristiċi addizzjonali f'CSS3 li ma kinux jeżistu f'CSS2, inklużi:
- Mudell ta 'tqassim tal-mudell tas-CSS u modulu ta' pożizzjonament tal-Grid CSS3 : Ħolqien ta 'grilji b'CSS.
- CSS3 Modulu tat- test: Ittrasferixxi t-test u saħansitra joħolqu drop-shadows b'CSS.
- CSS3 Kulur modulu : Issa bl-opaċità.
- Bidliet fil-mudell tal-kaxxa : Inkluża proprjetà ta ' marquee li taġixxi bħall-lametta IE.
- Modulu ta 'l-Interface ta' l-Utent CSS3 : Tagħtik cursors ġodda, tweġibiet għal azzjonijiet, oqsma meħtieġa, u anke elementi ta 'tibdil mill-ġdid .
- Mistoqsijiet fil-Midja : Il-mistoqsijiet fil-midja jippermettu aktar flessibbiltà meta jiddefinixxu kif għandha tintuża folja tal-istil. Per eżempju, inti tista 'tiddefinixxi karta tal-istil li hija biss għal apparati li jinżammu fl-idejn li għandhom viewport ikbar minn 20em.
- CSS3 Modulu Ruby : Tipprovdi appoġġ għal lingwi li jużaw ruby testwali biex jannotaw dokumenti.
- CSS3 Modulu tal-Media Paged : Għal aktar appoġġ għal media paged (karta, trasparenza, eċċ).
- Kontenut iġġenerat: L headers u footers running, noti f'qiegħ il-paġna, u kontenut ieħor li huwa ġġenerat b'mod programmatiku, speċjalment għal medja paginata.
- Modulu tad-Diskors CSS3 : Tibdil fis-CSS fonetiku.