Periytyminen ja all-ominaisuus
Ymmärtäkää CSS:n periytymissäännöt ja käyttäkää all-ominaisuutta periytyneiden tyylien nollaamiseen.
Periytyminen ja all-ominaisuus on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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.
Mitä periytyminen tarkoittaa
Jotkin CSS-ominaisuudet välittävät lasketun arvonsa automaattisesti lapsielementeille. Tätä kutsutaan periytymiseksi. Se vähentää tarvetta kirjoittaa sama sääntö jokaiselle komponentin elementille.
Periytyvät ominaisuudet
Tyypillisesti periytyviä ovat typografia- ja tekstiasetukset:
font-family,font-size,font-weight,font-stylecolorline-heightletter-spacingtext-alignvisibility- CSS:n mukautetut ominaisuudet
Periytymättömät ominaisuudet
Tyypillisesti EIVÄT periydy: laatikkomallin ja asettelun ominaisuudet:
margin,padding,borderwidth,heightbackgrounddisplay,positionbox-shadow,transform
inherit-avainsana
Pakottakaa periytyminen eksplisiittisesti inherit-avainsanalla — tämä on hyödyllistä lomake-elementeille, jotka eivät oletusarvoisesti peri fonttia:
<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
<input type="text" placeholder="Inherits font/color" />
<button>Button inherits too</button>
<textarea>Inherits</textarea>
<select><option>Option A</option></select>
</div>initial-avainsana
initial-avainsana palauttaa ominaisuuden CSS-määrityksen mukaiseen selaimen oletusarvoiseen alkuarvoon ja ohittaa periytymisen sekä user-agent-tyylit.
<div style="font-size: 30px; color: tomato;">
<p>Normal text inherits large tomato-colored style from its parent.</p>
<p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>unset-avainsana
unset toimii kontekstin mukaan:
- Periytyvien ominaisuuksien yhteydessä: toimii kuten
inherit - Periytymättömien ominaisuuksien yhteydessä: toimii kuten
initial
Se käytännössä "tyhjentää" ominaisuuden ja palauttaa sen luonnolliseen tilaansa.
<div style="color: tomato;">
<p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
<p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>revert-avainsana
revert palauttaa selaimen user-agent-tyylitiedoston arvon — se palauttaa sen, minkä selain näyttäisi oletusarvoisesti, ilman tekijän tyylejä. Tämä on hyödyllistä upotetuissa kolmannen osapuolen vimpaimissa.
<div style="color: tomato; font-family: Georgia, serif;">
Ancestor style is tomato serif text.
<div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>all-ominaisuus
all-ominaisuus on lyhyt merkintätapa, jolla avainsanaa käytetään samanaikaisesti kaikkiin CSS-ominaisuuksiin, lukuun ottamatta ominaisuuksia direction ja unicode-bidi.
<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
<div class="isolated-widget">all: initial — resets everything to spec defaults</div>
<div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>all: initial käytännössä
Käytä arvoa all: initial, kun haluat luoda täysin eristetyn komponentin, johon yleiset tai ylätason tyylit eivät vaikuta:
<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
Page context — large serif tomato text
<div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>all: unset -malli
Poista selaimen painiketyylit mukautettuja painikkeita varten tuntematta kaikkia asiaankuuluvia ominaisuuksia:
<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>Periytyminen ja mukautetut ominaisuudet
CSS:n mukautetut ominaisuudet periytyvät oletusarvoisesti. Tämä tekee niistä tehokkaita — :root-valitsimella määritetty muuttuja on käytettävissä kaikkialla. Käytä sääntöä @property { inherits: false }, jos haluat estää mukautetun ominaisuuden periytymisen.
Pikatarkistus
Mikä avainsana palauttaa ominaisuuden selaimen user agentin oletusarvoon CSS-määrityksen alkuarvon sijaan?
Kertaus
Periytyvät ominaisuudet välittävät arvonsa jälkeläiselementeille, kun taas ei-periytyvät ominaisuudet eivät tee niin. Avainsanoilla inherit, initial, unset ja revert voidaan hallita tätä nimenomaisesti. all-ominaisuus palauttaa kaikkien ominaisuuksien arvot kerralla — se on tehokas eristetyissä komponenteissa ja mukautetuissa lomake-elementeissä.
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 ”Periytyminen ja all-ominaisuus” ilmainen?
Kyllä – oppitunnin ”Periytyminen ja all-ominaisuus” 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 ”Periytyminen ja all-ominaisuus”?
Ymmärtäkää CSS:n periytymissäännöt ja käyttäkää all-ominaisuutta periytyneiden tyylien nollaamiseen. 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 4/4.
Kuinka kauan ”Periytyminen ja all-ominaisuus”-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
- Spesifisyyden laskeminen: inline-tyyli, ID, luokka ja elementti
- Cascading: alkuperä ja järjestys
- !important: milloin ja miksi ei
- Periytyminen ja all-ominaisuus