CSS Academy · Lektion

Ärvning och egenskapen all

Förstå CSS-reglerna för ärvning och använd egenskapen all för att återställa ärvda stilar.

Lektion 4 av 413 steg

Ärvning och egenskapen all är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad är arv?

Vissa CSS-egenskaper för automatiskt sitt beräknade värde vidare till underordnade element. Detta kallas arv. Det gör att ni slipper skriva samma regel för varje element i en komponent.

Ärvda egenskaper

Egenskaper som vanligtvis ärvs: typografi- och textegenskaper:

font-family, font-size, font-weight, font-style
color
line-height
letter-spacing
text-align
visibility
CSS-egna egenskaper

Egenskaper som inte ärvs

Egenskaper som vanligtvis INTE ärvs: boxmodell- och layoutegenskaper:

margin, padding, border
width, height
background
display, position
box-shadow, transform

Nyckelordet inherit

Tvinga fram arv uttryckligen med nyckelordet inherit — användbart för formulärelement som inte ärver teckensnitt som standard:

<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>

Nyckelordet initial

Nyckelordet initial återställer en egenskap till dess ursprungliga standardvärde i webbläsaren enligt CSS-specifikationen — utan hänsyn till arv eller användaragentens stilar.

<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>

Nyckelordet unset

unset är kontextberoende:

För ärvda egenskaper fungerar det som inherit
För egenskaper som inte ärvs fungerar det som initial

Det "rensar" i praktiken en egenskap till dess naturliga tillstånd.

<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>

Nyckelordet revert

revert återgår till värdet i webbläsarens användaragent-stilmall — och återställer det som webbläsaren skulle visa som standard, utan några stilar från författaren. Det är användbart för inbäddade widgets från tredje part.

<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>

Egenskapen all

Egenskapen all är en kortform som tillämpar ett nyckelord på alla CSS-egenskaper samtidigt, med undantag för direction och 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 i praktiken

Använd all: initial när Ni behöver skapa en helt isolerad komponent som inte påverkas av globala stilar eller stilar från ett överordnat element:

<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>

Mönstret all: unset

Ta bort webbläsarens knappstilar för anpassade knappar utan att behöva känna till alla relevanta egenskaper:

<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>

Arv och anpassade egenskaper

CSS-anpassade egenskaper ärvs som standard. Det är detta som gör dem kraftfulla – en variabel som sätts på :root är tillgänglig överallt. Använd @property { inherits: false } för att göra en anpassad egenskap icke-ärvd.

Snabbtest

Vilket nyckelord återställer en egenskap till webbläsarens standardvärde från user agent, i stället för till CSS-specifikationens initialvärde?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ärvda egenskaper skickar värden vidare till underordnade element; icke-ärvda egenskaper gör det inte. Nyckelorden inherit, initial, unset och revert ger explicit kontroll. Egenskapen all återställer alla egenskaper på en gång – kraftfullt för isolerade komponenter och anpassade formulärelement.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Ärvning och egenskapen all” gratis?

Ja – hela texten till ”Ärvning och egenskapen all” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Ärvning och egenskapen all”?

Förstå CSS-reglerna för ärvning och använd egenskapen all för att återställa ärvda stilar. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Ärvning och egenskapen all”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Beräkning av specificitet: inline-stil, ID, klass, element
Kaskaden: ursprung och ordning
!important: när och varför inte
Ärvning och egenskapen all

← Tillbaka till CSS Academy