<STYLE> 是否必须位于 HTML 文档的 <HEAD> 中？

https://stackoverflow.com/questions/1303416

19-09-2019
|

题

严格来说，做 style 标签必须位于 head HTML 文档的？4.01 标准暗示了这一点，但没有明确说明：

STYLE 元素允许作者将样式表规则放在文档。HTML 允许任何数字 HEAD 部分中的 STYLE 元素的文档。

我说“严格来说”是因为我有一个应用程序将样式元素放入正文中，并且我测试过的所有浏览器似乎都使用样式元素。我只是想知道这是否真的合法。

解决方案

style应该被包括仅在文档的head。

除了验证点，一个警告在style使用body时您可能感兴趣的是的无样式内容的闪光。浏览器将得到将被样式元素后它们被显示，这使它们在尺寸/形状/字体和/或闪烁移位。它通常是坏工艺的标志。一般来说，你可以侥幸把style任何你想要的，但要尽量避免它时，它是可能的。

HTML 5引入，允许在体内被包括到处scoped代码的style属性，但他们再次除去它。

其他提示

而其他的答案是正确的，我很惊讶，没有人解释的其中的标准不允许head之外的风格。

它实际上是在上head元素<节/ A>（和在 DTD ）：

<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->

^{是的，我知道。的DTD是难以阅读。}

这是其中STYLE元素出现的唯一场所，所以隐含它是无效的其它地方。

根据最新的 WhatWG 和 W3C 规范，是的， style 元素必须永远在 head. 。有一段时间，规格包括 scoped 属性为 style 元素，当存在时，允许将它们放置在主体中的元素中，以仅设置该元素的后代的样式......但该功能从未出现在任何真正的浏览器中（至少不需要通过开发人员标志启用），并且已从两个规范中删除 “由于缺乏实施者的兴趣”. 。最后， style 现在，仅允许在允许元数据内容（仅是头部）的上下文中使用元素。

（好吧，这不是相当 true - 您可以合法地放置元数据内容，包括 style 元素，在 a 内 template 里面的元素 body, ，但如果您使用的是支持模板的浏览器，它实际上不会生效。这实际上只是一个愚蠢的技术问题。）

这什么WG规格有这样说：

4.2.6.这 style 元素

类别:

元数据内容.

可以使用该元素的上下文:

在哪里元数据内容是期待。
在一个 <noscript> 元素是 a 的子元素 <head> 元素。

CTRL-Fing 浏览单页规范表明其内容模型包含元数据内容的唯一元素是 head 元素。

与此同时，最新的 W3C 规范草案包含完全相同的措辞，除了它们还在内容模型中列出元数据内容 template 元素。（WG 的概念是什么 templates 有所不同，并将其内容模型列出为 nothing.)

不规范的元素索引 WhatWG 规范中确认，唯一允许的父母 style 元素是一个 head 或者 noscript 元素。（同一索引的 W3 版本错误地指出流内容可以包含 <style> 元素，但这是 W3C 在删除元素时引入的错误 scoped 属性。我有拉取请求打开修复它。）

他们不应该头部外走，但无论如何，他们的工作;虽然你可能会注意到一个快速闪烁。该网站不应该与头以外的风格标签验证，但这是否真的重要吗？此外，链接标签头部外工作为好，即使他们不应该。

像其他的答复都表示，它实际上并不需要在那里。但是，它不会验证。这可能会或可能不会在这种情况下无所谓，但是请记住，HTML呈现完全取决于浏览器。从我知道今天的一切使用的浏览器将支持把它头部外，但你不能保证在未来的浏览器和未来的浏览器版本。

坚持使用标准和你是更安全的。如何更安全了很多争论起来。

一个风格标签的任何地方，但<head>内不会与W3C规则验证。

的 HTML5.2 W3C推荐标准，2017年12月14日（称为上面没有先前的草案）现在说，你可以包括<style>。

“在人体中，其中流内容的预期。” （部分4.2.6）

根据该网站，HTML5.1（在草案）和WHATWG允许放置在体内的<style>标记：

http://www.html.am/tags/html-style -tag.cfm

这也似乎已经被相当长的一段浏览器的支持。根据该StackOverflow的答案，火狐3+，IE6 +，Safari浏览器2+和Chrome 12+支持：

https://stackoverflow.com/a/10989663/297793

根据HTML 5.2规范（在草案），样式标记只允许在一个文件的头部。

HTML 5.2草案上式标签（2016年8月18日）

一个样式元素被限制为出现在的头部文档。

可以使用样式标签头部部分或主体部分内，或者也HTML标记还之外（不推荐出端的HTML）。在实时的项目很多时候，你可以看到他们使用的样式标签了HTML标签的侧

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow

<STYLE> 是否必须位于 HTML 文档的 <HEAD> 中？

4.2.6.这 style 元素

类别:

可以使用该元素的上下文:

4.2.6.这 `style` 元素