Detailed CSS property value usage

The World Wide Web Consortium uses a special set of syntax to define CSS property values that can be used for all CSS properties. If you've ever seen a CSS specification, you've probably already seen this syntax. Just like

Border-image-slice

Syntax, let's take a look at:

< ' border-image-slice ' > = [<number> | <percentage>]{1,4} && fill?
If you don't know the symbols and how they work, the syntax can be very difficult to understand. However, it is worth taking the time to learn. If you understand how these attribute values are defined, you can understand any of the CSS specifications.

Backus Paradigm

First, let's look at the Backus paradigm (Backus-naur Form), because it will help us understand the property value syntax of the consortium.

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 two meanings or blurs in terms of how the language is expressed.

The initial Backus-naur symbol set has many extensions and variants that are used today, including the extended Backus paradigm (EBNF) and the expanded Basque paradigm (ABNF).

A BNF specification is a set of rules written in the following form:

<symbol>:: = Expression
The left side of the equation is usually a non-terminating character, followed by a

::=

Symbol, which stands for "can be swapped". Right of the formula

Expression

Consists of one or more symbol sequences, which are used to derive the meaning of the left symbol.

The BNF specification fundamentally says, "whatever the left side of the equation is, and whatever the right side is, the left side of the equation can be replaced by the right side of the equation."

Non-terminating and terminating characters

A non-terminator is a symbol that can be replaced or decomposed afterwards. In BNF, non-terminating characters are usually in the 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 example below, all the values are Terminator characters.
<digit>:: = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

CSS Property value Syntax

Although the CSS property value syntax is based on the concept of BNF, they are somewhat different. Like BNF, it starts with a non-terminating character. Unlike BNF, it also describes the notation used in expressions as the "component value (component values)".

In the following example,

<line-width>

is a non-terminating character, and

<length>

，

Thin

，

Medium

And

Thick

is the component value.

<line-width> = <length> | Thin | Medium | Thick

Ingredient value

There are four component values: keywords, basic data types, attribute data types, and non-data data types.

1. Keyword values

The keyword value is not surrounded by quotation marks or angle brackets. They can be used directly as property values. Because they can no longer be substituted or decomposed, they are Terminator characters. In the following example,

Thin

、

Medium

And

Thick

is a keyword value. This means that they are used directly in CSS.

<line-width> = <length> | Thin | Medium | Thick

2. Basic data types

The base data type defines some core values, such as

<length>

And

<color>

。 They are non-terminating characters because they can be replaced with true lengths or color values. In the following example

<color>

Is the basic data type.
< ' background-color ' > = <color>

<color>

In our CSS, you can extend keywords, RGB, RGBA, HSL, HSLA, or

Transparent

keyword, which is replaced by 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 property data type defines the actual name of the property, which is a non-terminating character. It is defined by the property name (including quotation marks) contained in the angle brackets. In the following example,

< ' border-width ' >

Is the property data type.

< ' border-width ' > = <line-width>{1,4}
The property data type can appear directly in our CSS file as a property. In the following example,

Border-width

property to

. exmplate

The class defines a 2px border.
. example {border-width:2px;}

4. Non-attribute data types

Non-attribute data types do not share the same name as a property, and are non-terminating characters. However, it defines some aspects of a certain attribute. For example

<line-width>

is not a property, but it is a definition of a variety of

<border>

The data type.

<line-width> = <length> | Thin | Medium | Thick
< ' border-width ' > = <line-width>{1,4}

Component value combination (Combinator)

Using the following five methods, the component values can be assigned to the attribute value combination:

1. Adjacent values

A sequential and written composition means that all of these values must appear in the order given. 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 symbol (&)

