---
title: Wertdefinitionssyntax
slug: Web/CSS/Wertdefinitionssyntax
tags:
  - CSS
  - Referenz
translation_of: Web/CSS/Value_definition_syntax
---
<p>{{ CSSRef() }}</p>

<p><span class="seoSummary">Eine formale Grammatik, die <strong>CSS Wertdefinitionssyntax</strong>, wird für die Definition einer Menge von gültigen Werten für eine CSS Eigenschaft oder Funktion verwendet.</span> 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.</p>

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

<h2 id="Komponentenwert_Typen">Komponentenwert Typen</h2>

<h3 id="Schlüsselwörter">Schlüsselwörter</h3>

<h4 id="Generische_Schlüsselwörter">Generische Schlüsselwörter</h4>

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

<h4 id="Die_Spezialfälle_inherit_und_initial">Die Spezialfälle <code>inherit</code> und <code>initial</code></h4>

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

<h3 id="Literale">Literale</h3>

<p>In CSS können einige Zeichen getrennt auftreten, wie der Schrägstrich ('<code>/</code>') oder das Komma ('<code>,</code>'), 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.</p>

<p>Beide Symbole erscheinen buchstäblich in einer Wertdefinition.</p>

<h3 id="Datentypen">Datentypen</h3>

<h4 id="Elementare_Datentypen">Elementare Datentypen</h4>

<p>Bestimmte Daten werden überall in CSS verwendet und werden einmalig für alle Werte in der Spezifikation definiert. Die sogenannten <em>elementaren Datentypen</em> werden durch ihren von den Symbolen '<code>&lt;</code>' und '<code>&gt;</code>' umschlossenen Namen gekennzeichnet: {{ cssxref("&lt;angle&gt;") }}, {{cssxref("&lt;string&gt;")}}, …</p>

<h4 id="Nichtterminale_Datentypen">Nichtterminale Datentypen</h4>

<p>Weniger häufige Datentypen, genannt <em>nichtterminale Datentypen</em>, werden ebenfalls von '<code>&lt;</code>' und '<code>&gt;</code>' umschlossen.</p>

<p>Es gibt zwei Arten von nichtterminalen Datentypen:</p>

<ul>
 <li>Datentypen, die <em>den Namen einer Eigenschaft teilen</em>, 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.</li>
 <li>Datentypen, die <em>den Namen einer Eigenschaft nicht teilen</em>. 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.</li>
</ul>

<h2 id="Komponentenwert_Kombinatoren">Komponentenwert Kombinatoren</h2>

<h3 id="Eckige_Klammern">Eckige Klammern</h3>

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

<pre class="syntaxbox"><code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></pre>

<p>Dieses Beispiel passt auf die folgenden Werte:</p>

<ul>
 <li><code>bold thin 2vh</code></li>
 <li><code>bold 0 thin</code></li>
 <li><code>bold thin 3.5em</code></li>
</ul>

<p>Aber nicht:</p>

<ul>
 <li><code>thin bold 3em</code>; da <code>bold</code> neben die durch die Klammern definierte Komponente gestellt ist, muss sie davor erscheinen.</li>
</ul>

<h3 id="Nebeneinanderstellung">Nebeneinanderstellung</h3>

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

<pre class="syntaxbox">bold &lt;length&gt; , thin
</pre>

<p>Dieses Beispiel passt auf die folgenden Werte:</p>

<ul>
 <li><code>bold 1em, thin</code></li>
 <li><code>bold 0, thin</code></li>
 <li><code>bold 2.5cm, thin</code></li>
 <li><code>bold 3vh, thin</code></li>
</ul>

<p>Aber nicht:</p>

<ul>
 <li><code>thin 1em, bold</code>, da die Entitäten in der beschriebenen Reihenfolge stehen müssen.</li>
 <li><code>bold 1em thin</code>, da die Entitäten zwingend angegeben werden müssen; das Komma und ein Literal müssen vorhanden sein.</li>
 <li><code>bold 0.5ms, thin</code>, da <code>ms</code> Werte keine {{cssxref("&lt;length&gt;")}} Werte sind.</li>
</ul>

<h3 id="Doppeltes_Und-Zeichen">Doppeltes Und-Zeichen</h3>

<p>Wenn zwei oder mehrere Komponenten durch ein <em>doppeltes Und-Zeichen</em>, <code>&amp;&amp;</code>, getrennt sind, bedeutet das, dass alle diese Entitäten <strong>zwingend sind, jedoch in beliebiger Reihenfolge auftreten können</strong>.</p>

