Rozdiel medzi CSS2 a CSS3
Pochopenie hlavných zmien CSS3
ObsahRozbaliť- Predstavené nové selektory CSS3
- Nové vlastnosti CSS v CSS3
- Viaceré obrázky na pozadí
- Nové vlastnosti štýlu pozadia
- Zmeny existujúcich vlastností štýlu pozadia
- CSS3 Nové vlastnosti a štýly okrajov
- Nové vlastnosti štýlu orámovania
- Viac vlastností okrajov a pozadia
- Nové vlastnosti na definovanie čísla a šírky stĺpca
- Medzery a pravidlá v stĺpcoch CSS3
- CSS3 Nové možnosti prelomenia stĺpcov
- Ďalšie nové funkcie v CSS3
Najväčší rozdiel medzi CSS2 a CSS3 je, že CSS3 bolo rozdelené do rôznych sekcií, tzv modulov . Každý z týchto modulov si razí cestu cez W3C v rôznych fázach procesu odporúčaní. Tento proces značne uľahčil prijatie a implementáciu rôznych častí CSS3 do prehliadača rôznymi výrobcami.
Ak porovnáte tento proces s tým, čo sa stalo s CSS2, kde bolo všetko odoslané ako jeden dokument so všetkými Kaskádové štýly informácie v ňom, začnete vidieť výhody rozdelenia odporúčania na menšie, samostatné časti. Keďže na každom z modulov sa pracuje individuálne, vývojári využívajú oveľa širšiu podporu prehliadačov pre moduly CSS3.
Nové selektory CSS3
CSS3 ponúka niekoľko nových spôsobov písania pravidiel CSS pomocou nových selektorov CSS, ako aj nového kombinátora a niektorých nových pseudoprvkov.
Existujú tri nové selektory atribútov:
- Koreňový prvok dokumentu.
- Použite to na priradenie presných podradených prvkov alebo použite premenné na získanie striedajúcich sa zhôd.
- Priraďte presné podradené prvky od posledného.
- Priraďte súrodenecké prvky s rovnakým názvom pred ním v strome dokumentu.
- Spojte súrodenecké prvky s rovnakým názvom, počítajúc zdola.
- Zápas posledný detský prvok rodiča.
- Priraďte prvý súrodenecký prvok tohto typu.
- Porovnajte posledný súrodenecký prvok tohto typu.
- Priraďte prvok, ktorý je jediným potomkom svojho rodiča.
- Priraďte prvok, ktorý je jediný svojho druhu.
- Priraďte prvok, ktorý nemá žiadne potomky (vrátane textových uzlov).
- Priraďte prvok, ktorý je cieľom odkazujúceho URI.
- Priraďte prvok, keď je povolený.
- Priraďte prvok, keď je zakázaný.
- Priraďte prvok, keď je začiarknutý (prepínač alebo začiarkavacie políčko).
- Zhoda, keď sa prvok nezhoduje s jednoduchým selektory .
- Zhoda, keď prvokB nasleduje niekde po prvku A, nie nevyhnutne hneď.
- Táto vlastnosť definuje, ako má byť obrázok na pozadí orezaný. Predvolený je okrajový rámček, ale možno ho zmeniť na výplňový rámček alebo rámček obsahu.
- Táto vlastnosť určuje, či sa má pozadie umiestniť do výplňového poľa, okrajového poľa alebo poľa obsahu.
- Táto vlastnosť označuje veľkosť obrázka na pozadí . Umožňuje vám to roztiahnite menšie obrázky tak, aby sa zmestili na stránku .
- Pre túto vlastnosť existujú dve nové hodnoty — priestor a okrúhly . Priestor rozmiestni dlaždicový obrázok rovnomerne v rámčeku bez toho, aby bol orezaný. Okrúhle zmení mierku obrázka na pozadí tak, že sa v rámčeku bude usporiadať viackrát.
- Pridá sa nová hodnota 'local', takže pozadie sa bude posúvať s obsahom prvku, keď má tento prvok posuvnú lištu.
- Vlastnosť skratky pozadia pridáva vlastnosti veľkosti a pôvodu.
- border-top-right-radius , okraj-dolný-pravý-polomer , okraj-dolný-ľavý-polomer , border-top-left-radius
- Tieto vlastnosti vám umožňujú vytvárať zaoblené rohy na hraniciach.
- Určuje zdrojový súbor obrázka, ktorý sa má použiť namiesto už definovaných štýlov ohraničenia.
- Predstavuje vnútorné odsadenia od okrajov okraja obrázka.
- Definuje hodnotu šírky pre váš orámovaný obrázok.
- Určuje rozsah, o ktorý oblasť okrajového obrázka presahuje za okrajový rámček.
- Definuje, ako by mali byť strany a stredné časti obrazu ohraničenia dlaždicovo usporiadané alebo zmenšené.
- Vlastnosť skratky pre všetky vlastnosti border-image.
- Definuje šírku, ktorú by mali mať vaše stĺpce. Prehliadač potom prejde text tak, aby vyplnil priestor stĺpcami so šírkou.
- Definuje počet stĺpcov na stránke. Prehliadač potom vytvorí stĺpce dostatočne široké, aby sa zmestili do priestoru, ale len taký počet, ktorý určíte.
- Vlastnosť Skratka, kde môžete definovať buď šírku, alebo číslo (alebo oboje, ale málokedy to dáva zmysel).
- Definuje šírku medzier medzi stĺpcami.
- Definuje farbu pravidla.
- Definuje štýl pravidla (plné, bodkované, dvojité atď.).
- Definuje šírku pravidla.
- Skrátená vlastnosť definujúca všetky tri vlastnosti pravidla stĺpcov naraz.
Bolo zavedených 16 nových pseudotried:
Je tu jeden nový kombinátor:
Nové vlastnosti
CSS3 tiež zaviedlo niekoľko nových vlastností CSS. Mnohé z týchto vlastností vytvárajú vizuálne štýly, ktoré by sa pravdepodobne viac spájali s grafickým programom, ako je Photoshop . Niektoré z nich, ako napríklad border-radius alebo box-shadow, existujú už od zavedenia CSS3. Iné, ako flexbox alebo dokonca CSS Grid sú novšie štýly, ktoré sa stále často považujú za doplnky CSS3.
V CSS3 sa krabicový model nezmenil. Existuje však množstvo nových vlastností štýlu, ktoré vám môžu pomôcť upraviť pozadie a okraje vašich políčok.
Viaceré obrázky na pozadí
Pomocou štýlov background-image, background-position a background-repeat môžete určiť viacero obrázkov pozadia, ktoré sa majú v rámčeku vrstviť na seba. Prvý obrázok je vrstva, ktorá je najbližšie k používateľovi, pričom nasledujúce sú namaľované za ním. Ak existuje farba pozadia, je namaľovaná pod všetkými vrstvami obrázka.
Nové vlastnosti štýlu pozadia
V CSS3 sú tiež niektoré nové vlastnosti pozadia:
Zmeny existujúcich vlastností štýlu pozadia
Existuje tiež niekoľko zmien existujúcich vlastností štýlu pozadia:
Vlastnosti okrajov CSS3
V CSS3 môžu byť okraje štýly, na ktoré sme zvyknutí (plné, dvojité, prerušované atď.), alebo to môžu byť obrázky. CSS3 navyše podporuje zaoblené rohy. Obrázky okrajov sú zaujímavé, pretože vytvoríte obrázok všetkých štyroch okrajov a potom poviete CSS, ako tento obrázok použiť na vaše okraje.
Nové vlastnosti štýlu orámovania
V CSS3 je niekoľko nových vlastností hraníc:
Ďalšie vlastnosti CSS3 súvisiace s okrajmi a pozadiami
Keď je rámček prerušený pri zlome strany, stĺpca alebo riadku (pre vložené prvky), krabica-dekorácia-prestávka vlastnosť definuje, ako sú nové polia zabalené s okrajom a výplňou. Pozadia sa pomocou tejto vlastnosti rozdelia medzi niekoľko rozbitých políčok.
Nový box-shadow vlastnosť pridáva k prvkom boxu tiene.
Pomocou CSS3 teraz môžete jednoducho nastaviť webovú stránku s niekoľkými stĺpcami bez tabuliek alebo komplikovane div štruktúry značiek. Prehliadaču jednoducho poviete, koľko stĺpcov by mal mať prvok tela a aké široké by mali byť. Navyše môžete pridať okraje (pravidlá) a farby pozadia, ktoré presahujú výšku stĺpca, a váš text bude automaticky pretekať všetkými stĺpcami.
Definujte počet a šírku stĺpcov
Nové sú tri vlastnosti ktoré vám umožňujú definovať počet a šírku vašich stĺpcov:
Medzery a pravidlá v stĺpcoch CSS3
Medzery a pravidlá sú umiestnené medzi stĺpcami v rovnakom scenári s viacerými stĺpcami. Medzery roztlačia stĺpce, ale pravidlá nezaberajú žiadne miesto. Ak je stĺpcové pravidlo širšie ako jeho medzera, prekryje susedné stĺpce. Existuje päť nových vlastností pre pravidlá stĺpcov a medzery:
CSS3 zalomenia stĺpcov, preklenutie stĺpcov a vyplnenie stĺpcov
Stĺpec prestávky používajú rovnaké možnosti CSS2, aké sa používajú na definovanie prestávok v stránkovanom obsahu, ale s tromi novými vlastnosťami: prestávka-pred , prestávka po , a vlámanie dovnútra .
Podobne ako pri tabuľkách môžete pomocou vlastnosti column-span nastaviť prvky na rozpätie stĺpcov. To vám umožní vytvárať titulky, ktoré sa rozprestierajú vo viacerých stĺpcoch viac ako noviny.
Vyplnenie stĺpcov rozhoduje o tom, koľko obsahu bude v jednotlivých stĺpcoch. Vyvážené stĺpce sa pokúšajú vložiť rovnaké množstvo obsahu do každého stĺpca, zatiaľ čo auto len vlieva obsah, kým sa stĺpec nezaplní, a potom prejde na ďalší.
Ďalšie funkcie v CSS3, ktoré nie sú zahrnuté v CSS2
V CSS3 je veľa ďalších funkcií, ktoré v CSS2 neexistovali, vrátane: