Skirtumas tarp CSS2 ir CSS3

Didžiausias skirtumas tarp CSS2 ir CSS3 yra tai, kad CSS3 buvo padalintas į skirtingus skyrius, vadinamas moduliai. Kiekvienas iš šių modulių keliauja per W3C įvairiais rekomendacijų proceso etapais. Šis procesas žymiai palengvino įvairių gamintojų CSS3 dalių priėmimą ir įgyvendinimą naršyklėje.

Jei palyginsite šį procesą su tuo, kas nutiko su CSS2, kur viskas buvo pateikta kaip vienas dokumentas su visais Kaskados stiliaus lapai joje esančią informaciją, jūs pradėsite įžvelgti rekomendacijos suskaidymo į mažesnes, atskiras dalis privalumus. Kadangi prie kiekvieno modulio dirbama atskirai, kūrėjai naudojasi daug platesniu naršyklės palaikymu CSS3 moduliams.

Nauji CSS3 selektoriai

CSS3 siūlo keletą naujų būdų, kaip parašyti CSS taisykles naudojant naujus CSS parinkiklius, taip pat naują kombinatorių ir keletą naujų pseudoelementų.

Yra trys nauji atributų parinkikliai:

• Atributo pradžia tiksliai atitinka:

  elementas [foo ^ = "juosta"]

  Elementas turi atributą, vadinamą foo, kuris prasideda „juosta“, pvz.
instagram viewer
• Atributo pabaiga tiksliai atitinka:

  elementas [foo $ = "juosta"]

  Elementas turi atributą, vadinamą foo, kuris baigiasi „juosta“, pvz.
• Atribute yra atitikmuo:

  elementas [foo * = "juosta"]

  Elementas turi atributas paskambino foo kurioje yra eilutė „juosta“.

Buvo pristatyta 16 naujų pseudo klasių:

• : šaknis
  • Pagrindinis dokumento elementas.
• : n-tas vaikas (n)
  • Naudokite tai, kad atitiktų tikslius antrinius elementus, arba naudokite kintamuosius, kad gautumėte kintamas atitiktis.
• : n-tas paskutinis vaikas (n)
  • Suderinkite tikslius vaiko elementus, skaičiuojant nuo paskutinio.
• : n-tasis tipas (n)
  • Suderinkite brolių ir seserų elementus su tuo pačiu pavadinimu prieš jį dokumentų medyje.
• : n-tas paskutinis tipo tipas (n)
  • Suderinkite brolių ir seserų elementus su tuo pačiu pavadinimu, skaičiuojant nuo apačios.
• :Paskutinis vaikas
  • Prilygti paskutiniam vaiko elementas tėvų.
• : pirmojo tipo
  • Suderinkite pirmąjį tokio tipo elementą.
• : paskutinio tipo
  • Derinkite paskutinį tokio tipo elementą.
• :vienintelis vaikas
  • Suderinkite elementą, kuris yra vienintelis jo tėvų vaikas.
• : tik tipo
  • Suderinkite elementą, kuris yra vienintelis tokio tipo elementas.
• :tuščia
  • Suderinkite elementą, kuriame nėra vaikų (įskaitant teksto mazgus).
• : taikinys
  • Suderinkite elementą, kuris yra nukreipiančio URI tikslas.
• :įjungtas
  • Pritaikykite elementą, kai jis įgalintas.
• : neįgalus
  • Pritaikykite elementą, kai jis išjungtas.
• : patikrinta
  • Pritaikykite elementą, kai jis pažymėtas (akutė arba žymimasis laukelis).
• : nėra
  • Derinti, kai elementas neatitinka paprasto selektoriai.

Yra vienas naujas kombinatorius:

• elementasA ~ elementasB
  • Sutampa, kai elementas B seka kažkur po elemento A, nebūtinai iškart.

Naujos savybės

CSS3 taip pat pristatė keletą naujų CSS ypatybių. Daugelis šių savybių sukuria vaizdinius stilius, kurie greičiausiai labiau susietų su tokia grafikos programa kaip „Photoshop“. Kai kurie iš jų, pavyzdžiui, krašto spindulys ar langelio šešėlis, egzistuoja nuo pat CSS3 įvedimo. Kiti, pavyzdžiui, „flexbox“ ar net CSS Tinklelis yra naujesni stiliai, kurie vis dar dažnai laikomi CSS3 papildymais.

