Das grundlegende Ziel der Sprache Cascading Stylesheet (CSS) ist es, eine Browser-Engine zu ermöglichen, die Elemente der Seite mit spezifischen Merkmalen wie Farben, Positionierung oder Dekorationen darzustellen. Die CSS-Syntax spiegelt dieses Ziel wider, und ihre grundlegenden Bausteine sind:
Das Festlegen 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 müssen, um es entsprechend zu gestalten und zu layouten.
StandardmäÃig sind sowohl Eigenschaften als auch Werte in CSS nicht zwischen GroÃ- und Kleinschreibung unterscheidend. Das Paar wird durch einen Doppelpunkt :
(U+003A COLON) getrennt, und Leerzeichen vor, zwischen und nach Eigenschaften und Werten, jedoch nicht notwendigerweise innerhalb, werden ignoriert.
Es gibt Hunderte verschiedener Eigenschaften in CSS und eine praktisch endlose Anzahl verschiedener Werte. Nicht alle Paare von Eigenschaften und Werten sind erlaubt, und jede Eigenschaft definiert, welche Werte gültig sind. Wenn ein Wert für eine bestimmte Eigenschaft nicht gültig ist, wird die Deklaration als ungültig angesehen und von der CSS-Engine vollständig ignoriert.
CSS-DeklarationsblöckeDeklarationen 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 geschachtelt sein, daher müssen öffnende und schlieÃende Klammern übereinstimmen.
Solche Blöcke werden natürlicherweise Deklarationsblöcke genannt, und Deklarationen innerhalb von ihnen werden durch ein Semikolon ;
(U+003B SEMICOLON) getrennt. Ein Deklarationsblock kann leer sein, das heiÃt keine Deklaration enthalten. Leerzeichen um Deklarationen herum werden ignoriert. Die letzte Deklaration eines Blocks muss nicht durch ein Semikolon abgeschlossen werden, obwohl es oft als guter Stil angesehen wird, dies zu tun, da es verhindert, das Hinzufügen eines neuen Semikolons zu vergessen, wenn der Block mit einer weiteren Deklaration erweitert wird.
Ein CSS-Deklarationsblock wird im folgenden Diagramm visualisiert.
Hinweis: Der Inhalt eines CSS-Deklarationsblocks, also eine Liste von semikolongetrennten Deklarationen ohne die anfänglichen und schlieÃenden Klammern, kann innerhalb eines HTML-style
-Attributs eingefügt werden.
Wenn Stylesheets nur eine 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 Bedingungen mit Deklarationsblöcken verknüpft werden. Jeder (gültige) Deklarationsblock wird von einem oder mehreren kommagetrennten Selektoren vorangestellt, die Bedingungen darstellen, die einige Elemente der Seite auswählen. Eine Selektorliste und ein damit verknüpfter Deklarationsblock bilden zusammen einen Regelsatz, oft auch Regel genannt.
Ein CSS-Regelsatz (oder Regel) wird im folgenden Diagramm visualisiert.
Da ein Element der Seite von mehreren Selektoren ausgewählt werden kann und daher von mehreren Regeln, die eine bestimmte Eigenschaft möglicherweise mehrfach mit unterschiedlichen Werten enthalten, legt der CSS-Standard fest, welche Regel Vorrang vor der anderen 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 einzigen 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, zum Beispiel bei der Verwendung eines unbekannten Pseudoelements oder einer Pseudoklasse, ist der gesamte Selektor ungültig und daher wird die gesamte Regel ignoriert (ebenfalls ungültig).
CSS-AnweisungenRegelsätze sind die Hauptbausteine eines Stylesheets, das oft nur aus einer groÃen Liste von ihnen besteht. Aber es gibt andere Informationen, die ein Webautor im Stylesheet übermitteln möchte, wie die Zeichencodierung, andere externe Stylesheets zum Importieren, Schriftarten oder Listenzählerbeschreibungen und vieles mehr. Dazu wird es andere und spezifische Arten von Anweisungen verwenden.
Eine Anweisung ist ein Baustein, der mit beliebigen Nicht-Leerzeichen-Buchstaben beginnt und beim ersten schlieÃenden Klammer oder Semikolon endet (auÃerhalb eines Strings, nicht-escape und nicht in einem anderen {}, () oder [] Paar enthalten).
Es gibt zwei Arten von Anweisungen:
@
(U+0040 COMMERCIAL AT) beginnen, gefolgt von einem Bezeichner und dann bis zum Ende der Anweisung fortlaufend, das heiÃt bis zum nächsten Semikolon (;) auÃerhalb eines Blocks oder das Ende des nächsten Blocks. Jeder Typ von At-Regeln, definiert durch den Bezeichner, kann seine eigene interne Syntax und natürlich Semantik haben. Sie werden verwendet, um Metadateninformationen zu übermitteln (wie @layer
oder @import
), bedingte 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.
Geschachtelte AnweisungenEs gibt eine weitere Gruppe von Anweisungen â die geschachtelten Anweisungen. Dies sind Anweisungen, die in einem spezifischen Unterset von At-Regeln â den bedingten 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, der festgelegten Bedingung entspricht; 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 in bedingten Gruppenregeln nur Regelsätze verwendet werden. Das war sehr einschränkend und diese Einschränkung wurde in CSS Conditionals Level 3 gelockert. Jetzt, obwohl noch experimentell und nicht von jedem Browser unterstützt, können bedingte Gruppenregeln eine gröÃere Anzahl von Inhalten enthalten: Regelsätze, aber auch einige (nicht alle) At-Regeln.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4