前端深入之css篇link和import到底有什么区别

jiezi

5 年前

在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。

而在我们学习之初的外部样式表都是用 link 引入的，但是当后来我们学习的逐渐深入，发现 @import 也可以引入样式。那么同样是引入外部样式，这两者有什么区别呢，下面请跟随我来详细了解一下 link 和@import的区别吧！

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" > 
        <style type="text/css" >   
            @import url("./myCss.css");   
        </style> 
    </head>
</html>

这就是两种引用方式的常见用法，可以很清晰的看出

1、从属关系：link 是 html 的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而 @import 是 css 的语法，只有导入样式表的作用。
2、加载顺序：页面被加载时，link 会和 html 同时被加载而；@import 引入的 CSS 将在页面加载完毕后被加载。
3、兼容性：@import 是 CSS2.1 才有的语法，所以只能在 IE5 以上才能识别；而 link 是 HTML 标签，所以不存在兼容性问题。
4、DOM：javascript 只能控制 dom 去改变 link 标签引入的样式，而 @import 的样式不是 dom 可以控制的。
5、link 方式的样式权重高于 @import 的权重。（如果对权重不是十分了解，可以看我之前的文章）

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4 不识别
@import url(style.css) //Windows NS4, Macintosh NS4 不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 不识别
@import url("style.css") //Windows NS4, Macintosh NS4 不识别

由上分析知道，@import url(style.css) 和 @import url(“style.css”)是最优的选择，兼容的浏览器最多。从字节优化的角度来看 @import url(style.css)最值得推荐。

@import是依赖 css 的，存在一定的兼容问题，并且根据浏览器渲染机制来说，他在 dom 树渲染完成后才会渲染，并且不能被 js 动态修改。

相比之下 link 兼容性较好，且 dom 元素的样式可以被 js 动态修改，又因为 link 的权重高于@import，所以 @import 适用于引入公共基础样式或第三方样式，link 适用于自己写的且需要动态修改的样式。

经过实际的运用，相信在你真正书写和调整样式时一定可以如鱼得水。

以上就是本文章的全部内容了，如果有不正确的地方欢迎指正。

感谢您的阅读，如果感觉有用不妨点赞 / 转发。

前端深入系列是一个踩坑系列，是由我本人对工作和学习中所遇到的问题和踩过的坑的一个探索与总结，在此记录分享出去，同时也是对自我技能的一个反思和追问。

前端路漫，踩坑不断。

前端深入系列持续更新中……

以上 2019-10-08。

前端深入之css篇link和import到底有什么区别

写在前面

区别

@import 最优写法

结论

结语