Question

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

使用@import

<style>@import url(Path To stylesheet.css)</style>

使用链接

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

最好的方法是什么？为什么？谢谢！

Answer 1

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

史蒂夫·索德斯（Steve Souders）撰写了一篇广泛的博客文章，比较了<link>和@import（及其各种组合）对“don’t use @import”的影响。这个称号本身就说明了一切。

雅虎！也提到它是他们的表现最佳实践之一（由Steve Souders共同撰写）：Choose <link> over @import

此外，使用<link>标记可以定义"preferred" and alternate stylesheets。你不能用@import。

来做到这一点

Answer 2

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

Answer 3

今天没有真正的区别，但旧浏览器（Netscape 4等）无法正确处理@import，因此@import hack可用于隐藏这些旧浏览器中的CSS 2规则。< / p>

同样，除非你支持真正的旧浏览器，否则没有区别。

但是，如果我是你，我会在HTML页面上使用<link>变体，因为它允许您指定媒体类型（打印，屏幕等）。

Answer 4

＆lt; link＆gt;指令可以允许多个css被异步加载和解释。

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

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

*（取决于浏览器）

Answer 5

这篇文章可能在这里有用：4 methods of adding CSS to HTML: link, embed, inline and import

Answer 6

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

Answer 7

@import通常用于外部样式表，而不是像示例中的内联样式。如果确实想要从非常旧的浏览器中隐藏样式表，您可以将其用作黑客来阻止它们使用该样式表。

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

Answer 8

Microsoft Internet Explorer 9（MSIE9）似乎无法正确处理@import。从我的Apache日志中观察这些条目（IP地址已隐藏，但whois表示它归Microsoft自己所有）：链接到screen.css的主要HTML

@import url("print.css") print;
@import url("speech.css") aural;

我现在将要更改为HTML中的link元素，因为MSIE9似乎向服务器发出了两个不正确的请求，出现了我不能做的404错误：

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

之后对这些文件有个适当的请求，但是我们可以不用这种“先在服务器上射击，再解析url之后”的逻辑。

Answer 9

一个 html，另一个 css 代码如果您还没有使用过 saddle html 标签，那么您需要使用 @import

CSS中的@import和链接之间的区别

9 个答案: