HTML 5 Validator 不喜欢嵌入在正文中的 CSS答案

【问题标题】：HTML 5 Validator does not like CSS Embedded in BodyHTML 5 Validator 不喜欢嵌入在正文中的 CSS
【发布时间】：2012-07-19 20:20:17
【问题描述】：

错误第 16 行，第 23 列：元素样式不允许作为在这种情况下的元素主体。（抑制由此产生的进一步错误子树。）

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

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

以及不同的“上下文”，无论这意味着什么。

我的所有代码都在整洁的 HTML 5 / CSS 模块中......虽然我认为大多数人都这样做，但我不喜欢将我的 CSS 与我的 HTML 分开。

有没有办法让我的 HTML 5 保留嵌入的 CSS 而不会破坏验证。

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

我可以把它放在哪里？

【问题讨论】：

出于好奇，为什么不使用外部样式表？
不知道你最后一句话想说什么。为什么不能放在文档头部呢？
为什么在开发阶段关心文档的有效性？如果你这么担心，你不妨把它放在它所属的头部，然后上下滚动你的文档或克隆编辑器窗口。
更重要的是，我想了解为什么在 CSS 工作方式相同的情况下，为什么会对 CSS 施加此限制。
原因主要是 BoltClock 所说的，部分原因是没有人找到在正文中包含文档范围的 CSS 的用例。另一方面，对于页面中的标记块，仅使用 CSS 已被确定为有用的东西。为此，<style scoped> 正在被发明，但它目前正在进行中，还没有实现。 <style scoped> 将被允许在正文中。

标签： html css

【解决方案1】：

除非存在scoped 属性，否则style 标记将进入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>

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

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

【讨论】：

2 年后，除了 Firefox，没有一个浏览器实现了 scoped 属性。似乎其他浏览器不会实现此功能。 caniuse.com/style-scoped

【解决方案2】：

样式标签只允许在 head 部分中。

这或作为内联样式与标签一起使用，只有在你有充分理由这样做时才应该这样做。

【讨论】：

【解决方案3】：

如果 style 元素位于 body 元素的开头，验证器的错误消息是错误的，我怀疑是这样。正如对消息的解释所暗示的那样，只要使用了scoped 属性，这样的构造是允许的。

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

一个没有属性的简单style 元素即使放在body 中也可以在浏览器中工作。正式的规则只是禁止它，而 HTML5 目前坚持它，只是因为它的编辑器认为呈现的用例并不重要。

但是，最好将style 元素放在head 元素中，它在所有规范中都有效。（通常只有在作者无法控制head 但可以将代码注入body 时，才会需要将其放入body。）

验证者在某些情况下使用的措辞“在这种情况下”确实令人困惑。我认为这是我很久以前提出的一些改变的结果，以避免更糟糕的（误导性的）表述。措辞是有意义的，例如如果标记是

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

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

【讨论】：

【解决方案4】：

与<script> 标签不同，<style> 只能用于<head> 部分。这就是您收到错误的原因。把它放在<head></head> 标签之间。

但是，您仍然可以在 body 中使用样式并且仍然有有效代码，但方式有所不同。您必须将它放在元素的style 属性中。

例子：

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

如果您希望代码有效，这是唯一的方法。你不能使用<style></style>标签，只能使用属性。

【讨论】：

【解决方案5】：

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

【讨论】：