css中link和@import区别

wumei2009-08-27 10:12:29

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可以控制得。

上一篇:CSS优先级规则级别与读法
下一篇:网站标准的title、keywords、description写法

  • >> more看看其他人的看法
  • Spot on with this write-up, I absolutely feel
    this amazing site needs far more attention. I'll probably be back again to read
    through more, thanks for the info!

  • 1 kar ... 2017-5-17 08:15 Wednesday
  • }

有什么想说的吗?