CSS 中@import 和 link 的区别

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

使用@import

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

连结的使用

<link rel="stylesheet" href="Path To stylesheet.css">
55685 次浏览
小开

当我使用@import 规则时，通常是在现有的样式表中导入一个样式表(尽管我一开始就不喜欢这么做)。但是回答你的问题，不，我不认为这有什么不同。只要确保将 URL 放在双引号中，以符合有效的 XHTML。

小开

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

同样，除非您支持非常老的浏览器，否则没有区别。

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

小开

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

小开
最佳答案

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

Steve Souders 写了一篇名为“ 不要使用@import”的博文，比较了 <link>和 @import(以及它们的各种组合)的影响。这个标题已经说明了一切。

雅虎还将其作为他们的性能最佳实践之一(与 Steve Souders 合著) : 选择 <link>而不是@import

此外，使用 <link>标记可以定义 “首选”和替代样式表。

小开

@ import 通常意味着在外部样式表中使用，而不是像您的示例中那样使用内联。如果 真的希望对非常老的浏览器隐藏样式表，那么可以将其作为防止它们使用该样式表的黑客手段。

总的来说，<link>标记比@import 规则处理得更快(就 css 处理引擎而言,@import 规则显然有些慢)。

小开

< link > 指令允许异步加载和解释多个 css。

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

很多 css 最小化脚本(以及诸如 less 或 sass 之类的语言)会自动将链接脚本连接到主脚本中，因为它最终会导致更少的传输开销。

* (取决于浏览器)

小开

Internet Explorer 9(MSIE9)似乎不能正确处理@import。从我的 Apache 日志中观察这些条目(IP 地址隐藏，但是 whois说它是微软自己拥有的) : 链接到 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”的逻辑。

小开

一个 html 另一个 CSS 代码 如果您还没有使用 html 标记，那么您需要使用@import


提交答案