HTML 5 Validator不喜欢Body中的CSS Embedded

Error Line 16, Column 23: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

错误第16行，第23列：在此上下文中，元素样式不允许作为元素主体的子元素。（抑制此子树中的更多错误。）

Because it sais "in this context" I'm hoping there is a way to embed CSS my HTML 5 using

因为它是“在这种情况下”，我希望有一种方法可以使用CSS来嵌入我的HTML 5

<style TYPE="text/css">
</style>

and a different "context" whatever that means.

这意味着什么是不同的“背景”。

I have all my code in neat HTML 5 / CSS modules...and I prefer not to split up my CSS from my HTML though I think most people do it this way.

我将所有代码都放在整洁的HTML 5 / CSS模块中......我不想将我的CSS从我的HTML中分离出来，尽管我认为大多数人都是这样做的。

Is there a way I can keep embedded CSS w/ my HTML 5 and not break validation.

有没有办法我可以保持嵌入式CSS与我的HTML 5，而不是破坏验证。

If not can I put the embedded CSS in the Head of the document?

如果没有，我可以将嵌入的CSS放在文档的头部吗？

Where can I put it?

我在哪里可以买到它？

5 个解决方案

#1

The style tag goes in the head tag unless the scoped attribute is present, e.g.:

除非存在范围属性，否则样式标记位于head标记中，例如：

<!DOCTYPE html>
<html>
<head>
<title>HTML5 CSS scope attribute</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style>
.myClass {
    color: red;
    background-color: blue;
}
</style>

</head>

<body>

<div>
<span class="myClass">This text is red, and the background is blue.</span>
</div>

<div>
<style scoped>
.myClass {
    background-color: yellow;
}
</style>
<span class="myClass">This text is red, and the background is yellow.</span>
</div>

</body>

However, the scoped attribute is not implemented in any browser yet:

但是，scoped属性尚未在任何浏览器中实现：

http://www.w3.org/TR/2012/WD-html5-20120329/the-style-element.html#the-style-element
http://www.w3.org/TR/2012/WD-html5-20120329/the-style-element.html#the-style-element

#2

The style tag is only allowed within the head section.

样式标记仅允许在头部区域内。

That or as inline styles right with the tags, which you should only do if you have good reason to do that.

那个或内联样式与标签一样，只有在你有充分的理由这样做时才应该这样做。

#3

The validator’s error message is in error, if you have the style element at the very start of the body element, as I suspect it is. As the explanation of the message implies, such a construct is allowed, provided that the scoped attribute is used.

验证者的错误消息是错误的，如果你在body元素的最开头有样式元素，我怀疑它是。正如消息的解释所暗示的那样，只要使用了scoped属性，就允许这样的构造。

Using the scoped attribute is pointless, since no browsers implements it yet, but if you use it, future browsers may interpret the element quite differently from current browsers. So the above is just the formal side of the matter.

使用scoped属性是没有意义的，因为没有浏览器实现它，但如果你使用它，未来的浏览器可能会解释该元素与当前浏览器完全不同。所以上面只是问题的正式方面。

A simple style element without attributes works in browsers even when placed in the body. The formal rules just forbid it, and HTML5 currently sticks to it, simply because its editor thinks that the use cases presented are not significant.

没有属性的简单样式元素即使放在正文中也可以在浏览器中使用。正式规则只是禁止它，HTML5目前坚持它，只是因为它的编辑认为所提供的用例并不重要。

However, it is better to put the style element inside the head element, where it is valid by all specs. (The need for putting it in body normally arises only when an author has no control over head but can inject code into body.)

但是，最好将样式元素放在head元素中，并且所有规格都有效。（只有当作者无法控制头部但是可以将代码注入体内时，才需要将它放入体内。）

The wording “in this context”, used by the validator in some situations, is admittedly confusing. I think it results from some change that I proposed long ago, to avoid even worse (misleading) formulations. The wording is meaningful e.g. if the markup is

在某些情况下，验证人使用的“在此上下文中”的措辞无疑是令人困惑的。我认为这是由于我很久以前提出的一些改变，以避免更糟糕（误导）的表述。措辞很有意义，例如如果标记是

<div>
foo
<style scoped></style>
</div>

which is wrong by HTML5 rules, since the style attribute, when used inside body, must appear at the start of its parent. The context is changed, and the markup is turned to HTML5-conformant, if “foo” is removed or moved after the style element.

这是HTML5规则的错误，因为在body中使用时，style属性必须出现在其父级的开头。如果在样式元素之后删除或移动“foo”，则更改上下文，并将标记转换为符合HTML5的标记。

#4

Unlike the <script> tag, <style> can be used only in <head> section. That's why you're getting the error. Put it between the <head></head> tags.

与

However, you still can use style in body and still have a valid code, but in a bit different way. You must put it in the style attribute of an element.

但是，你仍然可以在正文中使用样式，但仍然有一个有效的代码，但方式有点不同。您必须将它放在元素的style属性中。

Example:

例：

<span style="background-color: #000; color: #fff;">Some text here</span>

That's the only way if you want your code to be valid. You can't use <style></style> tags, only attributes.

如果您希望代码有效，这是唯一的方法。您不能使用

#5

style only runs in the head of the document, simple as that. Either run an external stylesheet or include it in your html file during dev. stages.

样式只运行在文档的头部，简单。在开发期间运行外部样式表或将其包含在html文件中。阶段。

#1