Understeande de grutte feroarings oan CSS3
It grutste ferskil tusken CSS2 en CSS3 is dat CSS3 opdield is yn ferskillende seksjes, neamd modules. Elk fan dizze modules makket de wei troch de W3C yn ferskillende stadia's fan it oanbefellingsproses. Dit proses hat it faker makliker makke foar ferskillende stikken fan CSS3 om akseptearjen te realisearjen en ynfierd troch ferskate fabrikanten.
As jo dit proses fergelykje mei wat barde mei CSS2, wêr't alles as in inkeld dokumint mei alle ynformaasje fan it Cascading Style Sheets yntsjinne is, begjinne jo de foardielen te sjen fan it oanbefujen oant yn lytsere, yndividuele stikken te brekken. Om't elk fan 'e modules op individueel wurke wurdt, hawwe wy in folle breed breedte fan browser-stipe foar CSS3-modules.
As mei elke nij en wikseljende spesifikaasje, befestigje jo CSS3 siden safolle te testen yn sa folle browsers en bestjoeringssysteem lykas jo kinne. Tink derom dat it doel is net om web siden te meitsjen dy't krekt itselde yn elke blêder meitsje, mar om derfoar soargje dat elke stilen dy't jo brûke, lykas CSS3-stilen, sjogge goed yn 'e browsers dy't harren stypje en dat se grappich weromfalle foar âldere browsers dy't net.
Nije CSS3-seleksjes
CSS3 biedt in nijsgjirrige nije manier om jo CSS-regels te skriuwen mei nije CSS-seleksjes, en ek in nije kombinaar, en guon nije pseudo-eleminten.
Trije nije attribút seleksjes:
- Attribut begjint mei elk element [foo ^ = "bar"] It elemint hat in attribute neamd foo dat begjint mei "bar"
- Attribut einiget mei krekt elemint [foo $ = "bar"] It elemint hat in attribute neamd foo dat einiget mei "bar" bgl.
- Attribut befettet it match- elemint [foo * = "bar"] It elemint hat in attribute neamd foo dat de string "bar" befettet.
16 nije pseudo-klassen:
- :woartel
- It root-elemint fan it dokumint. Yn HTML is dit altyd.
- : nth-child (n)
- Brûk dit om 'e krekte berne-eleminten te passen of fariabele gebrûk te meitsjen om wikseljende wedstriden te krijen.
- : nth-last-child (n)
- Meitsje krekte berneleminten dy't fan 'e lêst ferwachtsje.
- : nth-of-type (n)
- Meitsje sibling-eleminten mei deselde namme foar dat yn it dokumintbeam.
- : nth-last-of-type (n)
- Meitsje sibling-eleminten mei deselde namme dy't fan 'e boaiem ôfwikend.
- :Lêste bern
- Meitsje it lêste bernelemint fan 'e âlder.
- : earste-fan-type
- Meitsje it earste sibling-elemint fan dat type.
- : lêste-fan-type
- Meitsje it lêste sibele elemint fan dat type.
- :iennichst bern
- Meitsje it elemint dat it ienige bern fan har âlder is.
- : allinne fan 'e type
- Meitsje it elemint dat de iennichste fan har type is.
- :leech
- Meitsje it elemint dat gjin bern hat (ynklusyf tekstknoppen).
- :doel
- Meitsje in elemint dat it doel is fan 'e ferwiderjende URI.
- :mooglik meitsje
- Meitsje it elemint oer as it ynskeakele is.
- :ynvalide
- Spoar it elemint as it is útskeakele.
- : checked
- Meitsje it elemint by it kontrolearjen (radio button of checkbox).
- : net (s)
- Spesjale as it elemint net oerienkomt mei de ienfâldige selector .
Ien nije kombinaar:
- elementa ~ elementB
- Spultsje as elementB folgje earne nei elementa, net needsaaklik fuortendaliks.
Nije eigenskippen
CSS3 hat ek in oantal nije CSS-eigenskippen ynfierd. In soad fan dizze eigenskippen wiene foarbylden te meitsjen dy't wierskynlik meidwaan mei in grafyske programma lykas Photoshop. Guon fan dizze, lykas grinzen-radius of kastagens, binne sûnt de yntroduksje as CSS3 west. Oaren, lykas flexbox of sels CSS Grid, binne nije stylen dy't noch altyd faak binne as CSS3-oanfollingen.
Yn CSS3 hat it fakmodel net feroare. Mar der binne in bân fan nije styl-eigenskippen dy't jo helpe kinne de eftergrûn en rânen fan jo fakbakken oanpasse.
Mearfâldich achtergrûn ik mage
Mei help fan eftergrûnôfbylding, eftergrûn-posysje, en eftergrûn-werhelle stilen kinne jo ferskate eftergrûnôfbyldings opjaan dy't boppe-yn 'e kaach opskreaun wurde. It earste ôfbylding is it ljocht neist de brûker, mei de folgjende dy't efter skildere wurde. As der in eftergrûnkleur is, wurdt it skildere ûnder alle byldbyldings skildere.
Nije eftergrûnstyl eigenskippen
Der binne ek guon nije eftergrûn-eigenskippen yn CSS3.
- eftergrûn-klip
- Dit eigenskip beskied hoe't de eftergrûnôfbylding klikke sil. De standert is it grinsfak, mar it kin feroare wurde yn it paddingfak of de ynhâldfak.
- eftergrûn-oarsprong
- Dit eigenskip bepaalt oft de eftergrûn plak wurde moat yn 'e padding, de grinskast of de ynhâldfak.
- eftergrûn-grutte
- Dizze eigenskip lit jo de grutte fan it eftergrûnôfbylding oanpasse. It makket it mooglik om lytsere ôfbyldings te streken om de side te passen.
Feroarings foar besteande styl fan styl fan eftergrûn
Der binne ek in pear feroarings foar besteande eftergrûnstyl eigenskippen:
- eftergrûn-werhelje
- Der binne twa nije wearden foar dit eigendom: romte en rûn. Space sprekt it tile ôfbylding lykwols binnen it fekje sûnder klikken. Rûnom fergruttet de eftergrûnôfbylding sa dat it in folsleine oantal kearen yn 't fakje telt.
- eftergrûn-attachment
- In nije wearde "lokale" wurdt tafoege sadat de eftergrûn scrollt mei de ynhâld fan 'e elemint as dit elemint in scrollbalke hat.
- eftergrûn
- It eftergrûn skilderjen tafoege yn 'e grutte en oarspronklike eigenskippen.
CSS3-bordele eigenskippen
Yn CSS3 kinne grinzen de stilen wêze dy't wy brûkt wurde (solid, dûbel, prestaasjes, ensfh.) Of se kinne in byld wêze. Plus, bringt CSS3 de mooglikheid om rûnte hoeken te meitsjen. Borderôfbyldingen binne nijsgjirrich omdat jo in ôfbylding fan alle fjouwer grinzen meitsje en it CSS fertelle hoe't jo dizze ôfbylding oan jo grinzen tapasse.
Nije Borderstyl eigenskippen
Der binne guon nije grinsigens yn CSS3:
- grienradius
- grenad-top-rjochtsradius , râne-rjochts-rjochtsradius , grins-boppe-loftsradius , grins-top-linksradius
- Dizze eigenskippen kinne jo meitsje om rûne eagen op jo grins te meitsjen.
- border-image-source
- Beskriuwt de byldbeide-bestân dy 't brûkt wurdt ynstee fan grûnstilen.
- border-image-slice
- Fertsjintwurdiget de ynterne keten út 'e grinsôfbylding
- border-image-width
- Definie de wearde fan 'e breedte foar jo grinsôfbylding.
- border-image-startet
- Beskriuwt it bedrach dat de rânske byldbehear oer it grinskast útslacht.
- border-image-stretch
- Defines hoe't de siden en middelste dielen fan it grinsôfbylding tile of skalme wurde moatte.
- border-image
- It skilderkeap eigendom foar alle rânske byldeigenskippen.
Oanfoljende CSS3-eigenskippen ferbân mei rânen en eftergrûn
As in fel smakket op in side-brek, kolombreuk foar line break (foar ynline-eleminten) krijt de kast-dekoraasje-brek-eigendom hoe't de nije kaaien mei grins en padding yngewikkeld wurde. Eftergrûnen kinne ferdield wurde tusken meardere brutsen boksen mei dizze eigendom.
Der is ek in kastonshadow-eigendom dy't brûkt wurde kin om skaden oan kasten eleminten ta te foegjen.
Mei CSS3 kinne jo no maklik in webside sette mei meardere kolommen sûnder tafels of komplisearre div-tag-struktueren. Jo fertelle jo de browser sa folle kolommen it lichem-elemint moat hawwe en hoe breed se wêze moatte. Plus kinne jo tafoegingen (regels) tafoegje, eftergrûnkleuren dy't de hichte fan 'e kolom besjen, en jo tekst sil automatysk troch alle kolommen flieze.
CSS3 Columns - Define de nûmer en breedte fan de kolommen
Der binne trije nije eigenskippen wêrmei jo it nûmer en breedte fan jo kolommen definiearje kinne:
- kolom-breedte
- Definie de breedte jo kolommen moatte wêze. De blêder sil dan de tekst ynfiere om de romte mei kolommen te bringen dy't breed binne.
- kolom-count
- Defines it tal kolommen op 'e side. De blêder sil dan kolommen genôch breed meitsje om yn 'e romte te passen, mar allinich it nûmer dat jo oanjûn.
- pylder
- Shorthand eigendom dêr't jo de breedte of nûmer kinne kinne (of beide, mar dat selden makket).
CSS3-kolomfal en regels
Spaasjes en regels wurde tusken kolommen yn deselde multicolumn-senario pleatst. Spaasjes sille de kolommen útsette, mar regels nimme gjin romte. As in kolomregel grutter is as it gat, dan sil it neistlizzende kolommen oerlappe. Der binne fiif nije eigenskippen foar kolomregels en spaasjes:
- kolom-gap
- Definie de breedte fan de spaasjes tusken de kolommen.
- kolom-regel-kleur
- Definie de kleur fan 'e regel.
- kolom-regel-styl
- Definiet de styl fan de regel (solid, punten, dûbel, ensfh.).
- kolom-regel-breedte
- Defines de breedte fan de regel.
- kolombehear
- In rjochthawwende eigenskip definieare alle trije kolom-rige eigenskippen op ien kear.
CSS3 kolombreaks, spannende kolommen, en folle kolommen
Kolombrokken brûke deselde CSS2-opsjes dy't brûkt wurde om brekken yn paged ynhâld te definiearjen, mar mei trije nije eigenskippen: brek-foar , brek-nei , en brek yn .
As jo mei tabellen kinne jo eleminten ynstelle om kolommen te spannen mei de kolom-span-eigendom. Dit soarget dat jo haadlinen meitsje dy't meardere kolommen mear hawwe as in krante.
Folle kolommen beslút hoefolle ynhâld yn elke kolom wêze sil. Baljearre kolommen besykje itselde oantal ynhâld yn elke kolom te pleatsen, wylst it allinich de ynhâld ynhâldt, oant de kolom fol is en giet dan nei de folgjende.
Mear funksjes yn CSS3 Dat Aren yn tillefoan yn CSS2
Der binne in soad ekstra funksjes yn CSS3 dy't net yn CSS2 bestie, ynklusief:
- CSS-templates of layout modules en CSS3 Rasterposysje-modul : Grids mei CSS te meitsjen.
- CSS3 Tekstmodul : Skript tekst en sels meitsje dropshaden mei CSS.
- CSS3 kleurmodul : no mei opsetsje.
- Feroaringen nei it kastasjemodel : Ynklusyf in martsjets- eigendom dy't as it IE-tag makket.
- CSS3-brûkersynterface-module : Jou jo nije cursors, responsyen oan aksjes, ferplichte fjilden, en sels feroarjende eleminten .
- Media Queries : Media-fraachstellings jouwe jo mear fleksibiliteit by it definiearjen hoe't in stylblêd brûkt wurde moat. Bygelyks kinne jo in stylblêd definiearje dy't allinich foar handheld-apparaten hat in sichtpost grutter dan 20em.
- CSS3 Ruby-modul : Stipet stipe foar talen dy't tekstkriich brûke om dokuminten te annotearjen.
- CSS3 Paged Media-modul : Foar noch mear draachflak foar paged media (papier, transparenzen, ensfh.).
- Generearre ynhâld : L rinnende kopteksten en fuotnûmer, fuotnota, en oare ynhâld dy't programmatysk generearret, foaral foar paged media.
- CSS3 Speechmodul : Feroarings nei aural CSS.