使用link或@import引入css文件的区别

最近在研究taobao的网站,发现其中页面引入css的方式多为使用@import的方式:

 

	<style type="text/css" media="screen">
		@import url("http://taoke.alimama.com/css/newmyalimama/instance/overlay.css?t=11240510");
		@import url("http://taoke.alimama.com/css/newmyalimama/instance/module/myalimama.css?t=11240510");
		@import url("http://taoke.alimama.com/css/newmyalimama/instance/module/myalimama/sale.css?t=11240510");
		@import url("http://taoke.alimama.com/css/newmyalimama/instance/ie_hacks.css?t=11240510");
		@import url("http://taoke.alimama.com/css/newmyalimama/instance/safari3_hacks.css?t=11240510");
		@import url("http://taoke.alimama.com/css/newmyalimama/instance/cps/cps.css?t=11240510");
		@import url("http://taoke.alimama.com/css/newmyalimama/instance/cps/fcps.css?t=11240510");
		@import url("http://taoke.alimama.com/css/newmyalimama/instance/cps/cps_list.css?t=11240510");
		@import url("http://taoke.alimama.com/css/std_notice.css?t=11240510");
		@import url("http://taoke.alimama.com/css/newmyalimama/instance/buttons.css?t=11240510");
		
	</style>

 在google上搜到了不少答案,备忘如下:

 

------------------------------------------下面内容为google来的---------------------------------------

淘宝网页中大部分是这样写的

<style type="text/css" media="screen">

@import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");

</style>

    而很多网站使用的都是link

<link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" />

    而像google 百度 163等网站他们都是直接写在网页中

    当然使用链接link和导入import的好处就是易于维护，但当网速比较慢的时候，会出现加载中断的情况，导致页面排版错误

    他俩的作用相同

    唯一的不同是服务对象不一样

    @import 为CSS服务

    link是为当前的页服务

    经典有网友说 @import会优先执行。

    外部引用CSS中 link与@import的区别

    这两天刚写完XHTML加载CSS的几种方式，其中外部引用CSS分为两种方式link和@import。

    本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

    差别1 ：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

    差别2： 加 载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。

    差别3： 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

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

    大致就这几种差别了（如果还有什么差别，大家告诉我，我再补充上去），其它的都一样，从上面的分析来看，还是使用link标签比较好。

 

原文链接: http://www.aono82.com/v11/news/31/20081229133408.htm

---------

The @import Hack

Early browsers are notorious for malfunctioning when presented with CSS rules they can't handle (Netscape Navigator 4 will crash at the sight of certain rules). The import hack allows you to hide entire stylesheets from version 4 and older browsers by linking them with a method they don't understand: the @import rule. [CSS2:@import]

The @import rule links to an external stylesheet from within a stylesheet (external or in a STYLE element), however, early browsers do not understand the syntax and simply ignore the statement (and the stylesheet it references).

For a table of all variations on the @import hack, take a look at: http://imfo.ru/csstest/css_hacks/import.php

Typical @import Setup

Begin with two stylesheets:

simple.css (only simple rules for early browsers)

modern.css (advanced CSS2, rules to override rules in simple.css)

Create a third stylesheet "import.css" containing only:

@import "modern.css";

Link the simple.css and import.css in the HEAD of the document:

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

(The simple stylesheet /must/ be linked first.)

The Effect

All CSS1 browsers will load simple.css and import.css, however, only modern browsers will understand the @import rule and also load modern.css. Since modern.css is linked after simple.css, its rules will override those in simple.css more easily.

Alternate Syntax

Different versions of the import rule have varying levels of support from older browsers.

@import "style.css";      /* hidden from nearly all v4 browsers  */
@import url('style.css'); /* IE4 can understand, but not NN4 */
...

[Browser support for different syntaxes]

Example CSS files

/* simple.css */
body {
  background:white;
  color:#666666;
}

/* modern.css */
body {
  font-size:87%;
  line-height:1.4em;
  text-align:justify;
}

media="all" (Simpler Hiding From Nav4)

If you only have ONE stylesheet you need to hide from Nav4 (only one SS can be hidden this way), you can link to the stylesheet with a media rule:

<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="hiddenFromNav4.css" media="all" />

