The StyleWorksCSS { Referenz · Labor · Übungen }
  1. Startseite
  2. Referenz

Vollreferenz · CSS 1 und CSS 2.1

CSS Referenz: alle Eigenschaften, Selektoren und At-Regeln

Jede Eigenschaft mit erlaubten Werten, Ausgangswert, Vererbung, Anwendbarkeit, Bezugswert für Prozentangaben und Browserunterstützung – und einem Labor, in dem sich der Wert direkt verändern lässt.

Eigenschaften 104Selektoren 8Pseudoklassen 5Pseudoelemente 3At-Regeln 5
stylesheet.css · margin
.probe {
  margin: 24px;
}
Dies ist der 1. Absatz. Er steht in einer Box, deren Stil die Regel links oben bestimmt.
berechneter Wertmargin: 24px
Box-Breite
Box-Höhe

Das Labor oben gehört zur Eigenschaft margin. Jede Referenzseite trägt ein eigenes: ein Regler, ein Auswahlfeld oder ein Farbwähler verändert die Regel, die Box darunter folgt, und die Anzeige nennt den berechneten Wert. Bei Selektoren zeigt das Labor stattdessen, welche Elemente eines kleinen Dokuments getroffen werden – und mit welcher Spezifität.

Eigenschaften A–Z

Die Vollreferenz erklärt jede Eigenschaft ausführlich. Für den schnellen Blick auf Werte, Ausgangswert und Vererbung gibt es die Schnellreferenz in Tabellenform, nach Kapiteln der Spezifikation geordnet.

Kursiv und grau stehen die wenigen Eigenschaften ohne Labor. Das Suchfeld filtert die Liste während der Eingabe; die Buchstabenleiste springt zum Abschnitt.

Die Liste führt Kurzschriften und ihre Längsformen getrennt auf, weil beide eigene Regeln haben: Eine Kurzschrift setzt immer alle ihre Bestandteile, auch die nicht genannten, und überschreibt damit eine vorher gesetzte Längsform. Wo eine Eigenschaft für die vier Seiten einer Box getrennt ansprechbar ist, steht sie in zusammengefasster Schreibweise, und die zugehörige Seite behandelt alle vier gemeinsam.

Selektoren

Selektoren bestimmen, für welche Elemente eine Regel gilt. CSS 2.1 kennt Typ-, Klassen-, ID-, Attribut- und Universalselektoren sowie die Kombinatoren für Nachfahren, Kinder und benachbarte Geschwister.

  1. Geschwister-Selektor (adjacent sibling)Labor
  2. Attribut-SelektorLabor
  3. Kind-Selektor (child)Labor
  4. Klassen-SelektorLabor
  5. Nachfahren-Selektor (descendant)Labor
  6. ID-SelektorLabor
  7. Typ-SelektorLabor
  8. Universal-SelektorLabor

Pseudoklassen

Pseudoklassen wählen Elemente nach einem Zustand oder einer Position aus, die im Dokumentbaum nicht als Attribut steht: Links vor und nach dem Besuch, das Element unter dem Zeiger, das erste Kind, die Sprache.

  1. Dynamische PseudoklassenLabor
  2. Sprach-Pseudoklasse :lang()Labor
  3. Link-PseudoklassenLabor
  4. Druck-PseudoklassenLabor
  5. Strukturelle PseudoklasseLabor

Pseudoelemente

Pseudoelemente formatieren Teile eines Elements, die es als eigenes Element nicht gibt: die erste Zeile, den ersten Buchstaben, generierten Inhalt davor und danach.

  1. Die Pseudoelemente :before und :afterLabor
  2. Das Pseudoelement :first-letterLabor
  3. Das Pseudo-Element :first-lineLabor

At-Regeln

At-Regeln steuern das Stylesheet selbst: Zeichensatz, Import weiterer Stylesheets, Medientypen, Seitenformat und die Einbindung von Schriften.

  1. @charsetSyntax
  2. @font-faceSyntax
  3. @importSyntax
  4. @mediaSyntax
  5. @pageSyntax

Aurale Eigenschaften

CSS 2 definierte 20 Eigenschaften für die Sprachausgabe. Kein Browser hat sie umgesetzt, CSS 2.1 führt sie nur noch informativ, und CSS Speech (Level 3) benennt sie neu. Die Referenzseiten bleiben als Dokumentation des Standards erhalten.

Aufbau einer Seite

Jede Seite dieser Referenz folgt derselben Gliederung. Zuerst steht das Labor, in dem sich der Wert verändern lässt und die Wirkung sofort zu sehen ist. Darunter folgen die Erläuterungen, danach die erlaubten Werte als Auszug aus der Spezifikation mit einer Erklärung je Wert, ein Codebeispiel, die Browserunterstützung und die Wechselwirkungen mit anderen Eigenschaften.

Der Auszug aus der Spezifikation ist in einer eigenen Schreibweise notiert, die angibt, welche Werte in welcher Zahl und Reihenfolge zulässig sind. Ein senkrechter Strich trennt Alternativen, ein doppelter Strich lässt beliebige Reihenfolge zu, geschweifte Klammern nennen eine Anzahl, ein Fragezeichen macht einen Wert entbehrlich. Wer diese Schreibweise einmal liest, kann jede Wertangabe hier ohne weitere Erklärung auflösen; der Grundlagenartikel zur CSS-Wertesyntax beschreibt sie im Einzelnen.

Angaben zu Ausgangswert, Vererbung, Anwendbarkeit, Bezugswert für Prozentangaben und Mediengruppe stehen nicht auf den Einzelseiten, sondern gesammelt in der Schnellreferenz, wo sie sich kapitelweise nebeneinander lesen lassen. Diese Aufteilung hat einen praktischen Grund: Die Einzelseite beantwortet, was eine Eigenschaft tut, die Tabelle beantwortet, wie sie sich im Verhältnis zu ihren Nachbarn verhält.

Umfang der Referenz

Abgedeckt sind CSS 1 und CSS 2.1 vollständig, und zwar einschließlich dessen, was aus CSS 2 nicht in CSS 2.1 übernommen wurde. Dazu gehören die zwanzig Eigenschaften für die Sprachausgabe, die Angaben für Seitenformat, Schneidmarken und benannte Seiten sowie einige Schrifteigenschaften, die später in eigenen Modulen zurückgekehrt sind.

Diese Seiten bleiben aus zwei Gründen erhalten. Zum einen soll eine Referenz den Standard vollständig abbilden, auch dort, wo er über die Umsetzung hinausging. Zum anderen kommen die Eigenschaften in Stylesheets aus jener Zeit vor, und wer sie dort findet, soll nachschlagen können, was gemeint war. Jede betroffene Seite trägt einen entsprechenden Hinweis.

Nicht abgedeckt sind Eigenschaften, die nie über einen Entwurf hinausgekommen sind, und herstellereigene Erweiterungen mit vorangestelltem Bindestrich. Beide gehören nicht zum Standard, den diese Referenz beschreibt, und beide sind an anderer Stelle besser dokumentiert als hier.

Was nach CSS 2.1 hinzugekommen ist, steht in einem eigenen Abschnitt. Die Trennung ist bewusst: CSS 2.1 beschreibt ein in sich geschlossenes Modell aus Kaskade, Vererbung, Box-Modell und normalem Fluss, auf dem alles Spätere aufbaut. Wer dieses Modell kennt, versteht die neueren Module als Erweiterungen und nicht als Ersatz.