How CSS works

How does CSS work?

When the browser displays a file, it must take into account the content of the file and the style information of the file. Below we will learn about its standard process for processing files. What you need to know is that the following steps are simplified versions of browsing and loading web pages, and different browsers have different ways of processing files, but the following steps will basically appear.

1. The browser loads the HTML file (for example, obtained from the Internet).
2. Convert an HTML file into a DOM (Document Object Model). DOM is the manifestation of a file in computer memory. The next section will explain DOM in more detail.
3. Next, the browser will pull most of the HTML-related resources, such as pictures, videos, and CSS styles embedded in the page. JavaScript will be processed later, for simplicity, and this section focuses on CSS, so how to load JavaScript will not be described here.
4. After the browser pulls the CSS, it will parse it, and divide them into different "buckets" according to the different types of selectors (such as element, class, id, etc.). Based on the different selectors it finds, the browser applies different rules (based on selectors, such as element selectors, class selectors, id selectors, etc.) to the corresponding DOM nodes, and adds node dependencies Style (this intermediate step is called the render tree).
5. After the above rules are applied to the render tree, the render tree will be laid out according to the structure that should appear.
6. The web page is displayed on the screen (this step is called coloring).

Combine the following icon to make it more vivid:

 

About DOM

A DOM has a tree structure, and each element, attribute, and paragraph of text in the markup language corresponds to a node (Node/DOM or DOM node) in the structure tree. Nodes are defined by the relationship between the node itself and other DOM nodes. Some nodes have parent nodes, and some nodes have sibling nodes (nodes at the same level).

An understanding of the DOM will greatly help you design, debug and maintain your CSS, because the DOM is a combination of your CSS style and file content. When you use the browser F12 to debug, you need to manipulate the DOM to see which rules are used.

A real DOM case

Different from a long and boring case, here we use an HTML fragment to understand how HTML is transformed into DOM

Take the following HTML code as an example:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

In this DOM, the <p>element corresponds to the parent node, and its child nodes are a text node and three nodes corresponding to the <span>element. The node SPANis also the parent node of the Text node among them.

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

The above picture is how the browser parses the previous HTML fragment-it generates the DOM tree structure of the above picture and outputs it to the browser as follows:

Let's use: Cascading Style Sheets