Suprasti pagrindinius CSS3 pakeitimus
Didžiausias skirtumas tarp CSS2 ir CSS3 yra tas, kad CSS3 buvo suskirstytas į skirtingas sekcijas, vadinamas moduliais. Kiekvienas iš šių modulių daro kelią per W3C įvairiuose rekomendacijos proceso etapuose. Šis procesas daug palengvino įvairius CSS3 elementus priimant ir įdiegus skirtingų gamintojų naršyklėje.
Jei palyginsite šį procesą su tuo, kas atsitiko su CSS2, kur viskas buvo pateikta kaip vienas dokumentas su visomis " Cascading Style Sheets" ( " Cascading Style Sheets") informacija, jūs pradėsite pamatyti rekomendacijos pažeidimo pranašumus į mažesnes atskiras dalis. Kadangi kiekvienas modulis veikia atskirai, turime daug platesnį naršyklės palaikymą CSS3 modulių.
Kaip ir su bet kokia nauja ir kintama specifikacija, būtinai išbandykite savo CSS3 puslapius kuo daugiau naršyklių ir operacinių sistemų. Atminkite, kad tikslas nėra sukurti kiekvienoje naršyklėje vienodai atrodančius tinklalapius, bet užtikrinti, kad bet kokie stiliai, kuriuos naudojate, įskaitant CSS3 stilius, puikiai atrodytų palaikančiose naršyklėse ir kad jie grakščiai atitrauktų senesnes naršykles, kurios nereikia.
Nauji CSS3 rinktuvai
CSS3 siūlo keletą naujų būdų, kaip galite parašyti CSS taisykles naudodami naujus CSS selektorius, taip pat naują kombinatorių ir kai kuriuos naujus pseudoelektrinius elementus.
Trys nauji atributų parinkėjai:
- Atributo pradžia tiksliai atitinka elementą [foo ^ = "bar"] Elementui būdingas atributas "foo", kuris prasideda "bar", pvz.
- Atitikmenų pabaiga tiksliai atitinka elementą [foo $ = "bar"] Elementui būdingas atributas "foo", kuris baigiasi "baru", pvz.
- Atributas turi atitikties elementą [foo * = "bar"] Elementui būdingas atributas "foo", kuriame yra eilutė "bar", pvz.
16 naujų pseudo-klasių:
- : root
- Šakninis dokumento elementas. HTML visada yra.
- : n-to vaikas (n)
- Naudokite tai, kad atitiktumėte tikslius vaiko elementus, arba naudokite kintamuosius, kad gautumėte kintamųjų atitikmenų.
- : n-toji vaikas (n)
- Taikykite tikslius vaiko elementus, skaičiuojančius nuo paskutinio.
- : n-to tipo (n)
- Pritaikydami tokius pačius pavadinimus, pasirinkite "Siblings" elementus dokumento medyje.
- : n-toji-the-tipo (n)
- Pritaikykite vienišus elementus su tuo pačiu pavadinimu, skaičiuojančiu nuo apačios.
- :Paskutinis vaikas
- Surinkite paskutinį tėvų vaiko elementą.
- : pirmasis tipo
- Palyginkite pirmąjį tokio tipo brolišką elementą.
- : paskutinis tipo
- Susiekite paskutinį šio tipo brolišką elementą.
- :vienintelis vaikas
- Atitikti elementą, kuris yra vienintelis jo tėvų vaikas.
- : tik tipo
- Suderinkite elementą, kuris yra vienintelis jo tipo.
- :tuščia
- Surinkite elementą, kuriame nėra vaikų (įskaitant teksto mazgus).
- : tikslas
- Susiekite elementą, kuris yra norimo URI objektas.
- :įjungtas
- Atitikti elementą, kai jis įjungtas.
- : neįgalus
- Atitikti elementą, kai jis išjungtas.
- : patikrinta
- Atitikti elementą, kai jis yra pažymėtas (radijo mygtukas arba žymimasis laukelis).
- : ne (s)
- Palyginkite, kai elementas nesutampa su paprastu selektoriumi .
Vienas naujas kombinatorius:
- elementA ~ elementasB
- Suderinti, kai elementas B po kuria po elementu A eina, nebūtinai iš karto.
Naujos savybės
CSS3 taip pat pristatė keletą naujų CSS savybių. Daugelis šių savybių buvo sukurti vizualinius stilius, kurie tikriausiai labiau susietų su grafikos programa, pvz., "Photoshop". Kai kurie iš jų, pvz., Pasienio spindulys ar langų šešėlis, buvo maždaug nuo įvado, jei CSS3. Kiti, pavyzdžiui, "flexbox" ar net "CSS Grid", yra naujesni stilius, kurie vis dar laikomi CSS3 priedais.
CSS3 dėžutės modelis nepasikeitė. Tačiau yra keletas naujų stilių savybių, kurios gali padėti jums supaprastinti jūsų dėžutės fonas ir sienas.
Keli fonai I magai
Naudodami fono paveikslėlį, fono padėtį ir fono atkūrimo stilius, galite nurodyti kelis fono vaizdus, kad juostelė būtų sluoksniuotos vienas ant kito. Pirmasis vaizdas yra vartotojui arčiausiai sluoksnis, o užrašai yra užrašyti. Jei yra fono spalva, ji yra nudažyta po visais vaizdo sluoksniais.
Naujos foninio stiliaus savybės
Taip pat yra keletas naujų fono savybių CSS3.
- fono klipas
- Šis turinys apibrėžia, kaip fono paveikslėlis turėtų būti nukirptas. Numatytoji yra sienos dėžutė, tačiau ją galima keisti į paddingą langelį arba turinio langelį.
- fono kilmė
- Šis turtas lemia, ar fonas turėtų būti vietų, kuriose yra įklijavimo laukelis, krašto langelis ar turinio laukelis.
- fono dydis
- Šis turinys leidžia nurodyti fono paveikslėlio dydį. Tai leidžia jums ištiesti mažesnius vaizdus, kad atitiktų puslapį.
Esamų fono stiliaus savybių pakeitimai
Yra keletas esamų fono stiliaus savybių pakeitimų:
- fono kartojimas
- Šiam turtui yra dvi naujos vertės: tarpas ir apvalus. Spalvos erdviai plytelių atvaizdas tolygiai į dėžutę be apipjaustytų. Apvalus išlygina fono paveikslėlį taip, kad dėžėje jis plytelės daugybę kartų.
- fono priedas
- Įterpiama nauja reikšmė "vietinis", kad fonas būtų slinktis elemento turiniu, kai šis elementas turi slinkties juostą.
- fonas
- Fono stenografavimo savybė prideda dydžio ir kilmės savybes.
CSS3 pasienio savybės
CSS3 sienos gali būti stiliai, su kuriais mes naudojamės (tvirtas, dvigubas, briaunotas ir tt) arba jie gali būti įvaizdis. Be to, CSS3 suteikia galimybę kurti kampus. Pasienio vaizdai yra įdomūs, nes sukursite visų keturių sienų vaizdą ir pasakysite CSS, kaip pritaikyti tą vaizdą prie savo sienų.
Naujos pasienio stiliaus savybės
CSS3 yra keletas naujų pasienio savybių:
- pasienio spindulys
- pasienio ir viršutinio dešiniojo spindulys , sienos apačioje dešinysis spindulys , pasienio ir apatinis kairysis spindulys , pasienio ir viršaus į kairę spindulys
- Šios savybės leidžia jums suapvalinti kampus ant jūsų sienų.
- border-image-source
- Nurodo pradinio failo šaltinį, kuris bus naudojamas vietoj anksčiau apibrėžtų sienų stilių.
- sienos paveikslėlio dalis
- Atstovauja vidinius kompensacijas iš sienų vaizdo briaunų
- pasienio vaizdo plotis
- Nurodo ploto reikšmę savo sienos paveikslui.
- pasienio atvaizdo pradžia
- Nurodo sumą, kurią krašto vaizdų sritis tęsiasi už sienos dėžutės.
- border-image-ruožas
- Nurodo, kaip turėtų būti plytelės ar mastelio krašto vaizdų pusės ir vidurinės dalys.
- pasienio vaizdas
- Stenografinė nuosavybė visoms sienų atvaizdų savybėms.
Papildomos CSS3 savybės, susijusios su sienomis ir fonais
Kai lapelis pertraukiamas, kai pertraukiama pertrauka, stulpelio pertrauka eilutės pertraukai (esantiems elementams), lango apipavidalinimo-pertraukos savybė apibrėžia, kaip naujos langelės suvyniotos į sieną ir užpildymą. Fonai gali būti suskirstyti į keletą skaldytų langelių, naudojant šią nuosavybę.
Taip pat yra šešėlių nuosavybės, kuri gali būti naudojama pridėti šešėlių į lauko elementus.
Naudodamiesi CSS3, dabar galite lengvai nustatyti tinklalapį su keliais stulpeliais be lentelių arba sudėtingų div tagų struktūrų. Jūs tiesiog papasakotumėte naršyklę, kiek stulpelių turi būti kūno elementas ir kiek jų turėtų būti. Be to, galite pridėti ribas (taisykles), fono spalvas, apimančias stulpelio aukštį, o jūsų tekstas automatiškai eina per visus stulpelius.
CSS3 stulpeliai. Nurodykite stulpelių skaičių ir plotį
Yra trys naujos savybės , leidžiančios nustatyti stulpelių skaičių ir plotį:
- stulpelio plotis
- Apibrėžia pločio jūsų stulpelius. Tada naršyklė talpins tekstą, kad užpildyti erdvę su plačiomis stulpelėmis.
- stulpelių skaičius
- Nurodo stulpelių skaičių puslapyje. Tada naršyklė sukurs stulpelius pakankamai platus, kad tilptų į erdvę, bet tik nurodytą skaičių.
- stulpeliai
- Trumpalaikis turtas, kuriame galite nustatyti pločio ar skaičiaus (arba abiejų, bet retai prasmingų).
CSS3 stulpelių tarpai ir taisyklės
Tarpai ir taisyklės yra tarp stulpelių toje pačioje daugiapakopio scenarijaus. Spragos stumia stulpelius, tačiau taisyklės neužima vietos. Jei stulpelio taisyklė yra platesnė nei atotrūkis, ji sutampa su gretimais stulpeliais. stulpelių taisyklių ir tarpų yra penkios naujos savybės:
- stulpelio spraga
- Nurodo tarpų tarp stulpelių plotį.
- stulpelio taisyklė-spalva
- Nurodo taisyklės spalvą.
- stulpelio taisyklės stiliaus
- Nurodo taisyklės stilius (tvirtas, taškinis, dvigubas ir tt).
- stulpelio taisyklingumo plotis
- Nurodo taisyklės plotis.
- stulpelio taisyklė
- Stenografinė savybė, apibrėžianti visas tris stulpelio taisyklių savybes vienu metu.
CSS3 stulpelių pertraukos, apėjimo stulpeliai ir pildymo stulpeliai
Kolonėlės pertraukose naudojamos tos pačios CSS2 parinktys, kurios naudojamos nustatant puslapio turinio plyšius, tačiau turi tris naujas savybes: pertrauka iki , pertrauka po paskui ir pertrauka .
Kaip ir lentelėse, galite nustatyti elementus, skirtus stulpeliams, naudojant nuosavybės stulpelio spaną. Tai leidžia jums kurti antraštes, kurios apima kelis stulpelius, labiau panašius į laikraštį.
Pildymo stulpeliai nustato, kiek turinio bus kiekviename stulpelyje. Subalansuotieji stulpeliai bando įdėti tokį patį kiekį turinio kiekviename stulpelyje, o automatinis srautas talpina turinį tol, kol stulpelis bus pilnas, o tada eina į kitą.
Daugiau CSS3 funkcijų, kurios nėra įtrauktos į CSS2
CSS3 yra daug papildomų funkcijų, kurios CSS2 neegzistavo, įskaitant:
- CSS šablonų išdėstymo modulis ir CSS3 Tinklelio pozicionavimo modulis : tinklo su CSS kūrimas.
- CSS3 teksto modulis : suplanuokite tekstą ir netgi sukurkite piliakalnius su CSS.
- CSS3 spalvų modulis : dabar su nepermatomumu.
- Modelio dėžutės modelio pakeitimai : įtraukiama talpyklos nuosavybė, veikianti kaip IE žyma.
- CSS3 naudotojo sąsajos modulis : suteiks jums naujų žymeklių, atsakymų į veiksmus, privalomus laukus ir netgi elementų keitimo .
- Žiniasklaidos užklausos : žiniasklaidos užklausos leidžia jums daugiau lankstumo nustatant, kaip turėtų būti naudojamas stiliaus lapas. Pavyzdžiui, galite nustatyti stiliaus lapą, kuris skirtas tik rankiniams įrenginiams, kurių peržiūros sritis yra didesnė nei 20 m.
- CSS3 "Ruby" modulis : teikia paramą kalboms, kurios naudoja tekstą ruby, norint anotuoti dokumentus.
- CSS3 Paged Media modulis : dar didesnis palaikymas spausdintinėms medijoms (popieriui, skaidrėms ir kt.).
- Sukurtas turinys : "L" veikia antraštės ir poraštės, išnašos ir kitas turinys, sukurtas programiškai, ypač kalboms skirtoje medijoje.
- CSS3 Kalbėjimo modulis : pakeitimai garsinio CSS.