Erinevus CSS2 ja CSS3 vahel

Suurim erinevus CSS2 ja CSS3 on see, et CSS3 on jagatud erinevateks osadeks, nn moodulid. Kõik need moodulid liiguvad W3C kaudu soovitusprotsessi erinevates etappides. See protsess on teinud erinevate tootjate poolt CSS3 erinevate tükkide vastuvõtmise ja brauseris rakendamise palju lihtsamaks.

Kui võrrelda seda protsessi CSS2-ga juhtunuga, kus kõik esitati ühtse dokumendina koos kõigi Kaskaadiga stiililehed selles sisalduva teabe põhjal näete soovituse väiksemateks osadeks jaotamise eeliseid. Kuna iga mooduli kallal töötatakse eraldi, saavad arendajad CSS3 moodulite jaoks palju laiemat brauserituge.

Uued CSS3 valijad

CSS3 pakub mitmeid uusi võimalusi CSS-reeglite kirjutamiseks uute CSS-valijatega, samuti uue kombinaatori ja mõne uue pseudoelemendiga.

Uut atribuutide valijat on kolm:

• Atribuudi algus vastab täpselt:

  element [foo ^ = "riba"]

  Elemendil on atribuut nimega foo, mis algab tähega "riba" nt.
• Atribuudi lõpp lõpeb täpselt:

  element [foo $ = "riba"]

  Elemendil on atribuut nimega foo, mis lõpeb "ribaga" nt.
instagram viewer
• Atribuut sisaldab vastet:

  element [foo * = "riba"]

  Elemendil on atribuut helistas foo mis sisaldab stringi "riba".

Kasutusele on võetud 16 uut pseudoklassi:

• : juur
  • Dokumendi juurelement.
• : n-nd laps (n)
  • Kasutage seda täpsete algelementide sobitamiseks või vahelduvate vastete saamiseks muutujate abil.
• : n-viimane laps (n)
  • Sobitage täpsed lapse elemendid, loendades viimast.
• : n-tüüpi tüüp (n)
  • Sobitage õe-venna elemendid dokumendipuus enne seda sama nimega.
• : n-viimane tüüp-tüüp (n)
  • Sobitage õe-venna elemendid alt üles loendades sama nimega.
• :viimane laps
  • Sobita viimasega lapse element vanema kohta.
• : esimene tüüp
  • Sobitage seda tüüpi esimene õe-venna element.
• : tüüp-tüüp
  • Sobitage selle tüübi viimane õe-venna element.
• :ainuke laps
  • Sobitage element, mis on tema vanema ainus laps.
• : ainult tüüpi
  • Sobitage element, mis on ainus selle tüüp.
• :tühi
  • Sobitage element, millel pole lapsi (sh tekstisõlmed).
• : sihtmärk
  • Sobitage element, mis on viitava URI sihtmärk.
• :lubatud
  • Sobitage element, kui see on lubatud.
• : keelatud
  • Sobitage element, kui see on keelatud.
• : kontrollitud
  • Sobitage element, kui see on märgitud (raadionupp või märkeruut).
• : ei ole
  • Sobita siis, kui element ei ühti lihtsaga selektorid.

Seal on üks uus kombinator:

• elementA ~ elementB
  • Sobitage siis, kui element B järgneb kuskil elemendi A järel, mitte tingimata kohe.

Uued omadused

CSS3 tutvustas ka mitmeid uusi CSS-i omadusi. Paljud neist omadustest loovad visuaalseid stiile, mis seostaksid tõenäoliselt rohkem sellist graafikaprogrammi nagu Photoshop. Mõned neist, näiteks piiri raadius või kasti vari, on olnud olemas juba pärast CSS3 kasutuselevõttu. Teised, näiteks flexbox või isegi CSS Ruudustik on uuemad stiilid, mida peetakse endiselt sageli CSS3 täiendusteks.

CSS3-s pole kasti mudel muutunud. Kuid on palju uusi stiiliomadusi, mis aitavad teil oma kastide tausta ja piire kujundada.

Mitu taustapilti

Stiiliga taustkujutis, taustapositsioon ja taustakordus saate määrata mitu taustapilti, mis tuleb kasti üksteise peale kihistada. Esimene pilt on kasutajale lähim kiht, mille taha on maalitud järgmised. Kui on taustavärv, on see maalitud kõigi pildikihtide alla.

Uued taustastiili atribuudid

CSS3-s on ka mõned uued taustaomadused:

• taustklipp
• See omadus määrab, kuidas taustapilti tuleks lõigata. Vaikimisi on border-box, kuid seda saab muuta polsterduskastiks või sisukastiks.
• taust-päritolu
• See omadus määrab, kas taust tuleks asetada polsterduskasti, äärekasti või sisukasti.
• tausta suurus
• See omadus tähistab taustpildi suurus. See võimaldab teil sirutage väiksemaid pilte lehele sobivaks.

Olemasolevate taustastiili omaduste muudatused

Olemasolevatel tauststiili omadustel on ka mõned muudatused:

• taust-kordus
  • Sellel atribuudil on kaks uut väärtust - ruumi ja ümmargune. Tühik paigutab paanitud pildi kasti ühtlaselt, ilma et seda oleks lõigatud. Ümbermõõtab taustpildi nii, et see paaniks kasti mitu korda.
• taust-kinnitus
  • Lisatakse uus väärtus "local", nii et taust kerib koos elemendi sisuga, kui sellel elemendil on kerimisriba.
• taust
  • Lühikese tausta omadus lisab suuruse ja päritolu omadused.

CSS3 Border Properties