<pre class="syntaxbox">bold &amp;&amp; &lt;length&gt;
</pre>

<p>Dieses Beispiel passt auf die folgenden Werte:</p>

<ul>
 <li><code>bold 1em</code></li>
 <li><code>bold 0</code></li>
 <li><code>2.5cm bold</code></li>
 <li><code>3vh bold</code></li>
</ul>

<p>Aber nicht:</p>

<ul>
 <li><code>bold</code>, da beide Komponenten im Wert vorkommen müssen.</li>
 <li><code>bold 1em bold</code>, da beide Komponenten nur einmal vorkommen dürfen.</li>
</ul>

<div class="note"><strong>Hinweis:</strong> Juxtaposition hat Vorrang gegenüber dem doppelten Und-Zeichen, was bedeutet, dass <code>bold thin &amp;&amp; &lt;length&gt;</code> gleichbedeutend ist mit <code>[ </code><code>bold thin ] &amp;&amp; &lt;length&gt;</code>. Dies beschreibt <code>bold thin &lt;length&gt;</code> oder <code>&lt;length&gt;</code><code> bold thin</code>, aber nicht <code>bold &lt;length&gt;</code><code> thin</code>.</div>

<h3 id="Doppelter_Balken">Doppelter Balken</h3>

<p>Wenn zwei oder mehrere Komponenten durch einen <em>doppelten Balken</em>, <code>||</code>, getrennt sind, bedeutet das, dass alle Entitäten optional sind: <strong>mindestens eine davon muss angegeben werden, und sie können in beliebiger Reihenfolge auftreten</strong>. Normalerweise wird dies verwendet, um die verschiedenen Werte einer <a href="/de/docs/Web/CSS/Kurzform_Eigenschaft" title="/en-US/docs/CSS/Shorthand_properties">Kurzform Eigenschaft</a> zu definieren.</p>

<pre class="syntaxbox">&lt;'border-width'&gt; || &lt;'border-style'&gt; || &lt;'border-color'&gt;
</pre>

<p>Dieses Beispiel passt auf die folgenden Werte:</p>

<ul>
 <li><code>1em solid blue</code></li>
 <li><code>blue 1em</code></li>
 <li><code>solid 1px yellow</code></li>
</ul>

<p>Aber nicht:</p>

<ul>
 <li><code>blue yellow</code>, da eine Komponente nur einmal vorkommen darf.</li>
 <li><code>bold</code>, da es kein erlaubtes Schlüsselwort als Wert für irgendeine Entität ist.</li>
</ul>

<div class="note"><strong>Hinweis:</strong> Das doppelte Und-Zeichen hat Vorrang gegenüber dem doppelten Balken, was bedeutet, dass <code>bold || thin &amp;&amp; &lt;length&gt;</code> gleichbedeutend ist mit <code>bold || [ thin &amp;&amp; &lt;length&gt; ]</code>. Dies beschreibt <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>bold thin</code>, <code>&lt;length&gt; bold</code>, oder <code>thin &lt;length&gt; bold</code>, aber nicht <code>bold &lt;length&gt;</code><code> bold thin</code>, da <code>bold</code>, falls nicht weggelassen, vor oder nach der gesamten <code>thin &amp;&amp; &lt;length&gt;</code> Komponente platziert werden muss.</div>

<h3 id="Einfacher_Balken">Einfacher Balken</h3>

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

<pre class="syntaxbox">&lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom</pre>

<p>Dieses Beispiel passt auf die folgenden Werte:</p>

<ul>
 <li><code>3%</code></li>
 <li><code>0</code></li>
 <li><code>3.5em</code></li>
 <li><code>left</code></li>
 <li><code>center</code></li>
 <li><code>right</code></li>
 <li><code>top</code></li>
 <li><code>bottom</code></li>
</ul>

<p>Aber nicht:</p>

<ul>
 <li><code>center 3%</code>, da nur eine der Komponenten angegeben werden darf.</li>
 <li><code>3em 4.5em</code>, da eine Komponente nur einmal vorkommen darf.</li>
</ul>

<div class="note">
<p><strong>Hinweis:</strong> Der doppelte Balken hat Vorrang gegenüber dem einfachen Balken, was bedeutet, dass <code>bold | thin || &lt;length&gt;</code> gleichbedeutend ist mit <code>bold | [ thin || &lt;length&gt; ]</code>. Dies beschreibt <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>&lt;length&gt; thin</code>, oder <code>thin &lt;length&gt;</code>, aber nicht <code>bold &lt;length&gt;</code>, da nur eine Entität jeder Seite des <code>|</code> Kombinators vorkommen darf.</p>
</div>

