How much do you know about css (3)--Style sources and cascading rules_html/css_WEB-ITnose

In the previous section "How much do you know about CSS (2)?? Ideas for learning CSS", several people left messages saying that the idea is very good and they continue to look forward to it, and it received 9 likes. I am quite pleased. For those who haven’t watched it, I suggest you watch the previous section first.

This section begins to practice the ideas in the previous section!

1. The concept of “cascading”

CSS?? Cascading style sheet, what does “cascading” mean? Cascading is the process in which the browser stacks multiple style sources and ultimately determines the result. Let’s take a simple example:

​

There are two style sources in the above picture, the first is the referenced css1.css, and the second is the style written by myself in style. "Lamination" is a superposition process, which can be represented by the following figure:

​

                                                                                                                                                                            

Overlapping is the core mechanism of CSS

. It understands that it can write the easiest CSS in the most economical way. Leave some space and let them change the presentation of the document if they want, such as adjusting the font size. ??Excerpted from "CSS Design Guide"

2. Style source As mentioned above, the reason why CSS has the concept of "cascading" is because there are multiple style sources. In fact, there are 5 sources of CSS styles, and developers can only access the last 3.

 

First, the browser default style sheet

When you do not set any style for html, it is displayed on the browser, b tag It will be displayed in bold, p has vertical margin, h1 font size is twice as large as p... Why is this?

Because the browser comes with a default style, if there is no style set for the tag in the html, the browser will display it according to its own style. However, the browser default style is the lowest level. Once the label style is set elsewhere, the browser default style will be washed away.

Note that the default styles of different browsers are different in some places. For example, when we write CSS, we will first set * {margin:0; padding:0;}. Why is this? It's because of browser compatibility issues. Simply, set them all to 0, so that all browsers will be unified.

Let’s post the code of the default style first. We will explain the default style in the next section. There are many things worth pondering.

Browser default style

Second, user style sheet

In some news websites, you often see shortcut menus that can set the font size , for example, the picture below shows the settings in Sohu News.

　

These are for people with visual impairments. Anyway, I have never used them. I also have visual impairments, but I use myopia glasses to solve the problem.

In fact, browsers also have such settings. For example, in the Chrome browser, we can set the font size and font.

After the user sets the font and the font, they will cover the default style of the browser.

Third, the css file referenced by

You should be familiar with citing css files.

Fourth, the style codes written in