link和Import区别

本篇文章重点：

link引用CSS时，在页面载入时同时加载；

import需要页面完全载入后加载；

link支持使用javascript控制DOM去改变样式，而Import不支持

 

下面待我娓娓道来：

一般呢，页面使用CSS的方式主要有3种：行内添加定义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

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容性问题；@import是在CSS提出的，低版本的浏览器不支持。

区别4：当使用javascript控制dom区改变样式的时候，只能用Link标签，因为@import不是dom可以控制的。

区别5：@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他样式表，如：main.css

———————- 
@import “sub1.css”; 
@import “sub2.css”; 
sub1.css 
———————- 
p {color:red;} 
sub2.css 
———————- 
.myclass {color:blue}

这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不用外部文件。