【问题标题】：Declare CSS style outside the "HEAD" element of an "HTML" page?在“HTML”页面的“HEAD”元素之外声明 CSS 样式？
【发布时间】：2011-06-04 03:36:59
【问题描述】：

我的用例如下：

我正在编写一个 HTML 页面，使用的是有效的 HTML 片段但不是有效的页面，喜欢Divs；这些元素使用 CSS 来管理它们的样式。

我想让每个片段负责自己的样式要求，并且不依赖于主片段（带有“HTML”标签的那个）中的样式表声明。

那么问题来了：有什么（标准）方法可以在 HEAD 元素之外添加一些 CSS 样式（不包括通过“style”属性的内联样式）？

我想我可以使用框架，但我宁愿避免使用这种解决方案。

提前感谢您的帮助。

最终编辑：

感谢zzzzBov、JMC Creative和moontear的提议em>，经过一番测试，答案如下：

使用 JavaScript 动态加载一些 CSS 样式表：HTML4/XHTML 和 HTML5 兼容，
在片段中直接嵌入“样式”元素：不符合 HTML4/XHTML，但似乎得到广泛支持，并且是 HTML5 兼容。

因为我必须支持电子邮件客户端，所以我使用了第二种解决方案，而且更简单。

感谢大家的关注和参与。

【问题讨论】：

你可以使用javascript在头部添加<style>元素吗？
@JMC Creative：谢谢，这确实应该是最好的解决方案，但我正在发送邮件，所以我不能依赖 JS。

标签： html css templates template-engine

【解决方案1】：

tl;博士：

如果您不习惯使用尚未达到 W3C Recommendation 成熟度级别的 HTML 功能，则没有将<style> 添加到页面的<body> 的标准方法。

如果您习惯使用不太成熟的功能，HTML5.2 似乎正在标准化 <style> 元素，以便在任何需要流动内容的地方（即 <body> 及其大部分元素）。

如果您已经在使用[scoped] 属性，请停止使用[scoped] 属性，因为它从未标准化并且正在失去浏览器支持。

历史：

HTML 4.01

在 HTML4.01 中，样式元素只允许在 <head> 中使用。浏览器努力尝试呈现作者想要而不是作者写尊重<body> 中的<style> 元素，尽管这些页面在技术上是无效的。

HTML 5

<style> 元素在<body> 中仍然无效

HTML 5.1

在某些working drafts of the HTML5.1 spec 中，<style> 元素允许[scoped] 属性，这将允许在flow content 中使用<style> 元素（即在<body> 中）。

作为如何使用的示例：

<!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。该功能没有得到足够的支持，因此后来从HTML5.1 working draft 中删除。

Chrome was first to remove the feature in version 36。此后，Firefox 在 55 版中将该功能设置为一个标志。

HTML 5.2

在July 2017 working draft of the HTML5.2 spec 中，添加了对流内容中允许的<style> 元素的支持：

可以使用此元素的上下文：

需要元数据内容的地方。

在<noscript> 元素中，该元素是<head> 元素的子元素。

在正文中，预计流内容。

_强调我的

在撰写本文时，此新增内容仍保留在 HTML5.2 规范中，目前位于 Candidate Recommendation maturity level。

虽然这使得在 <body> 中使用 <style> 元素仍然存在一定风险，但这一特殊变化正在标准化浏览器多年来支持的东西。

【讨论】：

HTML5.2 已达到 W3C 推荐级别。希望有空的时候更新这篇文章。

【解决方案2】：

在<head> 标记之外添加<style> 元素没有标准方式（EDIT: 从 HTML5 开始显然有！） - 它是只允许在那里，而不是在 <body> 标记 (See the DTD here) 内。

如果您想单独设置 HTML 片段的样式而不是在脑海中使用 CSS 样式，则需要使用内联样式。但是：大多数浏览器都理解正文中的<style> 标签，因此您也可以使用它们，但您的页面将不符合标准。

无论如何：

不应使用内联样式
您应该遵守标准
你应该把 CSS 放在它所属的头部

据我了解，您使用某种模板，将不同的 HTML sn-ps 插入到具有不同设计的页面中。如果你把所有的样式都放在一个大的 CSS 文件中，会不会很糟糕？

当您的 HTML 片段插入页面时，您是否无法动态加载另一个 CSS 文件（通过 JS 或服务器端脚本）（这将是首选方法）？

【讨论】：

这是真的，但是 body 标签中的 <style>@import url('path/to/file.css')</style> 在大多数现代浏览器中都可以使用。我知道不遵守神圣 W3C 的严格要求是不受欢迎的，但是来吧，网络正在快速发展，而他们的标准却没有。一个流行的第三方服务成功使用它的示例：ZenDesk.com 按钮代码 ...每天成功地处理未知数量的请求。
@moontear ：感谢您的明确回答。 “你使用某种模板”：很好猜这正是我的情况。 “将所有样式放在一个大 CSS 文件中”：如果我不通过电子邮件发送一些 html 页面，那确实可能是一个解决方案。 “动态加载另一个 CSS 文件（通过 JS 或服务器端脚本）”：在一般情况下非常好的解决方案，但我也无法在邮件客户端中使用 JS。 “大多数浏览器都理解正文中的
@moontear 就 HTML4+XHTML1 而言，您是正确的，但 HTML5 标准（好吧，它还没有最终确定，但它仍然受到支持）确实定义了一种使用方式HTML 页面的body 中的style 标记。
@DSKVR ：感谢这个技巧，这似乎是完美的解决方案。
您听起来好像内联样式本质上是邪恶和错误的，并且不符合标准。坏的。当然，头部或通过链接的样式有很多优点，当然，我们希望范围属性得到支持并向后兼容，当然，我会尝试重新设计我的系统，这样这个问题就不是问题了，但没有什么使用内联样式是错误的，特别是如果我没有更好的选择。

【解决方案3】：

我找到了两个 hack 来做到这一点。两者都应该是完全有效的 html。

SVG 方式

将您的 <style /> 元素包装在 <svg /> 元素中。

<div class="foo">Red text</div>
<svg><style>.foo { color: red }</style></svg>

Data-Uri 链接

将您的 css 格式化为数据 uri，并在 <link /> 元素中使用它。

<div class="foo">Red text</div>
<link rel="stylesheet" href="data:text/css,.foo%20%7B%20color%3A%20red%20%7D" />

【讨论】：

感谢您的想法。大多数浏览器都支持吗？
数据 uri 应该在 IE8+ 中工作 (caniuse#datauri)，SVG 应该在 IE9+ 中工作 (caniuse#svg-html5)
好有趣，你得到我的 +1。 :)
eBay 不再允许您链接到外部样式。但是，我能够添加数据 uri 解决方案。感谢您的信息。