blocks|key|1420374|text|最新版本的HTML规范现在允许在主体元素中使用<style>标记。https://www.w3.org/TR/html5/dom.html#flow-content还有scoped属性，它曾经是在body中有一个style标签的先决条件，现在已经过时了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1420375|这意味着，你可以在你想要的任何地方使用style标签，唯一的影响是当浏览器点击页面树中更低的样式时，由于可能的重排/重绘而降低了页面性能。|1420376|过时的答案：|1420377|根据<body>规范，在w3中不允许使用<style>标记。(当然，如有必要，您可以通过<div+style="color:red">应用内联样式，但通常认为样式和内容分离不佳)|1420378|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/html5/dom.html#flow-content^0|N|7|2C|6|2Q|4|2Y|5|X|1D|0|0|J|5|0|0|2|6|K|7|18|N|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]]]

The most recent versions of the HTML spec now permits the <code>&lt;style&gt;</code> tag within body elements. <a href="https://www.w3.org/TR/html5/dom.html#flow-content" rel="noreferrer">https://www.w3.org/TR/html5/dom.html#flow-content</a>
Also the <code>scoped</code> attribute which used to be prerequisite to have a <code>style</code> tag in the <code>body</code> is now obsolete.

This means, that you can use the <code>style</code> tag 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.

Obsolete answer:

The <code>&lt;style&gt;</code> tag isn't allowed within <code>&lt;body&gt;</code> according to the w3 specs. (You can, of course, apply inline styles via <code>&lt;div style="color:red"&gt;</code> if necessary, but it's generally considered poor separation of style &amp; content)

blocks|key|1420420|text|只是补充一下jdelStrother提到的关于w3规范和ARTstudio关于浏览器渲染的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1420421|建议您这样做，因为当您在<body>启动之前声明了CSS时，您的样式实际上已经加载。所以用户很快就会看到屏幕上出现了一些东西(例如背景颜色)。如果没有，在CSS到达用户之前，用户会看到一段时间的空白屏幕。|offset|length|style|CODE|1420422|此外，如果您将样式保留在<body>中的某个位置，则在解析声明的样式后，浏览器必须重新呈现页面(加载时为新的和旧的)。|1420423|entityMap^0|0|C|6|0|C|6|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

Just to add on to what jdelStrother has mentioned about w3 specs and ARTstudio about browser rendering.
It is recommended because when you have the CSS declared before <code>&lt;body&gt;</code> 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.
Also, if you leave the styles somewhere in the <code>&lt;body&gt;</code>, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.

blocks|key|1205502|text|标准(HTML+4.01:+the+style+element)明确规定样式标记只允许在head标记中使用。如果您将样式标记放在body标记中，浏览器将尽可能地充分利用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1205503|如果您指定了严格的文档类型，则浏览器可能会忽略正文中的样式标记。我不知道目前是否有浏览器可以做到这一点，但我不会指望所有未来的版本都能如此轻松地将style元素放在哪里。|1205504|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/html401/present/styles.html#h-14.2.3^0|3|S|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

The standards (<a href="http://www.w3.org/TR/html401/present/styles.html#h-14.2.3" rel="nofollow noreferrer">HTML 4.01: the style element</a>) 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.

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.

blocks|key|1420539|text|如果将样式放在正文中，实际上会违背使用CSS的目的。重点是将内容与表示(和功能)分开。这样，对样式的任何更改都可以在样式表中完成，而不是在内容中。一旦使用内联样式方法，每个具有内联样式的页面都需要逐个更改。单调乏味，而且有风险，因为你可能会漏掉一页、三页或十页。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1420540|使用样式表，您只需要更改样式表；更改会自动传播到链接到样式表的每个HTML页面。|1420541|neonble的观点也是另一个很好的原因；如果你通过添加内联CSS弄乱了HTML，渲染就会成为一个问题。HTML不会向代码抛出异常。相反，它会走出去，以最好的方式呈现它，然后继续前进。|1420542|通过使用样式表来遵守web标准可以创建更好的网站。当你需要帮助时，因为页面上的东西并不是你想要的那样，把你的CSS放在头部而不是身体上会让你自己和你向任何人寻求帮助的人都能更好地进行故障排除。|1420543|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

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. 

Using a stylesheet, you only need to change the stylesheet; the changes propagate automagically to every HTML page that links to the stylesheet.

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.

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.

blocks|key|1420645|text|将CSS放在body中意味着稍后会加载它。这是一些人用来让浏览器更快地开始绘制界面的技术(即，它消除了阻塞步骤)。这对于SmartPhones上的用户体验非常重要。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1420646|我尽我最大的努力在<head>上保留一个小的css，并将其余的移到底部。例如，如果一个页面使用JQuery+UI+CSS，我总是把它移到<body>的底部，就在指向JQuery+javascript的链接之前。至少，所有非Jquery项都已经可以绘制了。|offset|length|style|CODE|1420647|entityMap^0|0|9|6|1W|6|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

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.

I do my best to keep one small css on the <code>&lt;head&gt;</code> 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 <code>&lt;body&gt;</code>, just before the links to JQuery javascript. At least, all the non Jquery item can already be drawn.

blocks|key|1420761|text|不同的是。页面的加载是异步的，所以如果你有外部样式表，当css文件到达链接标签时，它会立即加载，这就是为什么在head的顶部是好的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1420762|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The difference is.
The loading of the page is asynchronous, so if you have external stylesheet it will load the css file immediately when it reach the link tag, that is why it is good to have at the top in head.

blocks|key|1420813|text|将<style>放在正文中可以在所有现代浏览器中很好地工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1420814|我一直在eBay中使用这个。|1420815|如果它起作用了，不要踢它。|1420816|entityMap^0|1|7|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|K|$]]

Putting the <code>&lt;style&gt;</code> in the body works well with all modern browsers.

I had been using this in eBay.

If it works, don't kick it.

blocks|key|1205848|text|这会有什么不同？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1205849|优点:有时在某些地方更容易应用某些属性，特别是在动态生成代码的情况下(例如通过php构建，每个动态调整大小的列表都需要自己的类……诸如用于变换的项目定时)。|1205850|缺点:稍微慢一点，在遥远的将来可能不会工作。|1205851|我对它的总体看法是:不要这样做，你不必这样做，但如果你真的必须这样做，也不要为此失眠。|1205852|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

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).

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.

Normally css files are put inside <code>&lt;head&gt;&lt;/head&gt;</code>, what if I put it inside <code>&lt;body&gt;&lt;/body&gt;</code>, what difference will it make?

What's the difference if I put css file inside <head> or <body>?

通常css文件放在<head></head>中，如果我把它放在<body></body>中，会有什么不同呢？

问如果我把css文件放在<head>或者<body>里面有什么区别？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果我把css文件放在<head>或者<body>里面有什么区别？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果我把css文件放在<head>或者<body>里面有什么区别？
EN