Izpratne par galvenajām izmaiņām CSS3
Lielākā atšķirība starp CSS2 un CSS3 ir tā, ka CSS3 ir sadalīta dažādās sadaļās, ko sauc par moduļiem. Katrs no šiem moduļiem veic caur W3C dažādos ieteikuma procesa posmos. Šis process daudz vienkāršoja dažādu CSS3 elementu pieņemšanu un ieviešanu dažādu ražotāju pārlūkprogrammā.
Ja jūs salīdzināt šo procesu ar to, kas notika ar CSS2, kur viss tika iesniegts kā viens dokuments ar visu Cascading Style Sheets informāciju tajā, jūs sākat redzēt priekšrocības, sadalot ieteikumu uz augšu mazākos atsevišķos gabalos. Tā kā katrs no moduļiem tiek apstrādāts individuāli, mums ir daudz plašāks pārlūka atbalsts CSS3 moduļiem.
Tāpat kā jebkurā jaunā un mainīgajā specifikācijā, pārliecinieties, ka rūpīgi pārbaudāt savas CSS3 lapas tikpat daudzās pārlūkprogrammās un operētājsistēmās, cik vien iespējams. Atcerieties, ka mērķis nav izveidot tādas pašas tīmekļa lapas katrā pārlūkprogrammā, bet lai nodrošinātu, ka visi jūsu izmantotie stili, tostarp CSS3 stili, izskatās lieliski to pārlūkprogrammu vidū, kas tos atbalsta un ka tie graciozi atpaliek vecākiem pārlūkiem, kas ne.
Jauni CSS3 atlasītāji
CSS3 piedāvā virkni jaunu veidu, kā jūs varat rakstīt CSS noteikumus ar jauniem CSS atlasītājiem, kā arī jaunu kombinatoru un dažus jaunus pseidoptikātus.
Trīs jauni atribūtu atlasītāji:
- Atribūtu sākums precīzi atbilst elementam [foo ^ = "bar"] Elementam piemīt atribūts foo, kas sākas ar "bar", piemēram
- Atribūtu derīguma termiņš precīzi atbilst elementam [foo $ = "bar"] Elementam piemīt atribūts foo, kas beidzas ar "bar", piemēram
- Atribūts satur atbilstības elementu [foo * = "bar"] Elementam piemīt atribūts foo, kas satur string "bar", piemēram
16 jaunas pseidoklases:
- : saknes
- Dokumenta saknes elements. HTML tā vienmēr ir.
- : n-bērns (n)
- Izmantojiet šo, lai atbilstu precīziem bērnu elementiem vai izmantotu mainīgos lielumus, lai iegūtu mainīgas atbilstības.
- : n-pēdējais bērns (n)
- Pielāgojiet precīzus bērnu elementus, skaitot no pēdējā.
- : n-veida (n)
- Pirms dokumenta kokā līdzināsiet dzimtajiem elementiem ar tādu pašu nosaukumu.
- : n-pēdējais no tipa (n)
- Atbilstoši brāļa elementi ar tādu pašu nosaukumu, kas sakrīt no apakšas.
- :Pēdējais bērns
- Atbilst vecāka bērna elementam.
- : pirmā tipa
- Saskaņojiet šī tipa pirmo dzimšanas elementu.
- : pēdējais no tipa
- Saskaņojiet pēdējā šī tipa brāļa elementu.
- :vienīgais bērns
- Atrodiet elementu, kas ir vienīgais vecāka bērns.
- : tikai tipa
- Atrodiet elementu, kas ir vienīgais šāda veida elements.
- : tukšs
- Satura elementu, kuram nav bērnu (ieskaitot tekstu mezglus).
- : mērķis
- Atbilstiet elementu, kas ir norādošā URI mērķis.
- : iespējots
- Atbilst elementam, kad tas ir iespējots.
- : invalīds
- Atbilstiet elementu, kad tas ir atspējots.
- : pārbaudīts
- Atzīmējiet elementu, kad tas ir atzīmēts (radio poga vai izvēles rūtiņa).
- : nav (-s)
- Veiciet atbilstību, ja elements neatbilst vienkāršajiem selektoriem .
Viens jauns kombinators:
- elementsA ~ elementsB
- Atbilstiet, kad elementsB seko kaut kur pēc elementa, bet ne obligāti uzreiz.
Jaunas īpašības
CSS3 arī ieviesa vairākas jaunas CSS īpašības. Daudzas no šīm īpašībām bija radīt vizuālos stilus, kas, visticamāk, būtu saistoši grafikas programmai, piemēram, Photoshop. Daži no tiem, piemēram, robežu rādiuss vai kastes ēna, ir bijuši aptuveni kopš ieviešanas, ja CSS3. Citi, piemēram, flexbox vai pat CSS režģis, ir jaunāki stili, kas joprojām tiek uzskatīti par CSS3 papildinājumiem.
CSS3 kastīte nav mainījies. Bet ir daudz jaunu stila rekvizītu, kas var palīdzēt jums veidot fona un kastītes robežas.
Vairāki fondi I mages
Izmantojot fona attēlu, fona stāvokli un fona atkārtotu stilu, jūs varat norādīt vairākus fona attēlus, kas kārbā ir kārtībā. Pirmais attēls ir slānis, kas ir vistuvāk lietotājam, un tie ir noklāti aiz aizmugures. Ja ir fona krāsa, tā ir nokrāsota zem visiem attēlu slāņiem.
Jauni fonta stilu rekvizīti
CSS3 failos ir arī jaunas fona rekvizīti.
- fona klips
- Šis īpašums nosaka, kā fona attēls jāapgriež. Noklusējums ir robežas lodziņš, taču to var mainīt uz polsterēšanas kastes vai satura lodziņu.
- fona izcelsmi
- Šis īpašums nosaka, vai fons ir jāatrodas polsterēšanas lodziņā, robežas lodziņā vai satura lodziņā.
- fona izmērs
- Šis īpašums ļauj norādīt fona attēla izmēru. Tas ļauj jums izstiepties mazākus attēlus, lai tie atbilstu lapai.
Izmaiņas pašreizējā fona stila rekvizītos
Pastāv arī dažas izmaiņas fona stila rekvizītos:
- fona atkārtojums
- Šim īpašumam ir divas jaunas vērtības: atstarpe un apaļa. Tukšajā telpā flīžu tēlu vienmērīgi ievieto kastē, nepagriežot to. Kārta resetē fona attēlu tā, ka tas lodziņā tiks izklāts daudzkārt.
- fona piestiprinājums
- Pievienota jauna vērtība "local", lai fons ritinātu ar elementa saturu, kad šim elementam ir ritjosla.
- fons
- Fons saīsināts īpašums papildina izmēra un izcelsmes īpašības.
CSS3 robežas īpašības
CSS3 ietvaros var būt stili, ar kuriem mēs esam izmantoti (cieta, dubultā, punktveida utt.) Vai arī tie var būt attēls. Turklāt CSS3 nodrošina iespēju veidot noapaļotus stūrus. Robežu attēli ir interesanti, jo izveidojat visu četru robežu attēlu un pēc tam paziņojat CSS, kā piemērot šo attēlu jūsu robežām.
Jaunas robežas stila īpašības
CSS3 versijā ir dažas jaunas robežas īpašības:
- robežas rādiuss
- robeža-augšējais labais rādiuss , robeža-apakšējais-labais rādiuss , robeža-apakšā-kreisais rādiuss , robeža-augšējais kreisais rādiuss
- Šīs īpašības ļauj jums noapaļot stūrus uz jūsu robežām.
- border-image-source
- Norāda attēla avota failu, kas tiks izmantots jau definētu robežu stilu vietā.
- robežas-attēla šķēle
- Pārveido iekšējos nobīdes no robežas attēla malām
- robežas-attēla platums
- Norāda robežas attēla platuma vērtību.
- robežas-attēla sākumā
- Norāda summu, kuru robežas attēla apgabals pārsniedz robežas lodziņu.
- robežas-image-stiept
- Norāda, kā malas un vidusdaļas no malas jāpārklāj vai jāaprēķina.
- robežas attēls
- Stenogrāfija visiem robežu attēla rekvizītiem.
Papildu CSS3 īpašības, kas saistītas ar robežām un fona attēliem
Ja lappušu pārtraukumā tiek izlauzta kaste, kolonnas pārtraukums attiecībā uz līnijas pārtraukumu (attiecībā uz inline elementiem), lodziņu apdares-pārtraukuma īpašība nosaka, kā jaunās kastes ir ietītas ar robežu un polsterējumu. Fonus var sadalīt starp vairākām šķelto kastēm, izmantojot šo īpašumu.
Ir arī kastes ēnu īpašums, ko var izmantot, lai pievienotu ēnas kastes elementiem.
Ar CSS3 tagad varat ērti izveidot tīmekļa lapu ar vairākām slejām bez tabulām vai sarežģītām div tagu struktūrām. Jūs vienkārši pastāstiet pārlūkprogrammai, cik daudz kolonnu ir ķermeņa elementam un cik plašs tiem vajadzētu būt. Plus, jūs varat pievienot robežas (noteikumus), fona krāsas, kas aptver kolonnas augstumu, un jūsu teksts automātiski plūst pa visām kolonnām.
CSS3 kolonnas - definējiet sleju skaitu un platumu
Ir trīs jaunas īpašības, kas ļauj jums noteikt sleju skaitu un platumu.
- ailes platums
- Definē platumu, kurai vajadzētu būt kolonnām. Tad pārlūkprogramma plūs tekstu, lai aizpildītu atstarpi ar platām kolonnām.
- kolonnu skaits
- Nosaka kolonnu skaitu lapā. Pārlūkprogramma pēc tam izveidos kolonnas, kas ir pietiekami platākas, lai ietilptu telpā, bet tikai norādīto numuru.
- kolonnas
- Īstermiņa īpašums, kur jūs varat definēt vai nu platumu vai numuru (vai abus, bet tas reti nozīmē).
CSS3 sleju nepilnības un noteikumi
Trūkumi un noteikumi tiek novietoti starp kolonnām vienā un tajā pašā daudzkanālu scenārijā. Blakus būs izlauzt kolonnas, bet noteikumi neaizņem nekādu vietu. Ja slejas noteikums ir plašāks nekā tas ir atstarojums, tas pārklās blakus esošās slejas. kolonnu noteikumiem un nepilnībām ir piecas jaunas īpašības:
- kolonna-atstarpe
- Definē atstarpju platumu starp kolonnas.
- sleja-rule-krāsa
- Definē noteikuma krāsu.
- kolonnas noteikuma stils
- Definē noteikuma stilu (cietais, punktveida, dubultā utt.).
- sleja-noteikuma platums
- Definē noteikuma platumu.
- sleja noteikums
- Stenogrāfija, kas definē visus trīs kolonnu noteikuma rekvizītus vienlaikus.
CSS3 kolonnu pārtraukumi, aptverošās kolonnas un aizpildīšanas kolonnas
Kolonnu pārtraukumos tiek izmantotas tās pašas CSS2 opcijas, kuras izmanto, lai definētu lappušu satura pārtraukumus, bet ar trim jaunām īpašībām: pārtraukums pirms , pārtraukums un iekšējais sadalījums .
Tāpat kā ar tabulām, jūs varat iestatīt elementus, kas aptver kolonnas, izmantojot sleju span īpašumu. Tas ļauj jums izveidot virsrakstus, kas aptver vairākas kolonnas vairāk kā avīzi.
Sleju aizpildīšana nosaka, cik daudz satura katrā slejā būs. Līdzsvarotās kolonnas mēģina ievietot vienādu satura daudzumu katrā slejā, kamēr auto tikai plūsmu saturu, līdz kolonna ir pilna, un pēc tam iet uz nākamo.
Citas funkcijas CSS3, kas nav iekļautas CSS2
CSS3 satur daudz papildu funkcijas, kas CSS2 neeksistēja, tostarp:
- CSS veidņu izkārtojuma modulis un CSS3 režģa pozicionēšanas modulis : tīkla veidošana ar CSS.
- CSS3 Teksta modulis : izklāsta tekstu un pat izveido pilienu ēnas ar CSS.
- CSS3 krāsu modulis : tagad ar necaurredzamību.
- Izmaiņas kastes modelī : iekļauj marķiera īpašumu, kas darbojas kā IE taga.
- CSS3 lietotāja interfeisa modulis : dodot jums jaunus kursorus, atbildes uz darbībām, nepieciešamos laukus un pat elementu mainīšanu .
- Mediju vaicājumi : multivides vaicājumi ļauj jums lielāku elastību, nosakot, kā jāizmanto stilu tabula. Piemēram, jūs varētu definēt stila lapu, kas ir paredzēta tikai portatīvajām ierīcēm, kuru skata laukums ir lielāks par 20 mēmiem.
- CSS3 Ruby modulis : nodrošina atbalstu valodām, kuras izmanto teksta rubīnu, lai komentētu dokumentus.
- CSS3 Paged Media modulis : vēl lielāks atbalsts lappušu multivides materiāliem (papīram, transparentiem utt.).
- Izveidotais saturs : L darbojas galvenes un kājenes, zemsvītras piezīmes un citu saturu, kas tiek radīts programmēti, it īpaši attiecībā uz lappušu multividi.
- CSS3 Runas modulis : izmaiņas fonāro CSS formātā.