link和@import的区别

 2018/06/06   Share

页面中使用 Css 的方式主要有三种，行内添加定义 style 属性值，页面头部内嵌调用和外面链接调用，其中外面饮用有两种，link 和 @import。

外部引用 Css 两种方式 link 和 @import 的方式分别是：

XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
XML/HTML代码
<style type="text/css" media="screen">   
@import url("CSS文件");   
</style>

两者都是外部引用 Css 的方式，但是存在一定的区别

区别 1

link 是 XHTML 标签，除了加载 Css 外，还可以定义 Rss 等其它业务

@import 属于 Css 范畴，只能加载 Css。

区别 2

link 引入 Css 时，在页面载入时同时加载，@import 需要网页完全载入以后加载

区别 3

link 是 XHTML标签，无兼容问题，@import 是在 Css2.1 提出的，低版本的浏览器不支持

区别 4

link 支持使用 javascript 控制 DOM 去改变样式，而 @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)最值得推荐。

CATALOG

1. 外部引用 Css 两种方式 link 和 @import 的方式分别是：
2. 两者都是外部引用 Css 的方式，但是存在一定的区别
3. 补充：

