Razlika med CSS2 in CSS3

click fraud protection

Največja razlika med CSS2 in CSS3 je, da je bil CSS3 razdeljen na različne odseke, imenovane moduli. Vsak od teh modulov se prebija skozi W3C v različnih fazah priporočevalnega postopka. Ta postopek je veliko olajšal sprejemanje in uporabo različnih kosov CSS3 v brskalniku s strani različnih proizvajalcev.

Če primerjate ta postopek s tem, kar se je zgodilo s CSS2, kjer je bilo vse predloženo kot en sam dokument z vsemi Cascading Style Sheets informacije v njem začnete videti prednosti razdeljevanja priporočila na manjše posamezne koščke. Ker se z vsakim od modulov dela individualno, imajo razvijalci veliko večjo podporo brskalnikom za module CSS3.

Novi izbirniki CSS3

CSS3 ponuja več novih načinov za pisanje pravil CSS z novimi izbirniki CSS, pa tudi nov kombiniralec in nekatere nove psevdoelemente.

Obstajajo trije novi izbirniki atributov:

  • Atribut začetka se natančno ujema:
    element [foo ^ = "bar"]
    Element ima atribut, imenovan foo, ki se začne z "bar" npr.
  • Končno ujemanje atributov natančno:
    element [foo $ = "bar"]
    Element ima atribut, imenovan foo, ki se konča z "bar" npr.
  • instagram viewer
  • Atribut vsebuje ujemanje:
    element [foo * = "bar"]
    Element ima atribut poklical foo ki vsebuje niz "bar."

Uvedenih je bilo 16 novih psevdorazredov:

  • : root
    • Koreninski element dokumenta.
  • : n-ti otrok (n)
    • Uporabite to za natančno ujemanje podrejenih elementov ali uporabite spremenljivke, da dobite izmenična ujemanja.
  • : nth-zadnji-otrok (n)
    • Ujemajte se z natančnimi podrejenimi elementi, ki štejejo od zadnjega.
  • : nth-of-type (n)
    • V drevesu dokumentov pred njim ujemajte elemente z istim imenom.
  • : nth-last-of-type (n)
    • Ujemajte se z istoimenskimi elementi, ki štejejo od spodaj.
  • : zadnji otrok
    • Ujemajte se z zadnjim podrejeni element staršev.
  • : prvovrstni
    • Ujemanje prvega bratskega elementa te vrste.
  • : zadnji tip
    • Ujema se z zadnjim sorodnim elementom te vrste.
  • : edini otrok
    • Ujemite element, ki je edini podrejeni element njegovega starša.
  • : samo-tip
    • Ujemanje elementa, ki je edini te vrste.
  • :prazno
    • Ujemite element, ki nima podrejenih elementov (vključno z vozlišči besedila).
  • : tarča
    • Ujemanje elementa, ki je cilj referenčnega URI-ja.
  • : omogočeno
    • Ujemanje elementa, ko je omogočen.
  • :onemogočeno
    • Ujemanje elementa, ko je onemogočen.
  • : preverjeno
    • Ujema z elementom, ko je označen (izbirni gumb ali potrditveno polje).
  • : ne
    • Ujemanje, kadar se element ne ujema s preprostim izbirniki.

Obstaja ena nova kombinacija:

  • elementA ~ elementB
    • Ujemanje, ko element B sledi nekje za elementom A, ne nujno takoj.

Nove lastnosti

CSS3 je predstavil tudi nekaj novih lastnosti CSS. Mnoge od teh lastnosti ustvarjajo vizualne sloge, ki bi se verjetno bolj povezali z grafičnim programom, kot je Photoshop. Nekatere od njih, na primer border-radius ali box-shadow, obstajajo že od uvedbe CSS3. Drugi, na primer flexbox ali celo CSS Mreža so novejši slogi, ki se še vedno pogosto štejejo za dodatke CSS3.

