css调用外部样式表link与@import的区别介绍

css 引用外部样式表有两种方法：

link引入外部样式表

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /> 

@import引入外部样式表

<style type="text/css" media="screen">     
@import url("CSS文件");   /* http://www.manongjc.com/article/1382.html */  
</style> 

二者区别：

使用link方式，浏览器会先装载完CSS文件再装载HTML的主体部分，所以显示出来的页面从开始就是带样式效果的。 
而采用@import方式，浏览器则会先装载完整个HTML文件后再装载CSS文件。 
为什么会这样呢，究其根本： 
link属于XHTML标签（功能不局限于导入CSS），而@import则是CSS提供的一种规则（CSS2.1以后，要考虑兼容）。 
从用户体验上来说，前者会更友好一些，特别是当网页文件比较大而网速比较慢的时候，后者页面就会出现明显的闪烁（开始会没有样式效果，当CSS加载完成后，忽然呈现出样式效果）。 
另外，当使用Javascript控制DOM去改变样式的时候，只能使用link方式，因为@import眼里只有CSS，不是DOM可以控制的。 

总结

• 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
• 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• 区别4：ink支持使用JavaScript控制DOM去改变样式；而@import不支持。