导入样式表与链入样式表

Posted 2020-09-14

　　1、导入样式表@import

      使用方法：<style type="text/css">@import "css文件"</style>

      2、链入样式表link

      使用方法：<link rel="stylesheet" type="text/css" href="css文件" />

      两者的区别：

      link元素属于html级别的，而@import是属于css级别的。在页面运行的时候，浏览器获得HTML代码先进行HTML标签的分析，HTML代码在遇到link标签是回去加载link标签所链接的资源文件；而执行到包含@import语句的style元素时，浏览器只会认为它是一个HTML元素，并不会去顾及这个元素的内容。而在执行HTML文档的时候，浏览器会直接执行link元素链入的样式表内容；到执行style元素时，才发现需要导入外部css样式表文件，这时浏览器才会异步请求css样式表文件，并同时向下执行HTML文档的其他代码。因此，在使用@import是，在网络速度较慢的情况下加载页面样式比较延迟所以刚开始进入页面时样式非常混乱难看，需要 一定时间才会恢复原来的样子。