Häufige CSS-Probleme lösen

Diese Seite enthält Fragen und Antworten sowie weiteres Material auf der MDN-Website, das Ihnen helfen kann, häufige CSS-Probleme zu lösen.

Gestaltung von Boxen

Wie füge ich einem Element einen Schlagschatten hinzu?: Schatten können Boxen mit der box-shadow-Eigenschaft 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 object-fit-Eigenschaft bietet verschiedene Möglichkeiten, ein Bild in eine Box einzupassen, die ein anderes Seitenverhältnis hat, und Sie können in diesem Tutorial erfahren, wie man sie einsetzt.
Welche Methoden können verwendet werden, um Boxen zu stylen?: Eine Übersicht über verschiedene Eigenschaften, die nützlich sein können, wenn Boxen mit CSS gestaltet werden.
Wie kann ich Elemente halbtransparent machen?: Die opacity-Eigenschaft und Farbwerte mit einem Alphakanal können hierfür verwendet werden; erfahren Sie, wann welche Option eingesetzt werden sollte.

Lektionen und Leitfäden zur Box-Gestaltung

CSS und Text

Wie füge ich einem Text einen Schlagschatten hinzu?: Schatten können Texten mit der text-shadow-Eigenschaft 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 Zeile eines Absatzes mit dem ::first-line-Pseudo-Element ansprechen.
Wie hebe ich den ersten Absatz in einem Artikel hervor?: Erfahren Sie, wie Sie den ersten Absatz mit der :first-child-Pseudo-Klasse ansprechen.
Wie hebe ich einen Absatz nur hervor, wenn er direkt nach einer Überschrift kommt?: Kombinatoren können Ihnen helfen, Elemente genau zu identifizieren, basierend auf ihrer Position im Dokument; dieses Tutorial erklärt, wie Sie sie verwenden, um CSS nur auf einen Absatz anzuwenden, wenn er direkt auf eine Überschrift folgt.

Lektionen und Leitfäden zur Textgestaltung

CSS-Layout

Wie zentriere ich ein Element?: Das Zentrieren eines Elements innerhalb einer anderen Box horizontal und vertikal war früher kompliziert, aber Flexbox macht es jetzt einfach.

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