V CSS3 se model škatle ni spremenil. Obstaja pa veliko novih lastnosti sloga, ki vam lahko pomagajo oblikovati ozadja in obrobe okenc.

Več slik v ozadju

Z uporabo slogov slike ozadja, položaja ozadja in ponavljanja ozadja lahko v polju določite več slik za ozadje, ki jih je treba nalagati eno na drugo. Prva slika je uporabniku najbližja plast, naslednje pa so naslikane zadaj. Če je barva ozadja, je slikana pod vsemi sloji slike.

Nove lastnosti sloga ozadja

V CSS3 je tudi nekaj novih lastnosti ozadja:

  • posnetek za ozadje
  • Ta lastnost določa, kako je treba sliko ozadja odrezati. Privzeto je polje z obrobo, vendar ga lahko spremenite v polje za oblazinjenje ali polje z vsebino.
  • izvor-izvor
  • Ta lastnost določa, ali naj bo ozadje postavljeno v polnilo, obrobo ali polje z vsebino.
  • velikost ozadja
  • Ta lastnost označuje velikost slike za ozadje. Omogoča vam raztegnite manjše slike, da se prilegajo strani.

Spremembe obstoječih lastnosti sloga ozadja

Obstaja tudi nekaj sprememb obstoječih lastnosti sloga ozadja:

  • ozadje-ponovitev
    • Za to lastnost sta na voljo dve novi vrednosti - vesolja in okrogla. Presledek ploščice enakomerno razmakne znotraj polja, ne da bi bil odrezan. Okrogla prilagaja velikost slike ozadja, tako da bo v polju večkrat popločana.
  • ozadje-priloga
    • Doda se nova vrednost "local", tako da se bo ozadje pomikalo z vsebino elementa, ko ima ta element drsno vrstico.
  • ozadje
    • Okrajšava za ozadje doda lastnosti velikosti in izvora.

Lastnosti meje CSS3

V CSS3 so obrobe lahko slogi, ki smo jih vajeni (polne, dvojne, črtkane itd.), Ali pa so slika. Poleg tega CSS3 podpira zaobljene vogale. Slike obrobe so zanimive, ker ustvarite sliko vseh štirih obrob in nato CSS-u povejte, kako to sliko uporabiti na svojih mejah.

Nove lastnosti obrobe

V CSS3 je nekaj novih lastnosti meja:

  • meja-polmer
  • meja-zgoraj-desno-polmer, meja-spodnji-desni-polmer, meja-polmer spodaj-levo, meja-zgornji-levi-polmer
  • Te lastnosti omogočajo ustvarjanje zaobljenih vogalov na mejah.
  • border-image-source
  • Določa izvorno datoteko slike, ki se bo uporabila namesto že definiranih slogov obrobe.
  • border-image-slice
  • Predstavlja notranje odmike od robov robne slike.
  • border-image-width
  • Določa vrednost širine za vašo obrobno sliko.
  • border-image-outset
  • Določa količino, ki jo območje mejne slike presega mejno polje.
  • border-image-stretch
  • Določa, kako naj bodo stranice in srednji deli robne slike popločani ali pomanjšani.
  • mejna slika
  • Okrajšava za vse lastnosti mejne slike.

Dodatne lastnosti CSS3, povezane z mejami in ozadji

Ko je polje prelomljeno pri prelomu strani, prelomu stolpca ali prelomu vrstice (za vrstne elemente), se škatla-dekoracija-odmor lastnost definira, kako so nova polja zavita z obrobo in oblazinjenjem. Ozadja se s to lastnostjo delijo med več polomljenih polj.

Novo škatla-senca lastnost elementom polja doda sence.

S CSS3 lahko zdaj enostavno nastavite spletno stran z več stolpci brez tabel ali zapletov div strukture oznak. Preprosto poveste brskalniku, koliko stolpcev mora imeti element telesa in kako široki naj bodo. Poleg tega lahko dodate obrobe (pravila) in barve ozadja, ki segajo do višine stolpca, in vaše besedilo bo samodejno teklo skozi vse stolpce.

