Lädt...
CSS Properties Complete Reference
Dieses umfassende CSS-Eigenschaften-Handbuch dient als schnelle und zuverlässige Referenz für Entwickler aller Erfahrungsstufen. Es deckt alle CSS-Eigenschaften ab, logisch nach Kategorien wie Layout & Positionierung, Box-Modell, Ränder & Konturen, Hintergrund, Typografie, Flexbox und Grid organisiert. Entwickler können diese Referenz nutzen, um schnell die Syntax, Beschreibung, praktische Beispiele und Browserunterstützung nachzuschlagen, ohne lange Dokumentationen durchsuchen zu müssen. Durch die strukturierte, tabellenbasierte Übersicht wird das Schreiben von sauberem, effizientem und kompatiblem CSS erleichtert. Dieses Handbuch unterstützt die tägliche Arbeit bei der Erstellung von Websites, responsiven Layouts und modernen Webanwendungen.
📊 Layout & Positioning Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: value | Legt die Anzeigeart eines Elements fest | display: flex | Alle Browser |
| position | position: value | Definiert die Positionierungsmethode | position: absolute | Alle Browser |
| top | top: value | Vertikaler Versatz | top: 10px | Alle Browser |
| right | right: value | Horizontaler Abstand von rechts | right: 20px | Alle Browser |
| bottom | bottom: value | Vertikaler Abstand von unten | bottom: 10px | Alle Browser |
| left | left: value | Horizontaler Abstand von links | left: 20px | Alle Browser |
| z-index | z-index: number | Steuert die Stapelreihenfolge | z-index: 999 | Alle Browser |
| float | float: value | Element links/rechts schweben lassen | float: left | Alle Browser |
| clear | clear: value | Cleart float | clear: both | Alle Browser |
| overflow | overflow: value | Inhalt Überlauf | overflow: hidden | Alle Browser |
| overflow-x | overflow-x: value | Horizontaler Überlauf | overflow-x: scroll | Alle Browser |
| overflow-y | overflow-y: value | Vertikaler Überlauf | overflow-y: auto | Alle Browser |
| visibility | visibility: value | Sichtbarkeit eines Elements | visibility: hidden | Alle Browser |
| clip | clip: rect() | Element zuschneiden | clip: rect(0,50px,50px,0) | Alle Browser |
| vertical-align | vertical-align: value | Vertikale Ausrichtung | vertical-align: middle | Alle Browser |
📊 Box Model Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| width | width: value | Elementbreite | width: 300px | Alle Browser |
| height | height: value | Elementhöhe | height: 200px | Alle Browser |
| max-width | max-width: value | Maximale Breite | max-width: 100% | Alle Browser |
| min-width | min-width: value | Minimale Breite | min-width: 200px | Alle Browser |
| max-height | max-height: value | Maximale Höhe | max-height: 500px | Alle Browser |
| min-height | min-height: value | Minimale Höhe | min-height: 100px | Alle Browser |
| margin | margin: value | Außenabstand | margin: 20px | Alle Browser |
| margin-top | margin-top: value | Abstand oben | margin-top: 10px | Alle Browser |
| margin-right | margin-right: value | Abstand rechts | margin-right: 15px | Alle Browser |
| margin-bottom | margin-bottom: value | Abstand unten | margin-bottom: 10px | Alle Browser |
| margin-left | margin-left: value | Abstand links | margin-left: 15px | Alle Browser |
| padding | padding: value | Innenabstand | padding: 15px | Alle Browser |
| padding-top | padding-top: value | Innenabstand oben | padding-top: 10px | Alle Browser |
| padding-right | padding-right: value | Innenabstand rechts | padding-right: 20px | Alle Browser |
| padding-bottom | padding-bottom: value | Innenabstand unten | padding-bottom: 10px | Alle Browser |
| padding-left | padding-left: value | Innenabstand links | padding-left: 20px | Alle Browser |
| box-sizing | box-sizing: value | Box-Modell Berechnung | box-sizing: border-box | IE8+ |
📊 Border & Outline Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| border | border: width style color | Kompletter Rahmen | border: 2px solid #000 | Alle Browser |
| border-width | border-width: value | Rahmenstärke | border-width: 3px | Alle Browser |
| border-style | border-style: value | Rahmenart | border-style: dashed | Alle Browser |
| border-color | border-color: value | Rahmenfarbe | border-color: red | Alle Browser |
| border-top | border-top: width style color | Oberer Rahmen | border-top: 1px solid blue | Alle Browser |
| border-right | border-right: width style color | Rechter Rahmen | border-right: 2px dotted red | Alle Browser |
| border-bottom | border-bottom: width style color | Unterer Rahmen | border-bottom: 3px double green | Alle Browser |
| border-left | border-left: width style color | Linker Rahmen | border-left: 1px solid gray | Alle Browser |
| border-radius | border-radius: value | Abgerundete Ecken | border-radius: 10px | IE9+ |
| outline | outline: width style color | Element-Kontur | outline: 2px solid red | Alle Browser |
📊 Background Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| background | background: color image repeat position size | Komplett Hintergrund | background: #fff url() no-repeat center | Alle Browser |
| background-color | background-color: value | Hintergrundfarbe | background-color: #ff0000 | Alle Browser |
| background-image | background-image: url() | Hintergrundbild | background-image: url('bg.jpg') | Alle Browser |
| background-repeat | background-repeat: value | Wiederholung | background-repeat: no-repeat | Alle Browser |
| background-position | background-position: value | Positionierung | background-position: center top | Alle Browser |
| background-size | background-size: value | Bildskalierung | background-size: cover | IE9+ |
| background-attachment | background-attachment: value | Scrollverhalten | background-attachment: fixed | Alle Browser |
| background-blend-mode | background-blend-mode: value | Mischmodus | background-blend-mode: multiply | Moderne Browser |
📊 Typography Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| font | font: style variant weight size/height family | Komplette Schrift | font: bold 16px/1.5 Arial | Alle Browser |
| font-family | font-family: name | Schriftart | font-family: 'Arial', sans-serif | Alle Browser |
| font-size | font-size: value | Schriftgröße | font-size: 18px | Alle Browser |
| font-weight | font-weight: value | Schriftstärke | font-weight: bold | Alle Browser |
| line-height | line-height: value | Zeilenhöhe | line-height: 1.6 | Alle Browser |
| text-align | text-align: value | Horizontale Ausrichtung | text-align: center | Alle Browser |
| text-decoration | text-decoration: value | Textdekoration | text-decoration: underline | Alle Browser |
| text-transform | text-transform: value | Schriftumwandlung | text-transform: uppercase | Alle Browser |
| white-space | white-space: value | Leerraum Behandlung | white-space: nowrap | Alle Browser |
📊 Flexbox Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: flex | Flexbox aktivieren | display: flex | IE10+ |
| flex-direction | flex-direction: value | Hauptachsenrichtung | flex-direction: column | IE10+ |
| flex-wrap | flex-wrap: value | Umbruch | flex-wrap: wrap | IE10+ |
| justify-content | justify-content: value | Ausrichtung Hauptachse | justify-content: space-between | IE10+ |
| align-items | align-items: value | Ausrichtung Querachse | align-items: center | IE10+ |
📊 Grid Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: grid | Grid aktivieren | display: grid | IE10+ (-ms-) |
| grid-template-columns | grid-template-columns: values | Spaltenbreiten | grid-template-columns: 1fr 2fr | IE10+ (-ms-) |
| grid-template-rows | grid-template-rows: values | Zeilenhöhen | grid-template-rows: 100px auto | IE10+ (-ms-) |
| grid-gap | grid-gap: row column | Abstand | grid-gap: 20px 10px | IE10+ (-ms-) |
| justify-items | justify-items: value | Horizontale Ausrichtung | justify-items: center | IE10+ (-ms-) |
| align-items | align-items: value | Vertikale Ausrichtung | align-items: center | IE10+ (-ms-) |
Quick Examples
css
CSS Code
/* Layout Beispiel */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
/* Typografie Beispiel */
.text {
font: bold 18px/1.6 'Arial', sans-serif;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
/* Animation Beispiel */
.box {
transition: transform 0.3s ease;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
}
---Best Practices und Tipps:
- Immer Fallback-Schriften in font-family angeben
- Relative Einheiten (em, rem, %) für responsive Designs verwenden
- Minimale Nutzung von !important
- CSS in verschiedenen Browsern testen, besonders neue Eigenschaften
- Shorthand-Eigenschaften zur Reduzierung der Dateigröße nutzen
- Leistungsimpact von Animationen und Filtern berücksichtigen
- CSS mit Validatoren prüfen, um Syntaxfehler zu erkennen
- CSS Custom Properties (Variablen) für wartbaren Code einsetzen
- Vendor Prefixes für experimentelle Eigenschaften verwenden
- Verwandte Eigenschaften gruppieren für bessere Lesbarkeit
🧠 Testen Sie Ihr Wissen
Bereit zum Start
Reference Knowledge Check
Testen Sie Ihr Wissen zu CSS-Eigenschaften und deren Verwendung.
3
Fragen
70%
Zum Bestehen
∞
Zeit
∞
Versuche
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt