1.9 KiB
CSS Cheatsheet (Deutsch)
Grundlegende Eigenschaften
color: red;
Textfarbe setzen.
background-color: blue;
Hintergrundfarbe setzen.
font-size: 16px;
Schriftgröße festlegen.
font-family: Arial, sans-serif;
Schriftart bestimmen.
text-align: center;
Textausrichtung (z. B. zentriert).
Abstände & Größen
margin: 10px;
Außenabstand (außerhalb eines Elements).
padding: 10px;
Innenabstand (innerhalb eines Elements).
width: 100px;
Breite eines Elements.
height: 50px;
Höhe eines Elements.
Rahmen
border: 1px solid black;
Rahmen definieren (Dicke, Stil, Farbe).
border-radius: 10px;
Abgerundete Ecken.
Layout & Anzeige
display: flex;
Flexbox aktivieren – für flexibles Layout.
justify-content: center;
Inhalt horizontal ausrichten (Flexbox).
align-items: center;
Inhalt vertikal ausrichten (Flexbox).
position: absolute;
Absolute Positionierung (bezogen auf Eltern-Element).
position: relative;
Relative Positionierung.
top: 10px; left: 20px;
Positionierung eines Elements (z. B. bei position: absolute).
Farben & Transparenz
opacity: 0.5;
Transparenz (0 = durchsichtig, 1 = sichtbar).
Schatten & Effekte
box-shadow: 2px 2px 5px gray;
Schlagschatten für ein Element.
text-shadow: 1px 1px 3px black;
Schrift mit Schatteneffekt.
Übergänge & Animation
transition: all 0.3s ease;
Sanfte Übergänge für Änderungen.
animation: fadeIn 2s;
Animation anwenden (muss separat definiert werden).
Sonstiges
cursor: pointer;
Mauszeiger zu Hand-Symbol ändern.
overflow: hidden;
Überlaufenden Inhalt ausblenden.
z-index: 10;
Reihenfolge auf der Z-Achse (bei überlappenden Elementen).