A pair of two or more constituent values separated by a symbol (

&&

means that these values must appear, in order. In the following example, the syntax lists two values, separated by a double and a symbol. The following CSS rules show that both values appear but may be in a different order.

/* Component Arrangement:all, in any order */
< ' property ' > = value1 && value2

/* Examples */
. example {property:value1 value2;}
. example {property:value2 value1;}

3. Single pipe symbol

A single-pipe symbol that separates two or more component values (

|

means that only one value in these values appears. In the following example, the syntax lists three values, separated by a single-pipe symbol. The 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

Two or more selected double-pipe symbols (

||

means that one or more of these values must appear in any order. In the following example, the syntax lists three values, separated by a double-pipe symbol. When you write CSS rules to match this syntax, there are a number of optional options-you can use one, two or three values in any order.

/* Component Arrangement:one or more on 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

Enclose two or more of the selected brackets (

[ ]

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 multiplier (multipliers)

The component values can also be reused using one of the following 8 methods:

1.

?

Question mark

?

) indicates that its previous type, keyword, or group, is optional and occurs 0 or one time. In the following example, the second component value is placed in brackets with a comma. Placing a question mark behind it means that

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;}

2.

*

Asterisk

*

Indicates that its previous type, keyword or group appears 0 or more times. In the following example, the second component value is placed in brackets with a comma. Placing the asterisk after it means that

Value1

Must appear, but we can use it as we want to.

value2

Any time, 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

3.

+

PLUS sign

+

Indicates that its previous type, keyword, or group appears one or more times. In the following example, the plus sign placed after the component value means that the value must be used more than once--without commas.

/* Component Multiplier:one or more times */
< ' property ' > = <value>+

/* Examples */
. Example {property: <value>;}
. Example {property: <value> <value>;}
. Example {property: <value> <value> <value>;}
... etc

4.

A

Curly braces (

A

) contains a number indicating its previous type, the keyword or group appears

A

Times. In the example below, the two instances of value must be legitimate according to the occurrence.

/* Component multiplier:occurs A Times * *
< ' property ' > = <value>{2}

/* Examples */
. Example {property: <value> <value>;}

5.

{A, B}

Curly braces (

{A, B}

) contains two numbers separated by commas to indicate their previous type, with the keyword or group appearing at least

A

Times, at least

B

Times. In the example below, at least one, up to 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>;}

6.

{A,}

In

{A,}

In

B

Was omitted, which meant at least that there was

A

Repetition, without an 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

7.

#

Well number (

#

) indicates that the previous type, keyword, or group appears one or more times. In the following example, one or more of the component values may be used, and these component values are 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

8.

!

Exclamation point after a group (

!

) means that the group is mandatory and produces at least one value. In the following example,

Value1

is necessary, and a coming from with the

value2

And

Value3

The value of the group that is composed. This property has only two property values;

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 put

< ' Text-shadow ' >

As an example to observe. This is what it defines in the specification:

< ' Text-shadow ' > = none | [<length>{2,3} && <color>?] #
We can split these symbols:

|

Indicates that we can use the keyword

None

or a group

#

Indicates that we can use this group one or more times, separated by commas

In the group,

{2,3}

Indicates that we can use 2 or 3 length values

&&

means we have to include all values, but the order can be arbitrary

It's a little tricky,

<color>

After a

?

, which means it may occur 0 or more times.

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 with an optional color value. Length values and optional color values can be written in any order.

Which means we can write in many different ways.

Text-shadow

The value of the property. For example, you can set it to

None

:

. example {Text-shadow:none;}
We can also write only two length values, which means that we will set the shadow level to be cheaper than the vertical direction, but there will be no blur radius or color values.

Because no blur radius is defined, the initial value will be used

0

; So, the edge of the shadow will be very sharp. Because no color is defined, the shadow uses the color of the text.

. example {text-shadow:10px 10px;}
If we use three length values, we will define both the horizontal and vertical offset of the shadow and the blur radius.

. example {text-shadow:10px 10px 10px;}
We can also add color, and the color 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, and write a comma-delimited group. The shadow effect applies from front to back: The first shadow is at the top, and the other layers are behind. Shadows cannot be overridden on text. In the example below, the Red Shadow will be on top of the green-yellow shadow.

. example {
Text-shadow:
10px 10px Red,
-20px-20px 5px Lime;
}

Conclusion

If you live by writing CSS, it's important to know how to properly write a valid CSS property value. Once you understand how different values are combined or multiplicative, the CSS property value syntax becomes very easy to understand. Then look at the specifications of the CSS and write a legitimate CSS will become easier.

If you like to expand your reading, look at the following websites:

' Value Definition Syntax ' in ' CSS Values and Units Module level 3 '

"CSS Reference," Mozilla Developer Network

"How to Read the Specs," J. David Eisenberg, A List Apart