Tyylien lisääminen kerroksiin
Kohdista CSS-säännöt tiettyihin kerroksiin @layer-lohkojen ja tuotujen tyylitiedostojen avulla.
Tyylien lisääminen kerroksiin on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Kaksi tapaa lisätä tyylejä kerroksiin
Voitte lisätä tyylejä kerrokseen suoraan ( @layer-lohkon sisällä) tai @import-määrityksellä (jolloin tuotu tyylitiedosto liitetään kerrokseen).
Upotettu @layer-lohko
Ympäröikää säännöt kerroksen nimen sisältävällä @layer-lohkolla:
<button class="button">Layered button</button>Olemassa olevaan kerrokseen lisääminen
Voitte lisätä tyylejä kerrokseen useissa erillisissä @layer-lohkoissa. Kaikki määritykset yhdistetään samaan kerrokseen:
<button class="button">Button</button>
<input class="input" placeholder="Input" />Nimettömät kerrokset
Nimetön @layer-lohko luo nimettömän kerroksen. Nimettömiin kerroksiin ei voi lisätä myöhemmin tyylejä, ja ne sijaitsevat siinä kohdassa, jossa ne esiintyvät:
<p style="margin: 24px; border: 1px dashed #999;">Normal paragraph (default margin)</p>
<p class="reset" style="border: 1px dashed #999;">Reset paragraph (anonymous layer sets margin: 0)</p>@import ja @layer
Liittäkää kokonainen tuotu tyylitiedosto kerrokseen:
<p>This scene assigns whole imported stylesheets to layers — see the CSS panel.</p>Komponentti-CSS:n jakaminen tiedostoihin
Modulaarisessa projektissa jokainen komponenttitiedosto lisää tyylejä components-kerrokseen:
<button class="button">Button</button>
<div class="card">Card</div>Layer ja PostCSS/Sass
Sass ja PostCSS toimivat yhdessä @layer-määrityksen kanssa. Voitte määrittää kerrokset pääasiallisessa syöttötiedostossa ja käyttää @use- tai @import-määritystä sisällyttämään komponenttiosat, jotka lisäävät tyylejä näihin kerroksiin.
Upotetut tyylit ja kerrokset
Upotetut tyylit (style=""-attribuutti) eivät vaikuta kerroksiin, vaan voittavat aina kaikkien kerrosten tyylit. Vain tyylitiedostojen säännöt, mukaan lukien <style>-lohkot, voidaan sijoittaa kerroksiin.
Kerrosten virheenkorjaus DevToolsissa
Chrome DevTools näyttää kerrosrajat Styles-paneelissa. Pienemmän prioriteetin kerroksen säännöt, jotka suuremman prioriteetin kerros ohittaa, näytetään yliviivattuina, ja voittava kerros ilmoitetaan.
Taaksepäin yhteensopivuus
Selaimet, jotka eivät tue @layer-määritystä, käsittelevät kaikki @layer-lohkot tavallisina CSS-lohkoina ja näyttävät kaiken. Kaskadikäyttäytyminen on erilainen, mutta tyylejä ei menetetä. Turvallisuuden vuoksi ympäröikää ominaisuudesta riippuva koodi määrityksellä @supports (@layer selector).
Olemassa olevan CSS:n siirtäminen kerroksiin
Siirtostrategia:
- Määritelkää kerrokset CSS-päätiedoston alussa
- Ympäröikää jokainen nykyinen CSS-osio vastaavalla kerroslohkolla
- Testatkaa ja korjatkaa mahdolliset esiin tulevat prioriteettiongelmat
- Poistakaa ajan mittaan tarpeettomat suuren spesifisyyden valitsimet
Pikatarkistus
Miten voitte lisätä tyylejä useista erillisistä @layer-lohkoista samaan nimettyyn kerrokseen?
Kertaus
Lisätkää tyylejä kerroksiin nimetyillä @layer name { }-lohkoilla. Lohkot voidaan jakaa useisiin tiedostoihin, ja niiden sisällöt yhdistetään samaan kerrokseen. Liittäkää tuodut tyylitiedostot kerroksiin komennolla @import layer(). Nimettömiä kerroksia ei voi avata uudelleen. Upotetut tyylit ohittavat aina kerroksissa määritetyt tyylit.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Tyylien lisääminen kerroksiin” ilmainen?
Kyllä – oppitunnin ”Tyylien lisääminen kerroksiin” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tyylien lisääminen kerroksiin”?
Kohdista CSS-säännöt tiettyihin kerroksiin @layer-lohkojen ja tuotujen tyylitiedostojen avulla. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Tyylien lisääminen kerroksiin”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- @layer-määritys ja järjestys
- Tyylien lisääminen kerroksiin
- Kerrosten tärkeys ja !important-yhteisvaikutus
- Kerrokset kolmannen osapuolen koodissa