css文件应该放哪在HTML里

css的选择器可以分为三大类,即id选择器,类选择器,标签选择器。它们之间可以有多种组合,有后代选择器,子选择器,伪类选择器,通用选择器,群组选择器等等

css文件应该放在HTML顶部的头中。原因:浏览器解析HTML文档是自上而下的,如果将css放在底部,页面可以逐步呈现,但在css下载并解析完毕后,已经呈现的文字和图片就要需要根据新的样式重绘,这是一种不好的用户体验。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

<强> css文件应该放在HTML顶部的头中。

<强>为什么?

& lt; link  rel=皊tylesheet", href=https://www.yisu.com/zixun/" home.css ">

链接标签里面的href(超文本引用)属性表示超文本引用,当CSS使用href引,用浏览器会识别该文档为CSS,并行下载,不会停止对当前文档的加载,在加载html生成DOM树的时候,就可以同时对DOM树进行渲染,这样可以防止闪跳,白屏或者布局混乱。

最理想的情况,我们希望浏览器逐渐的渲染下载好的CSS,将页面逐渐的展现给用户。但是浏览器为了避免样式变化时重新渲染绘制页面元素,会阻塞内容逐步呈现,浏览器等待所有样式加载完成之后才一次性渲染呈现页面。

CSS文件如果放置底部,浏览器阻止内容逐步呈现,浏览器在等待最后一个CSS文件下载完成的过程中,就出现了”白屏”(新打开连接时为白屏,尔后先出现文字,图片,样式最后出现)。这点非常严重,因为在网速非常慢的情况下,CSS下载时间比较长,这样就给用户带来“白屏”的时间自然也就很长了,用户体验非常差。

<强> CSS文件放在顶部一方面是因为放置顺序决定了下载的优先级,更关键的是浏览器的渲染机制。

CSS在加载过程中不会影响到DOM树的生成,但是会影响到渲染树的生成,进而影响到布局,所以一般来说,风格的链接标签需要尽量放在脑袋里面,因为在解析DOM树的时候是自上而下的,而CSS样式又是通过异步加载的,这样的话,解析DOM树下的身体节点和加载CSS样式能尽可能的并行,加快渲染树的生成的速度。

将CSS放在底部,页面可以逐步呈现,但在CSS下载并解析完毕后,已经呈现的文字和图片就要需要根据新的样式重绘,这是一种不好的用户体验。

以上是“CSS文件应该放哪在html里”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

css文件应该放哪在HTML里