首页 文章

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

提问于
浏览 次
57

我的用例如下：

我正在通过使用 valid HTML fragments 但不是有效页面的部分来编写 HTML page ，例如 Divs ;这些元素正在使用 CSS 来管理他们的风格 .

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

所以这里有一个问题： is there any (standard) way to add some CSS styling outside the HEAD element （不包括通过"style"属性的内联样式）？

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

在此先感谢您的帮助 .

FINAL EDIT :

感谢 zzzzBov ， JMC Creative 和 moontear 的命题，经过一些测试，答案如下：

  • 使用 JavaScript to dynamically load some CSS style-sheets ： HTML4/XHTML 和 HTML5 compliant ，

  • embed "style" elements 直接在片段内： non-compliant 与 HTML4/XHTML 但似乎是 broadly supported ，并且是 HTML5 compliant .

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

感谢您的关注和参与 .

html css templates template-engine

3 回答

  • 13

    tl;博士：

    如果're not comfortable using HTML features that haven' t达到W3C Recommendation的成熟度级别，则没有将 <style> 添加到页面的 <body> 的标准方法 .

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

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

    历史：

    HTML 4.01

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

    HTML 5

    <style> 元素继续无效 <body>

    HTML 5.1

    在某些working drafts of the HTML5.1 spec中， <style> 元素允许 [scoped] 属性，这允许 <style> 元素在flow content中使用（即在 <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 .

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

    回复于
  • 10

    在 <head> 标记之外添加 <style> 元素没有 standard 方式（显然是HTML2的 EDIT: ） - 它只允许在那里而不在 <body> 标记内（See the DTD here） .

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

    以任何方式：

    • 您不应该使用内联样式

    • 你应该遵守标准

    • 你应该把CSS放在它所属的头部

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

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

    回复于
  • 61

    我发现有两个黑客可以做到这一点 . 两者都应该是完全有效的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" />
    回复于

相关问题