Atšķirība starp CSS2 un CSS3

Lielākā atšķirība starp CSS2 un CSS3 ir tas, ka CSS3 ir sadalīts dažādās sadaļās, ko sauc moduļi. Katrs no šiem moduļiem dažādos ieteikumu procesa posmos iziet cauri W3C. Šis process ir ievērojami atvieglojis dažādu ražotāju pieņemtus un pārlūkprogrammā ieviestus dažādus CSS3 gabalus.

Ja jūs salīdzināt šo procesu ar to, kas notika ar CSS2, kur viss tika iesniegts kā viens dokuments ar visiem Kaskādes stila lapas tajā esošo informāciju, jūs sākat saskatīt priekšrocības, ko sniedz ieteikuma sadalīšana mazākos, atsevišķos gabalos. Tā kā katrs modulis tiek strādāts atsevišķi, izstrādātājiem ir daudz plašāks CSS3 moduļu pārlūka atbalsta klāsts.

Jauni CSS3 selektori

CSS3 piedāvā vairākus jaunus veidus, kā rakstīt CSS kārtulas ar jauniem CSS selektoriem, kā arī jaunu kombinatoru un dažus jaunus pseidoelementus.

Ir trīs jauni atribūtu atlasītāji:

• Atribūtu sākums precīzi sakrīt:

  elements [foo ^ = "josla"]

  Elementam ir atribūts, ko sauc par foo, kas sākas ar "bar", piem.
• Atribūtu beigas precīzi sakrīt
  instagram viewer
  :

  elements [foo $ = "bar"]

  Elementam ir atribūts, ko sauc par foo, kas beidzas ar "bar", piem.
• Atribūts satur atbilstību:

  elements [foo * = "josla"]

  Elementam ir atribūts sauca foo kurā ir virkne "josla".

Ir ieviestas 16 jaunas pseidoklases:

• : sakne
  • Dokumenta saknes elements.
• : n -tais bērns (n)
  • Izmantojiet to, lai saskaņotu precīzus pakārtotos elementus, vai izmantojiet mainīgos, lai iegūtu mainīgas atbilstības.
• : n-pēdējais bērns (n)
  • Saskaņojiet precīzus bērnu elementus, skaitot no pēdējā.
• : n-tā veida (n)
  • Saskaņojiet brāļa vai māsas elementus ar to pašu nosaukumu dokumentu kokā.
• : n-pēdējā veida tips (n)
  • Saskaņojiet brāļu un māsu elementus ar tādu pašu nosaukumu, skaitot no apakšas.
• :Pēdējais bērns
  • Sakrīt ar pēdējo bērna elements vecāku.
• : pirmā veida
  • Saskaņojiet pirmo šāda veida brāļu un māsu elementu.
• : pēdējā veida
  • Atbilst pēdējā veida brāļa / māsas elementam.
• :vienīgais bērns
  • Atbilst elementam, kas ir tā vecāku vienīgais bērns.
• : tikai veida
  • Saskaņojiet elementu, kas ir vienīgais šāda veida elements.
• : tukšs
  • Atbilst elementam, kuram nav bērnu (ieskaitot teksta mezglus).
• : mērķis
  • Saskaņojiet elementu, kas ir novirzošā URI mērķis.
• : iespējots
  • Saskaņojiet elementu, kad tas ir iespējots.
• : invalīds
  • Saskaņojiet elementu, kad tas ir atspējots.
• : pārbaudīts
  • Saskaņojiet elementu, kad tas ir atzīmēts (poga vai izvēles rūtiņa).
• : nav (-as)
  • Saskaņot, ja elements neatbilst vienkāršajam atlasītāji.

Ir viens jauns kombinators:

• elementsA ~ elementsB
  • Sakrīt, kad elements B seko kaut kur aiz elementa A, ne vienmēr uzreiz.

Jauni rekvizīti

CSS3 arī ieviesa vairākus jaunus CSS rekvizītus. Daudzi no šiem īpašumiem rada vizuālos stilus, kas, visticamāk, vairāk asociējas ar tādu grafikas programmu kā Photoshop. Daži no tiem, piemēram, robežas rādiuss vai lodziņa ēna, ir bijuši kopš CSS3 ieviešanas. Citi, piemēram, flexbox vai pat CSS Režģis ir jaunāki stili, kurus joprojām bieži uzskata par CSS3 papildinājumiem.

