把 css 文件放在 < head > 或 < body > 中有什么区别？

小开

最新版本的 HTML 规范现在允许 body 元素中包含 <style>标记。 < a href = “ https://www.w3.org/TR/html5/dom.HTML # flow-content”rel = “ norefrer”> https://www.w3.org/tr/html5/dom.HTML#flow-content 此外，scoped属性过去是在 body中拥有 style标记的先决条件，现在已经过时了。

这意味着，您可以在任何地方使用 style标记，唯一的影响是页面性能下降，因为一旦浏览器在页面树中进一步访问样式，可能会重新流/重新绘制页面。

过时的回答:

根据 w3规范，<body>中不允许使用 <style>标记。(当然，如果需要的话，可以通过 <div style="color:red">应用内联样式，但是通常认为它的样式和内容分离不好)

小开

磁头设计用于(引用 W3C) :

”关于当前文件，例如其标题、关键字可能对搜索引擎有用, 以及其他 不被考虑的数据文件内容 ”

看看 HTML 文档的全局结构。因为 CSS 不是文档内容，它应该在头部。

另外，每个其他 Web 开发人员都希望在那里看到它，所以不要把它放在正文中，以免混淆视听，即使它工作正常！

您应该在主体中放入的唯一 CSS 是嵌入式 CSS，尽管我通常避免内联样式。

小开

最佳答案

只是添加了 jdelStrother 提到的关于 w3规范和 ARTStudio 关于浏览器渲染的内容。

建议这样做，因为当您在 <body>启动之前声明 CSS 时，您的样式实际上已经加载了。所以用户很快就能看到屏幕上出现的东西(比如背景颜色)。如果没有，在 CSS 到达用户之前，用户会看到一段时间的空白屏幕。

另外，如果您将样式保留在 <body>中的某个位置，那么当声明的样式被解析时，浏览器必须重新呈现页面(加载时为新的和旧的)。

小开

标准(HTML 4.01: style 元素)明确规定样式标记只能在 head 标记内部使用。如果你把样式标签放在 body 标签中，如果可能的话，浏览器会尽力做到最好。

如果指定了严格的文档类型，浏览器可能会忽略主体中的样式标记。我不知道目前是否有任何浏览器这样做，但我不会指望所有未来的版本都会如此轻松地放置 style 元素。

小开

除了早期的答案，尽管在元素梅中加入样式代码块可以在现代浏览器中使用(尽管这仍然不能使其正确) ，但是总是存在一种危险，特别是在老式浏览器中，除非样式部分包含在 CDATA 部分中，否则浏览器将把代码呈现为文本。

当然，除了内联样式之外，把它放在元素中的另一个问题是，由于它不符合 W3C HTML/XHTML 规范，任何包含它的页面在 W3C 验证器上都会失败。如果所有代码都是有效的，那么总是更容易发现意外的显示问题，从而更容易发现错误。一个无效的 HTML 元素会对代码中任何元素的渲染产生负面影响，所以你可以在元素不该出现的地方得到意想不到的效果，因为当浏览器发现一个无效的元素时，它只是对如何显示它做出了最好的猜测，不同的浏览器可能会对如何渲染它做出不同的决定。

无论您使用过渡类型还是严格的 doctype，根据(X) HTML 规范，它仍然是无效的。

小开

通过将样式放在主体中，实际上会破坏使用 CSS 的目的。关键在于将内容与表示(和功能)分离开来。这样，对样式的任何更改都可以在样式表中完成，而不是在内容中。使用内联样式方法后，每个具有内联样式的页面都需要逐一更改。既乏味又危险，因为你可能会错过一页，三页或十页。

使用样式表，您只需更改样式表; 更改将自动传播到链接到样式表的每个 HTML 页面。

这也是另一个重要的原因; 如果通过内联添加 CSS 而搞乱了 HTML，那么呈现就会成为一个问题。HTML 不会对代码抛出异常。相反，它走出去，以最好的方式呈现它，并继续前进。

通过使用样式表来坚持 Web 标准可以创建更好的网站。当你需要帮助的时候，因为你的页面上的东西并不是你想要的那样，把你的 CSS 放在头部而不是主体部分会让你自己或者任何你需要帮助的人更好的解决问题。

小开

将 CSS 放在 body 中意味着以后会加载它。这是一种让浏览器更快地开始绘制界面的技术(也就是说，它删除了一个阻塞步骤)。这对于智能手机的用户体验非常重要。

我尽我最大的努力保持一个小的 css 在 <head>和我移动在底部的休息。例如，如果一个页面使用 JQueryUICSS，我总是将它移动到 <body>的底部，就在 JQueryjavascript 的链接之前。至少可以绘制所有非 Jquery 项。

小开

区别在于。页面的加载是异步的，所以如果您有外部样式表，它会在到达 link 标记时立即加载 css 文件，这就是为什么最好在头部的顶部。

小开

将 <style>放在主体中可以很好地适应所有现代浏览器。

我在易趣上用过这个。

如果成功了，别踢它。

小开

有什么区别吗？

优点: 有时候在某些地方应用某些属性更容易，特别是当代码是动态生成的时候(比如通过 php 构建，而且每个动态大小的列表都需要自己的类... ... 比如转换的项计时)。

缺点: 稍微慢一点，可能在遥远的将来某一天不起作用。

我的一般意见: 不要这样做，你不必这样做，但如果你必须这样做，不要因此而失眠。

小开

尽管主体中不允许使用 style标记，但是 link标记是允许的，所以只要引用外部样式表，所有浏览器应该都会呈现并在 body中使用 CSS 时正确使用。

资料来源: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element

小开

两个相互矛盾的答案:

来自链接标签上的 MDN 呼叫:

<link>元素可以出现在 <head>或 <body>中元素，具体取决于它是否具有 body-ok 的链接类型例如，样式表链接类型是 body-ok，因此 <link rel="stylesheet">在体内是允许的，但这是不允许的最佳实践; 分离 <link>元素更有意义从你的身体内容，把他们放在你的头上。

来自 CSS 权威指南(第四版/2017)第10页

要成功加载外部样式表，链接必须放置在 head 元素中，但不能放置在任何其他元素中。