Skirtumas tarp CSS2 ir CSS3

Pagrindinių CSS3 pakeitimų supratimas

TurinysIšskleisti

• Pristatyti nauji CSS3 selektoriai
• Naujos CSS ypatybės CSS3
• Keli fono vaizdai
• Naujos fono stiliaus ypatybės
• Esamų fono stiliaus ypatybių pakeitimai
• CSS3 naujos kraštinės savybės ir stiliai
• Naujos kraštinės stiliaus ypatybės
• Daugiau kraštinių ir fono ypatybių
• Naujos stulpelio numerio ir pločio nustatymo savybės
• CSS3 stulpelių spragos ir taisyklės
• CSS3 naujos stulpelių laužymo parinktys
• Daugiau naujų CSS3 funkcijų

Didžiausias skirtumas tarp CSS2 ir CSS3 yra tai, kad CSS3 buvo padalintas į skirtingas dalis, vadinamas moduliai . Kiekvienas iš šių modulių patenka į W3C įvairiais rekomendacijų teikimo proceso etapais. Dėl šio proceso skirtingi gamintojai galėjo daug lengviau priimti ir įdiegti naršyklėje įvairias CSS3 dalis.

Jei palyginsite šį procesą su tuo, kas įvyko su CSS2, kur viskas buvo pateikta kaip vienas dokumentas su visais Kaskadiniai stiliaus lapai joje esančią informaciją, pradėsite matyti rekomendacijos suskaidymo į mažesnes atskiras dalis pranašumus. Kadangi su kiekvienu moduliu dirbama atskirai, kūrėjai naudojasi daug platesniu CSS3 modulių naršyklės palaikymu.

Nauji CSS3 selektoriai

CSS3 siūlo keletą naujų būdų raš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 turi atributą foo, kuris prasideda 'bar', pvz. Atributo pabaiga tiksliai atitinka:|_+_|Elementas turi atributą foo, kuris baigiasi 'bar', pvz. Atribute yra atitiktis:|_+_|Elementas turi atributas paskambino foo kurioje yra eilutė „juosta“.

Buvo pristatyta 16 naujų pseudoklasių:

:root
• Pagrindinis dokumento elementas.
:nth-child(n)
• Naudokite tai, kad atitiktumėte tikslius antrinius elementus arba naudokite kintamuosius, kad gautumėte pakaitalus.
:nth-paskutinis vaikas(n)
• Suderinkite tikslius antrinius elementus, skaičiuojant nuo paskutinio.
:n-to tipo (n)
• Suderinkite brolių elementus su tuo pačiu pavadinimu prieš jį dokumentų medyje.
:nth-paskutinis tipo(n)
• Suderinkite brolių elementus su tuo pačiu pavadinimu, skaičiuojant nuo apačios.
:Paskutinis vaikas
• Suderinkite paskutinį vaiko elementas iš tėvų.
:pirmasis tipo
• Suderinkite pirmąjį šio tipo elementą.
:paskutinis tipo
• Suderinkite paskutinį to tipo brolio elementą.
:vienintelis vaikas
• Suderinkite elementą, kuris yra vienintelis antrinis elementas.
:tik tipo
• Suderinkite elementą, kuris yra vienintelis tokio tipo.
:tuščia
• Suderinkite elementą, kuris neturi antrinių elementų (įskaitant teksto mazgus).
:target
• Suderinkite elementą, kuris yra nukreipiančiojo URI tikslas.
:įjungtas
• Suderinkite elementą, kai jis įjungtas.
: išjungtas
• Suderinkite elementą, kai jis išjungtas.
: patikrinta
• Suderinkite elementą, kai jis pažymėtas (atrinkimo mygtukas arba žymimasis laukelis).
:ne
• Suderinkite, kai elementas neatitinka paprasto selektoriai .

Yra vienas naujas kombinatorius:

elementasA ~ elementasB
• Atitikimas, kai elementas B eina kažkur po elemento A, nebūtinai iš karto.

Naujos ypatybės

