在“HEAD”之外声明CSS样式元素的“HTML”元素。页? [英] Declare CSS style outside the "HEAD" element of an "HTML" page?

查看:133
本文介绍了在“HEAD”之外声明CSS样式元素的“HTML”元素。页?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的使用情况如下:

我正在使用有效HTML的部分组成 HTML网页片段,但无效的页面,
Divs ;这些元素使用 CSS 来管理它们的样式。

I'm composing an HTML page by using parts that are valid HTML fragments but not valid pages, like Divs; these elements are using CSS to manage their style.

我想允许每个片段负责自己的样式要求,不要依赖主片段中的样式表声明(带有HTML标签的样式表)。

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).

所以这里有个问题:在HEAD元素之外添加一些CSS样式的任何(标准)方式(不包括通过style属性的内联样式)?

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) ?

预先感谢您的帮助。

感谢 zzzzBov > JMC Creative 和 moontear ,然后经过一些测试,以下是答案:

Thanks to the propositions of zzzzBov, JMC Creative and moontear, and after some testing, here is the answer :


  • 使用 JavaScript动态加载一些CSS样式表 HTML4 / XHTML HTML5 / 嵌入样式元素中的 :不符合 广泛支持 HTML5

  • use JavaScript to dynamically load some CSS style-sheets : HTML4/XHTML and HTML5 compliant,
  • embed "style" elements directly inside the fragments : non-compliant with HTML4/XHTML but seems to be broadly supported, and is HTML5 compliant.

支持电子邮件客户端我使用了第二个解决方案,而且更简单。

As I must support email clients I've used the second solution which moreover is more simple.

感谢您的关注和参与。

推荐答案

HTML5允许您将 style 元素属于样式的父节点和子节点。 (请查看 作用域 属性)。

HTML5 allows you to scope the style element to belong to the style's parent node and children. (check out the scoped attribute).

我不知道如何支持它。至少是HTML5规范的一部分,它在未来几年内可能会得到更好的支持。

I don't know how well supported it is as of yet. At least being a part of the HTML5 spec, it's likely to get much better support within the next couple years.

一个使用它的例子:

<div class="chunk">
  <style type="text/css" scoped>
    p
    {
      text-decoration: underline;
    }
  </style>
  <p>lorem ipsum dolor sit amet</p>
</div>

只要确保使用html5 doctype <!DOCTYPE HTML& / code>。

Just make sure you use the html5 doctype <!DOCTYPE HTML>.



更新/警告 - caniuse.com/style-scoped 目前(2016年5月)报告说,Firefox是唯一支持scoped CSS样式的浏览器。支持是围绕v36 / 37 从Chrome中删除


Update / Warning -- caniuse.com/style-scoped currently (May 2016) reports that Firefox is the only browser that supports scoped CSS styles. Support was removed from Chrome around v36/37.

这篇关于在“HEAD”之外声明CSS样式元素的“HTML”元素。页?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