Häufige CSS-Probleme lösen

Diese Seite fasst Fragen und Antworten sowie weiteres Material auf der MDN-Website zusammen, das Ihnen bei der Lösung häufiger CSS-Probleme helfen kann.

Styling von Boxen

Wie füge ich einem Element einen Schlagschatten hinzu?: Schatten können mit der Eigenschaft box-shadow zu Boxen hinzugefügt werden. Dieses Tutorial erklärt, wie es funktioniert und zeigt ein Beispiel.
Wie fülle ich eine Box mit einem Bild, ohne das Bild zu verzerren?: Die Eigenschaft object-fit bietet verschiedene Möglichkeiten, ein Bild in eine Box mit einem anderen Seitenverhältnis einzupassen. In diesem Tutorial erfahren Sie, wie Sie diese verwenden können.
Welche Methoden können verwendet werden, um Boxen zu stylen?: Eine Übersicht über verschiedene Eigenschaften, die beim Stylen von Boxen mit CSS nützlich sein könnten.
Wie kann ich Elemente halbtransparent machen?: Die Eigenschaft opacity und Farbwerte mit einem Alpha-Kanal können hierfür verwendet werden; erfahren Sie, welche Methode wann eingesetzt werden sollte.

Lektionen und Leitfäden zum Box-Styling

CSS und Text

Wie füge ich Text einen Schlagschatten hinzu?: Schatten können mit der Eigenschaft text-shadow zu Texten hinzugefügt werden. Dieses Tutorial erklärt, wie es funktioniert und zeigt ein Beispiel.
Wie hebe ich die erste Zeile eines Absatzes hervor?: Erfahren Sie, wie Sie die erste Textzeile eines Absatzes mit dem Pseudo-Element ::first-line ansprechen können.
Wie hebe ich den ersten Absatz in einem Artikel hervor?: Erfahren Sie, wie Sie den ersten Absatz mit der Pseudo-Klasse :first-child ansprechen können.
Wie hebe ich einen Absatz nur hervor, wenn er direkt nach einer Überschrift kommt?: Kombinatoren können Ihnen helfen, Elemente präzise basierend auf ihrer Position im Dokument anzusprechen. Dieses Tutorial erklärt, wie Sie CSS auf einen Absatz anwenden, nur wenn er unmittelbar auf eine Überschrift folgt.

Lektionen und Leitfäden zum Text-Styling

CSS-Layout

Wie zentriere ich ein Element?: Das Zentrieren eines Elements innerhalb einer anderen Box sowohl horizontal als auch vertikal war früher schwierig; mit Flexbox ist es jedoch jetzt einfach.

Hinweis: Wir haben ein Kochbuch gewidmet den CSS-Layout-Lösungen, mit vollständig funktionierenden Beispielen und Erklärungen zu häufigen Layout-Aufgaben. Schauen Sie sich auch die Praktischen Positionierungsbeispiele an, die zeigen, wie Sie mit Positionierung eine Registerkarten-Info-Box und ein verstecktes, verschiebbares Panel erstellen können.