This is the 21st day of my participation in the August More Text Challenge
Basic knowledge of
- External style sheetsCSS is written in an extension name
.css
Separate files from and from HTML<link>
The element references it - Internal style sheetThis refers to putting CSS in HTML files instead of using external CSS files
<head>
In the label<style>
In the tag. - When the browser encounters a CSS selector or declaration that cannot be parsed, the browser does nothing and continues to parse the next CSS style.
- The values of CSS properties can be relatively simple keywords or numeric values, and there are also some possible values in the form of functions. For example,
width: calc(90% - 30px);
transform: rotate(0.8turn)
}
Copy the code
- @ rules.
@import
Import additional stylesheets into the main CSS stylesheet@media
(Media query)
@import 'styles2.css'; body { background-color: pink; } @media (min-width: 30em) { body { background-color: blue; }} // If the browser width is greater than 30em, the background color will be blueCopy the code
Working Principles of the CSS
When a browser displays a file, it must consider both the content of the file and the style information of the file. When the browser loads the HTML file, it converts the HTML to DOM. The browser then pulls most of the RESOURCES associated with that HTML, such as the images, videos, and CSS styles embedded in the page, and JavaScript takes care of that later.
After the browser pulls CSS, it parses them, divides them into different “buckets” according to the selectors, applies them to the corresponding DOM nodes, and adds node-dependent styles (this intermediate step is called render tree); Render trees are laid out as they should be; Web pages are displayed on the screen (this step is called coloring).
inheritance
CSS inheritance needs to be understood in context. Some attributes, such as font, are inherited by quilt elements, while others, such as width, are not.
To control inheritance, each CSS property can have the following values.
inherit
: Setting this property makes the child element attributes the same as the parent element. In effect, it’s “inheritance on “.initial
unset