Erinevus CSS2 ja CSS3 vahel

CSS3 oluliste muudatuste mõistmine

Suurim erinevus CSS2 ja CSS3 vahel on see, et CSS3 on jagatud erinevateks osadeks, mida nimetatakse mooduliteks. Kõik need moodulid teevad W3C kaudu soovituste protsessi eri etappides. See protsess on palju lihtsam erinevate CSS3 osade heakskiitmiseks ja rakendamiseks erinevate tootjate poolt brauseris.

Kui võrrelda seda protsessi sellega, mis juhtus CSS2-ga, kus kõik esitati üheainsa dokumendina koos kõigi Cascading Style Sheetsi teabega, siis hakkate nägema eeliseid soovituste katkestamisel väiksemateks üksikuteks osadeks. Kuna iga moodulit töödeldakse individuaalselt, on meil CSS3 moodulite jaoks palju suurem brauseritugi.

Nagu iga uue ja muutuva spetsifikatsiooniga, kontrollige kindlasti oma CSS3-lehekülgi põhjalikult nii paljude brauserite kui ka operatsioonisüsteemide abil. Pea meeles, et eesmärk ei ole luua igas brauseris täpselt ühesuguseid veebisaite, vaid tagada, et kõik kasutatavad stiilid, sealhulgas CSS3-stiilid, oleksid suurepärased nende brauserites, mis neid toetavad, ja et need jäävad graatsiliselt vanadele brauseritele tagasi ära.

Uued CSS3 valijad

CSS3 pakub hulgaliselt uusi võimalusi, kuidas CSS-reegleid saab kirjutada uute CSS-valijatega, samuti uue kombinatooriumi ja mõne uue pseudoelemendiga.

Kolm uut atribuutide valijat:

• Atribuutu alguses sobib täpselt element [foo ^ = "bar"] Elemendil on atribuut foo, mis algab "bar" -ga, nt
• Atribuut lõpeb vastab täpselt elemendile [foo $ = "bar"] Elemendil on atribuut foo, mis lõpeb nurgaga, nt
• Atribuut sisaldab vastavat elementi [foo * = "bar"] Elemendil on atribuut foo, mis sisaldab stringi "bar" nt

16 uut pseudoklassi:

• : root
  • Dokumendi root element. HTML-is on see alati olemas.
• : nth-laps (n)
  • Kasutage seda täpsete vaskeelementide jaoks või kasuta muutujaid, et vaheldumisi sobitada.
• : n-see viimane laps (n)
  • Sobige täpseid vaskeelemente, mis loenduvad viimasest.
• : n-tüüpi (n)
  • Sobiva siblingu elemendid, millel on sama nimi enne dokumentide puu.
• : n-nda viimane-tüüpi (n)
  • Sama nimega sobitatud elemendid, mis loendavad altpoolt.
• :viimane laps
  • Sobige vanema lapse viimast elementi.
• : esimene tüüpi
  • Sobige selle tüüpi esimese vendli elementi.
• : viimane-tüüpi
  • Sobitage selle tüübi viimast vendluselementi.
• :ainuke laps
  • Sobige element, mis on tema vanema ainus laps.
• : ainult-tüüpi
  • Sobige elementi, mis on selle ainus tüüp.
• :tühi
  • Sobige elementi, millel pole lapsi (sh tekstikeskmeid).
• : sihtmärk
  • Sobige element, mis on viitava URI sihtmärk.
• :lubatud
  • Sobige elementi, kui see on lubatud.
• : keelatud
  • Sobige elementi, kui see on keelatud.
• : kontrollitud
  • Sobige element, kui see on märgitud (raadionupp või märkeruut).

• : ei (ega)
  • Sobita siis, kui element ei vasta lihtsatele valijatele .

Üks uus kombinator:

• elementA ~ elementB
  • Match kui elementB järgneb kuskile pärast elementiA, mitte tingimata kohe.

Uued omadused

