A detailed description of CSS property value syntax

The World Wide Web Consortium (W3C) uses a special syntax to define the property values of CSS, which can be used by all CSS properties. If you've seen the CSS specification, you've probably seen the syntax. Just like
border-image-slice
Let's look at the syntax of:
<'border-image-slice'> = [<number> | <percentage>]{1,4} &amp;&amp; fill?
If you don't know these symbols and how they work, this syntax can be very difficult to understand. However, it's worth the time to learn. If you understand how the W3C defines these property values, you can understand any of the W3C CSS specifications.
Bakos paradigm
First, let's look at the Backus Naur form, because it helps us understand the W3C's attribute value syntax.
Backus – Naur form (BNF) is a formal set of symbols used to describe computer language syntax. It is designed so clearly that it does not create ambiguity or ambiguity in how the language is expressed.
At first, there were many extensions and variants of Backus Naur symbol set in use today, including extended Backus paradigm (EBNF) and extended Backus paradigm (ABNF)
A BNF specification is a set of rules written in the following form:
<symbol>  ::=  __expression__
The left side of the formula is usually a non terminating character, followed by a
:: =
The symbol stands for "exchangeable for". Formula right
__expression__
It consists of one or more symbol sequences, which are used to derive the meaning of the left symbol.
The BNF specification basically says, "no matter what the formula on the left is, or what the formula on the right is, the formula on the left can be replaced by the formula on the right.".
Non terminator and terminator
A non terminating character is a symbol that can be replaced or decomposed later. In BNF, non terminators are usually enclosed in angle brackets,
<
And
>
。 In the following example,
<integet>
and
<digit>
Is a non terminating character.
<integer>  ::=  <digit> | <digit><integer>
The terminator indicates that the value cannot be replaced or decomposed. In the following example, all values are terminators.

<digit>  ::=  0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

CSS property value syntax
Although the W3C CSS attribute value syntax is based on the concept of BNF, there are some differences between them. Like BNF, it starts with a non terminating character. Unlike BNF, it also describes symbols used in expressions as "component values.".
In the following example,
<line-width>
Yes no terminator, and
<length>
,
Thin
,
Medium
and
Thick
Is the component value.
<line-width>  =  <length> | thin | medium | thick
Component value
There are four component values: keyword, basic data type, attribute data type and non data data type.
1. Key value
The key value is not surrounded by quotation marks or angle brackets. They can be used directly as property values. Because they can no longer be replaced or decomposed, they are terminators. In the following example,
Thin
,
Medium
and
Thick
Are key values. This means that they are used directly in CSS.
<line-width>  =  <length> | thin | medium | thick
2. Basic data type
Basic data types define some core values, such as
<length>
And
<color>
。 They are non terminators because they can be replaced with real length or color values. In the following example
<color>
Is the basic data type.
<'background-color'>  =  <color>
<color>
In our CSS, we can extend keywords through keywords, RGB, RGBA, HSL, HSLA, or
Transparent
Key, replaced with the actual color value.
.example { background-color: red; }
.example { background-color: honeydew; }
.example { background-color: rgb(50%,50%,50%); }
.example { background-color: rgba(100%,100%,100%,.5); }
.example { background-color: hsl(280,100%,50%); }
.example { background-color: hsla(280,100%,50%,0.5); }
.example { background-color: transparent; }
3. Attribute data type
The attribute data type defines the actual name of the attribute, which is a non terminating character. It is defined by the attribute name (including quotation marks) contained in angle brackets. In the following example,
<'border-width'>
Is the property data type.
<'border-width'>  =  <line-width>{1,4}
Property data types can appear directly as properties in our CSS files. In the following example,
Border-width
Attribute to
.exmplate
Class defines a 2px border.
.example { border-width: 2px; }
4. Non attribute data type

The non attribute data type does not share the same name as the attribute. It is a non terminating character. However, it defines some aspects of an attribute. For example,
<line-width>
It's not an attribute, but it's a definition of a variety of
<border>
Data type of.
<line-width>  =  <length> | thin | medium | thick
<'border-width'>  =  <line-width>{1,4}
Component value combiner
Using the following five methods, component values can be assigned to attribute value combiners:
1. adjacent values
Writing component values one after another means that all of these values must appear in the given order. In the following example, the syntax lists three different values:
Value1
,
Value2
And
Value3
。 In CSS rules, these three values must appear in the correct order to be legal.
/* Component arrangement: all in given order */
<'property'> = value1 value2 value3
/* Example */
.example { property: value1 value2 value3; }
2. Double and sign (&amp;)
A double and sign that separates two or more component values（
&amp; &amp;
）This means that the values must appear in any order. In the following example, the syntax lists two values, separated by double and symbol. The following CSS rules show that both values have to appear but may be in a different order.
/* Component arrangement: all, in any order */
<'property'> = value1 &amp;&amp; value2
/* Examples */
.example { property: value1 value2; }
.example { property: value2 value1; }
3. Single pipe symbol
Single pipe symbol to separate two or more component values（
A kind of
）This means that only one of these values is required. In the following example, the syntax lists three values, separated by a single pipe symbol. Three possible options are shown in the following CSS rules:
/* Component arrangement: one of them must occur */
<'property'> = value1 | value2 | value3
/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }
4. Double pipe symbol
Separate two or more selected double pipe symbols（
Wei
）This means that one or more of these values must appear in any order. In the following example, the syntax lists three values, separated by two pipe symbols. When you write CSS rules to match this syntax, there are a number of options - you can use one, two, or three values in any order.
/* Component arrangement: one or more in any order */
<'property'> = value1 || value2 || value3
/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }
.example { property: value1 value2; }
.example { property: value1 value2 value3; }
... etc