media not "all" (Hiding CSS from IE)

If you have a stylesheet that needs to be hidden from IE (all versions) give it a mediatype different from "all", i.e. "screen".

<style type="text/css">@import "modern.css" screen;</style>

Why use the import.css file?

Using link elements allows us to more easily adapt to a system with alternate stylesheets. (See StyleSwitching ). If alternate stylesheets are not a concern, the file import.css is not needed. The @import rule can be placed in a STYLE element as such:

<link rel="stylesheet" type="text/css" href="simple.css" />
<style type="text/css"> @import "modern.css"; </style>

Why not put @import at the bottom of simple.css?

According to the CSS specs, @import rules must precede any other CSS rules in a stylesheet, so this creates the need to place it in its own stylesheet for these purposes.

 

原文链接: http://css-discuss.incutio.com/?page=ImportHack

------------------------

 

 

Question: What's the Difference Between @import and link for CSS?

External style sheets are an important part of every Web designer's bag of tricks, but there are two ways to include them in your pages: @import and <link>. How do you decide which method is better? This FAQ discusses the differences between the two methods, why you might use one over another, and how to decide.

Answer:

The Difference Between @import and <link>

Before deciding which method to use to include your style sheets, you should understand what the two methods were intended to be used for.

<link> - Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet. It is added to the <head> of your HTML document like this:

<link href="styles.css" type="text/css" />

@import - Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. But if you include an @import in the head of your HTML document, it is written:

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

From a standards viewpoint, there is no difference between linking to an external style sheet or importing it. Either way is correct, and either way will work equally well (in most cases). But there are a few reasons you might want to use one over the other.

Why Use @import?

The most common reason given for using @import instead (or along with) <link> is because older browsers didn't recognize @import, so you could hide styles from them. Specifically:

• hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72)

  @import url(../style.css);

• hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72), Konqueror 2, and Amaya 5.1

  @import url("../style.css");

• hides the style sheet from Netscape 4, IE 6 and below

  @import url(../style.css) screen;

• hides the style sheet from Netscape 4, IE 4 and below, Konqueror 2

  @import "../styles.css";

Another use for the @import method is to use multiple style sheets on a page, but only one link in your <head>. For example, a corporation might have a global style sheet for every page on the site, with sub-sections having additional styles that only apply to that sub-section. By linking to the sub-section style sheet and importing the global styles at the top of that style sheet, you don't have to maintain a gigantic style sheet with all the styles for the site and every sub-section. The only requirement is that any @import rules need to come before the rest of your style rules. And remember that inheritance can still be a problem.

Why Use <link>?

The number one reason for using linked style sheets is to provide alternate style sheets for your customers. Browsers like Firefox, Safari, and Opera support the rel="alternate stylesheet" attribute and when there is one available will allow viewers to switch between them. You can also use a JavaScript switcher to switch between style sheets in IE. This is most often used with Zoom Layouts for accessibility purposes.

One of the drawbacks to using @import is that if you have a very simple <head> with just the @import rule in it, your pages may display a flash of unstyled content (FOUC ) as they are loading. This can be jarring to your viewers. A simple fix to this is to make sure you have at least one additional <link> or <script> element in your <head>.

What About the Media Type?

Many writers make the statement that you can use the media type to hide style sheets from older browsers. Often, they mention this as a benefit to using either @import or <link>, but the truth is you can set the media type with either method, and browsers that don't support media types won't view them in either case. For example, Netscape 4 doesn't recognize media types, so you can use the link tag to hide a style sheet from that browser just as easily as the @import rule:

<link href="styles-nons4.css" media="all" type="text/css" />

And some versions of IE (6 and below) don't support the media type on the @import rule, so you can use that to hide the style sheet from them:

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

So Which Method Should You Use?

Personally, I prefer to use <link> and then import style sheets into my external style sheets. That way I only have 1 or 2 lines of code to adjust in my HTML documents. But the bottom line is that it's up to you. If you're more comfortable with @import, then go for it! Both methods are standards compliant and unless you're planning on supporting really old browsers (like Netscape 4) there's no strong reason for using either.

 

原文链接: http://webdesign.about.com/od/beginningcss/f/css_import_link.htm