Pra*_*eek 59 html css templates template-engine
我的用例如下:
我正在使用有效HTML片段但不是有效页面的部分组成HTML页面,如Divs ; 这些元素正在使用CSS来管理他们的风格.
我想允许每个片段负责其自己的样式要求,并且不依赖于主片段(具有"HTML"标记的片段)中的样式表的声明.
所以这里有一个问题:是否有任何(标准)方法在HEAD元素之外添加一些CSS样式(通过"样式"属性排除内联样式)？
我想我可以使用框架,但我宁愿避免这种解决方案.
在此先感谢您的帮助.
最终编辑:
感谢zzzzBov,JMC Creative和moontear的提议,经过一些测试后,答案如下:
因为我必须支持电子邮件客户端,所以我使用了第二种解决方案,而且更简单.
感谢您的关注和参与.
zzz*_*Bov 64
如果您不习惯使用尚未达到W3C建议书成熟度级别的HTML功能,则没有一种标准方法可以添加<style>到<body>页面中.
如果您习惯使用不太成熟的功能,HTML5.2似乎是标准化的<style>元素,可以在任何预期的流内容(即其<body>大部分元素)中使用.
如果您已经在使用该[scoped]属性,请停止使用该[scoped]属性,因为它从未标准化并且正在失去浏览器支持.
在HTML4.01中,样式元素是<head>唯一允许的.尽管那些页面在技术上是无效的,浏览器仍在努力尝试呈现作者想要的内容而不是作者所写的<style>内容中尊重元素<body>.
该<style>元素继续无效<body>
在HTML5.1规范的一些工作草案中,<style>元素是允许一个[scoped]属性,这将允许<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>
Firefox版本21中添加了对范围功能的支持,并在版本20中的旗帜后面添加了Chrome.该功能没有得到足够的支持,因此后来从HTML5.1工作草案中删除了.
Chrome首先删除了第36版中的功能.自那时起,Firefox已将该功能设置为版本55中的标志.
在2017年7月的HTML5.2规范工作草案中,为<style>流内容中允许的元素添加了支持:
可以使用此元素的上下文:
- 预期元数据内容的位置.
- 在
<noscript>元素中是元素的子<head>元素.- 在体内,预计流量含量.
强调我的
在撰写本文时,此添加内容仍保留在HTML5.2规范中,该规范目前处于候选建议书成熟度级别.
虽然这使得使用<style>元素<body>仍然存在风险,但这种特殊的变化正在标准化浏览器多年来支持的东西.
Den*_*s G 13
在标签之外添加一个元素没有标准的方法(编辑:从HTML5那里显然是!)- 它只允许在那里而不是在标签内(参见这里的DTD).<style><head><body>
如果您想单独设置HTML片段的样式而不想在头脑中使用CSS样式,则需要采用内联样式.但是:大多数浏览器都了解<style>正文中的标记,因此您也可以使用它们,但您的页面不符合标准.
以任何方式:
根据我的理解,您使用某种模板,在不同设计的页面中插入不同的HTML片段.如果将所有样式放在一个大的CSS文件中,会不会这么糟糕？
当您的HTML片段插入页面时(这将是首选方法),您是否无法动态加载另一个CSS文件(通过JS或服务器端脚本)？
loo*_*ade 10
我发现有两个黑客可以做到这一点.两者都应该是完全有效的HTML.
将<style />元素包装在<svg />元素中.
<div class="foo">Red text</div>
<svg><style>.foo { color: red }</style></svg>将您的css格式化为数据uri并在<link />元素中使用它.
<div class="foo">Red text</div>
<link rel="stylesheet" href="data:text/css,.foo%20%7B%20color%3A%20red%20%7D" />