Lösung häufiger CSS-Probleme

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

Gestaltung von Boxen

Wie füge ich einem Element einen Drop-Shadow hinzu?: Schatten können mit der box-shadow-Eigenschaft 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 object-fit-Eigenschaft bietet verschiedene Möglichkeiten, ein Bild in eine Box mit einem anderen Seitenverhältnis einzupassen. In diesem Tutorial erfahren Sie, wie diese verwendet werden.
Welche Methoden können verwendet werden, um Boxen zu gestalten?: Eine Übersicht über die verschiedenen Eigenschaften, die bei der Gestaltung von Boxen mit CSS nützlich sein könnten.
Wie kann ich Elemente halbtransparent machen?: Die opacity-Eigenschaft und Farbwerte mit einem Alpha-Kanal können hierfür verwendet werden; finden Sie heraus, welche Option wann zu verwenden ist.

Box-Gestaltungslektionen und Leitfäden

CSS und Text

Wie füge ich Text einen Drop-Shadow hinzu?: Schatten können dem Text 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?: Finden Sie heraus, wie Sie die erste Zeile eines Textes in einem Absatz mit dem ::first-line-Pseudoelement ansprechen können.
Wie hebe ich den ersten Absatz in einem Artikel hervor?: Erfahren Sie, wie Sie den ersten Absatz mit der :first-child-Pseudoklasse ansprechen können.
Wie hebe ich einen Absatz hervor, nur wenn er direkt nach einer Überschrift kommt?: Kombinatoren können Ihnen helfen, Elemente genau dort im Dokument zu adressieren, wo sie sich befinden. Dieses Tutorial erklärt, wie Sie sie verwenden können, um CSS auf einen Absatz anzuwenden, nur wenn er unmittelbar einer Überschrift folgt.

Textgestaltungslektionen und Leitfäden

CSS-Layout

Wie zentriere ich ein Element?: Das Zentrieren eines Elements in einer anderen Box war früher schwierig, aber mit Flexbox ist es jetzt einfach.

Hinweis: Wir haben ein Kochbuch, das sich CSS-Layoutlösungen widmet, mit vollständig funktionierenden Beispielen und Erklärungen zu häufigen Layoutaufgaben. Schauen Sie sich auch Praktische Positionierungsbeispiele an, das zeigt, wie Sie durch Positionierung ein Informationsregister und ein verschiebbares verstecktes Panel erstellen können.