Syntax

Das grundlegende Ziel der Cascading Stylesheet (CSS) Sprache ist es, einer Browser-Engine zu ermöglichen, Elemente der Seite mit spezifischen Eigenschaften wie Farben, Positionierungen oder Dekorationen darzustellen. Die CSS-Syntax spiegelt dieses Ziel wider, und ihre grundlegenden Bausteine sind:

  • Die Eigenschaft, die ein Bezeichner ist, ein lesbarer Name, der definiert, welche Eigenschaft berücksichtigt wird.
  • Der Wert, der beschreibt, wie die Eigenschaft von der Engine behandelt werden muss. Jede Eigenschaft hat eine Menge gültiger Werte, die durch eine formale Grammatik definiert sind, sowie eine semantische Bedeutung, die von der Browser-Engine implementiert wird.

CSS-Deklarationen

Das Setzen von CSS-Eigenschaften auf spezifische Werte ist die Kernfunktion der CSS-Sprache. Ein Paar aus Eigenschaft und Wert wird als Deklaration bezeichnet, und jede CSS-Engine berechnet, welche Deklarationen auf jedes einzelne Element einer Seite angewendet werden, um es entsprechend zu gestalten und zu layouten.

Sowohl Eigenschaften als auch Werte sind standardmäßig in CSS nicht case-sensitiv. Das Paar wird durch einen Doppelpunkt, : (U+003A COLON), getrennt, und Leerzeichen vor, zwischen und nach Eigenschaften und Werten, aber nicht unbedingt innerhalb, werden ignoriert.

css syntax - declaration.png

Es gibt Hunderte verschiedener Eigenschaften in CSS und praktisch eine endlose Anzahl verschiedener Werte. Nicht alle Paare aus Eigenschaften und Werten sind zulässig, und jede Eigenschaft definiert, welche Werte gültig sind. Wenn ein Wert für eine gegebene Eigenschaft nicht gültig ist, wird die Deklaration als ungültig betrachtet und von der CSS-Engine vollständig ignoriert.

CSS-Deklarationsblöcke

Deklarationen werden in Blöcken gruppiert, das heißt in einer Struktur, die durch eine öffnende Klammer, { (U+007B LEFT CURLY BRACKET), und eine schließende Klammer, } (U+007D RIGHT CURLY BRACKET), begrenzt ist. Blöcke können manchmal verschachtelt sein, daher müssen öffnende und schließende Klammern übereinstimmen.

css syntax - block.png

Solche Blöcke werden naturgemäß Deklarationsblöcke genannt, und die Deklarationen darin werden durch ein Semikolon, ; (U+003B SEMICOLON), getrennt. Ein Deklarationsblock kann leer sein, das heißt, keine Deklarationen enthalten. Leerzeichen um Deklarationen werden ignoriert. Die letzte Deklaration eines Blocks muss nicht durch ein Semikolon abgeschlossen werden, obwohl es oft als guter Stil betrachtet wird, dies zu tun, da es verhindert, dass man es vergisst, wenn man den Block um eine weitere Deklaration erweitert.

Ein CSS-Deklarationsblock wird im folgenden Diagramm visualisiert.

css syntax - declarations block.png

Hinweis: Der Inhalt eines CSS-Deklarationsblocks, das heißt eine Liste von Semikolon-separierten Deklarationen, ohne die öffnende und schließende Klammer, kann in ein HTML-style-Attribut eingefügt werden.

CSS-Regelsätze

Wenn Stylesheets nur jede Deklaration auf jedes Element einer Webseite anwenden könnten, wären sie ziemlich nutzlos. Das eigentliche Ziel ist es, unterschiedliche Deklarationen auf verschiedene Teile des Dokuments anzuwenden.

CSS ermöglicht dies, indem es Bedingungen mit Deklarationsblöcken verknüpft. Jeder (gültige) Deklarationsblock wird von einem oder mehreren Komma-separierten Selektoren vorangestellt, die Bedingungen sind, durch die einige Elemente der Seite ausgewählt werden. Eine Selektorenliste und ein zugehöriger Deklarationsblock werden zusammen als Regelsatz, oder oft einfach als Regel, bezeichnet.