CSS3 dėžutės modelis nepasikeitė. Tačiau yra daugybė naujų stiliaus savybių, kurios gali padėti suformuoti langelių foną ir kraštus.

Keli fono vaizdai

Naudodami fono paveikslėlio, fono padėties ir fono pakartojimo stilius, laukelyje galite nurodyti kelis fono paveikslėlius, kurie bus sluoksniuojami vienas ant kito. Pirmasis vaizdas yra arčiausiai vartotojo esantis sluoksnis, o už jų yra nupiešti šie. Jei yra fono spalva, ji nudažyta žemiau visų vaizdo sluoksnių.

Naujos fono stiliaus savybės

CSS3 taip pat yra keletas naujų fono ypatybių:

• fono klipas
• Ši savybė apibrėžia, kaip turėtų būti kirptas fono paveikslėlis. Numatytasis yra rėmelio laukelis, tačiau jį galima pakeisti į užpildymo laukelį arba turinio langelį.
• fonas-kilmė
• Ši ypatybė nustato, ar fonas turėtų būti dedamas į užpildymo langelį, rėmelį ar turinio langelį.
• fono dydis
• Ši savybė rodo fono paveikslėlio dydis. Tai leidžia jums ištieskite mažesnius vaizdus, ​​kad tiktų puslapiui.

Esamų fono stiliaus ypatybių pakeitimai

Taip pat yra keletas esamų fono stiliaus savybių pakeitimų:

• fonas pakartoti
  • Yra dvi naujos šios nuosavybės vertės: vietos ir apvalus. Erdvė išklotą vaizdą tolygiai talpina dėžutėje, nekarpoma. Apvalus pakeičia fono vaizdą taip, kad jis langelyje išklotų daugybę kartų.
• prisirišimas prie fono
  • Pridedama nauja reikšmė „local“, kad fonas slinktų su elemento turiniu, kai tame elemente yra slinkties juosta.
• fonas
  • Foninio trumpinio ypatybė prideda dydžio ir kilmės savybes.

CSS3 Pasienio ypatybės

CSS3 kraštai gali būti įprasti stiliai (vientisi, dvigubi, brūkšniuoti ir kt.) Arba jie gali būti vaizdas. Be to, CSS3 palaiko suapvalintus kampus. Kraštiniai vaizdai yra įdomūs, nes sukuriate visų keturių kraštinių vaizdą ir nurodote CSS, kaip pritaikyti tą vaizdą savo kraštuose.

Naujos krašto stiliaus ypatybės

CSS3 yra keletas naujų krašto ypatybių:

• sienos spindulys
• sienos-viršuje-dešinėje-spindulys, sienos-apačios-dešinės-spindulio, sienos-apačios-kairės spindulys, sienos-viršuje-kairėje spindulys
• Šios savybės leidžia jums suapvalinti kampus ant sienų.
• riba-vaizdas-šaltinis
• Nurodo vaizdo šaltinio failą, kuris bus naudojamas vietoj jau apibrėžtų krašto stilių.
• riba-vaizdas-gabalas
• Atvaizduoja vidinius poslinkius nuo krašto vaizdo kraštų.
• kraštas-vaizdo plotis
• Apibrėžia krašto atvaizdo pločio vertę.
• border-image-outset
• Nurodo sumą, kurią krašto atvaizdo sritis tęsia už rėmelio.
• riba-vaizdas-ruožas
• Apibrėžia, kaip kraštinės arba vidurinės paveikslo dalys turėtų būti išklotos plytelėmis ar masteliais.
• riba-vaizdas
• Visų krašto atvaizdo ypatybių trumpinio ypatybė.

Papildomos CSS3 ypatybės, susijusios su sienomis ir fonais

Kai langas sulaužomas pertraukos puslapyje, stulpelio pertraukoje arba eilutės pertraukoje (įterptiems elementams), dėžutės dekoravimas-pertrauka ypatybė apibrėžia, kaip naujos dėžės suvyniojamos su apvadais ir paminkštinimais. Naudojant šią savybę fonai suskirstomi į keletą sulaužytų dėžių.

Naujas dėžutė-šešėlis nuosavybė prideda šešėlių prie langelio elementų.

Naudodami CSS3, dabar galite lengvai nustatyti tinklalapį su keliais stulpeliais be lentelių arba sudėtingą div žymos struktūras. Paprasčiausiai nurodykite naršyklei, kiek stulpelių turėtų turėti kūno elementas ir koks jis turėtų būti platus. Be to, galite pridėti kraštines (taisykles) ir fono spalvas, kurios apima stulpelio aukštį, ir jūsų tekstas automatiškai tekės per visus stulpelius.

