在“HTML”页面的“HEAD”元素之外声明CSS样式？

时间：2011-01-05 16:45:11

标签： html css templates template-engine

我的用例如下：

我正在使用有效HTML片段但不是有效页面的部分来撰写 HTML页面， 喜欢 Divs ;这些元素使用 CSS 来管理他们的风格。

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

所以这里有一个问题：是否有任何（标准）方法在HEAD元素之外添加一些CSS样式（通过“样式”属性排除内联样式）？

我想我可以使用帧，但我更愿意避免这种解决方案。

提前感谢您的帮助。

最终编辑：

感谢 zzzzBov 的提议， JMC广告 和 moontear ，经过一些测试，答案是：

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

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

感谢所有人的兴趣和参与。

3 个答案:

答案 0 :(得分：62)

TL; DR：

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

如果您习惯使用不太成熟的功能，HTML5.2似乎是标准化<style>元素，允许在任何流媒体内容预期的地方（即<body>及其大部分元素）。< / p>

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

历史：

HTML 4.01

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

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。

虽然这会使<style>中的<body>元素仍然存在风险，但这种特殊的变化标准化了浏览器多年来支持的内容。

答案 1 :(得分：13)

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

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

以任何方式：

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

根据我的理解，您使用某种模板，将不同的HTML片段插入到具有不同设计的页面中。如果将所有样式放在一个大的CSS文件中，会不会这么糟糕？

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

答案 2 :(得分：10)

我发现了两个 hacks 来做到这一点。这两个都应该是完全有效的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" />

相关问题
最新问题