CSS Cascading Style Sheets

Reprinted in Wang Fu blog--------http://www.cnblogs.com/wangfupeng1988/p/4277959.html

1. The concept of "cascading"

css--Cascading Style sheets, what does "cascade" mean? Cascading is the process by which a browser overlays multiple style sources and ultimately determines the results. To give a simple example:

There are two styles from the source, the first is the referenced css1.css, and the second is the style that you wrote in the style. "Cascade" is an overlay process that can be represented by:

The above uses a simple example to illustrate the cascade process, the image of the experience.

cascading is CSS of the core mechanism , understand it in the most economical way to write the most easily modified CSS, so that the document appearance in the design requirements, but also leave some room for the user, so that they need to change the document display, such as adjusting the font size. --excerpt from the CSS Design guide

2. Style source

As mentioned above, CSS has the concept of "cascading" because there are multiple style sources. In fact, CSS style source has 5, developers can only touch the back of 3.

　　

First, the browser default style sheet

When you do not set any style for HTML, displayed in the browser, the B tag will show bold, p has vertical margin, H1 font size is one times larger than p ... What is this for?

Because the browser comes with a default style, if the HTML does not have a style set for the label, the browser will display it in its own style. However, the default browser style is the lowest, and once the label style has been set elsewhere, the default browser style will be flushed out.

Note that the default styles for different browsers are not the same in some places. For example, when we write CSS, we will first set the * {margin:0; padding:0;}, why is this? This is because of a browser compatibility issue. Altogether, all make 0, so that each browser is unified.

Here we first put the default style code, our next section is dedicated to the default style, there are many interesting places.

Browser Default Style

Second, the user style sheet

In some news sites, you often see a shortcut menu that lets you set the font size, such as the settings in Sohu News.

These are for some visually impaired people to see, anyway I was useless, I also have visual impairment, but I was through the myopia mirror to solve.

In fact, the browser also has such settings, such as the Chrome browser, we can set the font size and font.

After the user has set the font and size, they will overwrite the default browser style.

the third,<link> refers to the lower precedence of the CSS file

Reference CSS file, everyone should be more familiar with.

The style code written in the fourth,<style> priority

<style> writing styles are also familiar.

Five, <a style= ' > ' has the highest priority in style code written

The label style property is written in a style, and it's all used.

The following three kinds of programs are more commonly used in our development, there is not much to say, do not know the friends need to fill the basic knowledge.

3. Cascading rules

Because the styles come from different sources, when the browser loads the style, it needs to calculate the final style value in order to show the correct interface effect-the browser will generate the final style values in both overlay and overlay ways.

Here is an example:

For example, two styles from different sources, the first style is set to Font-weight, the second one is not, the browser will overlay it together, that is, the browser will be fragmented into a whole. The first style color:red, the second style color:blue, the browser will let the latter cover the former, the end result is color:blue.

The overriding default rule is that the latter overrides the former, but another special case ——! important.

Such as. Although Color:blue was later, it did not reside because the former color:red followed!important. It's like getting a imperial sword, having the highest executive power, other people giving way, or the Buddha blocking the Buddha.

4. Summarize

This article mainly explains the 5 sources of CSS, as well as the browser overlay style of the process and methods, which is the most basic knowledge of learning CSS. The next section will show you what the browser default style looks like, and what can we learn from it? There is a lot of fun stuff, please look forward to!

CSS Cascading Style Sheets