2015-11-26 08:00:16
导入样式表和外部样式表都是把样式表中的<style></style>标签对中的样式规则定义语句，放置在一个单独的外部文件中，扩展名为.css, 然后将独立的css样式文件引用到网页中来。但又有以下几个方面的不同：
1、具体的应用方法不同：
导入样式表：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <!--定义导入样式表--> <style type="text/css"> @import linked.css </style> <title>imported</title> </head> <body> <p>这个段落应用了导入样式表 </body> </html>
外部样式表：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <!--定义外部样式表--> <link rel="StyleSheet" href=linked.css type="text/css"> <title>linked</title> </head> <body> <p>这个段落应用了外部样式表 </body> </html>
link：用于当前文档引用外部文档的
rel：说明链接进来的对象是什么；rel="StyleSheet"：表示在网页中使用外部样式表；
href：指定文件地址； href=linked.css：这里链接的样式表文件是linked.css
type：定义文档的类型 ; type=“text/css”：表示文本类型的样式.
其中linked.css:
p{ style="color:black; font-family:System; font-size:30px" }
2、
使用link链接的css，客户端浏览网页时，先将外部的css文件加载到网页中（下载到html里面），是一种并行加载方式，然后再编译显示，显示出来的网页和我们预期的效果一样，即使一个网页链接多个css，网速再慢也是一样的效果。
使用@import导入的css，是将css代码写在样式表里面，客户端浏览时先将html的结构显示出来，再把外部的css文件加载到网页中，即@import是在整个html页面加载完成后才加载css，最终显示出来的网页也和预期的效果一样，不过，当网速较慢时，会先显示没有外部css统一布局的html文件。
此外，@import可以避免过多的页面指向一个css文件，当网站的页面数达到一定程度，如果采用链接的方式就可能会使得由于多个页面调用同一个css而造成速度下降，但能达到这种程度的网站一般也有资本用更好的硬盘来弥补不足。
3、link标签属于xhtml范畴，除了加载css外，还可以做其他事情，如定义RSS,定义rel链接属性，
@import是css2.1特有的，import只能加载css了，而且对于不兼容css2.1的浏览器（如IE5之前的版本）来说是无效的。
4、当用javascript控制dom去改变样式时，只能用link标签，@import无能为力。
综上所述，一般网站在调用外部样式表时，还是使用link标签。