mozilla
Ihre Suchergebnisse

    Wertdefinitionssyntax

    Eine formale Grammatik, die CSS Wertdefinitionssyntax, wird für die Definition einer Menge von gültigen Werten für eine CSS Eigenschaft oder Funktion verwendet. Zusätzlich zu dieser Syntax kann die Menge an gültigen Werten durch semantische Beschränkungen (wie z. B. dass eine Zahl positiv sein muss) weiter eingegrenzt werden.

    Die Definitionssyntax beschreibt, welche Werte erlaubt sind und die Interaktionen zwischen ihnen. Eine Komponente kann ein Schlüsselwort sein, einige Zeichen, die als Literal interpretiert werden, oder ein Wert eines vorhandenen CSS Datentyps einer anderen CSS Eigenschaft.

    Komponentenwert Typen

    Schlüsselwörter

    Generische Schlüsselwörter

    Ein Schlüsselwort mit einer vordefinierten Bedeutung wird wortgetreu, ohne Anführungszeichen, dargestellt, zum Beispiel: auto, smaller oder ease-in.

    Die Spezialfälle inherit und initial

    Alle CSS Eigenschaften akzeptieren die Schlüsselwörter inherit und initial, die durchweg in CSS definiert werden. Sie werden nicht in der Wertdefinition angezeigt und werden implizit definiert.

    Literale

    In CSS können einige Zeichen getrennt auftreten, wie der Schrägstrich ('/') oder das Komma (','), und werden in der Eigenschaftendefinition verwendet, um Teile voneinander zu trennen. Das Komma wird oft verwendet, um Werte in Aufzählungen oder Parameter in Mathematik ähnlichen Funktionen zu trennen; der Schrägstrich trennt oft Teile eines Wertes, die semantisch unterscheiden, jedoch eine gemeinsame Syntax haben. Normalerweise wird der Schrägstrich manchmal in Kurzform Eigenschaften verwendet, um Komponenten von einander zu trennen, die vom gleichen Typ sind, aber zu verschiedenen Eigenschaften gehören.

    Beide Symbole erscheinen buchstäblich in einer Wertdefinition.

    Datentypen

    Elementare Datentypen

    Bestimmte Daten werden überall in CSS verwendet und werden einmalig für alle Werte in der Spezifikation definiert. Die sogenannten elementaren Datentypen werden durch ihren von den Symbolen '<' und '>' umschlossenen Namen gekennzeichnet: <angle>, <string>, …

    Nichtterminale Datentypen

    Weniger häufige Datentypen, genannt nichtterminale Datentypen, werden ebenfalls von '<' und '>' umschlossen.

    Es gibt zwei Arten von nichtterminalen Datentypen:

    • Datentypen, die den Namen einer Eigenschaft teilen, eingeschlossen von Anführungszeichen. In diesem Fall teilt der Datentyp die gleiche Menge an Werten wie die Eigenschaft. Sie werden oft in der Definition von Kurzform Eigenschaften verwendet.
    • Datentypen, die den Namen einer Eigenschaft nicht teilen. Diese Datentypen ähneln den elementaren Datentypen. Sie unterscheiden sich lediglich in der Stelle ihrer Definition von den elementaren Datentypen: In diesem Fall ist die Definition normalerweise sehr nahe bei der Definition der Eigenschaft, die sie benutzt.

    Komponentenwert Kombinatoren

    Eckige Klammern

    Eckige Klammern schließen mehrere Entitäten, Kombinatoren und Multiplikatoren ein und transformieren diese anschließend als eine einzige Komponente. Sie werden benutzt, um Komponenten zu gruppieren und so die Rangordnungsregeln zu umgehen.

    bold [ thin && <length> ]

    Dieses Beispiel passt auf die folgenden Werte:

    • bold thin 2vh
    • bold 0 thin
    • bold thin 3.5em

    Aber nicht:

    • thin bold 3em; da bold neben die durch die Klammern definierte Komponente gestellt ist, muss sie davor erscheinen.

    Nebeneinanderstellung

    Wenn mehrere Schlüsselwörter, Literale oder Datentypen aufgereiht werden und nur durch ein oder mehrere Leerzeichen getrennt werden, nennt man dies Nebeneinanderstellung. Alle nebeneinander gestellten Komponenten sind zwingend und müssen in der exakten Reihenfolge angegeben werden.

    bold <length> , thin
    

    Dieses Beispiel passt auf die folgenden Werte:

    • bold 1em, thin
    • bold 0, thin
    • bold 2.5cm, thin
    • bold 3vh, thin

    Aber nicht:

    • thin 1em, bold, da die Entitäten in der beschriebenen Reihenfolge stehen müssen.
    • bold 1em thin, da die Entitäten zwingend angegeben werden müssen; das Komma und ein Literal müssen vorhanden sein.
    • bold 0.5ms, thin, da ms Werte keine <length> Werte sind.

    Doppeltes Und-Zeichen

    Wenn zwei oder mehrere Komponenten durch ein doppeltes Und-Zeichen, &&, getrennt sind, bedeutet das, dass alle diese Entitäten zwingend sind, jedoch in beliebiger Reihenfolge auftreten können.

    bold && <length>
    

    Dieses Beispiel passt auf die folgenden Werte:

    • bold 1em
    • bold 0
    • 2.5cm bold
    • 3vh bold

    Aber nicht:

    • bold, da beide Komponenten im Wert vorkommen müssen.
    • bold 1em bold, da beide Komponenten nur einmal vorkommen dürfen.
    Hinweis: Juxtaposition hat Vorrang gegenüber dem doppelten Und-Zeichen, was bedeutet, dass bold thin && <length> gleichbedeutend ist mit [ bold thin ] && <length>. Dies beschreibt bold thin <length> oder <length> bold thin, aber nicht bold <length> thin.

    Doppelter Balken

    Wenn zwei oder mehrere Komponenten durch einen doppelten Balken, ||, getrennt sind, bedeutet das, dass alle Entitäten optional sind: mindestens eine davon muss angegeben werden, und sie können in beliebiger Reihenfolge auftreten. Normalerweise wird dies verwendet, um die verschiedenen Werte einer Kurzform Eigenschaft zu definieren.

    <'border-width'> || <'border-style'> || <'border-color'>
    

    Dieses Beispiel passt auf die folgenden Werte:

    • 1em solid blue
    • blue 1em
    • solid 1px yellow

    Aber nicht:

    • blue yellow, da eine Komponente nur einmal vorkommen darf.
    • bold, da es kein erlaubtes Schlüsselwort als Wert für irgendeine Entität ist.
    Hinweis: Das doppelte Und-Zeichen hat Vorrang gegenüber dem doppelten Balken, was bedeutet, dass bold || thin && <length> gleichbedeutend ist mit bold || [ thin && <length> ]. Dies beschreibt bold, thin, <length>, bold thin, <length> bold, oder thin <length> bold, aber nicht bold <length> bold thin, da bold, falls nicht weggelassen, vor oder nach der gesamten thin && <length> Komponente platziert werden muss.

    Einfacher Balken

    Wenn zwei oder mehrere Entitäten durch einen einfachen Balken, |, getrennt werden, bedeutet das, dass alle Entitäten exklusive Optionen sind: genau eine dieser Optionen muss angegeben werden. Dies wird normalerweise benutzt, um eine Liste möglicher Schlüsselwörter zu trennen.

    <percentage> | <length> | left | center | right | top | bottom

    Dieses Beispiel passt auf die folgenden Werte:

    • 3%
    • 0
    • 3.5em
    • left
    • center
    • right
    • top
    • bottom

    Aber nicht:

    • center 3%, da nur eine der Komponenten angegeben werden darf.
    • 3em 4.5em, da eine Komponente nur einmal vorkommen darf.

    Hinweis: Der doppelte Balken hat Vorrang gegenüber dem einfachen Balken, was bedeutet, dass bold | thin || <length> gleichbedeutend ist mit bold | [ thin || <length> ]. Dies beschreibt bold, thin, <length>, <length> thin, oder thin <length>, aber nicht bold <length>, da nur eine Entität jeder Seite des | Kombinators vorkommen darf.

    Komponentenwert Multiplikatoren

    Ein Multiplikator ist ein Zeichen, das angibt, wie oft eine vorhergehende Entität wiederholt werden kann. Ohne einen Multiplikator muss eine Entität exakt einmal vorkommen.

    Hinweis: Multiplikatoren können nicht zu Kombinatoren hinzugefügt werden und haben auch keinen Vorrang vor diesen.

    Asterisk (*)

    Der Asterisk Multiplikator gibt an, dass die Entität keinmal, einmal oder mehrmals vorkommen kann.

    bold smaller*

    Dieses Beispiel passt auf die folgende Werte:

    • bold
    • bold smaller
    • bold smaller smaller
    • bold smaller smaller smaller and so on.

    Aber nicht:

    • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.

    Plus (+)

    Der Plus Multiplikator gibt an, dass die Entität einmal oder mehrmals vorkommen kann.

    bold smaller+

    Dieses Beispiel passt auf die folgenden Werte:

    • bold smaller
    • bold smaller smaller
    • bold smaller smaller smaller and so on.

    Aber nicht:

    • bold, da smaller mindestens einmal vorkommen muss.
    • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.

    Fragezeichen (?)

    Der Fragezeichen Multiplikator gibt an, dass die Entität optional ist und keinmal oder einmal vorkommen kann.

    bold smaller?

    Dieses Beispiel passt auf die folgenden Werte:

    • bold
    • bold smaller

    Aber nicht:

    • bold smaller smaller, da smaller höchstens einmal vorkommen darf.
    • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.

    Geschweifte Klammern ({ })

    Der Geschweifte Klammern Multiplikator schließt zwei durch Komma getrennte Ganzzahlen A und B ein und gibt an, dass die Entität mindestens A-mal vorkommen muss und höchstens B-mal vorkommen darf.

    bold smaller{1,3}

    Dieses Beispiel passt auf die folgenden Werte:

    • bold smaller
    • bold smaller smaller
    • bold smaller smaller smaller

    Aber nicht:

    • bold, da smaller mindestens einmal vorkommen muss.
    • bold smaller smaller smaller smaller, da smaller höchstens dreimal vorkommen darf.
    • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.

    Rautensymbol (#)

    Der Rautensymbol Multiplizierer gibt an, dass die Entität einmal oder mehrmals wiederholt werden kann (wie beim Plus Multiplikator), jedoch jedes Vorkommen durch ein Komma (',') getrennt wird.

    bold smaller#

    Dieses Beispiel passt auf die folgenden Werte:

    • bold smaller
    • bold smaller, smaller
    • bold smaller, smaller, smaller and so on.

    Aber nicht:

    • bold, da smaller mindestens einmal vorkommen muss.
    • bold smaller smaller smaller, da verschiedene Vorkommen von smaller durch Komma getrennt werden müssen.
    • smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.

    Übersicht

    Zeichen Name Beschreibung Beispiel
    Kombinatoren
      Nebeneinanderstellung Komponenten sind zwingend und müssen in der angegebenen Reihenfolge vorkommen solid <length>
    && Doppeltes Und-Zeichen Komponenten sind zwingend, aber können in beliebiger Reihenfolge vorkommen <length> && <string>
    || Doppelter Balken Mindestens eine der Komponenten muss angegeben werden und sie können in beliebiger Reihenfolge vorkommen <'border-image-outset'> || <'border-image-slice'>
    | Einfacher Balken Genau eine der Komponenten muss angegeben werden smaller | small | normal | big | bigger
    [ ] Eckige Klammern Gruppierung von Komponenten, um Rangordnungsregeln zu umgehen bold [ thin && <length> ]
    Multiplizierer
      Kein Multiplizierer Genau einmal solid
    * Asterisk 0 oder mehrmals bold smaller*
    + Pluszeichen 1 oder mehrmals bold smaller+
    ? Fragezeichen 0 oder 1-mal (that is optional) bold smaller?
    {A,B} Geschweifte Klammern Mindestens A-mal, höchstens B-mal bold smaller{1,3}
    # Rautensymbol 1 oder mehrmals, aber jedes Vorkommen getrennt durch Komma (',') bold smaller#

    Spezifikationen

    Spezifikation Status Kommentar
    CSS Values and Units Module Level 3
    Die Definition von 'Value definition syntax' in dieser Spezifikation.
    Anwärter Empfehlung Fügt den Rautensymbol Multiplizierer hinzu.
    CSS Level 2 (Revision 1)
    Die Definition von 'Value definition syntax' in dieser Spezifikation.
    Empfehlung Fügt den doppelten Und-Zeichen Kombinator hinzu.
    CSS Level 1
    Die Definition von 'Value definition syntax' in dieser Spezifikation.
    Empfehlung Ursprüngliche Definition

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Schlagwörter: 
    Mitwirkende an dieser Seite: Sebastianz
    Zuletzt aktualisiert von: Sebastianz,