@import和CSS之间的区别

我正在学习一些CSS来调整我的项目模板。我遇到这个问题，并没有在网上find明确的答案。在CSS中使用@import或链接有什么区别？

使用@import

<style type="text/css">@import url(Path To stylesheet.css)</style>

使用链接

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

什么是最好的办法呢？为什么？谢谢！

编辑：这里有一些想法

理论上，它们之间的唯一区别是@import是包含样式表和<link> HTML机制的CSS机制。不过，浏览器对它们的处理方式不同，给予<link>在性能方面的明显优势。

Steve Souders写了一篇博文，比较了<link>和@import （以及它们的各种组合）称为“ 不使用@import ”的影响。这个标题非常有说服力。

雅虎也提到这是他们的performance最佳实践之一（由Steve Souders合着）：通过@importselect<link>

另外，使用<link>标签可以定义“首选”和备用样式表。你不能用@import来做到这一点。

今天没有真正的区别，但@import不能被旧的浏览器（Netscape 4等）正确处理，所以@import hack可以用来隐藏这些旧浏览器的CSS 2规则。

再次，除非你支持真正的旧浏览器，没有什么区别。

不过，如果我是你的话，我会在你的HTML页面上使用<link>变体，因为它允许你指定媒体types（打印，屏幕等）。

您可以使用import命令将另一个CSS导入到css文件中，这对于link命令来说是不可能的。真的是旧的浏览器不能（IE4，IE5部分）处理导入function。此外，一些parsing你的xhtml / html的库可能无法获取样式表导入。请注意，您的导入应该在所有其他CSS声明之前。

@import指令强制浏览器*等待，直到导入的脚本被内联加载到父脚本，然后才能被引擎正确处理，因为从技术上讲，它只是一个脚本。

很多css最小化脚本（以及像less或sass这样的语言）会自动将链接的脚本连接到主脚本，因为它最终会导致较less的传输开销。

*（取决于浏览器）

这篇文章可能在这里有用：向CSS添加CSS的4种方法：链接，embedded，内嵌和导入

当我使用@import规则时，一般是在现有样式表中导入样式表（尽pipe我不喜欢这样做）。但是要回答你的问题，不，我不相信有任何区别。只要确保将URL放在双引号中以符合有效的XHTML。

@import通常意味着在外部样式表中使用，而不是像你的例子那样内联。如果你真的想隐藏一个很老的浏览器的样式表，你可以用它来防止他们使用该样式表。

总的来说， <link>标签的处理速度比@import规则要快（就css处理引擎而言，这显然有点慢）。