CSS

1. CSS concept

Cascading style sheets, beautify web pages, use css to separate structure (HTML) and performance (CSS)

2. Basic grammar

Selector { attribute: attribute value; }

3. CSS citation method

Reference method: interline style, internal style, external style, import external style
Line style: write style directly on the label
Internal style: write style inside the document
```
<style> 
    style content 
</style>
```
External style: (1) Create a CSS file first; (2) Use the link tag to import this file
Import external styles: (1) Create a CSS file first; (2) Use import to import this style in the style tag

The difference between the four CSS reference methods: Interline styles only act on the current label; internal styles act on the current file; external styles can be referenced by multiple HTML files. In practice project development, it is best to use external styles and external styles are divided into links. Import and import in two ways: 1) When the link introduces CSS, it is loaded at the same time when the page is loaded; @import requires the page to be loaded after the page is fully loaded; 2) Link supports the use of JavaScript to control the DOM to change the style, while @import does not support

4. CSS selector classification:

1) : Match all elements in html (note: poor performance, because it needs to match all elements, it is not recommended to use it in development) 2) Tag selector: match the corresponding tag 3) Class selector: used Select the label named by the class 4) ID selector: used to select the label named by the ID 5) Derived selector: determine the selected label according to the context 6) Pseudo-class selector:

5. Grouping of selectors

Let multiple selectors (elements) have the same style, generally used to set a common style

6. Inheritance of selectors

Child elements can inherit the style of the parent element, but not vice versa

7. Style weight

!important (10000)>inline style (1000)>id selector (100)>class, pseudo-class selector (10)>tag selector (1)

8. CSS fonts

font-size: font
font-family: text font
font-style: Stylistic style attributes: normal (default, normal font)/italic (italic)/oblique (oblique font)
font-weight: Bold attribute: normal/bold (bold)/bolder (bolder than bold)/lighter (thinner than normal) {100-900}: define characters from thick to thin, 400 is equivalent to normal, 700 is equivalent In bold
font-height: line height attributes: normal, number+px (specify the length of the line height in pixels), number (specify the line height as a multiple of the font)
color: color attributes: name (specify color by color name), rgb (specify color by rgb), color hexadecimal
text-decoration: text decoration attributes: normal, underline (underline), line-through (through line), overline (overline)
text-align: text alignment properties: left (left alignment, default), center (center alignment), right (right alignment)
text-transform: Letter case attributes: none (default value, sent without conversion), capitalize (convert the first letter of each word to uppercase) uppercase (convert to uppercase), lowercase (convert to lowercase)
text-indent: text indent attribute: number+px (set the first line indent number pixels), number+em (first line indent number characters)

Font compound attributes: font: font-style font-variant font-weight font-size/font-height font-family; Note: 1): Position order of attribute values 2): In addition to font-size and font-family, Any other attribute values can be omitted 3): font-variant: normal/small-caps (make capital letters smaller)

9. CSS background

background-color: background color attributes: transparent (default value), color (specified color)
background-image: Set the background image properties of the object: none (default value, no background image), url() (use absolute or relative url addresses to specify the background image)
background-repeat: set the background image layout method of the object. Attributes: repeat (default value, the background image is tiled vertically and horizontally), no-repeat (not tiled), repeat-x (tiled horizontally only), repeat-y (Tile vertically only)
background-position: Set the background image position attribute of the object: {x-number|top|center|bottom}, {y-number|left|center|right}
background-attachment: set the object's background image scrolling position property: scroll (default value, scroll with the rest of the page), fixed (when the rest of the page scrolls, the background image will not move) background composite property: background : Color image repeat attachment position

10. CSS pseudo-class selector

Pseudo-classes: specifically used to represent a special state of an element. In browsers that support CSS, different states of a link can be displayed in different ways. These states include: active state, visited state, and unvisited Status and mouse hover status

Commonly used pseudo-class selectors

Pseudo-classes of the a tag: a:visited (visited state), a:link (unvisited state), a:hover (mouse hovering state) a:active (active state)
Form: focus Trigger the style when the form gets the focus input: focus
:first-child (select the first child element of the element)/:last-child/:nth-child(number)

11. Attribute selector

[Attribute name]: The element that contains the specified attribute name (commonly used) 
[Attribute name=value]: The value of the attribute name is the element with the specified value (commonly used) 
[Attribute name ~ = value]: The value of the attribute name contains the specified value Element 
[attribute name^=value]: the element whose 
attribute name starts with the specified value [attribute name$=value]: the element whose attribute name ends with the specified value

12. Relationship selector

1) Space: Descendant selector 2)>: Only select the son element 3)+: Brother selector

13, pseudo-element

:before/:after/:first-letter/:first-line: The front can be 1 colon or double colon
::selection/::placehoder/::backdrop: The front can only be a double colon

02CSS

CSS