CSS verwenden, um häufige Probleme zu lösen

Diese Seite fasst Fragen und Antworten sowie weiteres Material auf der MDN-Website zusammen, die Ihnen helfen können, häufige CSS-Probleme zu lösen.

Boxen stylen

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 einzufügen, die ein anderes Seitenverhältnis hat. In diesem Tutorial erfahren Sie, wie Sie diese verwenden.
Welche Methoden können angewendet werden, um Boxen zu stylen?: Eine Übersicht über die verschiedenen Eigenschaften, die nützlich sein könnten, wenn Sie Boxen mit CSS stylen.
Wie kann ich Elemente halbtransparent machen?: Die opacity-Eigenschaft und Farbwerte mit einem Alphakanal können hierfür verwendet werden; erfahren Sie, welche Sie wann benutzen sollten.

Lektionen und Leitfäden zum Stylen von Boxen

CSS und Text

Wie füge ich einem Textschatten hinzu?: Schatten können 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?: Erfahren Sie, wie Sie mit dem ::first-line-Pseudoelement die erste Textzeile in einem Absatz anvisieren.
Wie hebe ich den ersten Absatz in einem Artikel hervor?: Erfahren Sie, wie Sie mit der :first-child-Pseudoklasse den ersten Absatz anvisieren.
Wie hebe ich einen Absatz hervor, nur wenn er direkt nach einer Überschrift kommt?: Kombinatoren können Ihnen helfen, Elemente genau basierend darauf anzusprechen, wo sie im Dokument stehen; dieses Tutorial erklärt, wie Sie sie verwenden, um CSS nur auf einen Absatz anzuwenden, wenn er unmittelbar einer Überschrift folgt.

Lektionen und Leitfäden zum Textstyling

CSS-Layout

Wie zentriere ich ein Element?: Ein Element innerhalb einer anderen Box horizontal und vertikal zu zentrieren, war früher schwierig, aber Flexbox macht es jetzt einfach.

Hinweis: Wir haben ein Kochbuch, das den CSS-Layout-Lösungen gewidmet ist, 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 die Positionierung verwenden können, um eine Registerkarten-Infobox und ein verschiebbares verborgenes Panel zu erstellen.