引入CSS文件可以使用两种方式：
（1）.@import。
（2）.标签。
自然两者是有区别的，有简单的表象区别，也有更深层次的区别。
两种引入CSS文件方式的主要区别如下：
（1）.@import是CSS中的语法，而是HTML标签。
（2）.通过JavaScript可以动态创建或者删除标签，进而操作CSS。
（3）.无法使用JavaScript动态设置@import引入CSS文件。
（4）.异步加载CSS文件，而@import则需要文档结构加载完毕，且所在CSS文件加载完毕再去加载。
一.加载时机介绍：
前几个区别非常简单，无需多介绍，下面着重介绍一下两种方式引入CSS文件的加载时机。
标签引入CSS文件是异步方式的，也就是说它不会阻塞其他文件的加载，那么效率自然会很高。
test.css文件与StyleSheet.css文件都是通过标签加载。
test.css文件开头通过@import引入style.css文件，分析如下：
（1）.首先会下载test.css文件，此时并不会下载style.css文件。
（2）.test.css文件下载完毕之后，开始进行解析，发现style.css文件的url。
（3）.当DOM加载完毕之后，开始加载style.css文件。
（4）.@import引入文件会发起一个新的http(s)请求，耗费时间。
（5）.所以，通过@import加载CSS文件并不是最佳选择，延迟了页面渲染的时间。
二.谁优先级高：
大家知道如果选择器的优先级相同，那么后面的样式会覆盖掉前面的样式。
看如下简单代码实例：
div{color:red}
div{color:blue}很明显，div中的字体颜色会显示为蓝色，后面的覆盖掉前面。
下面假定如下几个情况：
（1）.test.css文件代码如下：@charset "utf-8";
@import url("style.css");
div{color:red}然后通过<link>标签加载test.css文件。
（2）.style.css文件代码如下：div{color:blue}
那么现在问题来了，div的字体颜色显示红色还是蓝色，两种意见，理由分别如下：
（1）.style.css文件在test.css文件的顶端引入，红色在后。
（2）.test.css文件首先加载完毕，最后再加载style.css文件，蓝色在后。
上面两种分析看起来都很有道理，CSS代码执行的结果是字体呈现红色，但是给出的第一条理由并不是那么全面，更为合理的解释是，浏览器只会在css全部加载完毕后，才会应用到DOM树，最后浏览器将其渲染出来（此原则是很有道理的，如果加载一部分渲染一部分，那么很可能出现一开始文本呈呈现一种，过一会又呈现另一种颜色，体验极差），此时优先级关系以文件中代码的实际顺序为准，于是最终字体颜色会呈现为红色。1.《@import与<link> 的区别》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《@import与<link> 的区别》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/227.html