css中link和@import区别

css在页面里面一般有三种引入方式

1.在页面里面直接写 

   <style type="text/css"> 
   body{ 
      margin: 0; 
     padding: 0; 
   } 
   </style> 

2.用link进行引用 

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

3.用import进行引用 

<style type="text/css"> 
   @import url(my.css); 
</style> 

第一种是直接在html页面上进行css书写，而第二种和第三种是采用外部引用样式单独提取文件。 

问题1.到底link和@import有什么区别？ 

我们先来看看他们的定义 

link元素

HTML和XHTML都有一个结构，它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息（CSS）、导航助手、属于另 外形式的信息（RSS）、联系信息等等。 

@import

指定导入的外部样式表及目标设备类型。 

 其实link和@import的区别是，link是一个html的一个标签，而@import是css的一个标签.

 link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等。

而@import就只能调用css。如果单独从外部引用css来说，他们的作用是基本一样，只不过上面的老大不一样而已。：） 

问题2.link和import到底那个更好？ 

上面说了因为上面的老大不一样，所以在使用上就会有一些细节的区别，不能说总体谁好谁坏， 

 只能说具体情况具体分析。 

 1）我要用javascript进行样式选择； 

 这个时候就要用link，因为link是html元素，可用javascript去控制dom元素最后达到改变样式的效果。 

 看下列代码 

<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" />  <link rel="stylesheet" href="/cssorange.css" type="text/css" media="screen" title="orange" />  <link rel="alternate stylesheet" href="/cssblue.css" type="text/css" media="screen" title="blue" />  <link rel="alternate stylesheet" href="/csspink.css" type="text/css" media="screen" title="pink" />  <link rel="alternate stylesheet" href="/cssslate.css" type="text/css" media="screen" title="slate" /> 

 这是一段很经典的改变页面风格的代码，因为我们今天主要讲的是link和import，所以我这里只列出了引用css部分。 

 我们先来看看link里面个个属性都是表达了什么意思： 

1. rel:用来声明链接对象的作用或者类型。 
   譬如上面的的代码："stylesheet"表示链接一个默认的css,而"alternate stylesheet"折表示备选的css 
2. href:这个就不用我说了吧，引用css的文件路径。 
3. tyle:文件类型 
4. media:应用的设备，"screen"是说明应用在屏幕上。 
5. title:是css的名称。 

这段代码中一共有5个css,第一个是基本样式，而其他四个是风格样式,利用javascript去控制默认显示的样式title就ok了。 

2）我要在应用打印样式； 

打印样式顾名思义就是打印页面时候的样式。 

这个样式在普通浏览下是没有效果的，只有在打印的时候生效。 

如果要为页面单独引用打印样式的话，link和@import都可以的。 

link代码 

<link rel="stylesheet" href="/css/styles.css" type="text/css" media="print" /> 

@import代码 

<style type="text/css"> 
        @import url(foo.css) print; 
</style> 

另外对于css来说还有一种方式@media： 

@media print {  
       @import "print.css"  
}  

 用@media先制定设备为 print,然后再用@import链接 

 3）我要引用多个样式； 

 如果要在一个页面上引用多个样式组合产生效果的话，用link和@import也是都可以的。 

link代码 

<link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" />

@import代码

 <style type="text/css"> 
    @import url(../css/base/my.layout.css); 
    @import url(../css/base/my.typo.css); 
</style> 

 另外对于多样式还有一种link于@import的组合用法。 

 先用link引用一个css文件 

 <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" /> 

 然后在这个css文件里面再引用。 

    @import url(../css/base/my.layout.css); 
    @import url(../css/base/my.typo.css); 

这样做的好处是，如果你一个站点所有页面引用的样式都是一样的， 而有又多个css，如果你每个页面都加4,5个一样的css样式，却是浪费代码和精力， 所以莫不如这样做，所有一个页面都引用一个css，然后一个css在引用多个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标签无此问题。

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