CSS3 tutvustas ka mitmeid uusi CSS-i omadusi. Paljud neist omadustest olid visuaalsete stiilide loomine, mis tõenäoliselt seostuks graafikaprogrammiga nagu Photoshopiga. Mõned neist, nagu piiriraadius või kasti varju, on olnud umbes pärast sissejuhatust kui CSS3. Teised, nagu flexbox või isegi CSS Grid, on uuemad stiilid, mida sageli peetakse CSS3 lisanditeks.

CSS3-s ei ole kasti mudel muutunud. Kuid on hulgaliselt uusi stiili omadusi, mis aitavad teil oma kastide tausta ja piiri stiili kujundada.

Mitme taustaga maagid

Taustpildi, tausta-ja tausta-korduste stiilide abil saate määrata mitu taustapilti, mis asuvad kasti üksteise peale. Esimene pilt on kasutaja jaoks kõige lähemal asuv kiht, järgmiste värvidega on taolised. Kui on olemas taustavärv, on see kõikidest kujutiskihtidest maalitud.

Uued tausta stiili omadused

CSS3-s on ka mõned uued taustaomadused.

• taustaklipp
  • See omadus määrab, kuidas tuleks taustpildi kärpida. Vaikimisi on piirikast, kuid seda saab muuta padding kasti või sisukastiga.
• tausta päritolu
  • See omadus määrab, kas taust peaks paiknema padding box, border box või sisukasti.
• tausta suurus
  • See omadus võimaldab määrata taustpildi suuruse. See võimaldab teil lehe mahutamiseks venitada väiksemaid pilte.

Olemasolevate taustapildi omaduste muudatused

Olemasolevad tausta stiilide omadused on ka mõned muudatused:

• tausta korrata
  • Selle vara jaoks on kaks uut väärtust: tühik ja ümardus. Ruumi ruumid asetsevad plaadimaterjali pinnale ühtlaselt, ilma et need oleksid kinni jäänud. Taustpildi ümardamine taasesitab nii, et see kleebiks karbis terve hulga kordi.
• tausta-kinnitus
  • Lisatakse uus väärtus "kohalik", nii et taust saab elemendi sisuga kerida, kui sellel elemendil on kerimisriba.
• taustal
  • Taustavärvi omadus lisab suuruse ja päritolu omadused.

CSS3 piiriomadused

CSS3 piirides võivad olla stiilid, millega oleme harjunud (solid, double, dotted jne) või need võivad olla pildid. Lisaks pakub CSS3 võimalust ümardatud nurkade loomiseks. Piiril olevad pildid on huvitavad, kuna loote kõigi nelja piiri kujutise ja seejärel ütle CSS-i, kuidas seda pilti oma piiridesse rakendada.

Uue piiri stiili omadused

CSS3-s on mõned uued piiriomadused:

• piiriraadius
  • piir-top-right-raadius , piir-alt-parem-raadius , piir-alt-vasak-raadius , piir-top-vasak-raadius
  • Need omadused võimaldavad teil oma piiridel ümardatud nurki luua.
• border-image-source
  • Määrab juba määratletud kujunduselementide asemel kasutatava pildi lähtefaili.
• piiri kujutise viil
  • Esitatakse sissetulevad kompenseerimised piiripildist servadest
• border-image-width
  • Määrab piiri kujutise laiuse väärtuse.
• piiriülese pildi algusest peale
  • Määrab summa, mille piiri kujutise ala ulatub üle piirikarbist.
• border-image-venitada
  • Määrab, kuidas piiripildi küljed ja keskmised osad tuleks korrastada või vähendada.
• piiri-kujutis
  • Kõigi piiril kuvatavate omaduste säriaeg.

Täiendavad CSS3-omadused, mis on seotud piiride ja taustadega

Kui lahtris katkestatakse lehe paus, veeru katkestus rida katkestamiseks (inline elementide jaoks) määratleb kast-dekoreerimis-purunemise omadus, kuidas uued lahtrid ümbritsetakse piiri ja padjaga. Tausta saab jagada mitu purunenud kasti kasutades seda omadust.

Samuti on varjualuste vara, mida saab kasutada varjude lisamiseks kasti elementidele.

