1. Inline style sheets. Style is usually written in the header

<header>
	<style>CSS code</style>
</header>
Copy the code

2. Inline style sheets, also called element style sheets, are written inside the element’s style without a selector.

3. External stylesheets write CSS code in a separate CSS file and use the link element in the header to link to the HTML file, which is the most commonly used method

2. Id selector: #+id{}

3. Class selector:. +class Class name

4. Wildcard selector: * Select all elements (rarely used)

5. Property selector: Select a specific property

6. Pseudo-class selector: Hover according to the state of mouse movement. Active: indicates that the mouse is pressed down. Link: The hyperlink is in the access state. Visited: The status of hyperlinks visited

7.伪类选择器：before after 写法::before ::after

CSS is a cascading style sheet

Declaration conflict: The same style applied to the same element more than once

Cascade is the process of resolving conflicting declarations that the browser automatically handles (weights)

1. Comparative importance From high to low! Importent Style > Author Style Sheet > Browser Default style sheet

2. Compare the particularity, the general rule is to see the selector. The smaller the selected range of the selector, the more special and higher the level

Specific rule: through the selector to calculate a four digit (XXXX)

* Thousands: 1 if it is inline, 0* otherwise

* hundreds: The number of all ID selectors in the selector *

* Tens: equal to the number of class selectors, property selectors, pseudo class selectors *

* bits: equal to the number of all element selectors, pseudo element selectors in the selector *

* Note that the units digit is not one in ten, but one in 256 *

3. Compare the distant order

The code that comes later overwrites the code that comes before it and doesn’t use the source order if the importance is already compared

Link >visited> Hover >active

Page rendering is a process in which elements are rendered in sequence according to the attributes directory structure of the page document

A prerequisite for rendering an element is that all CSS properties of the element must have values

An element goes from having no value for any of its attributes to having a process worth evaluating for all of its attributes a process called an attribute

1. Make sure that the declared values refer to non-conflicting declarations in the stylesheet as CSS properties

2. Cascading conflict table, for the declaration of conflict is yo cascading rules (weight) to determine CSS properties

3. Use inheritance To inherit the value of the parent element from a value that still does not exist

4. Use the default values

Two special CSS values are as follows:

Inherit manually (force inheriting the attributes of the parent element)

Initial sets this property to the default value

1. Line box: display: inline element

2. Block box: display: block element

A block box has an exclusive row on the page

See the explanation rules in my HTML article for specific line box and block box rules

1. Change the width and height range

By default width automatically generates the width and height of the content box. You need to manually set the border-box

2. Change the background coverage

By default, the background overwrites the border box. You can skip background-clip to modify it

3. Overflow handling

If the width and height are set manually, you can see the content. Hader hides the overflow part use XY to control the overflow part scroll bar, and auto will appear automatically

4. The word break rule (when wrapping a line) is generally handled automatically by the browser

Word-break affects where the text is truncated

Normal. Cjk is truncated between words. Other characters are truncated at word position

Break-all: All characters are truncated at text.

Keep-all: All text is truncated in the word, can be English, Chinese is a line, will be truncated in the space

5 Blank Processing

The same text box, such as a line of text overflow display can not appear…

Text-overflower: Ellipse overflow uses dots instead of…