Farben, Typografie und das Box-Modell
Verwenden Sie Farben mit Hex-, rgb- und hsl-Werten, wählen Sie Schriften, legen Sie Größen und Zeilenhöhen fest und nutzen Sie Margin, Border und Padding für Abstände.
Farben, Typografie und das Box-Modell ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
CSS-Farbwerte
CSS unterstützt mehrere Farbformate. Verwenden Sie je nach Kontext das klarste Format: Hex-Codes für Markenfarben, hsl() für einfache Farbanpassungen, rgb() für programmatisch erzeugte Werte und benannte Farben für schnelles Prototyping.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */Hintergrundfarben und -bilder
Legen Sie Elementhintergründe mit background-color fest. Verwenden Sie background-image mit Verläufen oder URLs. Die Kurzschreibweise background kombiniert Farbe, Bild, Position, Größe und Wiederholung in einer Deklaration.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;Schrifteigenschaften
Steuern Sie die Typografie mit: font-family (Schriftart), font-size (em, rem, px), font-weight (100–900), font-style (kursiv), line-height (Lesbarkeitsverhältnis) und letter-spacing (Laufweite).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}Texteigenschaften
Weitere Textformatierungen: text-align (links, zentriert, rechts, Blocksatz), text-decoration (Unterstreichung, Durchstreichung, keine), text-transform (Großbuchstaben, Erster Buchstabe groß), text-overflow: ellipsis zum Kürzen von Text.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem vs em vs px
px ist absolut. em ist relativ zur Schriftgröße des Elements selbst (und wird kaskadiert). rem ist relativ zur Schriftgröße des Root-Elements (vorhersehbar). Verwenden Sie rem für die meisten Größenangaben, damit die Schriftpräferenzen der Nutzenden berücksichtigt werden.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */Das Box-Modell
Jedes HTML-Element ist ein rechteckiges Feld mit vier Ebenen: Inhalt (die tatsächlichen Abmessungen des Elements), Innenabstand (der Raum innerhalb des Rahmens), Rahmen und Außenabstand (der Raum außerhalb des Rahmens).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
Standardmäßig (content-box) werden Innenabstand und Rahmen zur angegebenen Breite addiert. Mit box-sizing: border-box sind Innenabstand und Rahmen in der angegebenen Breite enthalten – das ist fast immer das gewünschte Verhalten.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}Zusammenfallende Außenabstände
Vertikale Außenabstände zwischen benachbarten Blockelementen fallen zusammen – nur der größere Außenabstand gilt. Auch die Außenabstände eines übergeordneten Elements und seines ersten oder letzten untergeordneten Elements fallen zusammen. Bei Flexbox- und Grid-Kindern fallen Außenabstände nicht zusammen.
Kurzschreibweise für Innenabstände
Die Kurzschreibweise padding: top right bottom left legt alle Seiten fest. Zwei Werte legen den vertikalen und horizontalen Innenabstand fest. Drei Werte legen oben, horizontal und unten fest.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */Rahmeneigenschaften
Legen Sie Rahmen mit der Kurzschreibweise border: width style color fest. Für einzelne Seiten verwenden Sie beispielsweise border-top. Verwenden Sie border-radius für abgerundete Ecken. outline ist ähnlich, wirkt sich aber nicht auf das Layout aus.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}Überlauf
overflow: hidden schneidet Inhalte ab, die die Größe des Elements überschreiten. overflow: scroll fügt Bildlaufleisten hinzu. overflow: auto fügt Bildlaufleisten nur bei Bedarf hinzu. Verwenden Sie overflow-x und overflow-y, um die Achsen unabhängig voneinander zu steuern.
Schnelltest
Wie groß ist die insgesamt gerenderte Breite des Elements bei box-sizing: border-box und width: 300px; padding: 20px; border: 2px solid?
Zusammenfassung: Farben, Typografie und Box-Modell
Setzen Sie Farben mit Hex, rgb oder hsl. Wenden Sie Schriftarten mit font-family, Größe, Stärke und line-height an. Jedes Element ist ein Feld: Inhalt + Innenabstand + Rahmen + Außenabstand. Aktivieren Sie global box-sizing: border-box, um vorhersehbare Größen zu erhalten.
Lerne HTML 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
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Farben, Typografie und das Box-Modell“ kostenlos?
Ja — der vollständige Text von „Farben, Typografie und das Box-Modell“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Farben, Typografie und das Box-Modell“?
Verwenden Sie Farben mit Hex-, rgb- und hsl-Werten, wählen Sie Schriften, legen Sie Größen und Zeilenhöhen fest und nutzen Sie Margin, Border und Padding für Abstände. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 2 von 4.
Wie lange dauert die Lektion „Farben, Typografie und das Box-Modell“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- Selektoren und die Cascade
- Farben, Typografie und das Box-Modell
- Display: Grundlagen von block, inline, flex und grid
- Positionierung: relative, absolute, fixed, sticky