From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../index.html" | 421 +++++++++++++++++++++ 1 file changed, 421 insertions(+) create mode 100644 "files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" (limited to 'files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html') diff --git "a/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" "b/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" new file mode 100644 index 0000000000..2acb4d1da7 --- /dev/null +++ "b/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" @@ -0,0 +1,421 @@ +--- +title: Syntaxe de définition des valeurs +slug: Web/CSS/Syntaxe_de_définition_des_valeurs +tags: + - CSS + - Débutant + - Reference +translation_of: Web/CSS/Value_definition_syntax +--- +
{{CSSRef}}
+ +

La syntaxe de définition des valeurs CSS est une grammaire formelle qui définit les règles pour créer des règles CSS valides. En plus de ces règles, il peut y avoir des contraintes sémantiques (ex. un nombre doit être positif pour une propriété donnée).

+ +

La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété CSS.

+ +

Les types de composants

+ +

Les mots-clés

+ +

Les mots-clés génériques

+ +

Un mot-clé avec une signification prédéfinie, qui peut apparaître littéralement, sans apostrophes ou guillemets (ex. auto, smaller ou ease-in).

+ +

inherit, initial et unset

+ +

Toutes propriétés CSS acceptent les mots-clés inherit, initial et unset définies par la spécification CSS. Ces mots-clés ne sont pas listés dans la définition de la syntaxe et sont définies implicitement.

+ +

Les littéraux

+ +

En CSS, quelques caractères peuvent apparaître directement (ex. la barre oblique « / » ou la virgule « , ») et sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire. Généralement, la barre oblique est utilisée dans les propriétés raccourcies pour séparer les composants du même type mais qui sont associés aux différentes propriétés détaillées.

+ +

Ces deux symboles sont utilisés tels quels dans la définition d'une valeur.

+ +

Les types de donnée

+ +

Les types de donnée simples

+ +

Certains types de donnée sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification. Ce sont les types de donnée simples et sont représentés par leur nom encadré par des chevrons (le type angle est donc représenté par : {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, et ainsi de suite).

+ +

Les types de donnée non terminaux

+ +

D'autres types de donnée, moins utilisés, sont appelés types de donné non-terminaux et sont également encadrés par des chevrons.

+ +

Les types de donnée non terminaux sont de deux sortes :

+ + + +

Les combinateurs

+ +

Les crochets

+ +

Les crochets permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant. Cela permet de grouper les composants afin d' appliquer des règles de priorités (supérieures aux règles de précédence).

+ +
bold [ thin && <length> ]
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ + + +

Mais ne correspondra pas à :

+ + + +

Juxtaposition

+ +

Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont obligatoires et doivent apparaître dans cet ordre.

+ +
bold <length> , thin
+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ + + +

Mais il ne correspondra pas à :

+ + + +

Double esperluette

+ +

Lorsqu'on sépare deux ou plusieurs composants par une double esperluette, cela signifie que toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre.

+ +
bold && <length>
+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ + + +

Mais il ne correspondra pas à :

+ + + +
Note : La juxtaposition est prioritaire par rapport à la double esperluette. bold thin && <length> est donc équivalent à [ bold thin ] && <length>. Il décrit bold thin <length> ou <length> bold thin mais pas bold <length> thin.
+ +

Double barre

+ +

Lorsque deux ou plusieurs composants sont séparés par une double barre verticale ||. Cela signifie qu'au moins un composant doit être présent et qu'ils peuvent apparaître dans n'importe quel ordre. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.

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

Cet exemple pourra illustrer les valeurs suivantes :

+ + + +

Mais il ne correspondra pas à :

+ + + +
Note : La double esperluette est prioritaire par rapport à la double barre. bold || thin && <length> est équivalent à bold || [ thin && <length> ] qui décrit bold, thin <length>, bold thin <length>, ou thin <length> bold mais pas <length> bold thin car bold, s'il est présent doit apparaître avant thin && <length>.
+ +

La barre verticale

+ +

Lorsqu'on sépare deux entités par une barre verticale. Cela signifie que les différentes options sont exclusives : seule une des options doit être présente. Généralement, cela permet de séparer différents mots-clés possible.

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

Cet exemple pourra illustrer les valeurs suivantes :

+ + + +

Mais il ne correspondra pas à :

+ + + +
+

Note : La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi bold | thin || <length> est équivalent à bold | [ thin || <length> ] qui décrit bold, thin, <length>, <length> thin ou thin <length> mais pas bold <length> car seule entité peut être présente.

+
+ +

Les multiplicateurs

+ +

Un multiplicateur est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.

+ +

L'astérisque (*)

+ +

L'astérisque indique qu'une entité peut apparaître zéro, une ou plusieurs fois.

+ +
bold smaller*
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ + + +

Mais il ne correspondra pas à :

+ + + +

Plus (+)

+ +

Le multiplicateur « plus » indique que l'entité peut apparaître une ou plusieurs fois.

+ +
bold smaller+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ + + +

Mais il ne correspondra pas à :

+ + + +

Le point d'interrogation (?)

+ +

Le point d'interrogation indique que l'entité est optionnelle et doit apparaître zéro ou une fois.

+ +
bold smaller?
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ + + +

Mais il ne correspondra pas à :

+ + + +

Les accolades ({ })

+ +

Les accolades encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité doit apparaître au moins A fois et au plus B fois.

+ +
bold smaller{1,3}
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ + + +

Mais il ne correspondra pas à :

+ + + +

Dièse (#)

+ +

Le symbole dièse indique qu'une entité doit être répétée une ou plusieurs fois et que chaque occurrence est séparée par une virgule.

+ +
bold smaller#
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ + + +

Mais il ne correspondra pas à :

+ + + +

Point d'exclamation (!)

+ +

Le multiplicateur point d'exclamation est utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent.

+ +
[ bold? smaller? ]!
+
+ +

Cet exemple correspondra aux valeurs suivantes :

+ + + +

Mais pas à :

+ + + +

Récapitulatif

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SigneNomDescriptionExemple
Combinateurs
 JuxtapositionLes composants sont obligatoires et doivent apparaître dans cet ordre.solid <length>
&&Double esperluetteLes composants sont obligatoires mais peuvent apparaître dans n'importe quel ordre.<length> && <string>
||Double barreAu moins un des composants doit être présent et ils peuvent apparaître dans n'importe quel ordre.<'border-image-outset'> || <'border-image-slice'>
|Barre simpleUn et un seul des composants doit être présent.smaller | small | normal | big | bigger
[ ]CrochetsLes composants peuvent être groupés pour avoir une priorité supérieure aux règles précédentes.bold [ thin && <length> ]
Multiplicateurs
 Aucun multiplicateurExactement 1 fois.solid
*Astérisque0 ou plus.bold smaller*
+Signe plus1 ou plus.bold smaller+
?Point d'interrogation0 ou 1 fois (autrement dit, la valeur est optionnelle)bold smaller?
{A,B}AccoladesAu moins A fois et au plus B fois.bold smaller{1,3}
#Dièse1 ou plus de fois mais chaque occurrence doit être séparée d'une autre par une virgule.bold smaller#
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2('CSS3 Values')}}Ajout du multiplicateur avec le dièse.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2('CSS2.1')}}Ajout de la double esperluette.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2('CSS1')}}Définition initiale.
-- cgit v1.2.3-54-g00ecf