Front-end -- CSS, front-end -- CSS

Front-end -- CSS, front-end -- CSS

CSS full name Cascading Style Sheet, which has three meanings: 1. style declarations with special characteristics and high coverage and low specialization; 2. the style declarations of different attributes must be merged. 3. the same style declaration that appears later overwrites the first one. There are three ways to change the style Priority: 1. Improve the particularity of the selector; 2. Change the style order; 3. Add a semicolon before the style declaration that requires a higher priority! Important;

Cascading Style Sheets are also a style design language. Since it is a language, it will have its own syntax. The syntax of the stacked style sheet is as simple as HTML, but it is not as simple as HTML. This is mainly because css syntax rules involve more content than HTML, so we first introduce the following three basic syntaxes:

1. A style rule consists of two parts: Selector and declaration block. The declaration block is enclosed in braces.

2. Each declaration block consists of a single declaration. A single declaration is composed of Attribute-value pairs separated by colons and ends with a semicolon (the last declaration can be left blank );

3.css comments are written as/**/without double-slash //, which is different from javascript.

For example, h2 {color: red; background-color: blue ;}

Standard css references generally have a description of attribute values. The description of this attribute value also has its own set of rules. Here we will give a brief introduction, but you don't need to care about this, after all, you just need to know how to write it.

The first is the syntax of the attribute value:

1. attribute values can be keywords such as small and normal.

2. The property value can be a value of a certain type, written as a pair of angle brackets <> write type names in the middle, such as <length> can be 20px 30px..., <color> can be red, blue

The second is the syntax of the attribute value combination operator:

1. Spaces indicate that attribute values separated by spaces must be in order.

2. & indicate & separated attribute values must be in order.

3. | representation | each attribute value must contain at least one attribute value, and the order is random.

4. | representation | only one attribute value can appear.

5. [] [] is used as a group to treat [] as a whole property value.

Finally, the syntax about the number symbol is as follows:

1. If the attribute value is left blank, it can only appear once.

2. the attribute value is followed by a plus sign (+), indicating that the attribute value will appear more than once.

3. the attribute value is followed? Number indicates that the attribute value appears 0 or more times

4. the attribute value is followed by {}, {1, 3}, indicating that the attribute value appears 1 to 3 times.

5. the attribute value is followed by #, which indicates that the attribute value appears once or more, but each attribute value must be separated by commas (,).

These are similar to regular expression rules.

For example, the letter-spacing value: <length> | normal indicates that the letter-spacing value can only be a number or the keyword is normal.