What is the correct place to reference an external stylesheet in an html document-Front-end Q&A-php.cn

What is the correct place to reference an external stylesheet in an html document

青灯夜游

Release： 2022-12-30 11:13:42

Original

17669 people have browsed it

The correct place to reference an external style sheet in an HTML document is: the "" part. Because the browser code is parsed from top to bottom; if you put the css at the bottom, when the network speed is slow, the html code is loaded but the css is not loaded, which will cause the page to have no style and be difficult to read, so loading the css style first can Let the page display normally.

What is the correct place to reference an external stylesheet in an html document

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The correct place to reference an external style sheet in an HTML document is: the "<head>" section.

Why does the external link css have to put the head <head> part?

First, the entire page is displayed to the user through the html parsing and rendering process.

The external link css will not affect the parsing of html no matter it is placed anywhere in html, but it will affect the rendering of html.

If you put the css at the end, the content of the html can be displayed immediately, but it will block the rendering of the css in the html line. [Recommended tutorial: CSS video tutorial]

This strategy of the browser is actually very wise. Imagine that without this strategy, the page will first show an inline css style, and then wait for the CSS After downloading, it suddenly changed its appearance. The user experience is extremely poor, and rendering is costly.

If you put css at the head, the download and parsing of css can be synchronized with the parsing of html. If you put it at the end, it will take extra time to parse the CSS, and the browser will first render an unstyled page. The page will be rendered into a styled page after the CSS is loaded, and the page will flash obviously.

For more knowledge about computer programming, please visit: Programming Video! !

The above is the detailed content of What is the correct place to reference an external stylesheet in an html document. For more information, please follow other related articles on the PHP Chinese website!