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标签了，但是感觉也有必要多学习一点类似于这样的基础知识。