html head for css tags之间的有效差异？：@import url vs. link href

Question

之间是否存在有效差异？

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

和

<link href="/css/layout.css" type="text/css" static="all" rel="stylesheet">

浏览器的行为有何不同？

w3c等推荐什么？

Answer 1

您应该使用<link>代替@import有几个原因，其中2个是：

1. 使用@import可能会导致意外排序。
2. @import可能会导致blank white screen problem。

有关网站效果的更多信息，请参阅High Performance Web Sites。

Answer 2

我心中也有同样的问题。当我通过Jennifer Kyrnin的博客时，我有一个清晰的想法，

要了解更多信息，请查看here

Answer 3

从两个样式表开始：simple.css（仅适用于早期浏览器的简单规则）modern.css（高级CSS2，用于覆盖simple.css中规则的规则）

创建仅包含：

的第三个样式表“import.css”

@import "modern.css";

链接文档HEAD中的simple.css和import.css：

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

所有CSS1浏览器都将加载simple.css和import.css，但是，只有现代浏览器才能理解@import规则并加载modern.css。由于modern.css是在simple.css之后链接的，因此它的规则将更容易覆盖simple.css中的规则。 替代语法

不同版本的导入规则对旧版浏览器提供不同级别的支持。

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

我们不应该将@import放在simple.css ....

的底部

根据CSS规范，@ import规则必须在样式表中的任何其他CSS规则之前，因此这需要将它放在自己的样式表中以实现这些目的。