通常情况下，css文件放在<head></head>内，如果我把它放在<body></body>内，会有什么区别？
答案 0 :(得分：108)
只是添加jdelStrother关于w3规范和ARTstudio关于浏览器渲染的内容。
建议使用，因为当您在<body>开始之前声明了CSS时，您的样式实际上已经加载了。因此，用户很快就会看到屏幕上出现的内容（例如背景颜色）。如果没有，用户在CSS到达用户之前会看到空白屏幕一段时间。
此外，如果您将样式保留在<body>中的某个位置，则在解析声明的样式时，浏览器必须重新呈现页面（加载时新旧）。
答案 1 :(得分：37)
最新版本的HTML规范现在允许在body元素中使用<style>标记。 https://www.w3.org/TR/html5/dom.html#flow-content
此外，scoped属性在style中具有body标记的先决条件现已过时。
这意味着，您可以随时随地使用style标记，唯一的影响是，一旦浏览器在页面树中进一步缩小样式，可能会重排/重新绘制页面性能。
过时的答案：
根据w3规范，<style>内不允许使用<body>标记。 （当然，如果需要，您可以通过<div style="color:red">应用内联样式，但通常认为风格和内容的分离很差）
答案 2 :(得分：12)
将CSS放在body中意味着稍后加载它。这是一种使浏览器开始更快地绘制界面的技术（即，它删除了阻塞步骤）。这对于SmartPhone的用户体验非常重要。
我尽力在<head>上保留一个小css，然后将其余部分移到底部。例如，如果页面使用JQuery UI CSS，我总是将其移动到<body>的底部，就在链接到JQuery javascript之前。至少，可以绘制所有非Jquery项目。
答案 3 :(得分：7)
Head专为（引用W3C）而设计：
“有关当前的信息 文档，例如标题，关键字 这可能对搜索引擎有用， 以及未考虑的其他数据 文件内容“
请参阅Global structure of an HTML document。由于CSS不是文档内容，因此它应该在头脑中。
此外，每个其他Web开发人员都希望在那里看到它，所以不要把它放在体内，即使它有效，也不要混淆！
你应该放入身体的唯一CSS是inline CSS，但我通常会避免使用内联样式。
答案 4 :(得分：4)
标准（HTML 4.01: the style element）明确指出样式标记仅允许在head标记内。如果你将样式标签放在body标签中，浏览器会尽可能地尝试使用它。如果可能的话。
如果您指定严格的文档类型，浏览器可能会忽略正文中的样式标记。我不知道当前是否有任何浏览器这样做，但我不会指望所有未来的版本都放在你放置样式元素的地方。
答案 5 :(得分：4)
虽然正文中不允许style标记，但link标记是，所以只要您引用外部样式表，所有浏览器都应该呈现，在body中使用时正确使用CSS。
来源：https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
答案 6 :(得分：1)
除了早期的答案之外，虽然在元素中放置一个样式代码块可能在现代浏览器中工作（虽然这仍然不能正确），但总是存在危险，特别是对于较旧的浏览器，浏览器将代码呈现为文本，除非样式部分包含在CDATA部分中。
当然，除了内联样式之外，将其置于元素中的另一个原因是，因为它不符合W3C HTML / XHTML规范，所以在W3C验证器中任何包含它的页面都会失败。如果您的所有代码都有效，则可以更容易地捕获意外的显示问题，从而更容易发现错误。无效的HTML元素可能会对代码中出现的任何元素的所有元素的rending产生负面影响，因此您可以在不应该存在的元素中获得具有元素的意外效果，因为当浏览器找到无效元素时，它只是最好猜测它应该如何显示它，不同的浏览器可能会在渲染方式上做出不同的决定。
无论您使用过渡型还是严格型doctype，根据（X）HTML规范，它仍然无效。
答案 7 :(得分：0)
通过将样式放在正文中，你实际上会破坏使用CSS的目的。重点是将内容与表示（和功能）分开。这样，对样式的任何更改都可以在样式表中完成，而不是在内容中完成。使用内联样式方法后，每个具有内联样式的页面都需要逐个更改。单调乏味，风险很大，因为你错过了一三页或十页。
使用样式表，您只需要更改样式表;更改会自动传播到链接到样式表的每个HTML页面。
霓虹灯的观点也是另一个重要原因;如果你通过添加CSS内联来搞乱HTML，渲染就成了问题。 HTML不会为您的代码抛出异常。相反，它会熄灭并以最佳方式呈现，并继续前进。使用样式表来遵守Web标准可以创建更好的网站。当你需要帮助时，因为页面上的内容并不是你想要的那样，将CSS放在头部而不是身体上可以让你自己和你寻求帮助的任何人进行更好的故障排除。
答案 8 :(得分：0)
两个矛盾的答案：
来自MDN page上的链接标签：
<link>元素可以出现在<head>或<body>中 元素，具体取决于它是否具有可以正常显示的链接类型。对于 例如，样式表链接类型为body-ok，因此 体内允许<link rel="stylesheet">。但这不是 最佳实践;分隔<link>元素更有意义 从您的身体满足感中，将它们放在脑海中。
摘自CSS《权威指南》（2017年第4版）第10页
要成功加载外部样式表，必须将链接放置在head元素内部，但不得放置在任何其他元素中。
答案 9 :(得分：-1)
不同之处在于。 页面的加载是异步的，所以如果你有外部样式表，它将在到达链接标记时立即加载css文件，这就是为什么最好在顶部开头。
答案 10 :(得分：-1)
它会有什么不同？
优点：有时在某些地方更容易应用某些属性，特别是如果代码是动态生成的（例如通过php构建，每个动态大小的列表都需要自己的类...例如项目时间为变换）。
缺点：稍微慢一点，在遥远的将来某天可能无法工作。
我对此的一般意见： 不要这样做，你不必这样做，但如果你不这样做，就不要失去任何睡眠。
答案 11 :(得分：-3)
将<style>置于正文中适用于所有现代浏览器。
我一直在eBay上使用它。
如果有效，请不要踢它。