1)link是XHTML标签,@import是CSS提供的
2)link是XHTML标签,因此没有兼容性问题,@import只有IE5以上的浏览器才能识别,因为@import是CSS2里面的
3)HTML文件被加载的时候,link引用的文件会同时被加载,@import引用的文件则是在页面加载完成之后才被加载,所以会出现一开始没有CSS样式,闪烁一下出现样式后的页面(网速慢的情况下)
4)@import只有导入样式表的作用,link不仅能加载CSS文件,还能定义RSS、rel连接属性等
5)link支持使用javascript操作DOM(document.styleSheets)改变样式,而@import不支持
6)link方式样式的权重高于@import,(这一部分,我看了一下他人的博客参考的博客的地址,或许可以理解为link方式的样式会覆盖掉@import方式的样式,因为浏览器的加载过程可以简单分为:加载、解析和渲染三个步骤,虽然@import方式的加载顺序在link方式之后,但是@import方式引入的样式会在加载完毕后置于样式表顶部,最终渲染时自然会被下面的同名样式层叠。)
拓展复习
CSS的3种引入方式:
方式一:
内联样式,也叫行内样式,是直接在HTML标签中的style属性中添加CSS
<div style="display: none;background:red"></div>
内联样式只能改变当前标签的样式。内联方式引入CSS代码会导致HTML代码变得冗长且网页难以维护。
方式二:
嵌入样式,在HTML的 head 标签中,运用 style 标签,在style标签中写CSS代码。
<head>
<style>
.box1{
background-color: red;
}
</style>
</head>
嵌入样式只对当前的网页有效。当多个页面需要用到相同的CSS代码时,会导致代码冗余,并且不便于维护。
方式三:
外部引入样式,两种方式,link标签和@import方式
注意:
1)@import方式导入语句应写在样式表的开头,否则无法正确导入外部文件,并且语句结束要有分号。
2)建议使用link标签,慎用@import方式。这样可以避免考虑@import的语法规则和注意事项,避免产生资源文件下载顺序混乱和http请求过多的问题。
<link rel="stylesheet" href="./index1.css">
<style>
@import url("./index2.css");
.box1{
background-color: red;
}
</style>