Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 bestimmten Merkmalen zu gestalten, wie Farben, Positionierung oder Dekorationen. DieCSS-Syntax spiegelt dieses Ziel wider und ihre grundlegenden Bausteine sind:
- DieEigenschaft, die ein Bezeichner ist, also ein menschenlesbarerName, der definiert, welches Merkmal betrachtet wird.
- DerWert, der beschreibt, wie das Merkmal 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 bestimmte Werte ist die Kernfunktion der CSS-Sprache. Ein Paar aus Eigenschaft und Wert wird alsDeklaration bezeichnet, und jede CSS-Engine berechnet, welche Deklarationen auf jedes einzelne Element einer Seite angewendet werden müssen, um es angemessen zu layouten und zu gestalten.
Sowohl Eigenschaften als auch Werte sind standardmäßig in CSS nicht zwischen Groß- und Kleinschreibung unterscheidend. Das Paar wird durch einen Doppelpunkt,: (U+003A KOLON), getrennt, und Leerzeichen vor, zwischen und nach Eigenschaften und Werten, jedoch nicht unbedingt innerhalb, werden ignoriert.
Es gibtHunderte verschiedener Eigenschaften in CSS und eine praktisch 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 alsungültig betrachtet und von der CSS-Engine vollständig ignoriert.
CSS-Deklarationsblöcke
Deklarationen werden inBlöcken gruppiert, das heißt in einer Struktur eingeschlossen zwischen einer öffnenden Klammer,{ (U+007B LINKE GESCHWEIFTE KLAMMER), und einer schließenden,} (U+007D RECHTE GESCHWEIFTE KLAMMER). Blöcke können manchmal geschachtelt sein, daher müssen öffnende und schließende Klammern übereinstimmen.
Solche Blöcke werden natürlichDeklarationsblöcke genannt, und die Deklarationen in ihnen werden durch ein Semikolon,; (U+003B SEMIKOLON), 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 alsguter Stil betrachtet wird, dies zu tun, da es verhindert, dass man vergisst, es hinzuzufügen, wenn der Block um eine weitere Deklaration erweitert wird.
Ein CSS-Deklarationsblock wird im untenstehenden Diagramm visualisiert.
Hinweis:Der Inhalt eines CSS-Deklarationsblocks, also eine Liste von durch Semikola getrennten Deklarationen, ohne die Anfangs- und Schlussklammern, kann in ein HTMLstyle Attribut gesetzt werden.
CSS-Regelsätze
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 erlaubt dies, indem Bedingungen mit Deklarationsblöcken verknüpft werden. Jeder (gültige) Deklarationsblock wird von einem oder mehreren kommagetrenntenSelektoren vorangestellt, die Bedingungen sind, die einige Elemente der Seite auswählen. EineSelektorenliste und ein zugehöriger Deklarationsblock werden zusammen alsRegelsatz oder oft einfach alsRegel bezeichnet.
Ein CSS-Regelsatz (oder Regel) wird im untenstehenden Diagramm visualisiert.
Da ein Element der Seite von mehreren Selektoren getroffen werden kann und daher potenziell von mehreren Regeln, die eine gegebene Eigenschaft mehrmals mit unterschiedlichen Werten enthalten, definiert der CSS-Standard, welcher Vorrang hat und angewendet werden muss: dies wird als Kaskade-Algorithmus bezeichnet (sieheKonfliktbehandlung).
Hinweis:Es ist wichtig zu beachten, dass selbst wenn ein Regelsatz, der durch eine Gruppe von Selektoren charakterisiert wird, eine Art Kurzschrift ersetzt, die Regelsätze mit jeweils einem einzelnen Selektor ersetzt, dies nicht auf die Gültigkeit des Regelsatzes selbst zutrifft.
Dies führt zu einer wichtigen Konsequenz: wenn ein einzelner Basis-Selektor ungültig ist, wie bei der Verwendung eines unbekannten Pseudo-Elements oder einer Pseudo-Klasse, ist der ganzeSelektor ungültig und daher wird die gesamte Regel ignoriert (ebenfalls als ungültig).
CSS-Anweisungen
Regelsätze sind die Hauptbausteine eines Stylesheets, das oft nur aus einer großen Liste von ihnen besteht. Aber es gibt auch andere Informationen, die ein Webautor im Stylesheet vermitteln möchte, wie die Zeichenkodierung, andere externe Stylesheets zum Importieren, Schriftarten oder Listenbeschreibungscounter und vieles mehr. Hierfür werden andere und spezifische Anweisungstypen verwendet.
EineAnweisung ist ein Baustein, der mit einem beliebigen Nicht-Leerzeichen-Zeichen beginnt und beim ersten schließenden Klammerzeichen oder Semikolon (außerhalb eines Strings, nicht-escaped und nicht in einem anderen {}, () oder [] Paar enthalten) endet.
Es gibt zwei Arten von Anweisungen:
- Regelsätze (oderRegeln), die, wie gesehen, eine Sammlung von CSS-Deklarationen mit einer Bedingung verknüpfen, die durch einenSelektor beschrieben wird.
- At-Regeln, die mit einem At-Zeichen,
@(U+0040 COMMERCIAL AT), beginnen, gefolgt von einem Bezeichner und dann bis zum Ende der Anweisung fortfahren, das heißt bis zum nächsten Semikolon (;) außerhalb eines Blocks oder dem Ende des nächsten Blocks. Jeder Typ vonAt-Regeln, definiert durch den Bezeichner, kann seine eigene interne Syntax und natürlich Semantik haben. Sie werden verwendet, um Metainformationen zu übermitteln (wie@layeroder@import), bedingte Informationen (wie@mediaoder@document), oder beschreibende Informationen (wie@font-face).
Jede Anweisung, die kein Regelsatz oder eine At-Regel ist, ist ungültig und wird ignoriert.
Geschachtelte Anweisungen
Es gibt eine weitere Gruppe von Anweisungen – diegeschachtelten Anweisungen. Dies sind Anweisungen, die in einer spezifischen Untermenge von At-Regeln verwendet werden können – denkontextabhängigen Gruppenregeln. Diese Anweisungen gelten nur, wenn eine spezifische Bedingung erfüllt ist: Der@media At-Regel-Inhalt wird nur angewendet, wenn das Gerät, auf dem der Browser läuft, die ausgedrückte Bedingung erfüllt; der@document At-Regel-Inhalt wird nur angewendet, wenn die aktuelle Seite einige Bedingungen erfüllt usw. In CSS1 und CSS2.1 konnten nurRegelsätze innerhalb kontextabhängiger Gruppenregeln verwendet werden. Diese Einschränkung war sehr restriktiv und wurde inCSS Conditionals Level 3 aufgehoben. Nun, obwohl immer noch experimentell und nicht von jedem Browser unterstützt, können kontextabhängige Gruppenregeln eine breitere Palette von Inhalten enthalten: Regelsätze, aber auch einige, aber nicht alle, At-Regeln.