CSS3 taip pat pristatė keletą naujų CSS savybių. Daugelis šių savybių sukuria vaizdinius stilius, kurie greičiausiai labiau asocijuojasi su tokiomis grafikos programomis kaip Photoshop . Kai kurie iš jų, pavyzdžiui, kraštinės spindulys arba langelio šešėlis, buvo naudojami nuo CSS3 įvedimo. Kiti, pavyzdžiui, „flexbox“ ar net CSS Grid yra naujesni stiliai, kurie vis dar dažnai laikomi CSS3 priedais.

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

Keli fono vaizdai

Naudodami fono paveikslėlio, fono padėties ir fono pasikartojimo stilius, galite nurodyti kelis fono vaizdus, ​​kurie bus išdėstyti vienas ant kito laukelyje. Pirmasis vaizdas yra arčiausiai naudotojo esantis sluoksnis, o už jo nupiešti kiti. Jei yra fono spalva, ji nudažyta po visais vaizdo sluoksniais.

Naujos fono stiliaus ypatybės

Taip pat yra keletas naujų CSS3 fono ypatybių:

fono klipas
• Ši savybė apibrėžia, kaip turi būti nukirptas fono vaizdas. Numatytasis yra kraštinės laukelis, bet jį galima pakeisti į užpildymo laukelį arba turinio laukelį.
fono kilmė
• Ši ypatybė nustato, ar fonas turi būti dedamas į užpildymo laukelį, kraštinės laukelį ar turinio laukelį.
fono dydžio
• Ši savybė nurodo fono paveikslėlio dydis . Tai leidžia jums ištempkite mažesnius vaizdus, ​​kad tilptų į puslapį .

Esamų fono stiliaus ypatybių pakeitimai

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

fono kartojimas
• Yra dvi naujos šios nuosavybės vertės – erdvė ir apvalus . Tarpas tolygiai paskirsto išklotą vaizdą dėžutėje be apkarpymo. Apvalus pakeičia fono paveikslėlio mastelį taip, kad laukelyje jis būtų išklotas visą skaičių kartų.
fonas-priedas
• Pridedama nauja reikšmė „local“, kad fonas slinktų kartu su elemento turiniu, kai tame elemente yra slinkties juosta.
fone
• Fono stenografijos ypatybė prideda dydžio ir kilmės ypatybes.

CSS3 sienų ypatybės

CSS3 kraštinės gali būti stiliai, prie kurių esame įpratę (vientisas, dvigubas, brūkšninis ir t. t.), arba tai gali būti vaizdas. Be to, CSS3 palaiko užapvalintus kampus. Kraštinių vaizdai yra įdomūs, nes sukuriate visų keturių kraštinių vaizdą ir tada nurodote CSS, kaip pritaikyti tą vaizdą kraštinėms.

Naujos kraštinės stiliaus ypatybės

CSS3 yra keletas naujų kraštinių savybių:

pasienio spindulys
• kraštinė-viršus-dešinė-spindulys , kraštinė-apačia-dešinė-spindulys , kraštinė-apačia-kairysis spindulys , kraštinė-viršus-kairysis-spindulys
• Šios savybės leidžia sukurti užapvalintus kraštinių kampus.
border-image-source
• Nurodo vaizdo šaltinio failą, kuris bus naudojamas vietoj jau nustatytų kraštinių stilių.
border-image-slice
• Atstovauja į vidų nukreiptus poslinkius nuo kraštinių vaizdo kraštų.
kraštinė-vaizdo plotis
• Apibrėžia kraštinės vaizdo pločio reikšmę.
border-image-outset
• Nurodo, kiek kraštinės vaizdo sritis tęsiasi už kraštinės laukelio.
kraštinė-vaizdas-tempimas
• Apibrėžia, kaip kraštinės vaizdo pusės ir vidurinės dalys turi būti išklotos plytelėmis arba pakeistos.
kraštinė-vaizdas
• Visų kraštinių vaizdo ypatybių santrumpa.

Papildomos CSS3 ypatybės, susijusios su kraštinėmis ir fonais

Kai langelis sulaužomas puslapio, stulpelio ar eilutės lūžio metu (eilutinių elementų atveju), dėžutė-dekoravimas-pertrauka ypatybė apibrėžia, kaip naujos dėžės apvyniotos kraštinėmis ir užpildu. Naudojant šią savybę, fonai dalijami į kelias sulaužytas dėžes.

