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.cssSeparate 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.@importImport 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