CSS basics
1. Basic knowledge of CSS
1. CSS meaning: CSS (Cascading Style Sheet) cascading style sheet
2. The role of CSS: modifying the structure of HTML pages
3. CSS basic syntax
Selector {attribute: attribute value; attribute: attribute value; attribute: attribute value}
(1) Selector: A way to find page elements. There are many methods, so we need to learn different selectors.
(2) {}: Style rules, also called style modifications, specify what style the elements found by the selector implement.
There will be two interview test sites here
1. How many parts does the basic CSS syntax consist of? What are the differences?
Answer: It consists of two parts, selector and style rules
2. How many parts does a style declaration consist of?
Answer: Attributes and attribute values
2. Where to use CSS syntax
1. Inline style
(1) Meaning: Use the corresponding basic CSS syntax to modify the elements of the page in the form of inline modification.
(2) Basic grammar
<div style="Attribute:Attribute value;Attribute:Attribute value;"></div>
(3) Advantages and disadvantages
- Advantages: Simple and intuitive
- Disadvantages: redundant code, cluttering the structure
2. Internal style
(1) Meaning: Put the corresponding CSS modification statement in an independent style tag. The style tag is generally placed inside the head tag.
(2) Basic grammar
<head>
<style>
Selector {<!-- -->Style Rule}
</style>
</head>
(3) Advantages and disadvantages
- Advantages: Reduces the redundancy of inline modifications, making the page structure concise and styles reusable
- Disadvantages: There is no complete separation of structure, style and behavior. If the amount of code is too large, it will be troublesome to scroll the page back and forth, and all modifications are in the head tag, which will cause slow loading and top-heavy effects.
3. External style
(1) Meaning: Put the corresponding basic syntax of CSS in an independent file with the suffix .css, and you need to use the link tag to associate it.
(2) Basic syntax of link tag:
<link href="Path to CSS file" rel="stylesheet" type="text/css">
(3) Advantages: Full separation of structure, style and behavior is achieved
(4) Expand knowledge points:
There are two ways to introduce styles externally. The first is to introduce through link, and the second is to import. The details are as follows:
<style>
@import url(path);
</style>
Extended interview questions
The difference between external style sheets introduced through link and imported through @import
1. The grammar is different
(1) The former link belongs to label syntax – link is introduced with a single label.
(2) The latter @import belongs to CSS syntax: it must carry the style tag
2. Loading order problem
(1) The files, structures and styles introduced by link are loaded and displayed at the same time.
(2) Files introduced by @import load the structure first and then the style.
3. Differences in using dom (document object model document object model) to control styles
When using JavaScript to control the DOM to change the style, you can only use the link tag because @import cannot be controlled by the DOM.
4. Compatibility issues
(1) Link compatibility is relatively high
(2)@import has low compatibility
3. CSS syntax comparison
Priority description:
!important>Inline styles>Internal styles>External styles
Follow the principle: Proximity principle, whichever one is closest will achieve the effect
Note: If the external style sheet is below the internal style sheet, the effect is: external style > internal style
Because things imported from the outside: CSS, public CSS, JS, etc., must be placed first, so the principle of proximity is followed, and the priority of internal styles is higher than the priority of external styles.
4. Classification of selectors
1. Why use selectors: To use CSS to achieve one-to-one, one-to-many or many-to-one control of elements in HTML pages, you need to use CSS selectors.
2. Classification of selectors: basic selectors, hierarchical selectors, pseudo-class selectors*, attribute selectors, pseudo-object (pseudo-element) selectors, structural pseudo-classes and other selectors
5. Introduction to basic selectors
1. Tag selector
(1) Meaning: Search for page elements through the name of the tag. As long as the tag name is called, it will be matched to implement the corresponding style rules.
(2) Grammar format:
tag {attribute: attribute value;}
(3) Disadvantages: The matching range is too broad
Emphasis: The tag selector matches the element with the corresponding tag name on the page. It can be matched no matter how deeply the level is nested.
2. Class selector
(1) Meaning: By giving the element a nickname (class), find the element through this nickname in CSS
(2) Basic grammar:
<tag class="Class name"></div>
.Class name{property:property value;}
. is the symbol of the class and cannot be omitted
3. ID selector
(1) Meaning: Give the element an id name, and use the id name to find the element on the page in CSS
(2) Basic grammar:
<tag id="ID name"></div>
#ID name { attribute: attribute value; }
# is the symbol of id and cannot be omitted
Note: Any element or label can have an id attribute, but only one of their values can appear.
Extension Points – Named Selector Specifications
(1) Good luck with your name
(2) Start with a lowercase letter, not a number, but you can use alphanumeric underscores
(3) Chinese characters cannot be used
4. Wildcard selector
(1) Meaning: can match all elements on the page
(2) Basic grammar:
Syntax:
*{<!-- -->
Attribute: attribute value;
}
//Common scenarios
*{<!-- -->
margin:0;
padding:0
}
(3) Function: used to cancel the inner margins and outer margins of elements on the page
(4) Disadvantages: Not optimized, so some labels that do not have their own internal margins and external margins also have their internal margins and external margins cancelled.
5. Group selector (union selector)
(1) Meaning: Extract the public styles of some elements to save code and improve optimization
(2) Basic grammar
Selector 1, Selector 2, Selector 3 {Attribute: attribute value;}
6. Introduction to hierarchical selectors
1. Descendant selector
(1) Meaning: In addition to matching the qualifying parent elements, it can also match the qualifying child elements, and it can also match the qualifying grandchild elements.
(2) Basic grammar:
Selector 1 Selector 2{}
2. Descendant selector
(1) Meaning: Only elements that meet the conditions of son’s generation can be matched
(2) Basic grammar:
Selector1>Selector2{}
7. Introduction to dynamic pseudo-class selectors
Application: Mainly used on the hyperlink a tag. The four words must be written in order when used.
Notice:
Hyperlinks are blue text and underlined by default
There cannot be any spaces before and after the pseudo-class selector (:)
In actual situations, hover will be used separately and the style of the element will be changed when the mouse is hovering.
Example:
<style>
.green {<!-- -->
width: 200px;
height: 200px;
background-color: green;
}
.purple{<!-- -->
width: 100px;
height: 100px;
background-color: purple;
}
/* When the mouse hovers over the green box, change the background color of the green box */
/* .green:hover{
background-color: orange;
} */
/* When the mouse hovers over the green box, what changes is the background element of the sub-elements inside */
/* .green:hover>.purple{
background-color: blue;
} */
/* When the mouse moves into the purple box, what changes is its own background color */
.green>.purple:hover{<!-- -->
background-color: aqua;
}
</style>
<body>
<div class="green">
<div class="purple"></div>
</div>
</body>
8. Weight
1. The style implemented when different selectors modify the same element is implemented based on the weight value of the selector.
Each selector weight value:
id selector (100)>class selector (10)>tag selector (1)>wildcard selector (0)
2. If selectors are used mixedly, the weight values of the selectors need to be added for judgment.
Notice:
When multiple levels of nesting are involved, the weight values are added, but the weight value is just a virtual value. By default, the class selector is much larger than the label selector.
9. CSS stackability
CSS cascading means that when a CSS style configures the same attribute for the same element, it handles conflicts based on the cascading rules (weights) and chooses to apply the attributes specified by the CSS selector with high weight. It is also generally described as high weight overwriting low weight. , so it is also called stacking.
Rule 1: When the style settings of different selectors conflict, the style of the high-weight selector will override the style of the low-weight selector;
Rule 2: For selectors with the same weight, the style follows the proximity principle: whichever selector is defined last will use that selector style.