Do you understand these css principles?

CSS is a computer language used to express file styles such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language). CSS can not only statically modify web pages, but can also cooperate with various scripting languages ​​to dynamically format various elements of web pages. CSS can perform pixel-level precise control over the layout of element positions in web pages, supports almost all font size styles, and has the ability to edit web page object and model styles. People who are engaged in Web front-end development have dealt with CSS a lot. Some people may not know how CSS works. How does the written CSS be parsed by the browser? When this becomes a bottleneck for us to improve CSS level, should we know more about it?

　1. Browser development and CSS

Web browsers mainly connect to web servers through the HTTP protocol to obtain web pages. HTTP allows web browsers to send data to web pages. server and get the web page. Currently the most commonly used HTTP is HTTP/1.1, which is fully defined in RFC2616. HTTP/1.1 has its own set of standards that Internet Explorer does not fully support, but many other modern web browsers fully support these standards. The location of the web page is indicated by the URL (Uniform Resource Locator), which is the address of the web page; anything starting with http: means logging in through the HTTP protocol. Many browsers also support other types of URLs and protocols, such as ftp: for FTP (File Transfer Protocol), gopher: for Gopher and https: for HTTPS (HTTP encrypted with SSL).

Early web browsers only supported a simple version of HTML. The rapid development of proprietary software browsers has led to the creation of non-standard HTML code. But as HTML grew, it gained many display features in order to meet the requirements of designers. As these capabilities increase, foreign languages ​​for defining styles make less and less sense.

　The original proposal of CSS was proposed by Hakun Lee in 1994. BertBos was designing a browser called Argo, and they decided to work together on CSS.

There had been some proposals for style sheet languages, but CSS was the first to include the idea of ​​"cascading". In CSS, styles in one file can be inherited from other style sheets. The reader can use his or her own preferred style in some places and inherit or "layer" the author's style in other places. This layering method allows both the author and the reader to flexibly add their own designs and mix their own preferences. .

In early 1997, a working group dedicated to CSS was organized within the W3C, and its leader was Chris Lilley. This working group began discussing issues not covered in the first edition, which resulted in the publication of the second edition requirements in May 1998. As of 2007, the third edition is not yet complete.

　2. How the browser renders and loads the page

Why do some websites load very slowly when they are opened, and the entire page is displayed at the same time, while Some websites are displayed gradually from top to bottom? To understand this, you can start with the following general process:

1. The order of browser downloading is from top to bottom, and the order of rendering is also from top to bottom. Downloading and rendering are performed at the same time.

　2. When rendering to a certain part of the page, all parts above it have been downloaded (this does not mean that all associated elements have been downloaded).

　3. If you encounter a semantically interpretable tag embedded file (JS script, CSS style), then the download process of IE will enable a separate connection for downloading.

　4. And perform parsing after downloading. During the parsing process, stop downloading of all downward elements of the page.

　5. After the style sheet is downloaded, it will be parsed together with all previously downloaded style sheets. After the parsing is completed, all previous elements (including previously rendered elements) will be re-rendered.

　6. If there is redefinition in JS or CSS, the later-defined function will overwrite the previously-defined function.

The key here are the three points 2-5. Rendering efficiency is related to the following three points:

　1. Query positioning efficiency of CSS selector

　2. Browser rendering mode and algorithm

　3. To render content The size

　3. What is CSS and the advantages of CSS

What is CSS?

CSS is the abbreviation of Cascading Style Sheets.

CSS language is a markup language that does not require compilation and can be directly interpreted and executed by the browser (it is a browser interpreted language).

In standard web design, CSS is responsible for the presentation of web content (XHTML).

The CSS file can also be said to be a text file, which contains some CSS tags. The CSS file must use css as the file name suffix.

We can change the overall presentation of the web page by simply changing the CSS file, which can reduce our workload, so it is a required course for every web designer.

CSS is produced and maintained by the W3C CSS Working Group.

Use CSS+DIV to reconstruct web pages. Compared with the traditional TABLE web page layout, it has the following three significant advantages:

　1. Separate performance and content. Separate the design part and put it in a separate style file, and only store text information in the HTML file. Such pages are more friendly to search engines.

　2. Improve page browsing speed. For the same page visual effect, the page capacity reconstructed using CSS+DIV is much smaller than the page file capacity encoded by TABLE. The former is generally only 1/2 the size of the latter. The browser doesn't have to compile a lot of lengthy tags.

　3. Easy to maintain and revise. You can redesign the entire website by simply modifying a few CSS files.

　 4. Browser matching principle for CSS

Browser CSS matching does not search from left to right, but from right to left. For example, the DIV#pBox p span.red{color:red;} mentioned earlier, the browser's search sequence is as follows: first search for all span elements with class='red' in the html, and after finding them, search whether there are any in their parent elements. p element, and then determine whether there is a p element with the id pBox in the parent element of p. If both exist, the CSS will match.

The advantage of the browser searching from right to left is to filter out some irrelevant style rules and elements as early as possible. Firefox calls this search method keyselector (keyword query). The so-called keyword is the last (rightmost) rule in the style rules. The key above is span.red.

5. Optimize your CSS

The so-called efficient CSS is to allow the browser to perform as few searches as possible when looking for elements matching style. Here are some We commonly make some inefficient mistakes when writing CSS:

1. Do not use the tag name

before the ID selector. Common writing method: DIV#pBox

Better writing method: #pBox

Explanation: Because the ID selector is unique, adding p will increase unnecessary CSS matching.

2. Do not use the tag name before the class selector

Common writing method: span.red

Better writing method: .red

Explanation: Same The first one, but if you define multiple .red and the styles are different under different elements, you cannot remove it. For example, your css file defines it as follows:

　p.red{color:red ;} 　span.red{color:#ff00ff}

If it is defined like this, don’t remove it. It will be confusing if you remove it. However, it is recommended not to write it like this

3. Use hierarchical relationships as little as possible

Normal writing: #pBoxp.red{color:red;}

Better writing: .red{..}

4. Use class Instead of hierarchical relationship

General writing: #pBox ul li a{display:block;}

Better writing:.block{display:block;}

5. In The efficiency of id and class in CSS rendering efficiency are basically the same

Class will be cached in the first load, which will have better effects in cascading. Using id in the root element will have better results (id has a subtle speed advantage).

For front-end friends, it is very important to master good CSS skills. I hope this article will be helpful to you.

Related recommendations:

The most complete common techniques for CSS development

##Detailed explanation of the details in CSS

Detailed explanation of CSS principles for front-end development

The above is the detailed content of Do you understand these css principles?. For more information, please follow other related articles on the PHP Chinese website!