在“HTML”页面的“HEAD”元素之外声明CSS样式？
我的用例如下：
我正在使用有效的HTML片段，但没有有效的页面，如Divs组成一个HTML页面 ; 这些元素正在使用CSS来pipe理他们的风格。
我希望允许每个片段负责自己的样式要求，而不要依赖主片段（带有“HTML”标签的样式表）中的样式表的声明。
所以问题来了： 是否有任何（标准）方法在HEAD元素外部添加一些CSS样式 （不包括通过“style”属性的内联样式）？
我想我可以使用框架，但我宁愿避免这个解决scheme。
在此先感谢您的帮助。
最终编辑：
感谢zzzzBov ， JMC Creative和moontear的提议 ，经过一番testing，下面是答案：
- 使用JavaScriptdynamic加载一些CSS样式表 ： 兼容 HTML4 / XHTML和HTML5 ，
- 直接在片段中embedded“风格”元素 ： 不符合 HTML4 / XHTML，但似乎得到广泛支持 ，并符合HTML5 。
因为我必须支持电子邮件客户端，所以我使用了第二种解决scheme，而且更简单。
感谢您的关心和参与。
TL;博士：
如果您不习惯使用尚未达到W3Cbuild议书成熟度级别的HTML特性，则没有一种将<style>添加到页面<body>的标准方法。
如果你习惯于使用不太成熟的特性，那么HTML5.2似乎是标准化<style>元素，以允许任何需要stream程内容的地方（即<body>和其大部分元素）。
如果您已经使用[scoped]属性，请停止使用[scoped]属性，因为它从来没有标准化，并且正在失去对浏览器的支持。
历史：
HTML 4.01
在HTML4.01中，样式元素仅在<head>被允许。 浏览器尽pipe试图呈现作者想要的东西，而不是作者所写的内容，但他们仍然尊重<body>中的<body> <style>元素，尽pipe这些页面在技术上是无效的。
HTML 5
<style>元素在<body>继续无效
HTML 5.1
在HTML5.1规范的一些工作草案中， <style>元素是允许[scoped]属性的，它允许<style>元素在stream内容 （即<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>
在版本21中，支持范围的function被添加到Firefox中，并在版本20中的标志后面的Chrome中添加 。 该function没有得到足够的支持，所以后来从HTML5.1工作草案中删除。
Chrome首先删除了版本36中的function 。 Firefox已经在55版本中设置了该function。
HTML 5.2
在HTML5.2规范的2017年7月工作草案中 ，为stream内容中的<style>元素添加了支持：
可以使用这个元素的上下文：
- 预期元数据内容。
- 在作为
<noscript><head>元素的子元素的<noscript>元素中。- 在预计stream量内容的身体中。
强调我的
在写这篇文章的时候，这个新增内容仍然是HTML5.2规范，目前这个规范是候选推荐标准的成熟度级别 。
虽然这使得在<body>使用<style>元素仍然有一定的风险，但这种特殊的变化标准化了浏览器多年来支持的function。
在<head>标签之外添加一个<style>元素没有标准的方法（ 编辑方式：显然是HTML5！），它只允许在那里，而不在<body>标签内（ 见这里的DTD ） 。
如果您想单独设置HTML片段的样式，而不是在头脑中使用CSS样式，则需要使用内联样式。 但是：大多数浏览器都能够识别正文中的<style>标签，因此您可以使用它们，但是您的页面不符合标准。
以任何方式：
- 你不应该使用内联样式
- 你应该坚持标准
- 你应该把CSS放在它所属的头部
从我的理解你使用某种模板，在不同的devise插入不同的HTML片段到页面。 如果你把所有的样式放在一个大的CSS文件中，那么这样做是否糟糕？
当你的HTML片段插入页面时（这将是首选的方法），你是不可能dynamic加载另一个CSS文件（通过JS或服务器端脚本）？
我发现了两个黑客来做到这一点。 这两个应该是完全有效的HTML。
SVG的方式
将<style />元素包裹在<svg />元素中。
<div class="foo">Red text</div> <svg><style>.foo { color: red }</style></svg>