<h2 id="Komponentenwert_Multiplikatoren">Komponentenwert Multiplikatoren</h2>

<p>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.</p>

<p>{{Note("Multiplikatoren können nicht zu Kombinatoren hinzugefügt werden und haben auch keinen Vorrang vor diesen.")}}</p>

<h3 id="Asterisk_(*)">Asterisk (<code>*</code>)</h3>

<p>Der <em>Asterisk Multiplikator</em> gibt an, dass die Entität <strong>keinmal, einmal oder mehrmals</strong> vorkommen kann.</p>

<pre class="syntaxbox"><code>bold smaller*</code></pre>

<p>Dieses Beispiel passt auf die folgende Werte:</p>

<ul>
 <li><code>bold</code></li>
 <li><code>bold smaller</code></li>
 <li><code>bold smaller smaller</code></li>
 <li><code>bold smaller smaller smaller</code> and so on.</li>
</ul>

<p>Aber nicht:</p>

<ul>
 <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li>
</ul>

<h3 id="Plus_()">Plus (<code>+</code>)</h3>

<p>Der <em>Plus Multiplikator</em> gibt an, dass die Entität <strong>einmal oder mehrmals</strong> vorkommen kann.</p>

<pre class="syntaxbox"><code>bold smaller+</code></pre>

<p>Dieses Beispiel passt auf die folgenden Werte:</p>

<ul>
 <li><code>bold smaller</code></li>
 <li><code>bold smaller smaller</code></li>
 <li><code>bold smaller smaller smaller</code> and so on.</li>
</ul>

<p>Aber nicht:</p>

<ul>
 <li><code>bold</code>, da <code>smaller</code> mindestens einmal vorkommen muss.</li>
 <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li>
</ul>

<h3 id="Fragezeichen_()">Fragezeichen (<code>?</code>)</h3>

<p>Der <em>Fragezeichen Multiplikator</em> gibt an, dass die Entität optional ist und <strong>keinmal oder einmal</strong> vorkommen kann.</p>

<pre class="syntaxbox"><code>bold smaller?</code></pre>

<p>Dieses Beispiel passt auf die folgenden Werte:</p>

<ul>
 <li><code>bold</code></li>
 <li><code>bold smaller</code></li>
</ul>

<p>Aber nicht:</p>

<ul>
 <li><code>bold smaller smaller</code>, da <code>smaller</code> höchstens einmal vorkommen darf.</li>
 <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li>
</ul>

<h3 id="Geschweifte_Klammern_(_)">Geschweifte Klammern (<code>{ }</code>)</h3>

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

<pre class="syntaxbox"><code>bold smaller{1,3}</code></pre>

<p>Dieses Beispiel passt auf die folgenden Werte:</p>

<ul>
 <li><code>bold smaller</code></li>
 <li><code>bold smaller smaller</code></li>
 <li><code>bold smaller smaller smaller</code></li>
</ul>

<p>Aber nicht:</p>

<ul>
 <li><code>bold</code>, da <code>smaller</code> mindestens einmal vorkommen muss.</li>
 <li><code>bold smaller smaller smaller smaller</code>, da <code>smaller</code> höchstens dreimal vorkommen darf.</li>
 <li><code>smaller</code>, da <code>bold</code> eine Nebeneinanderstellung ist und vor jeglichem <code>smaller</code> Schlüsselwort stehen muss.</li>
</ul>

<h3 id="Rautensymbol_()">Rautensymbol (<code>#</code>)</h3>

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

<pre class="syntaxbox"><code>bold smaller#</code></pre>

<p>Dieses Beispiel passt auf die folgenden Werte:</p>

<ul>
 <li><code>bold smaller</code></li>
 <li><code>bold smaller, smaller</code></li>
 <li><code>bold smaller, smaller, smaller</code> and so on.</li>
</ul>

<p>Aber nicht:</p>

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

<h2 id="Übersicht">Übersicht</h2>

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

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}</td>
   <td>{{ Spec2('CSS3 Values') }}</td>
   <td>Fügt den Rautensymbol Multiplizierer hinzu.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Fügt den doppelten Und-Zeichen Kombinator hinzu.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{ CSS_key_concepts() }}</li>
</ul>