CSS3 kastes modelis nav mainījies. Bet ir virkne jaunu stila īpašību, kas var jums palīdzēt veidot jūsu kastes fonu un apmales.

Vairāki fona attēli

Izmantojot fona attēla, fona pozīcijas un fona atkārtojuma stilus, lodziņā varat norādīt vairākus fona attēlus, kas tiks kārtoti viens virs otra. Pirmais attēls ir slānis, kas ir vistuvāk lietotājam, un aizmugurē ir krāsoti šādi. Ja ir fona krāsa, tā ir nokrāsota zem visiem attēla slāņiem.

Jaunas fona stila īpašības

CSS3 ir arī daži jauni fona rekvizīti:

• fona klips
• Šis rekvizīts nosaka fona attēla apgriešanas veidu. Noklusējums ir apmales lodziņš, taču to var mainīt uz polsterējuma lodziņu vai satura lodziņu.
• fona izcelsme
• Šis rekvizīts nosaka, vai fons ir jāievieto polsterējuma lodziņā, apmales lodziņā vai satura lodziņā.
• fona lielums
• Šis īpašums norāda fona attēla lielums. Tas ļauj jums izstiept mazākus attēlus, lai tie atbilstu lapai.

Esošo fona stila rekvizītu izmaiņas

Ir arī dažas izmaiņas esošajos fona stila rekvizītos:

• fona atkārtojums
  • Šim īpašumam ir divas jaunas vērtības - telpa un raunds. Atstarpe vienmērīgi izvieto flīzēto attēlu kastē, nenogriežot. Apaļš pārveido fona attēlu tā, lai tas lodziņā vairākas reizes nofilmētos.
• fona piestiprināšana
  • Tiek pievienota jauna vērtība "local", lai fons ritinātu ar elementa saturu, kad šim elementam ir ritjosla.
• fons
  • Fona stenogrāfijas īpašums papildina lieluma un izcelsmes īpašības.

CSS3 robežu rekvizīti

CSS3 apmales var būt stili, pie kuriem esam pieraduši (cietie, dubultie, svītrotie utt.), Vai arī tie var būt attēls. Turklāt CSS3 atbalsta noapaļotus stūrus. Robežu attēli ir interesanti, jo jūs izveidojat visu četru robežu attēlu un pēc tam CSS pastāstāt, kā šo attēlu piemērot savām apmalēm.

Jaunas robežas stila īpašības

CSS3 ir daži jauni robežas rekvizīti:

• robežas rādiuss
• robeža - augšējais - labais - rādiuss, robeža-apakšējais-labais-rādiuss, robeža-apakšējais-kreisais-rādiuss, robežas augšējais kreisais rādiuss
• Šīs īpašības ļauj jums izveidot noapaļotus stūrus uz jūsu robežām.
• border-image-source
• Norāda attēla avota failu, kas jāizmanto jau definēto apmales stilu vietā.
• apmale-attēls-šķēle
• Attēlo iekšējās nobīdes no attēla apmales malām.
• robežas attēla platums
• Definē apmales attēla platuma vērtību.
• border-image-outset
• Norāda summu, kādu robežas attēla apgabals sniedzas ārpus robežas lodziņa.
• robeža-attēls-stiept
• Nosaka, kā apmales attēla sānos un vidusdaļās jābūt ietvertām vai mērogotām.
• robežas attēls
• Visu robežu attēla rekvizītu stenogrāfijas īpašība.

Papildu CSS3 īpašības, kas saistītas ar robežām un foniem

Kad lodziņš ir salauzts lapas pārtraukuma, kolonnu vai līniju pārtraukuma gadījumā (iekšējiem elementiem), kaste-dekorēšana-pārtraukums rekvizīts nosaka, kā jaunās kastes tiek ietītas ar apmali un polsterējumu. Izmantojot šo īpašību, foni tiek sadalīti vairākās sadalītās kastēs.

Jauns kaste-ēna īpašums lodziņa elementiem pievieno ēnas.

Izmantojot CSS3, tagad jūs varat viegli izveidot tīmekļa lapu ar vairākām kolonnām bez tabulām vai sarežģīti div tagu struktūras. Jūs vienkārši norādāt pārlūkprogrammai, cik kolonnu vajadzētu būt ķermeņa elementam un cik platām tām jābūt. Turklāt jūs varat pievienot apmales (kārtulas) un fona krāsas, kas aptver kolonnas augstumu, un jūsu teksts automātiski plūst cauri visām kolonnām.