Apibrėžkite stulpelių skaičių ir plotį

Yra trys nauji savybes kurie leidžia apibrėžti stulpelių skaičių ir plotį:

• stulpelio plotis
  • Nurodo stulpelių plotį. Tada naršyklė tekins tekstą, kad erdvė būtų užpildyta tokio pločio stulpeliais.
• stulpelių skaičius
  • Nurodo stulpelių skaičių puslapyje. Tada naršyklė sukurs pakankamai platus stulpelius, kad tilptų į erdvę, bet tik jūsų nurodytą skaičių.
• stulpeliai
  • „Shorthand“ ypatybė, kurioje galite apibrėžti plotį arba skaičių (arba abu, bet tai retai kada turi prasmę).

CSS3 stulpelio spragos ir taisyklės

Tame pačiame kelių stulpelių scenarijuje tarp stulpelių yra spragos ir taisyklės. Tarpai išstums stulpelius, tačiau taisyklės neužima vietos. Jei stulpelio taisyklė yra platesnė už jos spragą, ji sutaps su gretimais stulpeliais. Yra penkios naujos stulpelių taisyklių ir spragų ypatybės:

• stulpelio tarpas
  • Nurodo tarpų tarp stulpelių plotį.
• stulpelio taisyklės spalva
  • Nurodo taisyklės spalvą.
• stulpelio taisyklės stilius
  • Nurodo taisyklės stilių (vientisas, punktyras, dvigubas ir kt.).
• stulpelio taisyklės plotis
  • Nurodo taisyklės plotį.
• stulpelio taisyklė
  • Trumpas ypatumas, apibrėžiantis visas tris stulpelio taisyklės ypatybes vienu metu.

CSS3 stulpelių pertraukos, tarpiniai stulpeliai ir užpildymo stulpeliai

Stulpelis pertraukos naudoja tas pačias CSS2 parinktis, kurios naudojamos apibrėžiant puslapių puslapių pertraukas, tačiau turi tris naujas ypatybes: lūžis prieš, lūžisir įsilaužimas.

Kaip ir lentelėse, galite nustatyti elementus, kad jie apimtų stulpelius su „column-span“ ypatybe. Tai leidžia jums sukurti antraštes, apimančias kelis stulpelius, labiau panašius į laikraštį.

Užpildydami stulpelius nusprendžiama, kiek turinio bus kiekviename stulpelyje. Subalansuotuose stulpeliuose bandoma įdėti tą patį turinio kiekį į kiekvieną stulpelį, o automatinis tiesiog perduoda turinį, kol stulpelis bus pilnas, o tada pereis prie kito.

Daugiau CSS3 funkcijų, kurių nėra CSS2

CSS3 yra daugybė papildomų funkcijų, kurių nebuvo CSS2, įskaitant:

• CSS šablonų išdėstymo modulis ir CSS3 tinklelio padėties nustatymo modulis: Tinklelių kūrimas naudojant CSS.
• CSS3 teksto modulis: Apibūdinkite tekstą ir net sukurkite šešėlius naudodami CSS.
• CSS3 spalvų modulis: Dabar su neskaidrumu.
• Dėžutės modelio pakeitimai: Įskaitant a palapinė nuosavybė, kuri veikia kaip IE žyma.
• CSS3 vartotojo sąsajos modulis: Suteikiami nauji žymekliai, atsakymai į veiksmus, būtini laukai ir netgi elementų dydžio keitimas.
• Žiniasklaidos užklausos: Žiniasklaidos užklausos leidžia jums daugiau lankstumo apibrėžiant, kaip turėtų būti naudojamas stiliaus lapas. Pavyzdžiui, galite apibrėžti stiliaus lapą, skirtą tik delniniams įrenginiams, kurių peržiūros sritis yra didesnė nei 20em.
• CSS3 rubino modulis: Teikia paramą kalboms, kurios naudoja tekstinį rubiną dokumentams anotuoti.
• CSS3 „Paged Media“ modulis: Jei norite dar daugiau palaikyti puslapių laikmenas (popierių, skaidres ir kt.).
• Sugeneruotas turinys: Rodomos antraštės ir poraštės, išnašos ir kitas programiškai generuojamas turinys, ypač puslapių laikmenoms.
• CSS3 Kalbos modulis: Fonetinio CSS pakeitimai.