CSS basics
One, the definition of css
CSS: (cascading style sheets) (cascading style sheets) define the style of web pages-the basis of page performance, control layout, control element rendering.
Second, how to introduce css style sheet into HTML
1. External style sheet (convenient to reuse and maintain) The
css code is a separate file, referenced by link
2. Internal style sheet (not convenient for later maintenance)
Add inside3. In-line style sheet
write css code directly in the start tag of a tag with the style attribute
Three, CSS terminology
1. CSS rules
CSS code is composed of multiple rules, each rule specifies which elements to use what style
Writing format: selector {declaration block} declaration block = declaration + declaration (composed of multiple declarations) For
example:
define the style of h1 : The font is 16 pixels and the color is red.
2. Common CSS selectors The
selectors determine which elements the style rules apply to.
(1) Element selector tag name {declaration block} p{color: red;}
(2) Class selector. Class name {declaration block} .hh{color: blue;}
(3) id selector #id value { Declaration block} #bb{color: yellow;}
In the same HTML document, the id attribute value of the element is unique
(4) child selector parent element> child element div>p{color: red;}
(5) Descendant selector parent element child element (a space in the middle) div p{color: red;}
3. Common CSS attributes
color color
text-align element content alignment
font-size font size
font-weight text thickness
background-color background color
background-img background image
4. Declaration conflicts If
multiple selectors select the same label and have the same attribute name but different attribute values, declaration conflicts will occur. (When a declaration conflict occurs, the browser automatically triggers the cascade mechanism)
5. Cascading mechanism
Cascading process:
(1) Comparison priority: the lower priority is eliminated, the higher priority wins.
Priority is related to source and importance
(2) More specificity: the one with low specificity will be eliminated, the one with high will win.
The particularity of the declaration depends on the size of the scope of application of the rule, the larger the scope, the smaller the particularity, and vice versa.
Inline selector>id selector>Class selector>Element selector>Wildcard selector
Pseudo-inline selector>Class selectorPseudo element selector>Element selector
Specific rules:
When comparing particularity, 4 numbers (ABCD) will be generated for each conflict to compare particularity.
The bigger A is, the higher the particularity is. If A is equal, compare B. The bigger B is, the higher the particularity is, and so on
A: The statement is an in-line selector, then it is 1, otherwise it is 0.
B: The number of id selectors
C: The number of class selectors, pseudo-class selectors, and attribute selectors
D: Element selector, pseudo-element selection Number of devices
Combination selectors are calculated separately.
(3) Comparing the source order: the earlier source order is eliminated, the lower source order wins.
Who writes later, who wins
6. Inheritance (inherit)
child elements automatically have some (most of the text styles) css property
background-color of the parent does not inherit.
Inheritance is transitive.
Applicable scenarios:
(1) This property can be inherited (2) This property is not Declaration (definition)
Mandatory inheritance:
also known as explicit inheritance, which refers to setting the CSS property value to inherit (background-color: inherit)
(in order to inherit properties that cannot be inherited, and to inherit properties that have been declared)
END Today’s sharing is here, thank you everyone