Definējiet kolonnu skaitu un platumu

Ir trīs jauni īpašības kas ļauj noteikt kolonnu skaitu un platumu:

• kolonnas platums
  • Nosaka kolonnu platumu. Pēc tam pārlūkprogramma plūdīs tekstu, lai aizpildītu vietu ar tik platām kolonnām.
• kolonnu skaits
  • Definē kolonnu skaitu lapā. Pēc tam pārlūkprogramma izveidos kolonnas, kas ir pietiekami platas, lai ietilptu telpā, bet tikai jūsu norādīto numuru.
• kolonnas
  • Īsrakstības īpašība, kurā jūs varat definēt vai nu platumu, vai skaitli (vai abus, bet tam reti ir jēga).

CSS3 kolonnu nepilnības un noteikumi

Spraugas un kārtulas tiek ievietotas starp kolonnām vienā un tajā pašā vairāku kolonnu scenārijā. Spraugas izspiedīs kolonnas, taču noteikumi neaizņem vietu. Ja kolonnu kārtula ir plašāka par tās atstarpi, tā pārklāsies blakus esošajās kolonnās. Kolonnu kārtulām un atstarpēm ir pieci jauni rekvizīti:

• kolonnu sprauga
  • Nosaka atstarpju platumu starp kolonnām.
• kolonna-noteikums-krāsa
  • Definē kārtulas krāsu.
• kolonnas noteikuma stils
  • Definē kārtulas stilu (vienkrāsains, punktēts, divkāršs utt.).
• kolonnas noteikuma platums
  • Definē kārtulas platumu.
• kolonnas noteikums
  • Stenogrāfijas rekvizīts, kas vienlaikus nosaka visas trīs kolonnu kārtulas īpašības.

CSS3 kolonnu pārtraukumi, aptverošās kolonnas un kolonnu aizpildīšana

Kolonna pārtraukumos tiek izmantotas tās pašas CSS2 opcijas, kas tiek izmantotas, lai definētu lappušu satura pārtraukumus, bet ar trim jaunām īpašībām: pirms pārtraukuma, pārtraukums, un ielaušanās.

Tāpat kā ar tabulām, jūs varat iestatīt elementus, lai aptvertu kolonnas ar kolonnas laiduma īpašību. Tas ļauj jums izveidot virsrakstus, kas vairākās slejās aptver vairāk kā avīze.

Aizpildot kolonnas, tiek noteikts, cik daudz satura būs katrā kolonnā. Līdzsvarotās kolonnas mēģina katrā kolonnā ievietot tādu pašu satura daudzumu, kamēr automātiskais saturs tikai iepludina saturu, līdz kolonna ir pilna un pēc tam pāriet uz nākamo.

Vairāk CSS3 funkciju, kas nav iekļautas CSS2

CSS3 ir daudz papildu funkciju, kuru nebija CSS2, tostarp:

• CSS veidņu izkārtojuma modulis un CSS3 režģa pozicionēšanas modulis: Režģu izveide ar CSS.
• CSS3 teksta modulis: Iezīmējiet tekstu un pat izveidojiet ēnas, izmantojot CSS.
• CSS3 krāsu modulis: Tagad ar necaurredzamību.
• Izmaiņas kastes modelī: Ieskaitot a telts rekvizīts, kas darbojas kā IE tags.
• CSS3 lietotāja saskarnes modulis: Jauni kursori, atbildes uz darbībām, obligātie lauki un pat elementu izmēru maiņa.
• Multivides vaicājumi: Mediju vaicājumi ļauj jums noteikt lielāku elastību, nosakot stila lapas izmantošanu. Piemēram, jūs varētu definēt stila lapu, kas paredzēta tikai rokas ierīcēm, kuru skata logs ir lielāks par 20em.
• CSS3 Rubīna modulis: Nodrošina atbalstu valodām, kurās dokumentu anotēšanai tiek izmantots teksta rubīns.
• CSS3 Paged Media modulis: Lai iegūtu vēl lielāku atbalstu lapotajos materiālos (papīrs, caurspīdīgās filmas utt.).
• Ģenerēts saturs: Galvenes un kājenes, zemsvītras piezīmes un cits programmatiski ģenerēts saturs, īpaši lapotajiem multivides failiem.
• CSS3 runas modulis: Izmaiņas fonētiskajā CSS.