@import和link的区别

区别

• 加载顺序
  • link引入的css在加载页面时同时加载，而@import中的css要在页面加载完毕后加载
• 从属关系
  • link是HTML提供的标签
  • @import是css的语法规则，只能加载在style标签内和css文件中
• 兼容性
  • @import是css2.1时提出的，只能用于IE5+，而link不受兼容影响
• DOM可控性
  • link支持js控制DOM改变样式，而@import不支持

@import 的用法

• @import必须写在样式顶部，即import规则一定要先于除了@charset的其他任何CSS规则 ———MDN
• 引入位置
  1. 在html中 <style>@import url(引入的css路径);/*这个必须要写在style的第一行*/</style>
  2. 在css中 @import url(引入的css路径); @import "引入的css路径"; /*这个@import必须要写在CSS的第一行*/

不推荐使用@import

• 影响浏览器的并行下载
• 多个@import的使用会使浏览器下载顺序紊乱

看了半天才发现不推荐用，还有很多类似的东西，学了用不到，但还是要学会，因为面试会问到 -_-