CSS Academy · Lektion

CSS-Reset und Normalize

Entfernen Sie uneinheitliche Browser-Standardstile mit CSS-Resets und Normalize-Stylesheets.

Lektion 4 von 413 Schritte

CSS-Reset und Normalize ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Problem: Uneinheitliche Browser-Standards

Jeder Browser verfügt über ein integriertes User-Agent-Stylesheet mit Standardstilen für Überschriften, Margins, Paddings, Listen und Formularelemente. Diese Standards unterscheiden sich zwischen den Browsern und führen zu einem uneinheitlichen Erscheinungsbild.

CSS-Reset

Ein CSS-Reset entfernt alle Browser-Standards und bietet Ihnen eine leere Ausgangsbasis. Der bekannte Reset von Eric Meyer setzt Margin, Padding und viele Eigenschaften auf null oder none.

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

Normalize.css verfolgt einen anderen Ansatz: Statt alle Standards zu entfernen, macht es die Browser-Standards einheitlich und behebt bekannte Fehler, während nützliche Standards wie die Größen von Überschriften erhalten bleiben.

Abwägungen zwischen Reset und Normalisierung

Vergleich:

Reset: leere Ausgangsbasis, Sie definieren alles selbst, mehr Arbeit
Normalisierung: einheitliche Grundlage mit beibehaltenen nützlichen Standards, weniger eigener Code

Moderner CSS-Reset

Ein beliebter moderner Reset (von Josh Comeau) zielt auf die wichtigsten Standardvorgaben ab:

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

Bilder als Blockelemente

Wenn Sie für Bilder display: block festlegen, wird der standardmäßige Inline-Abstand (verursacht durch line-height) am unteren Rand von Bildern innerhalb von Containern entfernt:

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

Muster zum Zurücksetzen von Listen

Entfernen Sie Listenmarkierungen und Einrückungen, wenn Sie benutzerdefinierte Navigations- oder UI-Listen gestalten:

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

Zurücksetzen von Formularelementen

Formularelemente (input, button, textarea) übernehmen die Schriftart in vielen Browsern standardmäßig nicht. Eine häufige Lösung:

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

Tailwinds Preflight

Tailwind CSS enthält einen eigenen Reset namens Preflight, der auf modern-normalize basiert. Wenn Sie Tailwind verwenden, ist bereits automatisch ein Reset angewendet.

Wo der Reset platziert wird

Platzieren Sie Ihr Reset- oder Normalize-Stylesheet immer zuerst, vor allen Komponenten- oder Utility-Stilen. Die Reihenfolge der Kaskade stellt sicher, dass Ihre Stile den Reset ohne Spezifitätskonflikte überschreiben.

Überlegungen zu benutzerdefinierten Resets

Erstellen Sie einen eigenen, auf Ihr Projekt zugeschnittenen minimalen Reset, statt einen vollständigen Reset eines Drittanbieters einzubinden. Nehmen Sie nur die benötigten Regeln auf, damit die CSS-Datei klein bleibt.

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

Kurzer Check

Was ist der wesentliche Unterschied zwischen einem CSS-Reset und einer CSS-Normalisierung?

Beantworte es in der interaktiven Lektion

Zusammenfassung

Browser-Standardstile sind uneinheitlich. CSS-Resets entfernen alle Standards, während normalize.css sie vereinheitlicht. Moderne Resets konzentrieren sich auf die wichtigsten Regeln wie box-sizing: border-box, Bilder mit maximaler Breite und geerbte Schriftarten für Formularelemente. Laden Sie den Reset immer zuerst.

Kostenlos starten

Lerne CSS mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 40
Lektionen: 159

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „CSS-Reset und Normalize“ kostenlos?

Ja — der vollständige Text von „CSS-Reset und Normalize“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „CSS-Reset und Normalize“?

Entfernen Sie uneinheitliche Browser-Standardstile mit CSS-Resets und Normalize-Stylesheets. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „CSS-Reset und Normalize“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy