使用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 withCSS rules they can't handle (Netscape Navigator 4 will crash at thesight of certain rules). The import hack allows you to hide entirestylesheets from version 4 and older browsers by linking them with amethod they don't understand: the @import rule.
The @import rule links to an external stylesheet from withina stylesheet (external or in a STYLE element), however, early browsersdo not understand the syntax and simply ignore the statement (and thestylesheet 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, onlymodern browsers will understand the @import rule and also loadmodern.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 */...
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 oneSS can be hidden this way), you can link to the stylesheet with a mediarule:
<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 notneeded. 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 CSSrules in a stylesheet, so this creates the need to place it in its ownstylesheet for these purposes.
原文链接: http://css-discuss.incutio.com/?page=ImportHack
------------------------
Question: What's the Difference Between @import and link for CSS?
Externalstyle sheets are an important part of every Web designer's bag oftricks, but there are two ways to include them in your pages: @importand <link>. How do you decide which method is better? This FAQdiscusses the differences between the two methods, why you might useone 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 anexternal style sheet on your Web pages. It is intended to link togetheryour Web page with your style sheet. It is added to the <head> ofyour HTML document like this:
<link href="styles.css" type="text/css" />@import - Importing allows you to import one style sheet intoanother. This is slightly different than the link scenario, because youcan import style sheets inside a linked style sheet. But if you includean @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 linkingto an external style sheet or importing it. Either way is correct, andeither way will work equally well (in most cases). But there are a fewreasons you might want to use one over the other.
Why Use @import?
The most common reason given for using @import instead (or alongwith) <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 sheetson a page, but only one link in your <head>. For example, acorporation might have a global style sheet for every page on the site,with sub-sections having additional styles that only apply to thatsub-section. By linking to the sub-section style sheet and importingthe global styles at the top of that style sheet, you don't have tomaintain a gigantic style sheet with all the styles for the site andevery sub-section. The only requirement is that any @import rules needto 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 providealternate style sheets for your customers. Browsers like Firefox,Safari, and Opera support the rel="alternate stylesheet" attribute andwhen 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 verysimple <head> with just the @import rule in it, your pages maydisplay a flash of unstyled content (FOUC)as they are loading. This can be jarring to your viewers. A simple fixto 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 typeto hide style sheets from older browsers. Often, they mention this as abenefit to using either @import or <link>, but the truth is youcan set the media type with either method, and browsers that don'tsupport media types won't view them in either case. For example,Netscape 4 doesn't recognize media types, so you can use the link tagto hide a style sheet from that browser just as easily as the @importrule:
<link href="styles-nons4.css" media="all" type="text/css" />And some versions of IE (6 and below) don't support the media typeon the @import rule, so you can use that to hide the style sheet fromthem:
<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 stylesheets into my external style sheets. That way I only have 1 or 2 linesof code to adjust in my HTML documents. But the bottom line is thatit's up to you. If you're more comfortable with @import, then go forit! Both methods are standards compliant and unless you're planning onsupporting really old browsers (like Netscape 4) there's no strongreason for using either.
原文链接: http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
页:
[1]