Saturs
- Izpratne par galvenajām CSS3 izmaiņām
- Jauni CSS3 atlasītāji
- Jaunas īpašības
- Vairāki fona attēli
- Jaunas fona stila īpašības
- Esošo fona stila rekvizītu izmaiņas
- CSS3 apmales rekvizīti
- Jaunas apmales stila īpašības
- Papildu CSS3 rekvizīti, kas saistīti ar apmalēm un foniem
- Definējiet kolonnu skaitu un platumu
- CSS3 kolonnu nepilnības un noteikumi
- CSS3 sleju pārtraukumi, plašās kolonnas un aizpildīšanas kolonnas
- Citas CSS3 funkcijas, kas nav iekļautas CSS2
Izpratne par galvenajām CSS3 izmaiņām
Lielākā atšķirība starp CSS2 un CSS3 ir tā, ka CSS3 ir sadalīts dažādās sadaļās, kuras sauc par moduļi. Katrs no šiem moduļiem dažādos veidos sniedz ieteikumus, izmantojot W3C. Šis process ir ievērojami atvieglojis dažādu CSS3 vienību pieņemšanu un ieviešanu pārlūkā dažādiem ražotājiem.
Ja jūs salīdzināt šo procesu ar CSS2 notikušo, kur viss tika iesniegts kā viens dokuments ar visu tajā esošo informāciju par Cascading Style Sheets, jūs sākat redzēt priekšrocības, kas rodas, sadalot ieteikumu mazākos, atsevišķos gabalos. Tā kā katrs no moduļiem tiek strādāts individuāli, izstrādātāji bauda daudz plašāku pārlūka atbalstu CSS3 moduļiem.
Jauni CSS3 atlasītāji
CSS3 piedāvā vairākus jaunus veidus, kā rakstīt CSS noteikumus ar jauniem CSS atlasītājiem, kā arī jaunu kombinatoru un dažus jaunus pseidoelementus.
Ir trīs jauni atribūtu atlasītāji:
- Atribūta sākums precīzi atbilst:
elements [foo ^ = "josla"]Elementam ir atribūts ar nosaukumu foo, kas sākas ar “joslu”, piem.
- Atribūts, kas beidzas precīzi:
elements [foo $ = "bar"]Elementam ir atribūts ar nosaukumu foo, kas beidzas ar “joslu”, piem.
- Atribūts satur sakritību:
elements [foo * = "josla"]Elementam ir atribūts ar nosaukumu foo kas satur virkni “josla”.
Ir ieviestas 16 jaunas pseido klases:
- : sakne
- Dokumenta saknes elements.
- : n-tais bērns (n)
- Izmantojiet to, lai atbilstu precīziem bērnu elementiem, vai izmantojiet mainīgos, lai iegūtu mainīgas sakritības.
- : n-tais pēdējais bērns (n)
- Atbilst precīziem bērnu elementiem, skaitot no pēdējā.
- : n-tais tips (n)
- Pievienojiet brāļa vai māsas elementus ar tādu pašu vārdu pirms tā dokumentu kokā.
- : n-tais pēdējais (n)
- Saskaņojiet brāļu un māsu elementus ar tādu pašu vārdu, sākot no apakšas.
- :Pēdējais bērns
- Saskaņojiet vecāku pēdējo bērnu elementu.
- : pirmā tipa
- Atbilst pirmajam brāļa un māsas elementam.
- : pēdējā tipa
- Atbilst pēdējam šāda veida brāļa un māsas elementam.
- :vienīgais bērns
- Saskaņojiet elementu, kas ir tā vecāku vienīgais bērns.
- : tikai tipa
- Saskaņojiet elementu, kas ir vienīgais tā tips.
- : tukšs
- Sakritiet elementu, kurā nav bērnu (ieskaitot teksta mezglus).
- : mērķis
- Sakritiet elementu, kas ir atsauces URI mērķis.
- : ieslēgts
- Saskaņojiet elementu, kad tas ir iespējots.
- : invalīds
- Pieskaņojiet elementu, kad tas ir atspējots.
- : pārbaudīts
- Atbilst elementam, kad tas ir atzīmēts (radio poga vai izvēles rūtiņa).
- : nav (s)
- Sakritējiet, ja elements neatbilst vienkāršajiem atlasītājiem.
Ir viens jauns kombinētājs:
- elementsA ~ elementsB
- Sakritējiet, kad elements B seko kaut kur aiz elementa A, ne vienmēr uzreiz.
Jaunas īpašības
CSS3 ieviesa arī vairākus jaunus CSS rekvizītus. Daudzi no šiem īpašumiem rada vizuālos stilus, kas, iespējams, 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, pastāv jau kopš CSS3 ieviešanas. Citi, piemēram, flexbox vai pat CSS Grid, ir jaunāki stili, kurus joprojām bieži uzskata par CSS3 papildinājumiem.
CSS3 kastes modelis nav mainījies. Bet ir arī virkne jaunu stila īpašību, kas var palīdzēt jums stilizēt lodziņu fonu un apmales.
Vairāki fona attēli
Izmantojot fona attēla, fona stāvokļa un fonu atkārtošanas stilus, lodziņā varat norādīt vairākus fona attēlus, kas viens otram jānoslāņo. Pirmais attēls ir lietotājam vistuvākais slānis, un nākamie ir nokrāsoti aiz muguras. Ja ir fona krāsa, tā ir nokrāsota zem visiem attēla slāņiem.
Jaunas fona stila īpašības
CSS3 ir arī dažas jaunas fona īpašības:
- fona klips
- Šis īpašums nosaka, kā fona attēls ir jāapgriež. Pēc noklusējuma ir apmales lodziņš, bet to var mainīt uz polsterējuma lodziņu vai satura lodziņu.
- fona izcelsme
- Šis īpašums nosaka, vai fons jāievieto polsterējuma lodziņā, apmales lodziņā vai satura lodziņā.
- fona izmērs
- Šis īpašums norāda fona attēla lielumu. Tas ļauj izstiept mazākus attēlus, lai tie ietilptu lapā.
Esošo fona stila rekvizītu izmaiņas
Esošajos fona stila īpašumos ir arī dažas izmaiņas:
- fona atkārtot
- Šim īpašumam ir divas jaunas vērtības - telpa un raunds. Atstarpi starp flīzēto attēlu vienmērīgi ievieto kastē, to neapcērpjot. Kārta mainīs fona attēlu tā, lai lodziņā tas tiktu flīzēts vairākas reizes.
- fona pielikums
- Pievienota jauna vērtība "lokāls", lai fons ritinātu ar elementa saturu, kad šim elementam ir ritjosla.
- fons
- Fona saīsinātais īpašums palielina izmēra un izcelsmes īpašības.
CSS3 apmales rekvizīti
CSS3 malas var būt stili, pie kuriem mēs esam pieraduši (vienveidīgs, dubults, raustīts utt.), Vai arī tie var būt attēls. Turklāt CSS3 atbalsta noapaļotus stūrus. Apmales attēli ir interesanti, jo jūs izveidojat visu četru apmalju attēlu un pēc tam pastāstāt CSS, kā piemērot šo attēlu uz jūsu apmalēm.
Jaunas apmales stila īpašības
CSS3 ir daži jauni apmales rekvizīti:
- robežas rādiuss
- rādiuss robeža augšējā labajā pusē, rādiuss apmale-labais-labais, rādiuss robeža-apakšējais-kreisais, rādiuss robeža-augšējais-kreisais
- Šīs īpašības ļauj jums izveidot noapaļotus stūrus uz jūsu robežām.
- robežas attēla avots
- Norāda izmantojamo attēla avota failu jau definēto apmales stilu vietā.
- apmales attēla šķēle
- Attēlo ieejas nobīdes no apmales attēla malām.
- attēla malu platums
- Nosaka apmales attēla platuma vērtību.
- robežas attēla sākums
- Norāda summu, par kādu apmales attēla laukums pārsniedz apmales lodziņu.
- robežas attēla izstiepšana
- Nosaka, kā apmales attēla malas un vidusdaļas jāsakārto vai jākoriģē.
- robežas attēls
- Saīsināts īpašums visiem apmales attēla rekvizītiem.
Papildu CSS3 rekvizīti, kas saistīti ar apmalēm un foniem
Ja lodziņš ir salauzts lapas pārtraukumā, kolonnas pārtraukumā vai līnijas pārtraukumā (iekšējiem elementiem), kaste-rotājums-pārtraukums īpašums nosaka, kā jaunās kastes tiek iesaiņotas ar apmali un polsterējumu. Foni tiek sadalīti starp vairākām salauztām kastēm, izmantojot šo īpašumu.
Jauns kaste-ēna rekvizīts lodziņu 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žģītas 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 vajadzētu 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 rekvizīti, kas ļauj jums noteikt kolonnu skaitu un platumu:
- kolonnas platums
- Nosaka kolonnu platumu. Pēc tam pārlūks pārplūdīs teksts, aizpildot vietu ar tik platām kolonnām.
- kolonnu skaits
- Nosaka kolonnu skaitu lapā. Pēc tam pārlūks izveidos kolonnas, kas ir pietiekami plašas, lai ietilptu telpā, bet tikai ar jūsu norādīto numuru.
- kolonnas
- Saīsināts īpašums, kurā var noteikt platumu vai numuru (vai abus, bet tam reti ir jēga).
CSS3 kolonnu nepilnības un noteikumi
Nepilnības un kārtulas tiek ievietotas starp kolonnām tajā pašā vairāku kolonnu scenārijā. Nepilnības atdalīs kolonnas, bet noteikumi neaizņem vietu. Ja kolonnas noteikums ir platāks par tā atstarpi, tas pārklājas ar blakus esošajām kolonnām. Kolonnu kārtulām un nepilnībām ir pieci jauni rekvizīti:
- kolonnu sprauga
- Nosaka spraugu platumu starp kolonnām.
- kolonna-noteikums-krāsa
- Nosaka kārtulu krāsu.
- kolonnu noteikumu stils
- Nosaka kārtulu stilu (ciets, punktots, dubultā utt.).
- kolonnas noteikuma platums
- Nosaka kārtula platumu.
- kolonnu noteikums
- Saīsināts īpašums, kas vienlaikus definē visas trīs kolonnu kārtulu īpašības.
CSS3 sleju pārtraukumi, plašās kolonnas un aizpildīšanas kolonnas
Kolonnu pārtraukumos tiek izmantotas tās pašas CSS2 iespējas, kuras izmanto lappušu satura pārtraukumu noteikšanai, bet ar trim jaunām īpašībām: pārtraukums pirms tam, pārtraukums, un ielaušanās.
Tāpat kā tabulās, jūs varat iestatīt elementus, lai kolonnas būtu ar span-span īpašību. Tas ļauj jums izveidot virsrakstus, kas vairākās slejās ir līdzīgi laikrakstam.
Sleju aizpildīšana izlemj, cik daudz satura būs katrā kolonnā. Sabalansētās kolonnas mēģina ievietot vienādu satura daudzumu katrā kolonnā, kamēr automātiskais saturs tikai plūst iekšā, līdz kolonna ir pilna un pēc tam pāriet uz nākamo.
Citas CSS3 funkcijas, kas nav iekļautas CSS2
CSS3 ir daudz papildu funkciju, kas neeksistēja CSS2, ieskaitot:
- CSS veidnes izkārtojuma modulis un CSS3 režģa pozicionēšanas modulis: Režģu izveidošana ar CSS.
- CSS3 teksta modulis: Teksta kontūra un pat izveidojiet ēnas, izmantojot CSS.
- CSS3 krāsu modulis: Tagad ar necaurredzamību.
- Kārbas modeļa izmaiņas: Ieskaitot telts īpašumu, kas darbojas kā IE tags.
- CSS3 lietotāja interfeisa modulis: Jaunu kursoru piešķiršana, reakcija uz darbībām, nepieciešamajiem laukiem un pat elementu mainīšana.
- Multivides vaicājumi: Multivides vaicājumi dod jums lielāku elastību, nosakot, kā jāizmanto stila lapa. Piemēram, jūs varētu definēt stila lapu, kas paredzēta tikai tām plaukstdatoriem, kuru skatlogs ir lielāks par 20em.
- CSS3 Ruby modulis: Nodrošina atbalstu valodām, kuras dokumentu anotēšanai izmanto tekstuālo rubīnu.
- CSS3 Paged Media modulis: Vēl lielākam atbalstam lappušu materiāliem (papīrs, caurspīdīgās filmas utt.).
- Ģenerēts saturs: Notiek galvenes un kājenes, zemsvītras piezīmes un cits programmatiski izveidots saturs, īpaši lapu medijiem.
- CSS3 runas modulis: Izmaiņas fonētiskajā CSS.
