(1) Introduction and basic grammar of CSS
- What is CSS: Cascading Style Sheet Cascading Style Sheets, a computer language used to decorate and beautify HTML tags, can achieve the separation of structural performance.
- CSS Basic Syntax
selector {
attribute: attribute value;
attribute: attribute value;
...
} - Selector: The selector is also called the selector, which is used to tell the browser, the application object of the style
Types of selectors: tag selectors (element selectors), class selectors, id selectors, global selectors (wildcard selectors), group selectors, subset selectors, descendant selectors, attribute selectors, dynamic Pseudo-class selectors.....
a. Tag selector (element selector): Take HTML tags as selectors, the function is to apply the same style to the same tags in the document
b. Class selectors: The function is to set the style of an element separately and modify it- Step 1: Set the name
<p class="类名"></p> - Step 2: Set the style/classname {style}
- Notes on class selectors
1. Naming rules for class names
Consists of letters, numbers, and underscores
Can not have Chinese characters
Can not start with numbers
Can not be keywords
2. Class names in a document can be the same
3. A class can have multiple names
c. id selector: The function is to set the style of an element separately and modify it
- Step 1: Set the name
- Step 2: Set the style #id name{style}
- Note: The difference between a class selector and an id selector is
1. In a document, the class name can be the same, but the id name cannot be repeated
2. The weight of the id is greater than the weight of the class, in other words, the style of the id takes precedence over the style of the class
d. Global selectors (wildcard selectors): use * as a selector, the function is to apply the same style to all elements
. e. Group selectors: It means that multiple selectors are separated by commas, and they form A group that applies the same style
f. Dynamic pseudo-class selector- :link default style (applies to hyperlinks)
- :visited style after visiting (the application object is a hyperlink)
- :hover The style when the mouse hovers over the element (the application object can be a hyperlink or another element)
- :active The style when the mouse is active (the application object can be a hyperlink or other elements)
- Be sure to pay attention to order issues when using four dynamic pseudo-classes: LVHA
- :focus style when focused
- Step 1: Set the name
(2) CSS style sheet
Application of style sheets: inline style sheets, internal style sheets, external style sheets, imported style sheets
a. Inline style sheet: refers to writing the style sheet in the start tag of the HTML tag, using style as the keyword. The inline style sheet is usually used to modify individual local elements. The disadvantage is that the separation of structure and performance is not achieved, so the inline style sheet The frequency of use is not high
b. Internal style sheet (inline style sheet), usually written in the HTML document tag, the format is as follows Note : When modifying the style of a document, you can use the internal style sheet, and there are no disadvantages. Real separation of structure and performance c. External style sheet: The so-called external style sheet refers to writing CSS styles in a separate CSS file, and then using tags to associate the CSS file with the HTML file. This kind of style sheet really realizes the The separation of structure and presentation is the most commonly used style sheet format : d. Import style sheet: only for understanding
<head>
<style type="text/css">
样式
</style>
</head>
<head>
<link rel="stylesheet" type="text/css" href="CSS文件的路径" />
</head>
<head>
<style type="text/css">
@import "样式表的路径";
</style>
</head>style sheet precedence
Priority of inline style sheets > Priority of internal style sheets The priority of
internal style sheets and external style sheets depends on the loading order of the style sheets, and the style sheets loaded later are displayed first. The
principle of proximityFeatures of Style Sheets: Style Sheet Inheritance, Style Sheet Override
Inherit: descendant elements will inherit styles from ancestor elements
Override : If selectors have the same weight, then the styles set later will override the styles set earlier for the same attributesCSS style comments
Comments for HTML documents
<!--注释内容-->
: Comments for CSS documents:/*注释内容*/
The benefits of comments- Clear structure, easy maintenance
- Good for code debugging