link和@import的区别？

css

link和@import的作用相同
唯一的不同是服务对象不一样
@import 为CSS服务；link是为当前的页面服务。

外部引用CSS中 link与@import的区别：

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

差别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。

link标签：
不仅仅可以加载CSS，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，

@import:
只能加载CSS。

差别2：加载的时候顺序不同。

link标签:

当一个页面被加载的时候,引用的CSS会同时被加载.

@import:

引用的CSS 会等到页面全部被下载完再被加载。

所以有时候浏览@import加载CSS的页面时开始会没有样式，网速慢的时候比较明显。

差别3：兼容性的差别。

由于@import是CSS2.1提出的,所以老的浏览器不支持，@import只有在IE5以上的才能识别，低版本的浏览器不支持。link是XHTML标签，无兼容问题。

差别4：

使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。link支持使用Javascript控制DOM去改变样式；而@import不支持。

差别5：

link标签只能位于head中。
比如：

<link rel="stylesheet" type="text/css" href="sheet.css">

rel = “stylesheet”表示的是当前文档与引用的文档之间的关系。
type=“text/css”表示引用的文档是文本类型的css文件。
href=“URL”指明引用文件的URL。
注意：上述这三个缺一不可，比如如果缺少rel页面link到多个css文件的话，可能会忽略该文件。

@import：

@import url(sheet.css);
.content{
  /* 
  ………………
   */
}

@import是css的一个属性，代表着引入css文件到当下css文件中，且只能引入css文件。@import只能位于文件的顶部，这降低了灵活性。