Določite število in širino stolpcev

Obstajajo trije novi lastnosti ki vam omogočajo, da določite število in širino stolpcev:

  • širina stolpca
    • Določa širino stolpcev. Brskalnik bo nato pretočil besedilo, da bo prostor zapolnil s širokimi stolpci.
  • števec stolpcev
    • Določa število stolpcev na strani. Brskalnik bo nato ustvaril stolpce, ki so dovolj široki, da se prilegajo prostoru, vendar le številko, ki jo določite.
  • stolpci
    • Stenografska lastnost, kjer lahko določite širino ali številko (ali oboje, vendar je to le redko smiselno).

Vrzeli in pravila v stolpcu CSS3

Vrzeli in pravila so postavljeni med stolpci v istem scenariju z več stolpci. Vrzeli bodo stolpce potisnili narazen, vendar pravila ne zajemajo prostora. Če je pravilo stolpca širše od vrzeli, se bo prekrivalo s sosednjimi stolpci. Za pravila in vrzeli stolpcev je na voljo pet novih lastnosti:

  • vrzel v stolpcu
    • Določa širino vrzeli med stolpci.
  • barva-pravilo-stolpec
    • Določa barvo pravila.
  • slog-stolpec-pravilo
    • Določa slog pravila (masivno, pikčasto, dvojno itd.).
  • širina stolpca-pravila
    • Določa širino pravila.
  • pravilo stolpca
    • Stenografska lastnost, ki hkrati določa vse tri lastnosti pravila stolpca.

Prelomi stolpcev CSS3, raztezanje stolpcev in polnjenje stolpcev

Stolpec odmori uporabljajo enake možnosti CSS2, ki se uporabljajo za definiranje prelomov v ostranjeni vsebini, vendar s tremi novimi lastnostmi: prelom, prelom, in vlom.

Tako kot pri tabelah lahko tudi z lastnostjo razpon stolpcev nastavite elemente, da obsegajo stolpce. To vam omogoča ustvarjanje naslovov, ki obsegajo več stolpcev bolj kot časopis.

Polnjenje stolpcev določa, koliko vsebine bo v posameznem stolpcu. Uravnoteženi stolpci poskušajo v vsak stolpec vstaviti enako količino vsebine, medtem ko samodejno pretaka vsebino, dokler stolpec ni poln in nato preide na naslednjega.

Več funkcij v CSS3, ki niso vključene v CSS2

V CSS3 obstaja veliko dodatnih funkcij, ki v CSS2 niso obstajale, med drugim:

  • Modul postavitve predloge CSS in modul za pozicioniranje mreže CSS3: Ustvarjanje mrež s CSS.
  • Besedilni modul CSS3: Orisati besedilo in celo ustvariti spustne sence s CSS.
  • CSS3 barvni modul: Zdaj z motnostjo.
  • Spremembe modela škatle: Vključno z a šotor lastnost, ki deluje kot oznaka IE.
  • Modul uporabniškega vmesnika CSS3: Vam dajo nove kazalke, odgovore na dejanja, zahtevana polja in celo spreminjanje velikosti elementov.
  • Medijske poizvedbe: Medijska vprašanja vam omogočajo večjo prilagodljivost pri določanju načina uporabe sloga. Določite lahko na primer tabelo s slogi, ki je namenjena samo ročnim napravam, ki imajo prikazno polje večje od 20em.
  • CSS3 Ruby modul: Omogoča podporo jezikom, ki za označevanje dokumentov uporabljajo besedilni rubin.
  • Modul za stranski medij CSS3: Za še večjo podporo stranskim medijem (papir, prosojnice itd.).
  • Ustvarjena vsebina: Poganjanje glav in nog, sprotnih opomb in druge vsebine, ki se ustvari programsko, zlasti za stranski medij.
  • Govorni modul CSS3: Spremembe slušnega CSS.
instagram story viewer