Value definition syntax

  • Revision slug: CSS/Value_definition_syntax
  • Revision title: Value definition syntax
  • Revision id: 305183
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ Draft() }}

To define the set of valid values that a CSS property or function can take, a formal grammar is used, the CSS value definition syntax. Besides the syntaxic aspect, the set of valid values can be further restricted by semantic constraints (like, for a number, to be strictly positive).

The definition syntax describes which components are allowed and how they interact between them. A component can be a keyword, some characters considered as a litteral, or a value of a given CSS data type or of another CSS property..

Component value types

Keywords

A keyword with a predefined meaning, such as auto, smaller or ease-in, appears litterally, without quote: e.g. auto, smaller or ease-in.

Generic keywords

 

The specific case of inherit and initial

Litterals

Data types

Basic data types

Non-terminal data types

Component value combinators

Juxtaposition

Double ampersand

Double bar

Single bar

Brackets

Component value multiplier

Asterisk (*)

Plus (+)

Question mark (?)

Curly braces ({ })

Hash mark (#)

Revision Source

<p>{{ Draft() }}</p>
<p>To define the set of valid values that a CSS property or function can take, a formal grammar is used, the <em>CSS value definition syntax</em>. Besides the syntaxic aspect, the set of valid values can be further restricted by semantic constraints (like, for a number, to be strictly positive).</p>
<p>The definition syntax describes which <em>components</em> are allowed and how they interact between them. A component can be a <em>keyword</em>, some characters considered as a <em>litteral</em>, or a value of a given CSS data type or of another CSS property..</p>
<h2 id="Component_value_types">Component value types</h2>
<h3 id="Keywords">Keywords</h3>
<p>A keyword with a predefined meaning, such as <code>auto</code>, <code>smaller</code> or <code>ease-in</code>, appears litterally, without quote: e.g. <code>auto</code>, <code>smaller</code> or <code>ease-in</code>.</p>
<h4 id="Generic_keywords">Generic keywords</h4>
<p>&nbsp;</p>
<h4 id="The_specific_case_of_inherit_and_initial">The specific case of <code>inherit</code> and <code>initial</code></h4>
<h3 id="Litterals">Litterals</h3>
<h3 id="Data_types">Data types</h3>
<h4 id="Basic_data_types">Basic data types</h4>
<h4 id="Non-terminal_data_types">Non-terminal data types</h4>
<h2 id="Component_value_combinators">Component value combinators</h2>
<h3 id="Juxtaposition">Juxtaposition</h3>
<h3 id="Double_ampersand">Double ampersand</h3>
<h3 id="Double_bar">Double bar</h3>
<h3 id="Single_bar">Single bar</h3>
<h3 id="Brackets">Brackets</h3>
<h2 id="Component_value_multiplier">Component value multiplier</h2>
<h3 id="Asterisk_(*)">Asterisk (<code>*</code>)</h3>
<h3 id="Plus_(.2B)">Plus (<code>+</code>)</h3>
<h3 id="Question_mark_(.3F)">Question mark (<code>?</code>)</h3>
<h3 id="Curly_braces_(.7B_.7D)">Curly braces (<code>{ }</code>)</h3>
<h3 id="Hash_mark_(.23)">Hash mark (<code>#</code>)</h3>
Revert to this revision