Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what are the three characteristics of CSS". In daily operation, I believe many people have doubts about what are the three characteristics of CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "what are the three characteristics of CSS?" Next, please follow the editor to study!

Cascading inheritance priority is one of the three features that we must master when we learn CSS.

The so-called cascading refers to the superposition of multiple CSS styles.

Is an ability of browsers to handle conflicts. If an attribute is set to the same element through two identical selectors, then one attribute will cascade the other.

For example, if a label is assigned an internal text color of red, and then a color of blue, there is a situation where a label specifies different values of the same style, which is a style conflict.

In general, if there is a style conflict, it will follow the order in which CSS is written, and the final style shall prevail.

Inheritance means that when you write an CSS stylesheet, the child tag inherits some styles of the parent tag, such as text color and font size. To set an inheritable property, simply apply it to the parent element.

The simple understanding is that a son inherits his father's work.

Note:

Proper use of inheritance can simplify the code and reduce the complexity of the CSS style. Child elements can inherit the style of the parent element (text-,font-,line- can be inherited at the beginning of these elements, as well as the color attribute)

When defining CSS styles, there are often two or more rules applied to the same element, and the issue of priority arises.

When considering weight, beginners also need to pay attention to some special cases, as follows:

With regard to CSS weight, we need a set of formulas to calculate. This is CSS Specificity, which we call the CSS feature or extraordinary. It is a standard for measuring the priority of CSS values. The specific specifications are as follows:

Specificity is represented by a four-digit string (CSS2 is three digits), which is more like four levels, the value from left to right, the largest on the left, one level greater than one level, there is no binary between digits, and the levels cannot be surpassed.

Contribution value of inheritance or * 0pl 0pl 0p0pl 0

The contribution value of each element (tag) is 0pm 0pm 0pm 1

For each class, the contribution value of pseudo class is 0pm 0pm 1pm 0

The contribution value of each ID is 0, 1, 0, 0.

Contribution value of each inline style: 1, 0, 0, 0, 0, 0

Each! important contribution value ∞ infinity

The weight can be superimposed.

For example:

Note:

1. There is no base between digits, for example: 0 div 0, 0 10, instead of 0, 0, 0, so there will be no case in which 10 parallels can catch up with a class selector.

two。 The inherited weight is 0

Summary priority:

Rules declared by! important are used.

The declaration embedded in the style attribute of the HTML element.

The rules of ID selector are used.

Rules for class selector, attribute selector, pseudo-element, and pseudo-class selector are used.

The rules of the element selector are used.

Contains only one universal selector rule.

The same kind of selector follows the principle of proximity.

To sum up: weight is the algorithm of priority, cascading is the expression of priority.

At this point, the study on "what are the three characteristics of CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.