Nachschlagewerk mit 154 CSS-Eigenschaften
Was jede Eigenschaft tut, welche Werte man wirklich nutzt und ob sie vererbt wird — je eine Zeile.
Layout11
Eigenschaften, die bestimmen, welche Box ein Element ist und was bei Überlauf passiert.
displayLegt fest, als welche Box ein Element behandelt wird — der Ausgangspunkt jedes Layouts.visibilityZeigt oder verbirgt ein Element; bei hidden bleibt der Platz erhalten.floatLässt ein Element seitlich schwimmen, sodass Text daneben fließt; heute übernehmen das Flex und Grid.clearSchiebt das Element unter vorangehende Floats.overflowBestimmt, ob überlaufender Inhalt beschnitten wird oder scrollt.overflow-xSteuert nur den waagerechten Überlauf.overflow-ySteuert nur den senkrechten Überlauf.box-sizingLegt fest, ob die Breite Innenabstand und Rahmen einschließt; border-box rechnet sich leichter.aspect-ratioFixiert das Verhältnis von Breite zu Höhe; eine Seite genügt.container-typeErlaubt Stile, die auf die Größe eines Elternelements reagieren statt auf das Fenster.isolationErzeugt eine eigene Ebene, damit Blending nicht nach außen wirkt.
Flexbox und Grid24
Eigenschaften, die Elemente ausrichten und in ein Raster setzen — modernes Layout nutzt fast immer eines von beiden.
flex-directionLegt fest, ob Flex-Elemente in einer Zeile oder Spalte laufen.flex-wrapBestimmt, ob Elemente in eine neue Zeile umbrechen.flexRegelt in einem Schritt, wie freier Platz verteilt wird; flex: 1 teilt gleichmäßig.flex-growWie viel vom freien Platz dieses Element nimmt.flex-shrinkWie stark das Element bei Platzmangel schrumpft; 0 hält es fest.flex-basisDie Ausgangsgröße vor dem Wachsen oder Schrumpfen.justify-contentVerteilt die Elemente entlang der Hauptachse.align-itemsRichtet Elemente an der Querachse aus; center ist die übliche vertikale Zentrierung.align-selfÜberschreibt die Ausrichtung für ein einzelnes Element.align-contentVerteilt die Zeilen selbst, wenn Elemente mehrzeilig umbrechen.gapDer Abstand zwischen Elementen — anders als Margins nicht außen.row-gapLegt nur den Abstand zwischen Zeilen fest.column-gapLegt nur den Abstand zwischen Spalten fest.orderÄndert die sichtbare Reihenfolge, ohne die HTML-Reihenfolge anzutasten.grid-template-columnsLegt Anzahl und Breite der Grid-Spalten fest.grid-template-rowsLegt Anzahl und Höhe der Grid-Zeilen fest.grid-template-areasBenennt Grid-Bereiche, sodass sich das Layout wie ein Bild aufschreiben lässt.grid-columnLegt fest, über wie viele Spalten ein Element reicht.grid-rowLegt fest, über wie viele Zeilen ein Element reicht.grid-auto-flowBestimmt, in welcher Richtung nicht platzierte Elemente einfließen.grid-auto-rowsLegt die Höhe automatisch erzeugter Zeilen fest.place-itemsSetzt beide Ausrichtungsachsen auf einmal; ein center zentriert alles.place-contentPositioniert den gesamten Inhaltsblock auf beiden Achsen.justify-itemsPlatziert Elemente waagerecht in ihrer Zelle.
Box und Abstände16
Größe und Abstände. Außenabstände fallen zusammen, Innenabstände füllt der Hintergrund.
widthDie waagerechte Größe; 100 % folgt dem Elternelement, 100vw dem Fenster.heightDie senkrechte Größe; auto nimmt nur so viel, wie der Inhalt braucht.min-widthVerhindert, dass die Box schmaler wird; in Flex erlaubt 0 das Schrumpfen.max-widthBegrenzt die Breite; so hält man Textzeilen lesbar.min-heightVerhindert, dass die Box niedriger wird.max-heightBegrenzt die Höhe; alles darüber regelt overflow.marginDer Außenabstand; obere und untere Margins fallen zusammen.margin-topDer Außenabstand oben.margin-rightDer Außenabstand rechts; auto schiebt die Box nach links.margin-bottomDer Außenabstand unten.margin-leftDer Außenabstand links; auto auf beiden Seiten zentriert die Box.paddingDer Innenabstand; die Hintergrundfarbe reicht bis hierhin.padding-topDer Innenabstand oben.padding-rightDer Innenabstand rechts.padding-bottomDer Innenabstand unten; als Prozentwert erzeugt er sogar Höhe.padding-leftDer Innenabstand links.
Text25
Schrift, Zeilenabstand, Ausrichtung — wie sich Text liest. Das meiste davon wird vererbt.
font-sizeDie Schriftgröße; rem vervielfacht die Wurzelgröße und folgt der Zoom-Einstellung.font-familyLegt die Schriftart fest; der Browser geht die Liste durch, daher am Ende eine generische Familie.font-weightDie Strichstärke; 400 ist normal, 700 fett.font-styleSchaltet Kursivschrift ein oder aus.fontSetzt mehrere Schriftwerte auf einmal; Weggelassenes fällt auf den Standard zurück.line-heightDer Zeilenabstand; ein einheitenloser Wert wie 1.5 vererbt sich sicherer.letter-spacingDer Abstand zwischen Buchstaben; leicht enger wirkt bei großen Überschriften ruhiger.word-spacingDer Abstand zwischen Wörtern.text-alignRichtet Text waagerecht aus.text-decorationFügt Unter- oder Durchstreichungen hinzu; entfernt auch die Standardunterstreichung von Links.text-decoration-lineBestimmt nur, welche Linie gezeichnet wird.text-decoration-colorFärbt allein diese Linie.text-decoration-styleLegt den Linienstil fest; wavy ergibt die Wellenlinie der Rechtschreibprüfung.text-transformErzwingt Groß- oder Kleinschreibung nur in der Anzeige; der Text bleibt unverändert.text-indentRückt die erste Zeile eines Blocks ein.text-overflowKürzt überlaufenden Text mit Auslassungspunkten; braucht overflow und nowrap dazu.text-shadowWirft einen Schatten hinter den Text — hilfreich für weiße Schrift auf Fotos.white-spaceRegelt Leerzeichen und Zeilenumbrüche; nowrap hält alles in einer Zeile.word-breakBestimmt, wo lange Wörter brechen; keep-all verhindert Wortbrüche im Koreanischen.overflow-wrapErzwingt den Umbruch sehr langer Zeichenketten — praktisch bei langen URLs.writing-modeÄndert die Schreibrichtung — so entsteht vertikaler Satz.vertical-alignRichtet Inline-Boxen senkrecht in ihrer Zeile aus; gilt auch in Tabellenzellen.font-variant-numericWählt eine Ziffernform; tabular-nums hält Ziffern gleich breit, damit Tabellen ruhig bleiben.hyphensErlaubt Worttrennung mit Bindestrich am Zeilenende; setzt eine Sprachangabe voraus.text-wrapBestimmt den Zeilenumbruch; balance gleicht die Zeilenlängen einer Überschrift aus.
Farbe und Hintergrund13
Textfarbe, Hintergrundfarbe, Verläufe und Transparenz.
colorDie Textfarbe; currentColor greift anderswo auf diesen Wert zurück.background-colorDie Hintergrundfarbe; sie füllt auch den Innenabstand.background-imageLegt ein Bild oder einen Verlauf hinter den Inhalt; mehrere lassen sich stapeln.background-sizeSkaliert das Hintergrundbild; cover füllt lückenlos, contain zeigt alles.background-positionPositioniert das Hintergrundbild in der Box.background-repeatLegt fest, ob sich das Hintergrundbild wiederholt.background-attachmentBestimmt, ob der Hintergrund mitscrollt oder feststeht.backgroundSetzt alle Hintergrundwerte auf einmal; Weggelassenes fällt auf den Standard zurück.background-clipBegrenzt, wie weit der Hintergrund reicht; text beschneidet ihn auf die Buchstaben.opacityDie Gesamttransparenz; Kindelemente werden mit blass.mix-blend-modeLegt fest, wie sich die Farben mit dem Untergrund mischen.accent-colorFärbt vom Browser gezeichnete Bedienelemente wie Kontrollkästchen.color-schemeGibt an, welche Farbschemata die Seite unterstützt.
Rahmen13
Rahmen, Ecken und Schatten. Eine Outline braucht keinen eigenen Platz.
borderSetzt Rahmenbreite, -stil und -farbe in einer Zeile.border-widthLegt nur die Rahmenstärke fest.border-styleLegt nur den Rahmenstil fest; ohne ihn erscheint kein Rahmen.border-colorLegt nur die Rahmenfarbe fest.border-topSetzt nur den oberen Rahmen.border-bottomSetzt nur den unteren Rahmen — die übliche Trennlinie in Listen.border-radiusRundet die Ecken; 50 % ergibt einen Kreis, ein sehr großer Wert eine Pille.outlineEine Linie außerhalb des Rahmens; sie braucht keinen Platz — ideal für Fokusringe.outline-widthLegt nur die Stärke der Outline fest.outline-styleLegt nur den Stil der Outline fest.outline-colorLegt nur die Farbe der Outline fest.outline-offsetRückt die Outline vom Element ab.box-shadowWirft einen Schatten um die Box; inset legt ihn nach innen.
Effekte7
Effekte nach dem Zeichnen — Weichzeichnen, Beschneiden, Füllen.
filterWendet Weichzeichnen, Graustufen, Helligkeit an; mehrere lassen sich verketten.backdrop-filterFiltert, was hinter dem Element liegt — so entsteht Milchglas.clip-pathSchneidet das Element auf eine gegebene Form zu.mask-imageBlendet Teile nach der Helligkeit eines Bildes aus — gut für weiche Kanten.object-fitBestimmt, wie Bild oder Video die Box füllt; cover beschneidet zum Füllen.object-positionWählt, welcher Teil beim Beschnitt bleibt — so retten Sie Gesichter.image-renderingWählt weiche oder harte Skalierung; pixelated hält Pixelart scharf.
Transformation und Bewegung14
Verschieben, Drehen und weiches Überblenden. Das Layout bleibt unberührt.
transformVerschiebt, dreht und skaliert; die Layout-Box bleibt, nichts verrutscht.transform-originDer Bezugspunkt für Drehung und Skalierung.transitionÜberführt Werte weich; eine Zeile nennt was, wie lange und wie.transition-propertyNennt die zu animierenden Eigenschaften; all ist bequem, kann aber bremsen.transition-delayWie lange vor dem Start gewartet wird.transition-durationWie lange der Wechsel dauert; rund 0,2 s wirkt natürlich.transition-timing-functionFormt den Ablauf; ease beginnt und endet sanft.animationSpielt Keyframes ab; Name, Dauer und Wiederholung in einer Zeile.animation-nameDer Name der abzuspielenden Keyframes.animation-timing-functionDer Ablauf der Bewegung; steps lässt sie springen.animation-durationWie lange ein Durchlauf dauert.animation-iteration-countWie oft es sich wiederholt; infinite hört nie auf.will-changeKündigt dem Browser Änderungen an; im Übermaß bewirkt es das Gegenteil.perspectiveLegt die Tiefe von 3D-Transformationen fest; kleinere Werte übertreiben.
Positionierung7
Ein Element aus dem Fluss heben und platzieren; z-index entscheidet, was vorn liegt.
positionWählt das Positionierungsschema; sticky heftet ein Element beim Scrollen fest.topWie weit vom oberen Rand das Element sitzt.rightWie weit vom rechten Rand das Element sitzt.bottomWie weit vom unteren Rand das Element sitzt.leftWie weit vom linken Rand das Element sitzt.insetSetzt alle vier Abstände auf einmal; 0 spannt das Element über das Elternelement.z-indexBestimmt, was obenauf liegt; verglichen wird nur im selben Stapelkontext.
Tabellen4
Eigenschaften für Tabellenrahmen und Spaltenbreiten.
border-collapseFührt benachbarte Zellenrahmen zusammen; collapse vermeidet doppelte Linien.border-spacingDer Abstand zwischen Zellen; nur ohne collapse relevant.table-layoutWählt inhaltsabhängige oder feste Spaltenbreiten; fixed rendert deutlich schneller.caption-sideStellt die Tabellenbeschriftung nach oben oder unten.
Listen4
Form und Platz der Listenmarker.
Interaktion9
Wie das Element auf Maus, Finger und Scrollen reagiert.
cursorLegt die Zeigerform fest; pointer signalisiert Klickbarkeit.pointer-eventsBestimmt, ob das Element Zeigereingaben erhält; none lässt Klicks durch.user-selectBestimmt, ob Text per Ziehen markiert werden kann.touch-actionSteuert, welche Gesten der Browser behandelt; manipulation entfernt den Doppeltipp-Zoom.scroll-behaviorLässt Scrollen springen oder gleiten.scroll-snap-typeRastet das Scrollen an festen Punkten ein — üblich in Karussells.overscroll-behaviorBestimmt, ob am Ende der Elternbereich mitscrollt; contain hält es innen.resizeErlaubt Nutzern, die Box zu skalieren — meist bei textarea.caret-colorFärbt den blinkenden Textcursor im Eingabefeld.
Druck und Sonstiges7
Der Rest — Druck, erzeugter Inhalt und automatische Nummerierung.
page-break-afterErzwingt oder vermeidet beim Druck einen Seitenumbruch danach.break-insideVerhindert, dass ein Element über Seiten oder Spalten zerrissen wird.contentDer von ::before oder ::after erzeugte Inhalt; oft nur ein leeres Anführungspaar.counter-resetStartet oder setzt einen Zähler für Nummerierungen zurück.counter-incrementErhöht einen Zähler; zusammen mit content nummeriert das Überschriften.quotesWählt die Anführungszeichen für das q-Element je Sprache.allSetzt alle Eigenschaften des Elements auf einmal zurück — grob, aber wirksam.
So liest man das
- Eine vererbte Eigenschaft schreibt man einmal am Elternelement — alle Kinder übernehmen sie. Die meisten Texteigenschaften sind so.
- Eine Kurzschreibweise setzt Weggelassenes zurück. Nur background: red löscht auch ein zuvor gesetztes Hintergrundbild.
- Kollidieren Regeln, gewinnt der spezifischere Selektor; erst bei gleicher Spezifität zählt die Reihenfolge.
- Animieren Sie transform und opacity — das bleibt flüssig. width oder top zwingt zur Neuberechnung des Layouts.
Häufige Fragen
Q. Wie viele CSS-Eigenschaften gibt es?
Der Standard führt über 500, doch nur ein Bruchteil begegnet einem täglich. Hier stehen die 154, die man immer wieder schreibt, nach Zweck geordnet.
Q. Was heißt „vererbt"?
Der Wert wird weitergereicht: einmal am Elternelement gesetzt, nutzen ihn alle Kinder. Die meisten Texteigenschaften vererben, Abstände und Rahmen nicht.
Q. Was ändert eine Kurzschreibweise?
Sie setzt mehrere Werte in einer Zeile — aber alles Weggelassene fällt auf den Standard zurück. Deshalb löscht ein bloßes background: red auch ein zuvor gesetztes Hintergrundbild.
Q. Wenn dieselbe Eigenschaft zweimal gesetzt ist, was gilt?
Zuerst zählt die Spezifität: id schlägt Klasse, Klasse schlägt Tag. Nur bei gleicher Spezifität gewinnt die spätere Regel. !important hebelt alles aus — und sollte deshalb die Ausnahme bleiben.
Q. Px oder rem?
Ein rem ist ein Vielfaches der Wurzelschriftgröße und wächst mit, wenn Lesende die Schrift im Browser vergrößern. Für Schrift und Abstände rem; px passt dort, wo ein Wert nie wandern darf, etwa bei einer Haarlinie.