CSS Academy · Lektion

CSS Reset og Normalize

Fjern inkonsistente standardtypografier i browsere med CSS resets og normalize-stylesheets.

Lektion 4 af 413 trin

CSS Reset og Normalize er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Problemet: Uens standarder i browsere

Alle browsere har et indbygget standardtypografiark for brugeragenten med standardtypografier for overskrifter, marginer, padding, lister og formularelementer. Disse standarder varierer fra browser til browser og giver derfor et uensartet udseende.

CSS-reset

En CSS-reset fjerner alle browserens standarder, så du får et tomt udgangspunkt. Den berømte reset fra Eric Meyer sætter margin, padding og mange egenskaber til nul eller ingen.

<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>

CSS-normalisering

Normalize.css bruger en anden tilgang: I stedet for at fjerne alle standarder gør den browsernes standarder ensartede og retter kendte fejl, samtidig med at nyttige standarder som overskrifternes størrelser bevares.

Afvejninger mellem reset og normalisering

Sammenligning:

Reset: tomt udgangspunkt, du definerer alt, mere arbejde
Normalize: ensartet grundniveau med nyttige standarder bevaret, mindre specialkode

Moderne CSS-reset

En populær moderne reset, udviklet af Josh Comeau, fokuserer på de standarder, der har størst betydning:

<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>

Billeder som blokelementer

Hvis du gør billeder til display: block, fjernes det indbyggede mellemrum i inline-visning (forårsaget af line-height) under billeder inde i containere:

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />

Mønster til nulstilling af lister

Fjern listemarkører og indrykning, når du designer brugerdefineret navigation eller lister til brugergrænseflader:

<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>

Nulstilling af formularelementer

Formularelementer (input, button, textarea) arver ikke som standard skrifttypen i mange browsere. En almindelig løsning er:

<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>

Tailwinds Preflight

Tailwind CSS indeholder sin egen reset, der kaldes Preflight, og som bygger på modern-normalize. Hvis du bruger Tailwind, har du allerede automatisk fået anvendt en reset.

Hvor nulstillingen skal placeres

Placér altid dit typografiark til reset eller normalisering først, før alle komponent- eller hjælpeværktøjsstile. Kaskaderækkefølgen sikrer, at dine stile tilsidesætter resetten uden konflikter med specificitet.

Overvejelser om en tilpasset reset

Lav din egen minimale reset, der er tilpasset dit projekt, i stedet for at inkludere en komplet reset fra en tredjepart. Medtag kun de regler, du har brug for, så mængden af CSS holdes lille.

<p>Base font-size and line-height set on the root element affect the whole page.</p>

Hurtig kontrol

Hvad er den vigtigste forskel mellem en CSS-reset og CSS-normalisering?

Besvar den i den interaktive lektion

Opsummering

Browsernes standardtypografier er uensartede. CSS-resets fjerner alle standarder, mens Normalize.css gør dem ensartede. Moderne resets fokuserer på de vigtigste regler som box-sizing: border-box, billeder med maksimal bredde og nedarvede skrifttyper for formularelementer. Indlæs altid resetten først.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “CSS Reset og Normalize” gratis?

Ja — hele teksten til “CSS Reset og Normalize” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “CSS Reset og Normalize”?

Fjern inkonsistente standardtypografier i browsere med CSS resets og normalize-stylesheets. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “CSS Reset og Normalize”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til CSS Academy