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

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

创建第三个样式表“import.css”，仅包含：

@import "modern.css";

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

<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 规则，因此需要将其放置在自己的样式表中以实现这些目的。