Lösung häufiger CSS-Probleme
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.
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 Verzerrung des Bildes?
-
Die
object-fit-Eigenschaft bietet verschiedene Möglichkeiten, ein Bild in eine Box einzupassen, die ein anderes Seitenverhältnis hat. In diesem Tutorial erfahren Sie, wie Sie diese verwenden können. - Welche Methoden können zur Gestaltung von Boxen verwendet werden?
-
Ein Überblick ü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 dafür verwendet werden; erfahren Sie, wann Sie welche verwenden sollen.
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-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 hinter einer Überschrift steht?
-
Kombinatoren können Ihnen helfen, Elemente basierend auf ihrer Position im Dokument präzise anzusprechen; dieses Tutorial erklärt, wie Sie sie verwenden können, um CSS nur dann auf einen Absatz anzuwenden, wenn er direkt hinter einer Überschrift steht.
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 knifflig, allerdings macht Flexbox es nun einfach.
Layout-Leitfäden
- Verwendung von CSS-Flexbox
- Verwendung von CSS-Mehrspalten-Layouts
- Verwendung des CSS-Grid-Layouts
- Verwendung von CSS-generiertem Inhalt
Hinweis: Wir haben ein Kochbuch, das sich Lösungen für CSS-Layouts widmet, mit vollständig funktionierenden Beispielen und Erklärungen zu häufigen Layout-Aufgaben. Sehen Sie sich auch Practical Positioning Examples an, in dem gezeigt wird, wie Sie Positionierung verwenden können, um ein registerkartenbasiertes Informationsfeld und ein gleitendes verstecktes Panel zu erstellen.