CSS3-s võivad piirid olla stiilid, millega oleme harjunud (täis-, topelt-, katkendjooned jne), või need võivad olla pilt. Lisaks toetab CSS3 ümardatud nurki. Äärispildid on huvitavad, kuna loote pildi kõigist neljast piirist ja ütlete seejärel CSS-ile, kuidas seda pilti oma piiridele rakendada.

Uued piiristiili atribuudid

CSS3-s on mõned uued ääreomadused:

• piiri raadius
• piir-ülemine-parem-raadius, piir-alt-paremale-raadius, piir-alt-vasakule-raadius, piir-ülemine-vasak-raadius
• Need omadused võimaldavad teil oma piiridel luua ümardatud nurki.
• piir-pilt-allikas
• Määrab pildi lähtefaili, mida kasutatakse juba määratletud äärisstiilide asemel.
• piir-pilt-viil
• Esitab sissepoole tehtud nihkeid pildi serva servadest.
• piiri-pildi laius
• Määrab teie piiripildi laiuse väärtuse.
• piir-pilt-algus
• Määrab summa, mille piiripildi ala ulatub üle piirikarbi.
• piir-pilt-venitada
• Määrab, kuidas piiripildi küljed ja keskosa peaksid olema paanitud või suurendatud.
• piir-pilt
• Kõigi piiripildi omaduste lühikirjeldus.

Ääriste ja taustaga seotud täiendavad CSS3 atribuudid

Kui karp on lehe, veeru või rea katkemise korral katki (sisemiste elementide puhul), kastikaunistus-purunemine atribuut määrab, kuidas uued lahtrid pakitakse äärise ja polsterdusega. Selle omaduse abil jagunevad taustad mitme purustatud kasti vahel.

Uus kast-vari vara lisab kasti elementidele varjud.

CSS3 abil saate nüüd hõlpsasti seadistada mitme veeruga veebilehe ilma tabeliteta või keerulisteta div sildistruktuurid. Lihtsalt ütlete brauserile, mitu veergu peaks kehaelement olema ja kui lai peaks olema. Lisaks saate lisada veeru kõrgusele ulatuvaid piire (reegleid) ja taustavärve ning teie tekst voolab automaatselt läbi kõigi veergude.

Määrake veergude arv ja laius

Uusi on kolm omadused mis võimaldavad teil määrata oma veergude arvu ja laiuse:

• veeru laius
  • Määrab veergude laiuse. Seejärel liigutab brauser teksti, et täita ruum nii laiade veergudega.
• veergude arv
  • Määrab lehe veergude arvu. Seejärel loob brauser veerud, mis sobivad ruumi piisavalt, kuid ainult teie määratud numbri.
• veerud
  • Lühikese omadus, kus saate määratleda kas laiuse või arvu (või mõlemad, kuid sellel on harva mõtet).

CSS3 veeru lüngad ja reeglid

Puudused ja reeglid paigutatakse samasse mitme veeruga stsenaariumi veergude vahele. Lüngad suruvad veerud laiali, kuid reeglid ei võta ruumi. Kui veerureegel on laiem kui selle vahe, kattub see külgnevate veergudega. Veergureeglite ja lünkade jaoks on viis uut atribuuti:

• veergude vahe
  • Määrab veergude vaheliste tühimike laiuse.
• veeru reegel-värv
  • Määrab reegli värvi.
• veeru-reegel-stiil
  • Määrab reegli stiili (tahke, täpiline, topelt jne).
• veeru reegel-laius
  • Määrab reegli laiuse.
• veeru reegel
  • Kiire omadus, mis määratleb kõik kolm veerureegli omadust korraga.

CSS3 veergude purunemine, veergude laiendamine ja veergude täitmine

Veerg pausid kasutavad samu CSS2 suvandeid, mida kasutati lehekülgede sisuliste katkestuste määratlemiseks, kuid millel on kolm uut omadust: enne murda, murdmineja sissemurdmine.

Nagu tabelite puhul, saate ka elemendid seada nii, et veerud ulatuksid atribuudiga column-span. See võimaldab teil luua pealkirju, mis hõlmavad mitut veergu rohkem nagu ajaleht.

Veergude täitmine otsustab, kui palju sisu igas veerus on. Tasakaalustatud veerud üritavad panna igasse veergu sama palju sisu, samal ajal kui automaatne voog lihtsalt sisustab sisu, kuni veerg on täis ja läheb siis järgmisse.

Rohkem funktsioone CSS3-s, mida pole CSS2-s

CSS3-s on palju täiendavaid funktsioone, mida CSS2-s ei olnud, sealhulgas:

• CSS-i mallide paigutusmoodul ja CSS3 Võrgu positsioneerimismoodul: Võrkude loomine CSS-iga.
• CSS3 tekstimoodul: Teksti ülevaade ja CSS-iga isegi varjukülgede loomine.
• CSS3 värvimoodul: Nüüd läbipaistmatusega.
• Karbimudeli muudatused: Sealhulgas a telk omadus, mis toimib nagu IE silt.
• CSS3 kasutajaliidese moodul: Teile uute kursorite andmine, vastused toimingutele, kohustuslikud väljad ja isegi elementide suuruse muutmine.
• Meediumipäringud: Meediapäringud võimaldavad teil stiililehe kasutamist paindlikumalt määratleda. Näiteks võite määratleda stiililehe, mis on mõeldud ainult pihuarvutitele, mille vaateava on suurem kui 20em.
• CSS3 Ruby moodul: Pakub tuge keeltele, mis kasutavad dokumentide märkimiseks tekstirubiini.
• CSS3 Paged Media moodul: Veelgi rohkem tuge lehitsetud meediumile (paber, kiled jms).
• Loodud sisu: Päiste ja jaluste, joonealuste märkide ja muu programmiliselt loodud sisu käitamine, eriti lehitsetud meedia jaoks.
• CSS3 kõnemoodul: Foneetilise CSS-i muudatused.