引入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中的字体颜色会显示为蓝色,后面的覆盖掉前面。
当test.css文件代码为:
@charset "utf-8";
@import url("style.css");
div{color:red}
然后通过<link>标签加载test.css文件
style.css文件代码:
div{
color:blue
}
那么:
(1) .style.css文件在test.css文件的顶端引入,红色在后。
(2) .text.css文件首先加载完毕,最后再加载style.css文件,蓝色在后。
但是给出的第一条理由并不是那么全面,更为合理的解释是,浏览器只会在css全部加载完毕后,才会应用到DOM树,最后浏览器将其渲染出来(此原则是很有道理的,如果加载一部分渲染一部分,那么很可能出现一开始文本呈呈现一种,过一会又呈现另一种颜色,体验极差),此时优先级关系以文件中代码的实际顺序为准,于是最终字体颜色会呈现为红色。