在“HTML”页面的“HEAD”元素之外声明 CSS 样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4606708/
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
Declare CSS style outside the "HEAD" element of an "HTML" page?
提问by Pragmateek
my use-case is the following :
我的用例如下：
I'm composing an HTML pageby using parts that are valid HTML fragmentsbut not valid pages, like Divs; these elements are using CSSto manage their style.
我正在使用有效的 HTML 片段但无效的页面（如Divs ）组成一个HTML 页面；这些元素使用CSS来管理它们的样式。
I'd like to allow each fragment to be responsible for its own styling requirements and to not rely on the declarations of style-sheets in the main fragment (the one with the "HTML" tag).
我想让每个片段负责自己的样式要求，而不依赖于主片段（带有“HTML”标签的片段）中样式表的声明。
So here come the question : is there any (standard) way to add some CSS styling outside the HEAD element(excluding the inline styling via the "style" attribute) ?
所以问题来了：是否有任何（标准）方法可以在 HEAD 元素之外添加一些 CSS 样式（不包括通过“style”属性的内联样式）？
I guess I could use frames but I'd prefer to avoid this solution.
我想我可以使用框架，但我更愿意避免使用这种解决方案。
Thanks in advance for your help.
在此先感谢您的帮助。
FINAL EDIT :
最终编辑：
Thanks to the propositions of zzzzBov, JMC Creativeand moontear, and after some testing, here is the answer :
感谢zzzzBov、江铃创意和moontear的提议，经过一番测试，答案如下：
- use JavaScript to dynamically load some CSS style-sheets: HTML4/XHTMLand HTML5 compliant,
- embed "style" elementsdirectly inside the fragments : non-compliantwith HTML4/XHTMLbut seems to be broadly supported, and is HTML5 compliant.
- 使用JavaScript 动态加载一些 CSS 样式表：HTML4/XHTML和HTML5 兼容，
- 嵌入“风格”元素直接的片段内：非兼容与HTML4 / XHTML，但似乎被广泛支持，并兼容HTML5。
As I must support email clients I've used the second solution which moreover is more simple.
因为我必须支持电子邮件客户端，所以我使用了第二种解决方案，而且它更简单。
Thanks all for your interest and participation.
感谢大家的关注和参与。
回答by zzzzBov
tl;dr:
tl;博士：
If you're not comfortable using HTML features that haven't reached a maturity level of W3C Recommendation, there isn't a standard way of adding <style>to the <body>of a page.
如果您不习惯使用尚未达到W3C Recommendation成熟度级别的 HTML 功能，则没有添加<style>到<body>页面的标准方法。
If you're comfortable using less mature features, HTML5.2 appears to be standardizing <style>elements to be allowed anywhere flow content is expected (i.e. the <body>and most of its elements).
如果您习惯于使用不太成熟的功能，HTML5.2 似乎正在标准化<style>元素，以允许在任何需要流动内容的地方（即<body>其元素和大部分元素）。
If you're already using the [scoped]attribute, stop using the [scoped]attribute, as it was never standardized and is losing browser support.
如果您已经在使用该[scoped]属性，请停止使用该[scoped]属性，因为它从未标准化并且正在失去浏览器支持。
History:
历史：
HTML 4.01
HTML 4.01
In HTML4.01 the style element was allowed in the <head>only. Browsers, being diligent about attempting to render what the author wantsrather than what the author wrotehave respected <style>elements in the <body>despite those pages technically being invalid.
在 HTML4.01 中， style 元素是<head>唯一允许的。浏览器，大约是为了显示作者是什么勤奋希望而不是什么作家写的都推崇<style>的元素<body>，尽管这些页面在技术上是无效的。
HTML 5
HTML 5
The <style>element continued to be invalid in the <body>
该<style>元素在<body>
HTML 5.1
HTML 5.1
In some working drafts of the HTML5.1 specthe <style>element was to allow for a [scoped]attribute, which would allow the <style>element to be used in flow content(i.e. in the <body>).
在HTML5.1 规范的一些工作草案中，该<style>元素允许使用一个[scoped]属性，这将允许该<style>元素用于流内容（即在 中<body>）。
As an example of how that could have been used would be:
作为如何使用它的一个例子是：
<!DOCTYPE html>
<title>Example of using the scoped attribute</title>
<div>
<style scoped>
p {
color: darkred;
}
</style>
<p>this text would be dark red</p>
</div>
<p>this text would be black</p>
Support for the scoped feature was added to Firefox in version 21 and added in Chrome behind a flag in version 20. The feature didn't receive enough support, so it was later removed from the HTML5.1 working draft.
对作用域功能的支持在版本 21 中添加到 Firefox 中，并在版本 20 中添加到 Chrome 中的标志后面。该功能没有得到足够的支持，因此后来从HTML5.1 工作草案中删除。
Chrome was first to remove the feature in version 36. Firefox has since set the feature to be behind a flag in version 55.
Chrome 首先在版本 36 中删除了该功能。此后，Firefox 将该功能设置为版本 55 中的一个标志。
HTML 5.2
HTML 5.2
In the July 2017 working draft of the HTML5.2 spec, support was added for the <style>element to be allowed in flow content:
在2017年7 月的 HTML5.2 规范工作草案中，添加了对<style>允许在流内容中使用的元素的支持：
Contexts in which this element can be used:
- Where metadata content is expected.
- In a
<noscript>element that is a child of a<head>element.- In the body, where flow content is expected.
可以使用此元素的上下文：
- 预期元数据内容的位置。
- 在作为
<noscript>元素的子<head>元素的元素中。- 在正文中，预期流内容的位置。
Emphasis mine
强调我的
At the time of writing this addition has remained in the HTML5.2 spec, which is currently at the Candidate Recommendation maturity level.
在撰写本文时，此添加内容仍保留在 HTML5.2 规范中，该规范目前处于Candidate Recommendation 成熟度级别。
While this makes using <style>elements in the <body>still somewhat of a risk, this particular change is standardizing something that browsers have supported for many years.
虽然这使得使用<style>元素<body>仍然有些风险，但这种特殊的变化正在标准化浏览器多年来支持的东西。
回答by Dennis G
There is no standardway (EDIT:as of HTML5 there apparently is!) of adding a <style>element outside of the <head>tag - it is only allowed there and NOT within the <body>tag (See the DTD here).
没有在标签外添加元素的标准方法（编辑：从 HTML5 开始，显然有！）- 它只允许在那里而不是在标签内（请参阅此处的 DTD）。<style><head><body>
If you want to style your HTML fragments individually and not use CSS styles in your head, you will need to resort to inline styling. However: Most browsers understand <style>tags within the body, so you may as well use them, but your page won't be standards compliant.
如果您想单独设置 HTML 片段的样式，而不是在头脑中使用 CSS 样式，则需要求助于内联样式。但是：大多数浏览器都理解<style>正文中的标签，因此您也可以使用它们，但您的页面将不符合标准。
In any way:
以任何方式：
- You should not use inline styling
- You should adhere to standards
- You should put the CSS in the head where it belongs
- 你不应该使用内联样式
- 你应该遵守标准
- 你应该把 CSS 放在它所属的头部
From what I understand you use some kind of templating, where you insert different HTML snippets into the page with different designs. Is it so bad if you put all styles within one big CSS file?
据我了解，您使用某种模板，将不同的 HTML 片段插入到具有不同设计的页面中。如果将所有样式都放在一个大的 CSS 文件中，会不会很糟糕？
Would it be impossible for you to dynamically load a another CSS file (via JS or server side scripting), when your HTML fragment gets inserted in the page (this would be the preferred method)?
当您的 HTML 片段插入页面时（这将是首选方法），您是否无法动态加载另一个 CSS 文件（通过 JS 或服务器端脚本）？
回答by loominade
I've found two hacksto do that. Both of which should be perfectly valid html.
我找到了两个黑客来做到这一点。两者都应该是完全有效的 html。
The SVG way
SVG方式
Wrap your <style />element inside a <svg />element.
将您的<style />元素包裹在一个<svg />元素中。
<div class="foo">Red text</div>
<svg><style>.foo { color: red }</style></svg>The Data-Uri Link
数据-Uri 链接
Format your css as a data uri and use that in a <link />element.
将您的 css 格式化为数据 uri 并在<link />元素中使用它。
<div class="foo">Red text</div>
<link rel="stylesheet" href="data:text/css,.foo%20%7B%20color%3A%20red%20%7D" />