CSS当中link与@import指令的区别

在平时的前端开发工做中，咱们使用HTML页面引入CSS的方式主要有三种：一种是使用行内样式，直接给标签添加style属性值；一种是使用内部样式，在页面中写style标签；还有一种则是使用外部样式，从外部引入CSS文件。

那么使用外部样式又分为两种CSS引入方式：link标签和@import指令。

因为工做中一直使用link标签引入外部CSS文件，也没有专门了解过@import指令的使用方式及其与link标签的区别。因而抽空专门看了看网上的一些技术文章，也顺便翻了翻《CSS权威指南》，对这方面的知识进行了一个学习。

首先，link和@import的做用是相同的，都是用来引入外部CSS代码，只是两者服务的对象不一样：link标签为当前的页面服务，而@import只为CSS服务。

其次，它们也有一些本质上的差异：

• 区别1：link属于HTML标签，除了引入CSS文件之外还能够作不少其余的事情，好比定义RSS、shortcut icon等；而@import只能用于加载CSS。

• 区别2：link引用CSS时，在页面加载时同步加载；而@import在页面加载完后才开始对对应CSS进行加载。

• 区别3：link是HTML标签，全部浏览器都支持；@import是CSS 2.1才提出来的使用方式，一些老的浏览器不支持。

• 区别4：link标签可使用JavaScript控制DOM去改变样式；而@import不支持。

以上就是参照网上一些文章整理出来的link与@import的区别。虽然平时工做当中基本都用link标签了，可是感受也有必要多学习一点相似于这样的基础知识。