Verstaan die belangrikste veranderinge aan CSS3
Die grootste verskil tussen CSS2 en CSS3 is dat CSS3 opgedeel is in verskillende afdelings, genoem modules. Elk van hierdie modules maak sy weg deur die W3C in verskillende stadiums van die aanbevelingsproses. Hierdie proses het dit baie makliker gemaak om verskillende dele van CSS3 te aanvaar en geïmplementeer in die blaaier deur verskillende vervaardigers.
As u hierdie proses vergelyk met wat met CSS2 gebeur het, waar alles as 'n enkele dokument ingedien is met al die Cascading Style Sheets- inligting binne dit, begin u die voordele sien om die aanbeveling tot kleiner individuele stukke te breek. Omdat elkeen van die modules individueel gewerk word, het ons 'n veel groter verskeidenheid blaaierondersteuning vir CSS3-modules.
Soos met enige nuwe en veranderende spesifikasie, maak seker dat u CSS3-bladsye deeglik toets in soveel blaaiers en bedryfstelsels as u kan. Onthou, die doelwit is om nie webbladsye te skep wat presies dieselfde lyk in elke blaaier nie, maar om te verseker dat enige style wat jy gebruik, insluitende CSS3-style, goed lyk in die blaaiers wat hulle ondersteun en dat hulle grasieus terugval vir ouer blaaiers wat Moenie.
Nuwe CSS3 Selectors
CSS3 bied 'n klomp nuwe maniere waarop jy CSS-reëls kan skryf met nuwe CSS-keurders, sowel as 'n nuwe kombinator, en 'n paar nuwe pseudo-elemente.
Drie nuwe kenmerk keurders:
- Attribute begin pas presies element [foo ^ = "bar"] Die element het 'n kenmerk genoem foo wat begin met 'bar' bv.
- Eienskappe eindig presies ooreenstem element [foo $ = "bar"] Die element het 'n kenmerk genoem foo wat eindig met 'bar' bv.
- Attribuut bevat die wedstryd element [foo * = "bar"] Die element het 'n kenmerk genoem foo wat die string "bar" bevat, bv.
16 nuwe pseudoklasse:
- : wortel
- Die wortel element van die dokument. In HTML is dit altyd.
- : nde-kind (N)
- Gebruik hierdie om presiese kinderelemente by te voeg of veranderlikes te gebruik om afwisselende vuurhoutjies te kry.
- : nde-laaste-kind (N)
- Pas presiese kinderelemente op wat van die laaste een optel.
- : nde-van-tipe (N)
- Pas broers en susters met dieselfde naam voor dit in die dokumentboom.
- : nde-laaste-van-tipe (N)
- Vergelyk broers en susters met dieselfde naam wat van onder af optel.
- : laaste kind
- Pas die laaste kindelement van die ouer by.
- : eerste-of-tipe
- Pas die eerste broerselement van die tipe.
- : laaste-of-tipe
- Pas die laaste broerskindelement van die tipe by.
- :enigste kind
- Pas die element wat die enigste kind van sy ouer is.
- : net-van-tipe
- Pas die element wat die enigste van sy tipe is.
- : leë
- Pas die element wat geen kinders het nie (insluitend teks nodusse).
- : teiken
- Pas 'n element wat die teiken van die verwysende URI is.
- : enabled
- Pas die element wanneer dit aangeskakel is.
- : gestremde
- Pas die element by wanneer dit gedeaktiveer is.
- : gekontroleer
- Pas die element by wanneer dit gekontroleer is (radio knoppie of boks).
- : nie (s)
- Pas wanneer die element nie ooreenstem met die eenvoudige seleksie s nie.
Een nuwe kombinator:
- elementA ~ elementB
- Pas wanneer element B êrens na elementA volg, nie noodwendig dadelik nie.
Nuwe eienskappe
CSS3 het ook 'n aantal nuwe CSS-eienskappe bekendgestel. Baie van hierdie eienskappe was om visuele style te skep wat waarskynlik meer verband hou met 'n grafiese program soos Photoshop. Sommige van hierdie, soos grensradius of boksskaduwee, is sedert die inleiding as CSS3 voor. Ander, soos flexbox of selfs CSS-rooster, is nuwer style wat steeds as CSS3-byvoegings beskou word.
In CSS3 het die boksmodel nie verander nie. Maar daar is 'n klomp nuwe styl eienskappe wat jou kan help om die agtergronde en grense van jou bokse te styl.
Veelvuldige Agtergrond Ek magte
Deur die agtergrond-, agtergrond- en agtergrond-herhalende style te gebruik, kan u verskeie agtergrondprente spesifiseer wat bo-op mekaar in die boks gelaag word. Die eerste beeld is die laagste naaste aan die gebruiker, met die volgende wat agter geverf is. As daar 'n agtergrondkleur is, word dit onder al die beeldlae geverf.
Nuwe Agtergrond Styl Eienskappe
Daar is ook 'n paar nuwe agtergrond eienskappe in CSS3.
- agtergrond-knipsels
- Hierdie eiendom definieer hoe die agtergrond beeld geknip moet word. Die standaard is die grenskassie, maar dit kan verander word na die boksie of die inhoudskassie.
- agtergrond-oorsprong
- Hierdie eiendom bepaal of die agtergrond in die blokkie boks, die grenskassie of die inhoudskassie moet wees.
- agtergrond-grootte
- Met hierdie eienskap kan u die grootte van die agtergrond prent aandui. Dit laat jou toe om kleiner beelde te strek om die bladsy te pas.
Wysigings aan bestaande eienskappe van Agtergrondstyl
Daar is ook 'n paar veranderinge aan bestaande agtergrondstyl eienskappe:
- agtergrond-repeat
- Daar is twee nuwe waardes vir hierdie eiendom: ruimte en ronde. Ruimte spasieer die geteëlde beeld eweredig in die boks sonder om geknip te word. Ronde omskep die agtergrond prent sodat dit heelwat kere in die boks sal vloei.
- agtergrond-aanhangsel
- 'N Nuwe waarde "plaaslike" word bygevoeg sodat die agtergrond sal blaai met die element se inhoud wanneer daardie element 'n blaai balk het.
- agtergrond
- Die agtergrond korthand eiendom voeg by die grootte en oorsprong eienskappe.
CSS3 Border Properties
In CSS3 kan grense die style wees waarop ons gewoond is (soliede, dubbel, stippel, ens.) Of hulle kan 'n beeld wees. Plus, CSS3 bring die vermoë om afgeronde hoeke te skep. Grens beelde is interessant omdat jy 'n beeld van al vier grense skep en dan die CSS vertel hoe om die prent op jou grense toe te pas.
Nuwe grense styl eienskappe
Daar is 'n paar nuwe grens eiendomme in CSS3:
- grens-radius
- grens-bo-regs-radius , grens-onder-regs-radius , grens-onder-links-radius , grens-links-radius
- Hierdie eienskappe laat jou toe om afgeronde hoeke op jou grense te skep.
- grens-beeld-bron
- Spesifiseer die beeldbronlêer wat gebruik moet word in plaas van grensstyle wat reeds gedefinieer is.
- grens-beeld-skyfie
- Verteenwoordig die inwaartse afwykings van die grensbeelde
- grens-beeld-wydte
- Definieer die waarde van die breedte vir jou grensbeeld.
- grens-beeld-staanspoor
- Spesifiseer die hoeveelheid wat die grensbeeldarea buite die grenskassie strek.
- grens-beeld-rek
- Definieer hoe die sye en middelste dele van die grensbeeld geteël of afgeskaal moet word.
- grens-beeld
- Die kort eienskap vir al die grens beeld eienskappe.
Bykomende CSS3-eienskappe wat verband hou met grense en agtergronde
Wanneer 'n boks by 'n bladsy breek gebreek word, is die kolom breek vir lynbreuk (vir inlyn-elemente) die definisie van bokse-versierings omskryf hoe die nuwe bokse toegedraai word met die rand en opvulling. Agtergrond kan verdeel word tussen verskeie gebreekte bokse wat hierdie eiendom gebruik.
Daar is ook 'n boks-skaduwee-eienskap wat gebruik kan word om skadu's aan bokse-elemente toe te voeg.
Met CSS3 kan jy nou maklik 'n webblad opstel met verskeie kolomme sonder tabelle of ingewikkelde div-tagstrukture. Jy vertel eenvoudig aan die blaaier hoeveel kolomme die liggaamselement moet hê en hoe breed dit behoort te wees. Plus jy kan grense (reëls), agtergrondkleure wat die hoogte van die kolom span, byvoeg en jou teks sal outomaties deur al die kolomme vloei.
CSS3 Kolomme - Definieer die Nommer en Breedte van die Kolomme
Daar is drie nuwe eienskappe waarmee jy die aantal en breedte van jou kolomme kan definieer:
- kolom breedte
- Definieer die breedte wat u kolomme moet wees. Die blaaier sal dan die teks vloei om die spasie met kolomme so wyd te vul.
- kolom-telling
- Definieer die aantal kolomme op die bladsy. Die blaaier sal dan kolomme wyd maak om in die spasie te pas, maar slegs die nommer wat u spesifiseer.
- kolomme
- Shorthand-eiendom waar jy die wydte of die getal (of albei, maar wat selde sin maak) kan definieer.
CSS3 kolom gapings en reëls
Gapings en reëls word tussen kolomme in dieselfde multikolom-scenario geplaas. Gapings sal die kolomme uitmekaar skuif, maar reëls neem geen spasie op nie. As 'n kolomreël wyer is as die gaping, sal dit die naburige kolomme oorvleuel. daar is vyf nuwe eiendomme vir kolomreëls en leemtes:
- kolom-gaping
- Definieer die breedte van die gapings tussen die kolomme.
- kolom-reël-kleur
- Definieer die kleur van die reël.
- kolom-reël-styl
- Definieer die styl van die reël (soliede, stippel, dubbel, ens.).
- kolom-reël-wydte
- Definieer die breedte van die reël.
- kolom-reël
- 'N Shorthand-eiendom wat al drie kolomreël eiendomme gelyktydig definieer.
CSS3 kolom breek, span kolomme, en vul kolomme
Kolom breuke gebruik dieselfde CSS2 opsies wat gebruik word om breuke in bladsye te definieer, maar met drie nuwe eienskappe: breek voor , breek na , en binnebreek .
Soos met tabelle, kan jy elemente stel om kolomme met die kolom-span-eiendom te span. Dit laat jou toe om opskrifte te skep wat meer as 'n koerant dek.
Die invul van kolomme bepaal hoeveel inhoud in elke kolom sal wees. Gebalanseerde kolomme probeer om dieselfde hoeveelheid inhoud in elke kolom te plaas terwyl outomaties die inhoud vloei totdat die kolom vol is en dan na die volgende een gaan.
Meer funksies in CSS3 wat nie ingesluit is in CSS2 nie
Daar is baie bykomende funksies in CSS3 wat nie in CSS2 bestaan nie, insluitend:
- CSS Sjabloonuitlegmodule en CSS3 Grid-posisioneringsmodule : Skep van roosters met CSS.
- CSS3 Teksmodule : Skets teks en skep selfs druppelskadu met CSS.
- CSS3 Kleur module : Nou met deursigtigheid.
- Veranderinge aan die boksmodel : Insluitend 'n tentpaarseiendom wat optree soos die IE-tag.
- CSS3-gebruikerskoppelvlakmodule : gee jou nuwe wysers, reaksies op aksies, vereiste velde, en selfs die grootte van elemente .
- Media-navrae : Media-navrae gee jou meer buigsaamheid om te definieer hoe 'n stylblad gebruik moet word. Byvoorbeeld, jy kan 'n stylblad definieer wat net vir handheld toestelle is wat 'n uitsigportie groter as 20em het.
- CSS3 Ruby module : Verskaf ondersteuning vir tale wat gebruik maak van tekstuele robyn om dokumente te annotateer.
- CSS3 Paged Media-module : Vir nog meer ondersteuning vir bladsye media (papier, transparante, ens.).
- Gegenereerde inhoud : L lopende koptekste en voetnote, voetnote en ander inhoud wat programmaties gegenereer word, veral vir blaai media.
- CSS3 Spraak module : Veranderinge aan gehoor CSS.