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.
Layout-Leitfäden
- CSS-Flexbox verwenden
- CSS-Mehrspaltenlayouts verwenden
- CSS-Grid-Layout verwenden
- CSS-generierte Inhalte verwenden
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.