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!

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Dreamweaver Mac version
Visual web development tools

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Zend Studio 13.0.1
Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 English version
Recommended: Win version, supports code prompts!