5. brackets
Brackets that enclose two or more choices（
[]
）It means that the component values belong to a separate group. In the following example, the syntax lists three values, but two of them are in brackets, so they belong to a group. So there are two choices in CSS rules:
Value1
And
Value3
or
Value2
And
Value3
/* Component arrangement: a single grouping */
<'property'> = [ value1 | value2 ] value3
/* Examples */
.example { property: value1 value3; }
.example { property: value2 value3; }
Component value multipliers
Component values can also be reused using one of the following eight methods:
One
?
Question mark (
?
）Indicates that its previous type, keyword or group is optional and occurs zero or once. In the following example, the second component value is enclosed in brackets with a comma. Placing a question mark after that means,
Value1
Must appear, but we can also use
Value1
and
Value2
, separated by commas.
/* Component multiplier: zero or one time */
<'property'> = value1 [, value2 ]?
/* Examples */
.example { property: value1; }
.example { property: value1, value2; }
Two
*
Asterisk (
*
）Indicates that there are zero or more occurrences of the previous type, keyword, or group. In the following example, the second component value is enclosed in brackets with a comma. An asterisk after that means,
Value1
It has to be, but we can use it as we like
Value2
Any number of times, each component value is separated by commas.
/* Component multiplier: zero or more times */
<'property'> = value1 [, <value2> ]*
/* Examples */
.example { property: value1; }
.example { property: value1, <value2>; }
.example { property: value1, <value2>, <value2>; }
.example { property: value1, <value2>, <value2>, <value2>; }
... etc
Three
+
Plus sign (
+
）Indicates that its previous type, keyword, or group appears one or more times. In the following example, a plus sign placed after a component value means that the value must be used more than once - no comma is required.
/* Component multiplier: one or more times */
<'property'> = <value>+
/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
... etc
Four
{A}
Braces (
{A}
）Contains a number indicating the type, keyword, or group that precedes it
A
Second time. In the following example, both instances of value must appear to be valid.
/* Component multiplier: occurs A times */
<'property'> = <value>{2}
/* Examples */
.example { property: <value> <value> ; }
Five
{A, B}
Braces (
{A, B}
）Contains two numbers separated by commas indicating that the type, keyword or group before it appears at least
A
Second, at least
B
Second time. In the following example, at least one and at most three values can be used to define the attribute. These component values are not separated by commas.
/* Component multiplier: at least A and at most B */
<'property'> = <value>{1,3}
/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
Six
{A,}
stay
{A,}
in
B
Is omitted, which means at least

A
Repeats without upper limit. In the following example, you need to use at least one component value, but you can also use any number of component value values in addition. These component values are not separated by commas.
/* Component multiplier: at least A, with no upper limit */
<'property'> = <value>{1,}
/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value> ; }
... etc
Seven
Wei
Well number (
Wei
）Indicates one or more occurrences of a previous type, keyword, or group. In the following example, one or more component values may be used, separated by commas.
/* Component multiplier: one or more, separated by commas */
<'property'> = <value>#
/* Examples */
.example { property: <value>; }
.example { property: <value>, <value>; }
.example { property: <value>, <value>, <value>; }
... etc
Eight
!
Exclamation mark after a group（
!
）Means that the group is required and produces at least one value. In the following example,
Value1
It is necessary, as well as a source and source
Value2
And
Value3
The value of the group of components. The property has only two property values; they are,
Value1
And
Value2
or
Value1
And
Value3
。
/* Component multiplier: required group, at least one value */
<'property'> = value1 [ value2 | value3 ]!
/* Examples */
.example { property: value1 value2; }
.example { property: value1 value3; }
An example:
<'text-shadow'>
grammar
Let's take
<'text-shadow'>
Observe as an example. This is its definition in the specification:
<'text-shadow'> = none | [ <length>{2,3} &amp;&amp; <color>? ]#
We can split these symbols:
A kind of
Indicates that we can use keywords
None
Or a group
Wei
Indicates that we can use this group one or more times, separated by commas
In the group,
{2,3}
Indicates that we can use two or three length values
&amp; &amp;
That means we have to include all values, but the order can be arbitrary
It's a little tricky,
<color>
Then there's one.
?
, which means it may occur zero or once.
In simple words, this can also be written as:
Indicates none or one or more comma separated groups that contain two to three length values and an optional color value. Length values and optional color values can be written in any order.
That means we can write in many different ways
Text-shadow
Property. For example, you can set it to
None
:
.example { text-shadow: none; }
We can also write only two length values, which means we will set the shadow horizontal and vertical cheaply, but there will be no blur radius or color value.
Since no blur radius is defined, the initial value will be used
Zero
; therefore, the edge of the shadow will be sharp. Since no color is defined, shadows will use the color of the text.
.example { text-shadow: 10px 10px; }
If we use three length values, we will define the horizontal and vertical offset of the shadow and the blur radius at the same time.
.example { text-shadow: 10px 10px 10px; }
We can also add colors, which can appear before or after 2 or 3 length values. In the following example, the red value can be placed after any length value.
.example { text-shadow: 10px 10px 10px red; }
.example { text-shadow: red 10px 10px 10px; }
Finally, we can also include multiple text shadows, writing groups separated by commas. The shadow effect is layered from front to back: the first shadow is at the top, and the other layers are at the back. Shadows cannot be over text. In the following example, the red shadow will be at the top of the green shadow.
.example {
Text-shadow:
10px 10px red,
-20px -20px 5px lime;
}
conclusion
If you make a living writing CSS, it's important to know how to write legal CSS property values correctly. Once you understand how different values are combined or multiplied, CSS property value syntax becomes very easy to understand. Then it will be easier to see the specification of CSS and write legal CSS.