Syntaxe de définition des valeurs

  • Raccourci de la révision : CSS/Syntaxe_de_définition_des_valeurs
  • Titre de la révision : Syntaxe de définition des valeurs
  • ID de la révision : 333323
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Oui
  • Commentaire Typo correction

Contenu de la révision

{{ CSSRef() }}

Une grammaire formelle, la syntaxe de définition des valeurs CSS, est utilisée pour définir l'ensemble des valeurs valides pour une propriété ou une fonction CSS. En complément de cette syntaxe, l'ensemble des valeurs valides peut être restreint par des contraintes sémantiques (pour qu'un chiffre soit strictement positif, par exemple).

La syntaxe de définition décrit les valeurs acceptées et les interactions entre elles. Une composante peut être un mot-clé, certains caractères considérés comme littéraux, ou une valeur d'un type de donnée CSS défini ou une autre propriété CSS.

Types de données des composantes

Mots-clés

Mots-clés génériques

Un mot-clé ayant une signification prédéfinie apparaît littéralement, sans guillemets, par exemple : auto, smaller ou ease-in.

Les cas particuliers de inherit et initial

Toutes les propriétés CSS acceptent les mots-clés inherit et initial qui sont définies dans tout CSS. Elle ne sont pas mentionnées dans la définition des valeurs, et sont définies implicitement.

Les littéraux

Dans CSS, certains caractères peuvent appaître seuls, comme la barre oblique ('/') ou la virgule (','), et sont utilisés dans la définition d'une propriété pour séparer ses parties. La virgule est couramment utilisée pour séparer les valeurs dans les énumérations, ou les paramètres dans une fonction de type mathématique. La barre oblique sépare couramment les parties d'une valeur qui sont différentes sémantiquement, mais qui ont une syntaxe commune. Typiquement, la barre oblique est parfois utilisée dans les propriétés raccourcies pour séparer les composantes qui sont du même types mais appartiennent à des propriétés différentes.

Les deux symboles apparaissent littéralement dans une définition de valeur.

Types de données

Types de données de base

Certains types de données sont utilisés dans tout CSS et sont définis une seule fois pour toutes les valeurs dans la spécification. Appelés des types de données de base, ils sont représentés avec leurs noms encadrés par les symboles '<' et '>': {{ xref_cssangle() }}, {{ xref_cssstring() }}, …

Types de données non-finaux

Des types de données moins communs, appelés types de données non-finaux, sont aussi encadrés par '<' et '>'.

Les types de données non-finaux sont de deux sortes :

  • les types de données partageant le même nom qu'une propriété, encadré par des guillemets. Dans ce cas le type de données partage le même ensemble de valeurs que la propriété. Ils sont couramment utilisés pour la définition des propriétés raccourcies.
  • les types de données ne partageant pas le même nom qu'une propriété. Ces types de données sont très proches d'un type de données de base. Ils diffèrent d'un type de données de base de par la seule position physique de leur définition : dans ce cas, la définition est généralement très proche de la propriété l'utilisant.

Combinateurs de composantes de valeurs

Crochets

Des crochets encadrent plusieurs entités, composeurs ou multiplicateurs et les transforme en une composante unique. Ils sont utilisés pour grouper les composantes pour outrepasser les règles de priorité.

bold [ thin && <longueur> ]

Cet exemple accepte les valeurs suivantes :

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

Mais pas :

  • thin bold 3em puisque bold est juxtaposé avec la composantes définie entre crochets, elle doit apparaître avant celle-ci.

Juxtaposition

Placer plusieurs mots-clés, littéraux, ou types de données, à côté les uns des autres, seulement séparés par un ou plusieurs espaces est appelé juxtaposition. Toutes les composantes juxtaposées sont obligatoires et doivent apparaître dans l'ordre exact.

bold <longueur> , thin

Cet exemple accepte les valeurs suivantes :

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

Mais pas :

  • thin 1em, bold puisque les entités doivent être dans l'ordre exprimé.
  • bold 1em thin puisque les entités sont obligatoires, la virgule littérale doit être présente.
  • bold 0.5ms, thin puisque les valeurs ms ne sont pas une {{xref_csslength()}}.

Double esperluette

Séparer deux composantes ou plus par une double esperluette, &&, signifie que toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre.

bold && <longueur>

Cet exemple accepte les valeurs suivantes :

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

Mais pas :

  • bold puisque les deux composantes doivent apparaître dans la valeur.
  • bold 1em bold puisque les deux composants ne doivent apparaître qu'une fois seulement.
Note : la juxtaposition a la priorité sur la double esperluette, ce qui signifie que bold thin && <longueur> est équivalente à [ bold thin ] && <longueur>. Elle décrit bold thin <longueur> ou <longueur> bold thin mais pas bold <longueur> thin.

Double barre

Séparer deux composantes ou plus par une double barre, ||, signifie que toutes les entités sont optionnelles : au moins une d'entre elles doit être présente, mais elles peuvent apparaître dans n'importe quel ordre. Ceci est typiquement utilisé pour définir les différentes valeurs d'une propriété raccourcie.

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

Cet exemple accepte les valeurs suivantes :

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

Mais pas :

  • blue yellow puisque une composante doit apparaître au maximum une fois.
  • bold puisque ce n'est pas un mot-clé accepté comme valeur de cette entité.
Note : la double esperluette a la priorité sur la double barre, ce qui signifie que bold || thin && <longueur> est équivalente à bold || [ thin && <longueur> ]. Elle décrit bold, thin, <longueur>, bold thin, <longueur> bold, ou thin <longueur> bold mais pas bold <longueur> bold thin puis que bold, s'il n'est pas omis, doit être placé avant ou après la composante thin && <longueur>.

Simple barre

Séparer deux entités ou plus par une simple barre, |, signifie que toutes les entités sont des options exclusives  seulement une de ces options doit être présente. Ceci est typiquement utilisé pour séparer une liste de mots-clés possibles.

<pourcentage> | <longueur> | left | center | right | top | bottom

Cet exemple accepte les valeurs suivantes :

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

Mais pas :

  • center 3% puisque seulement une des composantes doit être présente.
  • 3em 4.5em puisqu'une composante doit être présente au maximum une fois.
Note : la double barre a la priorité sur la simple barre, ce qui signifie que bold | thin || <longueur> est équivalente à bold | [ thin || <longueur> ]. Elle décrit bold, thin, <longueur>, bold thin, <longueur> bold, ou thin <longueur> bold mais pas bold <longueur> bold thin puis que bold, s'il n'est pas omis, doit être placé avant ou après la composante thin && <longueur>.

Multiplicateurs de composantes de valeur

Un multiplicateur est un signe qui indique combien de fois une entité précédente doit être répétée. Sans multiplicateur, une entité doit apparaître seulement une fois.

Il faut noter que les multiplicateurs ne peuvent pas être additionnés et ont la priorité sur tous les combinateurs.

Astérisque (*)

Le multiplicateur astérisqueasterisk indique que l'entité peut apparaître zéro, une ou plusieurs fois.

bold smaller*

Cet exemple accepte les valeurs suivantes :

  • bold
  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller et ainsi de suite.

Mais pas :

  • smaller puisque bold est juxtaposée et doit apparaître avant tout mot-clé final smaller.

Plus (+)

Le multiplicateur plus indique qu'une entité peut apparaître une ou plusieurs fois.

bold smaller+

Cet exemple accepte les valeurs suivantes :

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller et ainsi de suite.

Mais pas :

  • bold puisque smaller doit apparaître au moins une fois.
  • smaller puisque bold est juxtaposé et doit apparaître avant le mot-clé final smaller.

Point d'interrogation (?)

Le multiplicateur question indique qu'une entité est optionelle et qu'elle doit apparaître zéro ou une fois.

bold smaller?

Cet exemple accepte les valeurs suivantes :

  • bold
  • bold smaller

Mais pas :

  • bold smaller smaller puisque smaller doit apparaître au maximum une fois.
  • smaller puisque bold est juxtaposé et doit apparaître avant le mot-clé final smaller.

Accolades ({ })

Le multiplicateur accolades, encadre deux entiers séparés par une virgule, A et B, indique que l'entité doit apparaître au moins A fois et au maximum B fois.

bold smaller{1,3}

Cet exemple accepte les valeurs suivantes :

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

Mais pas :

  • bold puisque smaller doit apparaître au moins une fois.
  • bold smaller smaller smaller smaller puisque smaller doit apparaître au maximum une fois.
  • smaller puisque bold est juxtaposé et doit apparaître avant le mot-clé final smaller

Croisillon (#)

Le multiplicateur croisillon indique que l'entité peut être répétée une ou plusieurs fois (comme le multiplicateur plus) mais chaque occurence est séparée par une virgule (',').

bold smaller#

Cet exemple accepte les valeurs suivantes :

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller et ainsi de suite.

Mais pas :

  • bold puisque smaller doit apparaître au moins une fois.
  • bold smaller smaller smaller puisque les différentes occurences de smaller doivent être séparées par des virgules.
  • smaller puisque bold est juxtaposé et doit apparaître avant le mot-clé final smaller.

Résumé

Signe Nom Description Exemple
Combinateurs
  Juxtaposition Les composantes sont obligatoires et doivent apparaître dans cet ordre solid <longueur>
&& Double esperluette Les composantes sont obligatoires mais peuvent apparaître dans n'importe quel ordre <longueur> && <chaîne>
|| Double barre Au moins une des composantes doit être présente, et elles peuvent apparaître dans n'importe quel ordre <'border-image-outset'> || <'border-image-slice'>
| Simple barre Seulement une des composantes doit être présente smaller | small | normal | big | bigger
[ ] Crochets Groupes les composantes pour outrepasser les règles de priorité bold [ thin && <longueur> ]
Multiplicateurs
  Aucun multiplicateur Exactement une fois solid
* Astérisque 0 ou plusieurs fois bold smaller*
+ Signe plus 1 ou plusieurs fois bold smaller+
? Point d'interrogation 0 ou une fois (qui est optionelle) bold smaller?
{A,B} Accolades Au moins A fois, au maximum B fois bold smaller{1,3}
# Croisillon 1 ou plusieurs fois, mais chaque occurence est séparée par une virgule (',') bold smaller#

Spécifications

Spécification État Commentaire
{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }} {{ Spec2('CSS3 Values') }} Depuis {{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}, ajoute le multiplicateur croisillon.
{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }} {{ Spec2('CSS2.1') }} Depuis {{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}, ajoute le combinateur double esperluette.
{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }} {{ Spec2('CSS1') }} Définition initiale.

Voir également

  • {{ CSS_key_concepts() }}

Source de la révision

<p>{{ CSSRef() }}</p>
<p>Une grammaire formelle, la <strong>syntaxe de définition des valeurs CSS</strong>, est utilisée pour définir l'ensemble des valeurs valides pour une propriété ou une fonction CSS. En complément de cette syntaxe, l'ensemble des valeurs valides peut être restreint par des contraintes sémantiques (pour qu'un chiffre soit strictement positif, par exemple).</p>
<p>La syntaxe de définition décrit les valeurs acceptées et les interactions entre elles. Une composante peut être un <em>mot-clé</em>, certains caractères considérés comme <em>littéraux</em>, ou une valeur d'un type de donnée CSS défini ou une autre propriété CSS.</p>
<h2 id="Types_de_donn.C3.A9es_des_composantes">Types de données des composantes</h2>
<h3 id="Mots-cl.C3.A9s">Mots-clés</h3>
<h4 id="Mots-cl.C3.A9s_g.C3.A9n.C3.A9riques">Mots-clés génériques</h4>
<p>Un mot-clé ayant une signification prédéfinie apparaît littéralement, sans guillemets, par exemple&nbsp;: <code>auto</code>, <code>smaller</code> ou <code>ease-in</code>.</p>
<h4 id="Les_cas_particuliers_de_inherit_et_initial">Les cas particuliers de <code>inherit</code> et <code>initial</code></h4>
<p>Toutes les propriétés CSS acceptent les mots-clés <code>inherit</code> et <code>initial</code> qui sont définies dans tout CSS. Elle ne sont pas mentionnées dans la définition des valeurs, et sont définies implicitement.</p>
<h3 id="Les_litt.C3.A9raux">Les littéraux</h3>
<p>Dans CSS, certains caractères peuvent appaître seuls, comme la barre oblique ('<code>/</code>') ou la virgule ('<code>,</code>'), et sont utilisés dans la définition d'une propriété pour séparer ses parties. La virgule est couramment utilisée pour séparer les valeurs dans les énumérations, ou les paramètres dans une fonction de type mathématique. La barre oblique sépare couramment les parties d'une valeur qui sont différentes sémantiquement, mais qui ont une syntaxe commune. Typiquement, la barre oblique est parfois utilisée dans les propriétés raccourcies pour séparer les composantes qui sont du même types mais appartiennent à des propriétés différentes.</p>
<p>Les deux symboles apparaissent littéralement dans une définition de valeur.</p>
<h3 id="Types_de_donn.C3.A9es">Types de données</h3>
<h4 id="Types_de_donn.C3.A9es_de_base">Types de données de base</h4>
<p>Certains types de données sont utilisés dans tout CSS et sont définis une seule fois pour toutes les valeurs dans la spécification. Appelés des <em>types de données de base</em>, ils sont représentés avec leurs noms encadrés par les symboles '<code>&lt;</code>' et '<code>&gt;</code>': {{ xref_cssangle() }}, {{ xref_cssstring() }}, …</p>
<h4 id="Types_de_donn.C3.A9es_non-finaux">Types de données non-finaux</h4>
<p>Des types de données moins communs, appelés <em>types de données non-finaux</em>, sont aussi encadrés par '<code>&lt;</code>' et '<code>&gt;</code>'.</p>
<p>Les types de données non-finaux sont de deux sortes :</p>
<ul>
  <li>les types de données <em>partageant le même nom qu'une propriété</em>, encadré par des guillemets. Dans ce cas le type de données partage le même ensemble de valeurs que la propriété. Ils sont couramment utilisés pour la définition des propriétés raccourcies.</li>
  <li>les types de données <em>ne partageant pas le même nom qu'une propriété</em>. Ces types de données sont très proches d'un type de données de base. Ils diffèrent d'un type de données de base de par la seule position physique de leur définition&nbsp;: dans ce cas, la définition est généralement très proche de la propriété l'utilisant.</li>
</ul>
<h2 id="Combinateurs_de_composantes_de_valeurs">Combinateurs de composantes de valeurs</h2>
<h3 id="Crochets">Crochets</h3>
<p>Des <em>crochets</em> encadrent plusieurs entités, composeurs ou multiplicateurs et les transforme en une composante unique. Ils sont utilisés pour <strong>grouper les composantes pour outrepasser les règles de priorité</strong>.</p>
<pre class="syntaxbox">
<code>bold [ thin &amp;&amp; &lt;longueur&gt; ]</code></pre>
<p>Cet exemple accepte les valeurs suivantes&nbsp;:</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>Mais pas&nbsp;:</p>
<ul>
  <li><code>thin bold 3em</code> puisque <code>bold</code> est juxtaposé avec la composantes définie entre crochets, elle doit apparaître avant celle-ci.</li>
</ul>
<h3 id="Juxtaposition">Juxtaposition</h3>
<p>Placer plusieurs mots-clés, littéraux, ou types de données, à côté les uns des autres, seulement séparés par un ou plusieurs espaces est appelé <em>juxtaposition</em>. Toutes les composantes juxtaposées sont <strong>obligatoires et doivent apparaître dans l'ordre exact</strong>.</p>
<pre class="syntaxbox">
bold &lt;longueur&gt; , thin
</pre>
<p>Cet exemple accepte les valeurs suivantes&nbsp;:</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>Mais pas&nbsp;:</p>
<ul>
  <li><code>thin 1em, bold</code> puisque les entités doivent être dans l'ordre exprimé.</li>
  <li><code>bold 1em thin</code> puisque les entités sont obligatoires, la virgule littérale doit être présente.</li>
  <li><code>bold 0.5ms, thin</code> puisque les valeurs <code>ms</code> ne sont pas une {{xref_csslength()}}.</li>
</ul>
<h3 id="Double_esperluette">Double esperluette</h3>
<p>Séparer deux composantes ou plus par une <em>double esperluette</em>, <code>&amp;&amp;</code>, signifie que toutes les entités sont <strong>obligatoires mais peuvent apparaître dans n'importe quel ordre</strong>.</p>
<pre class="syntaxbox">
bold &amp;&amp; &lt;longueur&gt;
</pre>
<p>Cet exemple accepte les valeurs suivantes&nbsp;:</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>Mais pas&nbsp;:</p>
<ul>
  <li><code>bold</code> puisque les deux composantes doivent apparaître dans la valeur.</li>
  <li><code>bold 1em bold</code> puisque les deux composants ne doivent apparaître qu'une fois seulement.</li>
</ul>
<div class="note">
  <strong>Note&nbsp;:</strong> la juxtaposition a la priorité sur la double esperluette, ce qui signifie que <code>bold thin &amp;&amp; &lt;longueur&gt;</code> est équivalente à <code>[ bold thin ] &amp;&amp; &lt;longueur&gt;</code>. Elle décrit <code>bold thin &lt;longueur&gt;</code> ou <code>&lt;longueur&gt;</code><code> bold thin</code> mais pas <code>bold &lt;longueur&gt;</code><code> thin</code>.</div>
<h3 id="Double_barre">Double barre</h3>
<p>Séparer deux composantes ou plus par une <em>double barre</em>, <code>||</code>, signifie que toutes les entités sont optionnelles&nbsp;: <strong>au moins une d'entre elles doit être présente, mais elles peuvent apparaître dans n'importe quel ordre</strong>. Ceci est typiquement utilisé pour définir les différentes valeurs d'une <a href="/fr/docs/CSS/Propriétés_raccourcies" title="fr/docs/CSS/Propriétés_raccourcies">propriété raccourcie</a>.</p>
<pre class="syntaxbox">
&lt;'border-width'&gt; || &lt;'border-style'&gt; || &lt;'border-color'&gt;
</pre>
<p>Cet exemple accepte les valeurs suivantes&nbsp;:</p>
<ul>
  <li><code>1em solid blue</code></li>
  <li><code>blue 1em</code></li>
  <li><code>solid 1px yellow</code></li>
</ul>
<p>Mais pas&nbsp;:</p>
<ul>
  <li><code>blue</code> <code>yellow</code> puisque une composante doit apparaître au maximum une fois.</li>
  <li><code>bold</code> puisque ce n'est pas un mot-clé accepté comme valeur de cette entité.</li>
</ul>
<div class="note">
  <strong>Note&nbsp;: </strong>la double esperluette a la priorité sur la double barre, ce qui signifie que <code>bold || thin &amp;&amp; &lt;longueur&gt;</code> est équivalente à <code>bold || [ thin &amp;&amp; &lt;longueur&gt; ]</code>. Elle décrit <code>bold</code>, <code>thin</code>, <code>&lt;longueur&gt;</code>, <code>bold thin</code>, <code>&lt;longueur&gt; bold</code>, ou <code>thin &lt;longueur&gt; bold</code> mais pas <code>bold &lt;longueur&gt;</code><code> bold thin</code> puis que bold, s'il n'est pas omis, doit être placé avant ou après la composante <code>thin &amp;&amp; &lt;longueur&gt;</code>.</div>
<h3 id="Simple_barre">Simple barre</h3>
<p>Séparer deux entités ou plus par une <em>simple barre</em>, <code>|</code>, signifie que toutes les entités sont des options exclusives&nbsp; <strong>seulement une de ces options doit être présente</strong>. Ceci est typiquement utilisé pour séparer une liste de mots-clés possibles.</p>
<pre class="syntaxbox">
&lt;pourcentage&gt; | &lt;longueur&gt; | left | center | right | top | bottom</pre>
<p>Cet exemple accepte les valeurs suivantes&nbsp;:</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>Mais pas&nbsp;:</p>
<ul>
  <li><code>center 3%</code> puisque seulement une des composantes doit être présente.</li>
  <li><code>3em 4.5em</code> puisqu'une composante doit être présente au maximum une fois.</li>
</ul>
<div class="note">
  <strong>Note&nbsp;: </strong>la double barre a la priorité sur la simple barre, ce qui signifie que <code>bold | thin || &lt;longueur&gt;</code> est équivalente à <code>bold | [ thin || &lt;longueur&gt; ]</code>. Elle décrit <code>bold</code>, <code>thin</code>, <code>&lt;longueur&gt;</code>, <code>bold thin</code>, <code>&lt;longueur&gt; bold</code>, ou <code>thin &lt;longueur&gt; bold</code> mais pas <code>bold &lt;longueur&gt;</code><code> bold thin</code> puis que bold, s'il n'est pas omis, doit être placé avant ou après la composante <code>thin &amp;&amp; &lt;longueur&gt;</code>.</div>
<h2 id="Multiplicateurs_de_composantes_de_valeur">Multiplicateurs de composantes de valeur</h2>
<p>Un multiplicateur est un signe qui indique combien de fois une entité précédente doit être répétée. Sans multiplicateur, une entité doit apparaître seulement une fois.</p>
<p>Il faut noter que les multiplicateurs ne peuvent pas être additionnés et ont la priorité sur tous les combinateurs.</p>
<h3 id="Ast.C3.A9risque_(*)">Astérisque (<code>*</code>)</h3>
<p>Le <em>multiplicateur astérisqueasterisk</em> indique que l'entité peut apparaître <strong>zéro, une ou plusieurs fois</strong>.</p>
<pre class="syntaxbox">
<code>bold smaller*</code></pre>
<p>Cet exemple accepte les valeurs suivantes&nbsp;:</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> et ainsi de suite.</li>
</ul>
<p>Mais pas&nbsp;:</p>
<ul>
  <li><code>smaller</code> puisque <code>bold</code> est juxtaposée et doit apparaître avant tout mot-clé final <code>smaller</code>.</li>
</ul>
<h3 id="Plus_(.2B)">Plus (<code>+</code>)</h3>
<p>Le <em>multiplicateur plus</em> indique qu'une entité peut apparaître <strong>une ou plusieurs fois</strong>.</p>
<pre class="syntaxbox">
<code>bold smaller+</code></pre>
<p>Cet exemple accepte les valeurs suivantes&nbsp;:</p>
<ul>
  <li><code>bold smaller</code></li>
  <li><code>bold smaller smaller</code></li>
  <li><code>bold smaller smaller smaller</code> et ainsi de suite.</li>
</ul>
<p>Mais pas&nbsp;:</p>
<ul>
  <li><code>bold</code> puisque <code>smaller</code> doit apparaître au moins une fois.</li>
  <li><code>smaller</code> puisque <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé final <code>smaller</code>.</li>
</ul>
<h3 id="Point_d'interrogation_(.3F)">Point d'interrogation (<code>?</code>)</h3>
<p>Le <em>multiplicateur question</em> indique qu'une entité est optionelle et <strong>qu'elle doit apparaître zéro ou une fois</strong>.</p>
<pre class="syntaxbox">
<code>bold smaller?</code></pre>
<p>Cet exemple accepte les valeurs suivantes&nbsp;:</p>
<ul>
  <li><code>bold </code></li>
  <li><code>bold smaller</code></li>
</ul>
<p>Mais pas&nbsp;:</p>
<ul>
  <li><code>bold smaller smaller</code> puisque <code>smaller</code> doit apparaître au maximum une fois.</li>
  <li><code>smaller</code> puisque <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé final <code>smaller</code>.</li>
</ul>
<h3 id="Accolades_(.7B_.7D)">Accolades (<code>{ }</code>)</h3>
<p>Le <em>multiplicateur accolades</em>, encadre deux entiers séparés par une virgule, A et B, indique que l'entité <strong>doit apparaître au moins A fois et au maximum B fois</strong>.</p>
<pre class="syntaxbox">
<code>bold smaller{1,3}</code></pre>
<p>Cet exemple accepte les valeurs suivantes&nbsp;:</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>Mais pas&nbsp;:</p>
<ul>
  <li><code>bold </code> puisque <code>smaller</code> doit apparaître au moins une fois.</li>
  <li><code>bold </code><code>smaller </code><code>smaller </code><code>smaller </code><code>smaller</code> puisque <code>smaller</code> doit apparaître au maximum une fois.</li>
  <li><code>smaller</code> puisque <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé final <code>smaller</code></li>
</ul>
<h3 id="Croisillon_(.23)">Croisillon (<code>#</code>)</h3>
<p>Le <em>multiplicateur croisillon</em> indique que l'entité peut être répétée <strong>une ou plusieurs fois</strong> (comme le <em>multiplicateur plus</em>) mais chaque occurence est <strong>séparée par une virgule</strong> ('<code>,</code>').</p>
<pre class="syntaxbox">
<code>bold smaller#</code></pre>
<p>Cet exemple accepte les valeurs suivantes&nbsp;:</p>
<ul>
  <li><code>bold smaller</code></li>
  <li><code>bold smaller, smaller</code></li>
  <li><code>bold smaller, smaller, smaller</code> et ainsi de suite.</li>
</ul>
<p>Mais pas&nbsp;:</p>
<ul>
  <li><code>bold</code> puisque <code>smaller</code> doit apparaître au moins une fois.</li>
  <li><code>bold smaller smaller smaller</code> puisque les différentes occurences de <code>smaller</code> doivent être séparées par des virgules.</li>
  <li><code>smaller</code> puisque <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé final <code>smaller</code>.</li>
</ul>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Signe</th>
      <th scope="col">Nom</th>
      <th scope="col">Description</th>
      <th scope="col">Exemple</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4">Combinateurs</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Juxtaposition</td>
      <td>Les composantes sont obligatoires et doivent apparaître dans cet ordre</td>
      <td><code>solid &lt;longueur&gt;</code></td>
    </tr>
    <tr>
      <td><code>&amp;&amp;</code></td>
      <td>Double esperluette</td>
      <td>Les composantes sont obligatoires mais peuvent apparaître dans n'importe quel ordre</td>
      <td><code>&lt;longueur&gt; &amp;&amp; &lt;chaîne&gt;</code></td>
    </tr>
    <tr>
      <td><code>||</code></td>
      <td>Double barre</td>
      <td>Au moins une des composantes doit être présente, et elles peuvent apparaître dans n'importe quel ordre</td>
      <td><code>&lt;'border-image-outset'&gt; || &lt;'border-image-slice'&gt;</code></td>
    </tr>
    <tr>
      <td><code>|</code></td>
      <td>Simple barre</td>
      <td>Seulement une des composantes doit être présente</td>
      <td><code>smaller | small | normal | big | bigger</code></td>
    </tr>
    <tr>
      <td><code>[ ]</code></td>
      <td>Crochets</td>
      <td>Groupes les composantes pour outrepasser les règles de priorité</td>
      <td><code>bold [ thin &amp;&amp; &lt;longueur&gt; ]</code></td>
    </tr>
    <tr>
      <th colspan="4">Multiplicateurs</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Aucun multiplicateur</td>
      <td>Exactement une fois</td>
      <td><code>solid</code></td>
    </tr>
    <tr>
      <td><code>*</code></td>
      <td>Astérisque</td>
      <td>0 ou plusieurs fois</td>
      <td><code>bold smaller*</code></td>
    </tr>
    <tr>
      <td><code>+</code></td>
      <td>Signe plus</td>
      <td>1 ou plusieurs fois</td>
      <td><code>bold smaller+</code></td>
    </tr>
    <tr>
      <td><code>?</code></td>
      <td>Point d'interrogation</td>
      <td>0 ou une fois (qui est <em>optionelle)</em></td>
      <td><code>bold smaller?</code></td>
    </tr>
    <tr>
      <td><code>{A,B}</code></td>
      <td>Accolades</td>
      <td>Au moins <code>A</code> fois, au maximum <code>B</code> fois</td>
      <td><code>bold smaller{1,3}</code></td>
    </tr>
    <tr>
      <td><code>#</code></td>
      <td>Croisillon</td>
      <td>1 ou plusieurs fois, mais chaque occurence est séparée par une virgule ('<code>,</code>')</td>
      <td><code>bold smaller#</code></td>
    </tr>
  </tbody>
</table>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</th>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}</td>
      <td>{{ Spec2('CSS3 Values') }}</td>
      <td>Depuis {{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}, ajoute le multiplicateur croisillon.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Depuis {{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}, ajoute le combinateur double esperluette.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>Définition initiale.</td>
    </tr>
  </tbody>
</table>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>{{ CSS_key_concepts() }}</li>
</ul>
Revenir à cette révision