CSS3 abil saate hõlpsalt luua veebilehe, millel on mitmed veergud ilma tabeliteta või keerukate div-tag-struktuuridega. Sa lihtsalt ütlete brauserile, kui palju veerge peaks kehaelement olema ja kui laiad need peaksid olema. Lisaks võite lisada piirid (reeglid), taustavärvid, mis ulatuvad veeru kõrgusele ja teie tekst voolab automaatselt kõikidest veergudest.

CSS3 veerud - määrake veerude arv ja laius

Seal on kolm uut omadust, mis võimaldavad teil määrata veergude arvu ja laiuse.

• veeru laius
  • Määratleb laiuse, mida teie veerud peaksid olema. Seejärel voogib brauser teksti, et täita ruumi laiade veergudega.
• veeru arv
  • Määrab veerude arvu lehel. Seejärel loob brauser ruumi mahutamiseks piisavalt laia ruumi, kuid ainult teie määratud number.
• veerud
  • Lühiajaline vara, kus saate määratleda kas laiuse või arvu (või mõlemad, kuid harva mõtet).

CSS3 veeru lüngad ja reeglid

Puudused ja reeglid asetatakse sama kolmekolmnenda stsenaariumi vahel veergude vahel. Vahed tõmbavad veerge välja, kuid eeskirjad ei võta ruumi. Kui veeru reegel on laiem kui selle tühik, kattub see külgnevates veergudes. Veeru reeglite ja tühikute jaoks on viis uut omadust:

• veeru-lõhe
  • Määrab tühikute laiuse veergude vahel.
• veeru reegli värv
  • Määrab reegli värvi.
• veeru reegli stiil
  • Määratleb reegli stiili (tahke, punktiirjoon, topelt jne).
• veeru reegli laius
  • Määratleb reegli laiuse.
• veeru reegel
  • Stenforti omadus, mis määratleb korraga kõik kolm veeru reegli omadust.

CSS3 veergude piirangud, ülekandekolonnid ja täidetavad veerud

Veergude vaheajad kasutavad samu CSS2-valikuid, mida kasutatakse kirjavahetuse katkestuste määratlemiseks, kuid kolme uue omadusega: katkestamine , katkemine ja katkemine sees .

Nagu tabelite puhul, saate määrata elemendid veergude ristlõikele reavahetuse omadustega. See võimaldab teil luua pealkirju, mis hõlmavad mitut veergu rohkem nagu ajaleht.

Veergude täitmine määrab, kui palju sisu igas veerus on. Tasakaalustatud veerud püüavad sisestada sama palju sisu igas veerus, kui automaatne sisu voogab, kuni veerg on täis, ja siis läheb järgmisele.

Lisafunktsioonid CSS3-s, mis ei sisaldu CSS2-s

CSS3-s on palju lisafunktsioone, mida CSS2-s ei olnud, sealhulgas:

• CSS-i mallide paigutuse moodul ja CSS3 võrgu positsioneerimismoodul : CSS-võrkude loomine.
• CSS3 Tekst moodul : saate teksti ja isegi luua tilk-varje koos CSS.
• CSS3 värvimoodul : nüüd läbipaistmatusega.
• Kastmudeli muudatused : sisaldab märgendit, mis toimib IE-i märgendina.
• CSS3 kasutajaliidese moodul : uute kursorite, tegevuste vastuste, kohustuslike väljade ja isegi elementide suuruse muutmine .
• Meediumipäringud : meediumipäringud võimaldavad sul paindlikkust stiililehe kasutamise määratlemisel. Näiteks võite määratleda stiililehe, mis on mõeldud ainult pihuarvutitele, mille vaateala on suurem kui 20em.
• CSS3 Ruby moodul : toetab keeli, mis dokumenteerivate annotatsioonide jaoks kasutab tekstilist rubyini.
• CSS3-lehel olev meediumimoodul : saatjatud meediumile (paber, kiled jne) veelgi tuge.
• Loodud sisu : L töötab päised ja jalused, joonealused märkused ja muu sisu, mis on programmeeritult loodud, eriti levitatud meediumile.
• CSS3 kõne moodul : muudatused helisiseses CSS-s.