• 技术文章 >web前端 >css教程

    css样式表常驻留在文档的什么区域中

    青灯夜游青灯夜游2021-04-06 18:09:29原创50

    css样式表常驻留在文档的“head”区域中。因为如果将CSS放在底部,页面可以逐步呈现,但在CSS下载并解析完毕后,已经呈现的文字和图片就要需要根据新的样式重绘,这是一种不好的用户体验。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css样式表常驻留在HTML文档顶部的head中。

    why?

    <link rel="stylesheet" href="home.css">

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

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

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

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

    (学习视频分享:css视频教程

    以上就是css样式表常驻留在文档的什么区域中的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css
    上一篇:css如何设置透明度 下一篇:css怎样清除浮动
    第15期线上培训班

    相关文章推荐

    • css图片如何设置上边框距离• 用css3实现一个奥运五环• css中可以实现旋转效果的属性是什么• 使用css3中的什么规则来定义动画• css3支持为网页添加多个背景图片吗

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网