Ein CSS-Regelsatz (oder Regel) wird im folgenden Diagramm visualisiert.

css syntax - ruleset.png

Da ein Element der Seite durch mehrere Selektoren und daher durch mehrere Regeln potenziell mehrfach mit unterschiedlichen Werten versehen werden kann, definiert der CSS-Standard, welche von ihnen Vorrang hat und angewendet werden muss: Dies wird als Kaskadenalgorithmus bezeichnet (siehe Konflikte behandeln).

Hinweis: Es ist wichtig zu beachten, dass selbst wenn ein Regelsatz, der durch eine Gruppe von Selektoren charakterisiert ist, eine Art Abkürzung darstellt, um Regelsätze mit jeweils einem einzelnen Selektor zu ersetzen, dies nicht auf die Gültigkeit des Regelsatzes selbst zutrifft.

Dies führt zu einer wichtigen Konsequenz: Wenn ein einzelner Basisselektor ungültig ist, wie bei der Verwendung eines unbekannten Pseudo-Elements oder einer Pseudoklasse, ist der gesamte Selektor ungültig und daher wird die gesamte Regel als ungültig ebenfalls ignoriert.

CSS-Anweisungen

Regelsätze sind die Hauptbausteine eines Stylesheets, das oft nur aus einer großen Liste davon besteht. Aber es gibt auch andere Informationen, die ein Webautor im Stylesheet vermitteln möchte, wie der Zeichensatz, weitere externe Stylesheets zum Importieren, Schriftarten oder Listenbeschreibungen und viele mehr. Um dies zu tun, werden andere und spezifische Arten von Anweisungen verwendet.

Eine Anweisung ist ein Baustein, der mit einem beliebigen Nicht-Leerzeichen beginnt und am ersten schließenden Klammerzeichen oder Semikolon endet (außerhalb eines Strings, nicht-escaped und nicht in ein weiteres {}, () oder []-Paar eingeschlossen).

css syntax - statements Venn diag.png

Es gibt zwei Arten von Anweisungen:

  • Regelsätze (oder Regeln), die, wie gesehen, eine Sammlung von CSS-Deklarationen mit einer Bedingung verbinden, die durch einen Selektor beschrieben wird.
  • At-Regeln, die mit einem @-Zeichen, @ (U+0040 COMMERCIAL AT), beginnen, gefolgt von einem Bezeichner, und dann bis zum Ende der Anweisung fortfahren, das bis zum nächsten Semikolon (;) außerhalb eines Blocks oder bis zum Ende des nächsten Blocks reicht. Jeder Typ von At-Regeln, definiert durch den Bezeichner, kann seine eigene interne Syntax und natürlich seine eigene Semantik haben. Sie werden verwendet, um Metadateninformationen zu übermitteln (wie @layer oder @import), konditionale Informationen (wie @media oder @document), oder beschreibende Informationen (wie @font-face).

Jede Anweisung, die weder ein Regelsatz noch eine At-Regel ist, ist ungültig und wird ignoriert.

Verschachtelte Anweisungen

Es gibt eine weitere Gruppe von Anweisungen – die verschachtelten Anweisungen. Diese sind Anweisungen, die in einem spezifischen Unterset von At-Regeln – den konditionalen Gruppenregeln – verwendet werden können. Diese Anweisungen gelten nur, wenn eine spezifische Bedingung erfüllt ist: Der Inhalt der @media-At-Regel wird nur angewendet, wenn das Gerät, auf dem der Browser läuft, die ausgedrückte Bedingung erfüllt; der Inhalt der @document-At-Regel wird nur angewendet, wenn die aktuelle Seite einige Bedingungen erfüllt, und so weiter. In CSS1 und CSS2.1 konnten innerhalb konditionaler Gruppenregeln nur Regelsätze verwendet werden. Das war sehr einschränkend und diese Beschränkung wurde in CSS Conditionals Level 3 aufgehoben. Nun können, obwohl noch experimentell und nicht von jedem Browser unterstützt, konditionale Gruppenregeln eine breitere Palette von Inhalten enthalten: Regelsätze, aber auch einige, jedoch nicht alle, At-Regeln.

Siehe auch