【发布时间】：2010-12-11 03:54:49
【问题描述】：
一般css文件放在<head></head>里面，如果我把它放在<body></body>里面，会有什么不同呢？
【问题讨论】：
【发布时间】：2010-12-11 03:54:49
【问题描述】：
只是补充一下 jdelStrother 提到的关于 w3 规范和 ARTstudio 关于浏览器渲染的内容。
推荐是因为当你在<body> 开始之前声明了CSS，你的样式实际上已经加载了。用户很快就会在他们的屏幕上看到一些东西（例如背景颜色）。如果没有，用户会在 CSS 到达用户之前看到一段时间的空白屏幕。
此外，如果您将样式保留在 <body> 中的某处，则在解析声明的样式时，浏览器必须重新呈现页面（加载时新旧页面）。
【讨论】：
-
是的，在 HTML5 中当然没问题。但在渲染方面，可能会慢一些，因为浏览器会像我提到的那样重新渲染页面。
-
是的，毫无疑问。我只是在此处添加它，以便刚刚阅读已接受答案的人不会错过它。 :)
-
@Vilx 这是错误的信息！
link和style不得出现在正文中，除非它们是作用域（样式）或声明了属性itemprop（链接）。 -
@Christoph 这不是真的，
style是 html5 和 html4.1 中的 flow element（即使它没有作用域）并且可以放在正文中。 -
@Kpym 你迟到了 3 年；-) 但你是对的，风格现在是一个流程元素，
scoped属性已经过时了。
HTML 规范的最新版本现在允许在正文元素中使用 <style> 标记。 https://www.w3.org/TR/html5/dom.html#flow-content
此外，以前在 body 中具有 style 标记的前提条件 scoped 属性现在已过时。
这意味着，您可以在任何地方使用style 标签，唯一的影响是一旦浏览器在页面树中进一步点击样式，可能会出现重排/重绘，从而降低页面性能。
过时的答案：
根据 w3 规范，<body> 中不允许使用 <style> 标签。 （当然，如有必要，您可以通过<div style="color:red"> 应用内联样式，但通常认为样式和内容分离不佳）
【讨论】：
-
这不是真的，
<style>是 html 5 和 4.1 中的 flow element，可以放在正文中（与所有其他流元素一样）。 -
我的 +1 让您的答案保持最新！
将 CSS 放在 body 中意味着稍后加载。这是一种让浏览器更快地开始绘制界面的技术（即，它消除了阻塞步骤）。这对于智能手机的用户体验很重要。
我尽我所能在<head> 上保留一个小css，并将其余的移到底部。例如，如果一个页面使用 JQuery UI CSS，我总是将它移动到 <body> 的底部，就在指向 JQuery javascript 的链接之前。至少，所有非 Jquery 的项都已经可以绘制出来了。
【讨论】：
Head 是为（引用 W3C）设计的：
"关于当前的信息 文档，例如其标题、关键字 这可能对搜索引擎有用， 以及其他未考虑的数据 文档内容"
请参阅Global structure of an HTML document。由于 CSS 不是文档内容，它应该在头部。
所有其他 Web 开发人员都希望在那里看到它，所以不要把它放在 body 中，即使它有效！
您应该在正文中添加的唯一 CSS 是 inline CSS，尽管我通常避免使用内联样式。
【讨论】：
-
我完全听从你的意思。但是，您将如何处理有很多页面的情况，其中一些页面包含来自单独文件的内容（在我的例子中，是一个 .NET Razor 部分页面），并且每当包含该文件时，还应该链接特定的样式表？每个 includ_ing_ 页面的标题中的链接，或 includ_ed_ 页面的正文中的链接。前者符合“css in header”，后者符合“write it once”。
标准（HTML 4.01: the style element）明确规定 style 标签只允许在 head 标签内。如果您将样式标签放在正文标签中，浏览器无论如何都会尽量利用它。
如果您指定严格的文档类型，浏览器可能会忽略正文中的样式标记。我不知道当前的浏览器是否会这样做，但我不会指望所有未来的版本都对放置样式元素的位置如此放松。
【讨论】：
-
@Pacerier：在 HTML5 中，如果
style标签具有scoped属性，则它们可以在正文中使用。 -
天哪，每个人都给出了相互矛盾的答案：stackoverflow.com/questions/4957446/…
-
@Pacerier：那是因为该评论中的信息不完整。您可以在 body 标记中包含样式标记，但 仅 如果它们具有作用域属性。这是指定样式标签的标准文档：dev.w3.org/html5/spec-preview/the-style-element.html
-
根据 W3 范围属性只有 firefox 支持，那有什么意义呢？
虽然style 标签不允许在正文中，但link 标签是，所以只要您引用外部样式表，所有浏览器都应该正确呈现和使用 CSS在body中使用时。
来源：https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
【讨论】：
两个相互矛盾的答案：
来自链接标签上的 MDN page：
<link>元素可以出现在<head>或<body>中 元素，取决于它是否具有body-ok的链接类型。为了 例如，样式表链接类型是 body-ok，因此<link rel="stylesheet">在正文中是允许的。然而这不是 最佳实践;将<link>元素分开更有意义 从你的身体内容，把它们放在你的脑海里。
来自 CSS 权威指南（第 4 版/2017）第 10 页
要成功加载外部样式表，链接必须放在 head 元素中，但不能放在任何其他元素中。
【讨论】：
除了较早的答案之外，虽然在元素中放置样式代码块可能在现代浏览器中有效（尽管这仍然不能使其正确），但始终存在危险，尤其是对于较旧的浏览器除非样式部分包含在 CDATA 部分中，否则浏览器会将代码呈现为文本。
当然，除了内联样式之外，将它放在元素中的另一件事是，由于它不符合 W3C HTML/XHTML 规范，因此在正文中包含它的任何页面都会在 W3C 验证器上失败.如果所有代码都有效，则更容易发现意外的显示问题，从而更容易发现错误。无效的 HTML 元素可能会对代码中出现的任何和所有元素的渲染产生不利影响，因此您可能会在不应该出现的地方获得元素的意外效果，因为当浏览器发现无效元素时，它只是最好猜测它应该如何显示它，并且不同的浏览器可能会在如何呈现它时做出不同的决定。
无论您使用过渡文档类型还是严格文档类型，根据 (X)HTML 规范，它仍然是无效的。
【讨论】：
通过将样式放在正文中，您实际上会破坏使用 CSS 的目的。关键是将内容与表示（和功能）分开。这样，对样式的任何更改都可以在样式表中完成，而不是在内容中。使用内联样式方法后，每个具有内联样式的页面都需要一一更改。乏味且冒险，因为您可能会错过一页或三页或十页。
使用样式表，你只需要改变样式表；更改会自动传播到链接到样式表的每个 HTML 页面。
neonble 的观点也是另一个重要原因；如果您通过添加内联 CSS 来弄乱 HTML，那么渲染就会成为问题。 HTML 不会向您的代码抛出异常。相反，它会出去并以最好的方式渲染它，然后继续前进。
通过使用样式表来遵守 Web 标准可以打造更好的网站。当您因为页面上的内容与您想要的不完全一致而需要帮助时，将 CSS 放在头部而不是正文中可以让您自己和任何寻求帮助的人更好地进行故障排除。
【讨论】：
-
我不明白你在说什么。 “一旦你使用了内联样式方法” - 谁在这里谈论使用内联样式？问题是 css 文件。
不同的是。 页面的加载是异步的，所以如果你有外部样式表，它会在到达链接标签时立即加载 css 文件，这就是为什么最好在 head 的顶部。
【讨论】：
会有什么不同？
优点：有时在某些地方更容易应用某些属性，尤其是在动态生成代码的情况下（例如通过 php 构建并且每个动态大小的列表都需要自己的类...例如变换）。
缺点：稍慢，在遥远的将来可能无法使用。
我对此的总体看法： 不必这样做，但如果必须这样做，请不要为此失眠。
【讨论】：
将<style> 放在正文中适用于所有现代浏览器。
我一直在 eBay 使用这个。
如果有效，请不要踢它。
【讨论】：