CSS basic Syntax one (selector and CSS import method)

The page, all the CSS code, needs to be written to the <style></style> tag. The Type property of the style label should select Text/css, but the type attribute can be omitted.

The CSS modifies all the labels on the page and must be selected with the help of a selector. Selector, you can write many pairs of CSS properties, with {} package: Each property name and attribute value between: delimited, many pairs of attributes, must be separated .

Selector {
Attribute 1: Attribute value 1;
Attribute 2: Attribute value 2;
}

"CSS Common selector"

1. Tag Selector
Syntax: HTML tag name {}
Role: You can select all HTML tags that have the same name as the selector in the page.

2. Class Selector
Syntax:. Class Name {}
Call: Use class= "class name" to invoke selector on a label that needs to invoke a selector style
Priority: > Tag Selector

3. ID Selector
notation: #ID名 {}
Call: A tag that needs to call a style, starting with a id= "ID name"
Priority: ID Selector >class Selector
Note: The same ID cannot appear on a page

"The difference between the class selector and the ID selector"
1. Different wording: class selector. Declaration, ID Selector # declaration;
2. Different priority: ID selector >class Selector
3, the scope of the different: class selector can be called multiple times, the ID selector can only be used once.

"Naming conventions for selectors"
1, can only have letters, numbers, underscores, minus the composition;
2, the beginning can not be a number. It can't be just a minus sign.
In general, naming requires semantics, using English words and numbers.

4. Universal Selector
notation: *{}
Function: You can select all the HTML tags in the page.
Priority: Lowest!!!

5. Set Selector
notation: selector 1, selector 2,......, selector n{}
Effective rules: Multiple selectors take the set, as long as the label satisfies any one of the selectors, the style can take effect.

6. Intersection Selector
Wording: Selector 1 selector 2 ... Selector n{} All selectors are next to each other, no separation
Effective rule: Multiple selectors intersect, you must meet the requirements of all selectors in order to take effect

7. Descendant Selector
Wording: Selector 1 selector 2 ... Selector n{} selectors space-delimited
Effective rule: As long as satisfied, the latter selector is the descendant of the previous selector, can be effective. (descendants include descendants, grandchildren, great-grandchild ...) ）
Popular speaking: As long as the latter a selector, in the previous selector can be.

8. Descendant Selector
notation: selector 1> selector 2>......> selector n{} selector with > delimited
Effective rule: must be satisfied, the latter selector is a direct descendant of the previous selector, in order to take effect. (No labels can be spaced in the middle)

"Priority weight Problem"

1, the first principle of CSS effective is "near priority"! That is, which selector acts on the innermost label, the selector takes effect;
2, when the selector action on the same layer, according to the priority weight, the cumulative calculation:
ID selector *100 > class selector *10 > tag Selector * *
Note: The set selector is equivalent to multiple selectors being disassembled, so the precedence of the set selector cannot be accumulated.
3. When the selector acts on the same layer and the priority weights are equal. Then, write in the last selector to take effect.

"Three ways to introduce CSS"

1, inline style sheet: directly in the HTML tag, using style= "" Way reference;
<div style= "height:100px;" ></div>
Advantages: Flexible use, highest priority weight?
Disadvantage: does not conform to the "Content and performance separation" requirements, not conducive to style reuse;
2. Internal style sheet: In Features: A certain degree of implementation of the HTML and CSS separation, but the separation is not thorough enough, there is no way to multi-page common style.
3. External style sheet: writes CSS separately to the CSS file and is associated with the HTML file.
Advantages: Completely realize the separation of HTML and CSS, in line with the specifications of the web, in favor of multi-page reuse unified style;
"Two ways to import CSS files"
① in the <link rel= "stylesheet" type= "Text/css" href= "Css/02-css.css"/>
② in the <style> tab, use @import to import:
@import url ("Css/02-css.css");

"The difference between the two ways to import"
①link belongs to the standard HTML tag, while @import is not a standard label;
②link can be compatible with all low-version browsers, while @import is only available after CSS2;
③link is a bridge that links two files, while @import is the equivalent of copying CSS files to an HTML file;
④link will be in the process of loading HTML files, side link CSS file;
@import will import the CSS file after all the HTML files have been loaded;
In summary, we use link links to load CSS files.

CSS basic Syntax one (selector and CSS import method)