CSS Spickzettel
Zuletzt aktualisiert
Selektoren
Wie du die Elemente ansprichst, die du stylen möchtest.
| Selektor | Trifft auf |
|---|---|
* | Alle Elemente |
p | Alle <p>-Elemente (nach Tag) |
.btn | Elemente mit class="btn" |
#main | Das Element mit id="main" |
div p | Alle <p> innerhalb eines <div> (Nachkomme) |
div > p | Nur direkte Kinder |
a:hover | Links beim Überfahren (Pseudoklasse) |
li:first-child | Erstes <li> in seinem Elternelement |
li:nth-child(2n) | Jedes gerade <li> |
input[type="text"] | Eingaben mit diesem Attribut |
p::before | Generierter Inhalt vor <p> (Pseudoelement) |
Box-Modell
Jedes Element ist eine Box: Inhalt, Innenabstand, Rahmen, Außenabstand.
| Eigenschaft | Funktion |
|---|---|
width / height | Größe der Inhaltsbox |
padding | Abstand innerhalb des Rahmens |
border | 1px solid #333 - Breite, Stil, Farbe |
margin | Abstand außerhalb des Rahmens |
box-sizing: border-box | Lässt die Breite Padding + Rahmen einschließen |
margin: 0 auto | Zentriert ein Block-Element horizontal |
overflow: hidden | Schneidet überlaufenden Inhalt ab |
Typografie & Farbe
| Eigenschaft | Beispiel |
|---|---|
color | color: #333 - Textfarbe |
background | background: #fff oder ein Bild/Verlauf |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (oder rem, em) |
font-weight | 400 (normal) … 700 (fett) |
line-height | 1.5 - Abstand zwischen Zeilen |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
Eindimensionales Layout - Zeilen oder Spalten. Setze display: flex auf das Elternelement.
| Eigenschaft (am Container) | Funktion |
|---|---|
display: flex | Macht Kinder zu Flex-Elementen |
flex-direction | row (Standard) oder column |
justify-content | Ausrichtung entlang der Hauptachse (center, space-between) |
align-items | Ausrichtung entlang der Querachse (center, stretch) |
gap | Abstand zwischen Elementen, z. B. gap: 16px |
flex-wrap | wrap lässt Elemente in neue Zeilen umbrechen |
flex: 1 (an einem Kind) | Element wächst, um verfügbaren Platz zu füllen |
Grid
Zweidimensionales Layout. Setze display: grid auf das Elternelement.
| Eigenschaft | Funktion |
|---|---|
display: grid | Macht Kinder zu Grid-Elementen |
grid-template-columns | 1fr 1fr 1fr oder repeat(3, 1fr) |
grid-template-rows | Definiert Zeilengrößen |
gap | Abstand zwischen Zeilen und Spalten |
grid-column | 1 / 3 - ein Element über Spalten erstrecken |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) für responsive Grids |
place-items: center | Zentriert jedes Element in seiner Zelle |
Positionierung & Anzeige
| Eigenschaft / Wert | Funktion |
|---|---|
position: static | Standard - im normalen Fluss |
position: relative | Verschoben von seiner normalen Stelle |
position: absolute | Positioniert relativ zum nächsten positionierten Vorfahren |
position: fixed | Am Viewport fixiert |
position: sticky | Klebt beim Scrollen ab einem Schwellenwert |
top / right / bottom / left | Versätze für positionierte Elemente |
z-index | Stapelreihenfolge (höher = oben) |
display: none | Entfernt das Element aus dem Layout |
display: inline-block | Fließt inline, akzeptiert aber Breite/Höhe |
Übergänge & Transformationen
| Eigenschaft | Beispiel |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0) - verschieben |
transform: scale | scale(1.1) - skalieren |
transform: rotate | rotate(45deg) |
opacity | 0 (unsichtbar) … 1 (deckend) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px - abgerundete Ecken |
Einheiten & responsives Design
| Einheit / Funktion | Bedeutung |
|---|---|
px | Absolute Pixel |
% | Relativ zum Elternelement |
rem | Relativ zur Wurzel-Schriftgröße |
em | Relativ zur aktuellen Schriftgröße |
vw / vh | 1 % der Viewport-Breite / -Höhe |
fr | Bruchteil des freien Platzes (Grid) |
@media (max-width: 600px) { … } | Regeln unterhalb eines Breakpoints anwenden |
Selektoren, das Box-Modell, Flexbox, Grid und die Eigenschaften, die du immer vergisst - auf einer Seite. Dieser CSS-Spickzettel ist eine Schnellreferenz zum Stylen und Layouten von Webseiten, vom Ansprechen von Elementen bis zum Zentrieren.
Alles hier ist Standard-CSS, das in modernen Browsern funktioniert. Kopiere eine Regel oder probiere sie live im HTML-Playground aus, wo du CSS mit einer Sofortvorschau bearbeiten kannst.
CSS-Spickzettel FAQ
Ist dieser CSS-Spickzettel kostenlos?
Ja. Dieser CSS-Spickzettel ist kostenlos und ohne Anmeldung. Setze ein Lesezeichen und nutze ihn, wann immer du einen Selektor, eine Eigenschaft oder ein Layout-Muster nachschlagen musst.
Sollte ich Flexbox oder Grid verwenden?
Verwende Flexbox für eindimensionale Layouts - eine Reihe von Schaltflächen, eine Navigationsleiste, Elemente in einer einzelnen Zeile oder Spalte. Verwende Grid für zweidimensionale Layouts, bei denen du Zeilen und Spalten gleichzeitig steuerst, etwa ein Seitenlayout oder eine Kartengalerie. Sie funktionieren gut zusammen: Ein Grid aus Karten, bei dem jede Karte intern Flexbox nutzt, ist üblich.
Wie zentriere ich ein div mit CSS?
display: flex; justify-content: center; align-items: center; zentriert ein Kind sowohl horizontal als auch vertikal. Für nur horizontale Zentrierung eines Block-Elements mit fester Breite funktioniert margin: 0 auto weiterhin.Kann ich CSS online üben?
Ja. Öffne den HTML-Playground, um HTML und CSS zusammen mit einer Live-Vorschau zu schreiben. Wenn du Struktur möchtest, behandelt Coddys kostenloser interaktiver CSS-Kurs Selektoren, das Box-Modell, Flexbox und Grid Schritt für Schritt.
Ist dieser Spickzettel für Anfänger geeignet?
Ja. Er geht von Selektoren und dem Box-Modell (den Grundlagen) zu Flexbox, Grid und Übergängen über, sodass du mit den oberen Abschnitten beginnen und in modernes Layout hineinwachsen kannst.
Verwandte Ressourcen
Weitere Spickzettel
