Einführung in die CSS-Syntax: Deklarationen, Regelsätze und Anweisungen
Das grundlegende Ziel der Cascading Stylesheet (CSS) Sprache besteht darin, einer Browser-Engine zu ermöglichen, Elemente der Seite mit spezifischen Eigenschaften, wie Farben, Positionierung oder Dekorationen, zu zeichnen. Die CSS-Syntax spiegelt dieses Ziel wider und ihre grundlegenden Bausteine sind:
- Die Eigenschaft, die ein Bezeichner ist, also ein menschenlesbarer Name, der definiert, welche Funktion betrachtet wird.
- Der Wert, der beschreibt, wie die Funktion von der Engine gehandhabt werden muss. Jede Eigenschaft hat eine Reihe gültiger Werte, definiert durch eine formale Grammatik, 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 anzuwenden sind, um es angemessen zu layouten und zu gestalten.
Sowohl Eigenschaften als auch Werte sind standardmäßig in CSS groß-/kleinschreibungsunabhängig. Das Paar wird durch einen Doppelpunkt, : (U+003A COLON), getrennt, und Leerzeichen vor, zwischen und nach Eigenschaften und Werten, aber nicht notwendigerweise innerhalb, werden ignoriert.
Es gibt hunderte verschiedene Eigenschaften in CSS und eine praktisch unbegrenzte Anzahl verschiedener Werte. Nicht alle Paare aus Eigenschaften und Werten sind erlaubt, 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 vollständig von der CSS-Engine 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.
Solche Blöcke werden natürlicherweise als Deklarationsblöcke bezeichnet, und die Deklarationen innerhalb dieser Blöcke werden durch ein Semikolon, ; (U+003B SEMICOLON), getrennt. Ein Deklarationsblock kann leer sein, also keine Deklaration enthalten. Leerzeichen um Deklarationen herum werden ignoriert. Die letzte Deklaration eines Blocks muss nicht mit einem Semikolon abgeschlossen werden, obwohl es oft als guter Stil betrachtet wird, dies zu tun, da es verhindert, das Hinzufügen eines weiteren Deklarationselements zu vergessen, wenn der Block erweitert wird.
Ein CSS-Deklarationsblock wird im Diagramm unten visualisiert.
Hinweis:
Der Inhalt eines CSS-Deklarationsblocks, also eine Liste von durch Semikolons getrennten Deklarationen, ohne die anfänglichen und abschließenden Klammern, kann innerhalb eines HTML style Attributs eingefügt werden.
CSS-Regelsätze
Wenn Stylesheets nur Deklarationen auf jedes Element einer Webseite anwenden könnten, wären sie ziemlich nutzlos. Das eigentliche Ziel ist es, verschiedene Deklarationen auf verschiedene Teile des Dokuments anzuwenden.
CSS ermöglicht dies, indem es Bedingungen mit Deklarationsblöcken assoziiert. Jeder (gültige) Deklarationsblock wird durch einen oder mehrere kommaseparierte Selektoren vorangehenden, die Bedingungen darstellen, durch die einige Elemente der Seite ausgewählt werden. Eine Selektorliste und ein damit verbundener Deklarationsblock werden zusammen als Regelsatz, oder oft als Regel, bezeichnet.
Ein CSS-Regelsatz (oder Regel) wird im Diagramm unten visualisiert.
Da ein Element der Seite durch mehrere Selektoren und daher durch mehrere Regeln potenziell mehrmals mit einer gegebenen Eigenschaft, aber mit unterschiedlichen Werten übereinstimmen kann, definiert der CSS-Standard, welche Eigenschaft Vorrang vor der anderen hat und angewendet werden muss: Dies wird als Kaskadenalgorithmus bezeichnet (siehe Konflikte behandeln).
Hinweis: Es ist wichtig zu beachten, dass auch wenn ein durch eine Gruppe von Selektoren charakterisierter Regelsatz eine Art Kurzschrift ist, die Regelsätze mit einem Einzelselektor ersetzt, dies nicht auf die Gültigkeit des Regelsatzes selbst zutrifft.
Dies führt zu einer wichtigen Konsequenz: Wenn ein einziger Basisselektor ungültig ist, wie zum Beispiel bei der Verwendung eines unbekannten Pseudoelements oder einer Pseudoklasse, ist der gesamte Selektor ungültig und daher wird die gesamte Regel ignoriert (als ebenfalls ungültig).
CSS-Anweisungen
Regelsätze sind die Hauptbausteine eines Stylesheets, das häufig nur aus einer großen Liste von ihnen besteht. Aber es gibt andere Informationen, die ein Webautor im Stylesheet vermitteln möchte, wie den Zeichensatz, andere externe Stylesheets zum Importieren, Schriftgesicht- oder Listen-Zählerbeschreibungen und viele mehr. Dafür werden andere und spezifische Arten von Anweisungen verwendet.
Eine Anweisung ist ein Baustein, der mit nicht-leeren Zeichen beginnt und beim ersten abschließenden Klammerzeichen oder Semikolon endet (außerhalb eines Strings, nicht maskiert und nicht in ein anderes {}, () oder [] Paar eingeschlossen).
Es gibt zwei Arten von Anweisungen:
- Regelsätze (oder Regeln), die, wie gesehen, eine Sammlung von CSS-Deklarationen mit einer durch einen Selektor beschriebenen Bedingung verknüpfen.
- At-Regeln, die mit einem at-Zeichen,
@(U+0040 COMMERCIAL AT), beginnen, gefolgt von einem Bezeichner und dann bis zum Ende der Anweisung weitergehen, also bis zum nächsten Semikolon (;) außerhalb eines Blocks oder dem Ende des nächsten Blocks. Jeder Art von At-Regeln, definiert durch den Bezeichner, kann ihre eigene interne Syntax und Semantik haben. Sie werden zur Übermittlung von Metadateninformationen (wie@layeroder@import), bedingten Informationen (wie@mediaoder@document), oder beschreibenden Informationen (wie@font-face) verwendet.
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 einer bestimmten Untergruppe von At-Regeln verwendet werden können – den bedingten Gruppenregeln. Diese Anweisungen gelten nur, wenn eine bestimmte Bedingung erfüllt ist: der @media At-Regelinhalt wird nur angewendet, wenn das Gerät, auf dem der Browser ausgeführt wird, der ausgedrückten Bedingung entspricht; der @document At-Regelinhalt wird nur angewendet, wenn die aktuelle Seite einigen Bedingungen entspricht und so weiter. In CSS1 und CSS2.1 konnten nur Regelsätze innerhalb bedingter Gruppenregeln verwendet werden. Das war sehr einschränkend und diese Einschränkung wurde in CSS Conditionals Level 3 aufgehoben. Jetzt, obwohl noch experimentell und nicht von jedem Browser unterstützt, können bedingte Gruppenregeln eine breitere Palette an Inhalten enthalten: Regelsätze, aber auch einige, jedoch nicht alle, At-Regeln.