Html 如果我把 css 文件放在 <head> 或 <body> 里面有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1642212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the difference if I put css file inside <head> or <body>?
提问by Shawn
Normally css files are put inside <head></head>, what if I put it inside <body></body>, what difference will it make?
通常css文件放在里面<head></head>，如果我把它放在里面<body></body>，会有什么不同？
采纳答案by mauris
Just to add on to what jdelStrother has mentioned about w3 specs and ARTstudio about browser rendering.
只是为了补充 jdelStrother 提到的关于 w3 规范和 ARTstudio 关于浏览器渲染的内容。
It is recommended because when you have the CSS declared before <body>starts, your styles has actually loaded already. So very quickly users see something appear on their screen (e.g. background colors). If not, users see blank screen for some time before the CSS reaches the user.
推荐这样做是因为当您在<body>开始之前声明 CSS时，您的样式实际上已经加载了。所以用户很快就会看到他们的屏幕上出现了一些东西（例如背景颜色）。如果没有，用户在 CSS 到达用户之前会看到一段时间的空白屏幕。
Also, if you leave the the styles somewhere in the <body>, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.
此外，如果您将样式留在 中的某处，<body>则在解析声明的样式时，浏览器必须重新呈现页面（加载时新的和旧的）。
回答by Jonathan del Strother
The most recent versions of the HTML spec now permits the <style>tag within body elements. https://www.w3.org/TR/html5/dom.html#flow-contentAlso the scopedattribute which used to be prerequisite to have a styletag in the bodyis now obsolete.
最新版本的 HTML 规范现在允许<style>在 body 元素中使用标签。 https://www.w3.org/TR/html5/dom.html#flow-content此外scoped，曾经是在 中拥有style标签的先决条件的属性body现在已过时。
This means, that you can use the styletag everywhere you want, the only implications are decreased page performance due to possible reflows/repaints once the browser hits styles further down in the page tree.
这意味着，您可以在style任何地方使用该标签，唯一的影响是一旦浏览器点击页面树中更下方的样式，由于可能的回流/重绘而导致页面性能下降。
Obsolete answer:
过时的答案：
The <style>tag isn't allowed within <body>according to the w3 specs. (You can, of course, apply inline styles via <div style="color:red">if necessary, but it's generally considered poor separation of style & content)
根据 w3 规范，<style>不允许使用该标签<body>。（当然，<div style="color:red">如果需要，您可以通过应用内联样式，但通常认为样式和内容分离不佳）
回答by Jér?me Verstrynge
Putting CSS in body means it is loaded later. It is a technique some use to let the browser start drawing the interface faster (i.e., it removes a blocking step). This is important for user experience on SmartPhones.
将 CSS 放入 body 意味着它稍后加载。这是一种让浏览器开始更快地绘制界面的技术（即，它消除了阻塞步骤）。这对于智能手机的用户体验很重要。
I do my best to keep one small css on the <head>and I move the rest at the bottom. For example, if a page uses JQuery UI CSS, I always move it at the bottom of the <body>, just before the links to JQuery javascript. At least, all the non Jquery item can already be drawn.
我尽我最大的努力在上面保留一个小 css，<head>然后将其余的移动到底部。例如，如果一个页面使用 JQuery UI CSS，我总是将它移动到 底部<body>，就在 JQuery javascript 的链接之前。至少，所有非 Jquery 项都已经可以绘制了。
回答by RichardOD
Head is designed for (Quoting the W3C):
Head 设计用于（引用 W3C）：
"information about the current document, such as its title, keywords that may be useful to search engines, and other data that is not considered document content"
“有关当前文档的信息，例如其标题、可能对搜索引擎有用的关键字以及其他不被视为文档内容的数据”
See the Global structure of an HTML document. As CSS is not document content, it should be in the head.
请参阅HTML 文档的全局结构。由于 CSS 不是文档内容，它应该在头部。
Also every other Web developer will expect to see it there, so don't confuse things by putting it in the body, even if it works!
此外，每个其他 Web 开发人员都希望在那里看到它，所以即使它可以工作，也不要将它放在正文中而混淆！
The only CSS you should put in the body is inline CSS, though I usually avoid inline styles.
您应该放入正文的唯一 CSS 是内联 CSS，尽管我通常避免使用内联样式。
回答by Guffa
The standards (HTML 4.01: the style element) clearly specifies that the style tag is only allowed inside the head tag. If you put style tags in the body tag the browsers will try to make the best of it anyway, if possible.
标准 ( HTML 4.01: the style element) 明确规定 style 标签只允许在 head 标签内。如果您将样式标签放在 body 标签中，浏览器无论如何都会尽可能地充分利用它。
It's possible that a browser would ignore a style tag in the body if you specify a strict document type. I don't know if any current browser does this, but I wouldn't count on all future versions to be so relaxed about where you place the style element.
如果您指定严格的文档类型，浏览器可能会忽略正文中的样式标记。我不知道当前的浏览器是否会这样做，但我不会指望所有未来的版本都对放置样式元素的位置如此放松。
回答by MacroMan
Although the styletag is not allowed in the body, the linktag is, so as long as you are referencing an external stylesheet, all browsers shouldrender and use the CSS correctly when used in the body.
虽然style标签没有在身体允许的话，link标签，所以只要你引用外部样式表，所有的浏览器应该呈现，并在使用时正确地使用CSS body。
Source: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
来源：https: //html.spec.whatwg.org/multipage/semantics.html#the-link-element
回答by BlissC
In addition to earlier answers, though putting a style code block inside the element maywork in modern browsers (though that still doesn't make it right), there's always a danger, particularly with older browsers that the browser will render the code as text unless the style section's included within a CDATA section.
除了早期的答案之外，虽然在元素中放置样式代码块可能在现代浏览器中有效（尽管这仍然不正确），但始终存在危险，尤其是对于旧浏览器，浏览器会将代码呈现为文本除非样式部分包含在 CDATA 部分中。
Of course the other thing with putting it inside the element, other than inline styles, is that as it doesn't meet with the W3C HTML/XHTML specs is that any page with it within the body will fail on the W3C validator. It's always easier to bug-hunt unexpected display problems if all your code is valid, making it easier to spot mistakes. An invalid HTML element can adversely effect the rending of any and all element beyond where it occurs in the code, so you can get unexpected effects having elements in places where they shouldn't be, because when a browser finds an invalid element, it just makes it's best guess as to how it should display it, and different browsers may make different decisions in how they render it.
当然，除了内联样式之外，将它放在元素中的另一件事是，由于它不符合 W3C HTML/XHTML 规范，任何在正文中包含它的页面都将在 W3C 验证器上失败。如果您的所有代码都有效，则更容易发现意外的显示问题，从而更容易发现错误。无效的 HTML 元素会对代码中出现的任何和所有元素的渲染产生不利影响，因此您可能会在不应该出现的位置出现元素的意外效果，因为当浏览器发现无效元素时，它只是最好猜测它应该如何显示它，不同的浏览器可能会对它们如何呈现它做出不同的决定。
Whether you use a transitional or a strict doctype, it would still be invalid according to the (X)HTML specs.
无论您使用过渡文档类型还是严格文档类型，根据 (X)HTML 规范，它仍然是无效的。
回答by tahdhaze09
You would actually defeat the purpose of using CSS by putting the styles in the body. The point would be to separate content from presentation (and function). This way, any changes to style can be done in the stylesheet, not in the content. Once you use the inline style method, every page that has inline styling needs to changed one by one. Tedious, and risky since you could miss a page or three, or ten.
通过将样式放在主体中，您实际上会破坏使用 CSS 的目的。重点是将内容与演示（和功能）分开。这样，对样式的任何更改都可以在样式表中完成，而不是在内容中。一旦使用了内联样式方法，每个具有内联样式的页面都需要一一更改。乏味且冒险，因为您可能会错过一三页或十页。
Using a stylesheet, you only need to change the stylesheet; the changes propagate automagically to every HTML page that links to the stylesheet.
使用样式表，你只需要改变样式表；更改会自动传播到链接到样式表的每个 HTML 页面。
neonble's point is also another great reason; if you mess up the HTML by adding CSS inline, rendering becomes a problem. HTML doesn't throw exceptions to your code. Instead it goes out and renders it the best way it can, and moves on.
neonble 的观点也是另一个重要原因；如果您通过添加 CSS 内联来弄乱 HTML，渲染就会成为一个问题。HTML 不会向您的代码抛出异常。相反，它出去并以最好的方式呈现它，然后继续前进。
Adhering to web standards by using a stylesheet makes for a better website. And when you need help because things on your page aren't exactly that way you want them, placing your CSS in the head as opposed to the body makes for much better troubleshooting by yourself and for anyone you ask for help from.
通过使用样式表遵守 Web 标准可以打造更好的网站。当您因为页面上的内容并不完全符合您的要求而需要帮助时，将 CSS 放在头部而不是正文中可以让您自己和向您寻求帮助的任何人更好地进行故障排除。
回答by Undistraction
Two conflicting answers:
两个相互矛盾的答案：
From MDN pageon link tag:
从链接标签上的MDN页面：
A
<link>element can occur either in the<head>or<body>element, depending on whether it has a link type that is body-ok. For example, the stylesheet link type is body-ok, and therefore a<link rel="stylesheet">is permitted in the body. This isn't however best practice; it makes more sense to separate your<link>elements from your body content, putting them in your head.
甲
<link>元件可以在任一发生<head>或<body>元件，这取决于它是否有链路类型，它是身体-OK。例如，样式表链接类型是 body-ok，因此<link rel="stylesheet">在正文中允许a 。然而，这不是最佳实践；将您的<link>元素与您的身体内容分开，将它们放在您的脑海中更有意义。
From CSS The Definitive Guide (4th Edition/2017) page 10
来自 CSS The Definitive Guide（第 4 版/2017）第 10 页
To successfully load an external stylesheet, link must be placed inside the head element but may not be placed in any other element.
要成功加载外部样式表，链接必须放在 head 元素内，但不能放在任何其他元素中。
回答by liljoshu
What difference will it make?
它会有什么不同？
Pros: Sometimes easier to apply certain attributes in certain places, especially if code is being generated on the fly (such as building via php and each of a dynamically sized list needs its own class... such as for item timings for transforms).
优点：有时在某些地方更容易应用某些属性，尤其是在动态生成代码的情况下（例如通过 php 构建并且每个动态大小的列表都需要自己的类......例如用于转换的项目时间）。
Cons: Slightly slower, may not work someday in the distant future.
缺点：速度稍慢，在遥远的未来某天可能无法使用。
My General opinion on it: Don't do it it you don't have to, but if you do have to, don't lose any sleep over it.
我对此的总体看法是：不必这样做，但如果必须这样做，请不要为此失眠。