Naujas dėžutė-šešėlis ypatybė prideda šešėlių prie dėžutės elementų.

Naudodami CSS3 dabar galite lengvai nustatyti tinklalapį su keliais stulpeliais be lentelių ar sudėtingų div žymų struktūros. Jūs paprasčiausiai nurodote naršyklei, kiek stulpelių turėtų turėti kūno elementas ir kokio pločio jie turėtų būti. Be to, galite pridėti kraštines (taisykles) ir fono spalvas, apimančias stulpelio aukštį, o jūsų tekstas automatiškai tekės per visus stulpelius.

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

Yra trys nauji savybių leidžia nustatyti stulpelių skaičių ir plotį:

stulpelio pločio
• Apibrėžiamas jūsų stulpelių plotis. Tada naršyklė pateks tekstą, kad užpildytų erdvę tokio pločio stulpeliais.
stulpelių skaičius
• Apibrėžia stulpelių skaičių puslapyje. Tada naršyklė sukurs pakankamai plačius stulpelius, kad tilptų į vietą, bet tik jūsų nurodytą skaičių.
stulpelius
• Sutrumpinta savybė, kurioje galite apibrėžti plotį arba skaičių (arba abu, bet tai retai prasminga).

CSS3 stulpelių spragos ir taisyklės

Tame pačiame kelių stulpelių scenarijuje tarp stulpelių yra tarpų ir taisyklių. Tarpai išstums stulpelius, bet taisyklės neužima vietos. Jei stulpelio taisyklė yra platesnė už jos tarpą, ji perdengs gretimus stulpelius. Yra penkios naujos stulpelių taisyklių ir spragų savybės:

stulpelis-tarpelis
• Apibrėžiamas tarpų tarp stulpelių plotis.
stulpelis-taisyklė-spalva
• Apibrėžia taisyklės spalvą.
stulpelio-taisyklės stilius
• Apibrėžia taisyklės stilių (vientisas, taškinis, dvigubas ir tt).
stulpelis-taisyklė-plotis
• Apibrėžia taisyklės plotį.
stulpelis-taisyklė
• Trumpoji ypatybė, apibrėžianti visas tris stulpelių taisyklės ypatybes vienu metu.

CSS3 stulpelių pertraukos, apimantys stulpelius ir stulpelių užpildymas

Stulpelis pertraukos naudoja tas pačias CSS2 parinktis, kurios buvo naudojamos puslapių turinio pertraukoms apibrėžti, tačiau turi tris naujas ypatybes: pertrauka-prieš , pertrauka po , ir įsilaužti į vidų .

Kaip ir lentelėse, galite nustatyti elementus, kad jie apimtų stulpelius naudodami stulpelių span savybę. Tai leidžia jums sukurti antraštes, apimančias kelis stulpelius, panašias į laikraštį.

Stulpelių užpildymas lemia, kiek turinio bus kiekviename stulpelyje. Subalansuotuose stulpeliuose į kiekvieną stulpelį bandoma įdėti tą patį kiekį turinio, o automatiškai tiesiog įkeliamas turinys, kol stulpelis prisipildo, o tada pereina prie kito.

Daugiau CSS3 funkcijų, kurios neįtrauktos į CSS2

Yra daug papildomų CSS3 funkcijų, kurių nebuvo CSS2, įskaitant:

CSS šablono išdėstymo modulis ir CSS3 Grid padėties nustatymo modulis: tinklelių kūrimas naudojant CSS. CSS3 teksto modulis: Nubrėžkite tekstą ir netgi 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: pateikiami nauji žymekliai, atsakymai į veiksmus, privalomi laukai ir netgi keičiamas elementų dydis. Žiniasklaidos užklausos: Žiniasklaidos užklausos suteikia daugiau lankstumo nustatant, 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 20 em. CSS3 Ruby modulis: palaiko kalbas, kuriose dokumentams komentuoti naudojamas tekstinis rubinas. CSS3 Paged Media modulis: dar labiau palaiko puslapių laikmeną (popierių, skaidres ir kt.). Sugeneruotas turinys: antraštės ir poraštės, išnašos ir kitas programiškai generuojamas turinys, ypač skirtas puslapių laikmenai. CSS3 kalbos modulis: garsinio CSS pakeitimai.