The history and working principle of CSS

1. Browser Development with CSS

Web browser mainly through the HTTP protocol connection to the Web server to obtain a Web page, HTTP allow web browser to send data to the Web server and access to Web pages. Currently the most commonly used HTTP is http/1.1, which is fully defined in RFC2616. http/1.1 has a set of standards that Internet Explorer does not fully support, yet many other contemporary web browsers fully support these standards. The location of the Web page is indicated by a URL (Uniform Resource Locator), which is the address of the Web page, with http: The first is the HTTP protocol login. Many browsers support other types of URLs and protocols, such as ftp: FTP (File Transfer Protocol), Gopher: Gopher and https: HTTPS (SSL-encrypted HTTP). Jinyun County Foreign Experts Bureau

Early Web browsers only support simple versions of HTML. The rapid development of software-specific browsers leads to non-standard HTML code generation.

However, with the growth of HTML, in order to meet the designer's requirements, HTML has a lot of display functions. With the addition of these features the foreign-defined style of the language is increasingly meaningless.

1994 Hakun proposed the original CSS recommendations. Burt Posse (Bertbos) was designing a browser called Argo, and they decided to work together to design CSS. There have been some suggestions for stylesheet language, but CSS is the first to have a "cascade" idea. In CSS, the style of a file can be inherited from another style sheet. The reader can use his own preferred style in some places, inherit it elsewhere, or "cascade" the author's style, a cascade that allows both the author and the reader the flexibility to join their own designs and to mix their hobbies.

At the beginning of 1997, a working group specializing in CSS was organized by the Chris Riley. The Working Group began to discuss issues not covered in the first edition, and the result was the second edition of the requirements published in May 1998. By 2007, the third edition is not yet complete.

2. How the browser renders the page and loads the page

Why some sites will be loaded when it is very slow, and the whole page is displayed at the same time, and some sites are from the top to the bottom of the gradual display of it? To understand this, you can start with the following general process:

1. The order in which the browsers are downloaded is from top to bottom, and the order of rendering is from top to bottom, and the download and rendering are simultaneous.
2. When you render to a portion of a page, all of its parts are already downloaded (not that all associated elements have been downloaded).
3. If you encounter semantic explanatory tags embedded file (js script, CSS style), then the download process of IE will enable the individual connection to download.
4. And after the download, parsing, the parsing process, stop all elements of the page down the download.
5. After the download is complete, the stylesheet is parsed with all previously downloaded stylesheets, and after parsing is complete, all previous elements (including previously rendered) are re-rendered.
6. JS, CSS, if there is a redefinition, after the definition function will overwrite the pre-defined function.

The key here is 2–5 these three points. The rendering efficiency is related to the following three points:

• Query location efficiency of CSS selectors
• Browser rendering modes and algorithms
• The size of the content to render

3. What are the advantages of CSS and CSS?

What is cascadingstylesheets (cascading style sheets)? CSS is the abbreviation for cascadingstylesheets (cascading style sheets). The CSS language is a markup language that does not need to be compiled and can be interpreted directly by the browser (which belongs to the browser-interpreted language). CSS is responsible for the performance of Web content (XHTML) in standard web design. CSS files can also be said to be a text file, it contains some CSS tags, css files must use CSS as the filename suffix. You can reduce our workload by simply changing the CSS file and changing the overall form of the Web page, so she is a required course for every web designer. CSS is generated and maintained by the CSS workgroup.

Using Css+div for Web page refactoring has the following 3 distinct advantages over traditional table page layouts:

• Separation of performance and content the design part is stripped out and placed in a standalone style file, where only text information is stored in the HTML file. Such pages are more friendly to search engines.
• Improve page browsing speed for the same page visual effect, the page capacity using Css+div refactoring is much smaller than the size of the table-encoded paging file, which generally has only the latter 1/2. Browsers don't have to compile a lot of lengthy tags.
• Easy to maintain and revise you can redesign the entire site's pages simply by modifying a few CSS files.

4. Browser-to-CSS matching principle

Browser CSS matches are not found from left to right, but from right to left. For example, before the div#divboxpspan.red{color:red;}, the browser looks in the following order: First find all the class= in HTML ' The span element of red ' finds, then finds whether there is a P element in its parent element, and then determines whether there is a DIV element with the ID of Divbox in the parents of P, and if all exists then the CSS matches.

The benefit of browser lookup from right to left is to filter out extraneous 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 find a style matching elements to try to do less search, listed below some of our common write CSS to make some inefficient errors:

1. Do not use tag names before the ID selector. General wording: Div#divbox, better writing: #divBox.

Explanation: Because the ID selector is unique, adding a div instead adds an unnecessary CSS match.

2. Do not use the tag name in front of the class selector. General wording: span.red, better writing:. Red.

Explanation: Same as the first one, but if you define more than one. Red, and under different elements are not the same style, you can not remove, such as your CSS file defined as follows:

1	p .red{color:red;}

2	span .red{color:#ff00ff}

If this is the definition of not to be removed, the removal will be confused, but it is advisable not to write this.

3. Use as few hierarchical relationships as possible. General wording: #divBoxp. red{color:red;}, a better notation:. red{.

4. Use class instead of hierarchical relationships. General wording: #divBoxullia {display:block;}, a better notation:. Block{display:block;}

5. The efficiency of the ID and class in CSS rendering efficiency is basically equivalent. Class is cached in the first load and will have a better effect on the stack, with the ID of the root element being better (the ID has a subtle speed advantage).

The history and working principle of CSS