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

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

Definition of weight level

First class: represents an inline style, such as style= "", with a weight of 1000.

Second, it represents an ID selector, such as # content, with a weight of 100.

Third: representative classes, pseudo classes and attribute selectors, such as .content, with a weight of 10.

Fourth: represents type selector and pseudo-element selector, such as div p, with a weight of 1.

Ps: universal selector (*), sub-selector (>) and neighboring sibling selector (+) are not among these four levels, so their weights are all 0memorial.They have the highest priority and can only be used as a last resort.

Weight calculation

Priority rule

The style with large weight will cover the style with small weight, and the style in the above example will use the style with a maximum weight of 201. when you misuse! important, especially when you modify the style later, is there a feeling of haggard electricity bill?

When the weights of the style items before and after the css are the same, the subsequent styles will override the previous styles.

Css concept

Naming style specification

1 css file naming: unified lowercase English letters (use less pinyin as much as possible), such as: index.css.

When a name needs to be spelled together, you can add a medium line between the words (don't use an underscore: it's easy to make mistakes). Such as: member-report.css. (recommended)

Or unified for hump spelling. Such as: MemberReport.css (uniform style before project start).

2 style name (class name of html): make it as semantic or abbreviated as possible on the premise that people can understand it. Try to use less pinyin, and non-semantic abbreviations such as .bt .bd; style can be unified into lowercase letters, such as: content. When names need to be combined, you can use the specification of css file names.

Inheritance of style

Text style

List related attributes

Pixel-based css

Render

Is the process that the browser displays the HTML code in the browser window with the rules defined by css.

The browser's processing flow for page rendering

Reflux

When the layout of the page changes, the browser will go back and re-render, which is one reason why the page is slow. When the change of a point affects the layout, it will cause you to go back and re-render. The process of reversing is called reflow.

It needs to be backflowed when the page layout and geometric properties change. Browser backflow occurs under the following circumstances

The reflow problem can also be optimized, and it is necessary to reduce the reflow, such as setting the width and height of the picture, so that the space occupying area of the picture can be booked.

Redraw

Some elements need to update their attributes, and these attributes only affect the appearance and style of the element (scene color, text color, border color) without affecting the layout, the browser will repaint. The speed of repaint is obviously faster than that of reflow.

At this point, the study of "what specifications are there in 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.