link和@import到底有什么区别
一、总结
一句话总结：
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可以控制的。
1、css引入外部样式两种方式？
link和@import 都可以引入外部样式
<link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" > <style type="text/css" > @import url("./myCss.css"); </style>
2、css中@import引入外部样式小实例？
@import写在style标签中，并且后面接url()：<style type="text/css" > @import url("./myCss.css"); </style>
3、@import引入外部css的主要用法？
@import是css2.1语法，多是用于在css文件中引入外部的css文件使用的
二、link和@import到底有什么区别
参考或转自：前端深入之css篇|link和@import到底有什么区别？ - 知乎
https://zhuanlan.zhihu.com/p/88312373
在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。
而在我们学习之初的外部样式表都是用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最优写法
@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适用于自己写的且需要动态修改的样式。
经过实际的运用，相信在你真正书写和调整样式时一定可以如鱼得水。