<html>
<body>
<style type="text/css">
p.first {color:blue}
p.second {color:green}
</style>
<p class="first">Hello World</p>
<p class="second">Hello World</p>
<style type="text/css">
p.first {color:green}
p.second {color:blue}
</style>
<p class="first">Hello World</p>
<p class="second">Hello World</p>
</body>
</html>
浏览器应该如何呈现不连续的css？是否应该使用页面上的所有css样式生成一些数据结构并使用它进行渲染？
或者它按照它看到的顺序使用样式信息进行渲染？
Cha*_*via 303
正如其他人已经提到的,HTML 4要求将<style>标记放在该<head>部分中(即使大多数浏览器允许其中的<style>标记body).
但是,HTML 5包含scoped属性(请参阅下面的更新),该属性允许您创建范围在<style>标记的父元素中的样式表.这也使您可以<style>在<body>元素中放置标记:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="scoped-content">
<style type="text/css" scoped>
h1 { color: red; }
</style>
<h1>Hello</h1>
</div>
<h1>
World
</h1>
</body>
</html>
如果在支持HTML-5的浏览器中呈现上述代码scoped,您将看到样式表的有限范围.
只有一个重要的警告......
在我写这个答案时(2013年5月),几乎没有主流浏览器目前支持该scoped属性.(虽然显然Chromium的开发人员版本支持它.)
但是,scoped该问题属于一个有趣的含义.这意味着未来的浏览器通过标准强制要求允许<style>元素<body>(只要<style>元素具有范围).
所以,鉴于:
scoped属性<style>标签<body><style>标签<body>......再有就是字面上没有害处在将*<style>身体内的标签,只要你面向未来他们有scoped属性.唯一的问题是当前的浏览器实际上不会限制样式表的范围 - 它们会将它应用于整个文档.但重点是,出于所有实际目的,您可以<style>在<body>提供的内容中包含标签:
scoped属性,为HTML提供面向未来的证明<body>实际上并不是作用域的(因为还没有主流浏览器支持)
*当然除了惹恼HTML验证器......
最后,对于常见的(但主观)声称嵌入HTML中的CSS的不良做法,应该指出的是,整点的的scoped属性,以适应典型的现代开发框架,使开发人员可以导入HTML的块为模块或联合内容.嵌入式CSS 仅适用于特定的HTML块非常方便,以便开发具有特定样式的封装模块化组件.
根据Mozilla文档,截至2019年2月更新,该scoped属性已弃用.Chrome在版本36(2014)和Firefox版本62(2018)中停止支持它.在这两种情况下,用户必须在浏览器的设置中明确启用该功能.没有其他主流浏览器支持它.
Sz.*_*Sz. 52
耶,STYLE终于在有效的BODY,作为HTML5.2的!
(也STYLE已经消失了.)
从规格(津津乐道的最后一行!):
4.2.6.样式元素
...
可以使用此元素的上下文:
预期元数据内容的位置.
在一个noscript元素中,它是head元素的子元素.
在体内,预计流量含量.
小智 28
当我看到大型网站内容管理系统经常将一些<style>元素(一些,而不是全部)放在靠近依赖这些类的内容时,我得出的结论是,这匹马不在谷仓里.
去看看来自cnn.com,nytimes.com,huffingtonpost.com,你最近的大城市报纸等的页面来源.所有这些都是这样做的.
如果有充分的理由在实体中的某处放置一个额外的<style>部分 - 例如,如果你实时包含()多样化和独立的页面元素,并且每个元素都有自己的嵌入式<style>,并且该组织将更清洁,更模块化,更易理解,更易于维护 - 我只想咬紧牙关.当然,如果我们可以拥有限制范围的"本地"样式(如局部变量),但是您可以使用您拥有的HTML,而不是您可能希望或希望稍后使用的HTML.
当然,正如其他人所阐述的那样,存在潜在的缺点和良好的(如果不总是令人信服的)理由遵循正统观念.但对我来说,它看起来越来越像在<body>中经常使用<style>已经成为主流.
小智 8
我想这可能是关于有限上下文的问题，例如非程序员用户使用的 Web 系统上的 WYIWYG 编辑器，这限制了遵循标准的可能性。有时（如 TinyMCE），它是一个将您的内容/代码放在textarea标签中的库，该标签由编辑器呈现为一个大div标签。有时，它可能是这些编辑器的旧版本。
我假设：
stylesheets. 实际上，考虑到他们将拥有的请求数量，这对于管理员（或网络开发人员）来说是不切实际的。在某些情况下，如果没有使用style规则，可能是非常糟糕的设计体验。所以，是的，这些用户需要定制。好的，但是在这种情况下，解决方案是什么？考虑到在html页面中插入 CSS 的不同方式，我想这些解决方案：
要求您的系统管理员在系统的stylesheets. 这将是一个外部或内部 CSS解决方案。如前所述，这可能是不可能的。
<link>开<body>在标签上使用外部样式表body，即在您有权访问的区域内使用link标签（即在网站上，在标签内，而不是在标签内）。一些消息来源说这没问题，但“不是一个好习惯”，比如MDN：bodyhead
甲
<link>元件可以在任一发生<head>或<body>元件，这取决于它是否有链路类型，它是身体-OK。例如，stylesheet链接类型是 body-ok，因此<link rel="stylesheet">在 body 中是允许的。但是，这不是一个好的做法。将<link>元素与正文内容分开，将它们放在<head>.
其他一些，将其限制在该<head>部分，例如w3schools：
注意：此元素仅出现在 head 部分，但它可以出现任意次数。
我在这里测试了它（桌面环境，在浏览器上），它对我有用。创建一个文件foo.html：
<!DOCTYPE html>
<html>
<head></head>
<body>
<link href="bar.css" type="text/css" rel="stylesheet">
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
</body>
</html>
然后在同一目录中的 CSS 文件名为bar.css：
.test1 {
color: green;
};
好吧，如果您知道如何在机构系统的某处上传 CSS 文件，这看起来是可能的。也许情况就是这样。
<style>开<body>在标签上使用Internet 样式表body，即style在您有权访问的区域内使用标签（即在网站上，在body标签内，而不是在head标签内）。这就是Charles Salvia和Sz在这里的回答。选择此选项，请考虑他们的担忧。
Alert 这些与修改<head>页面元素有关。也许机构的系统管理员不会允许这样做。因此，建议先征得他们的许可。
好的，假设授予权限，策略是访问<head>. 如何？JavaScript 方法。
<link>上<head>这是第二个选项的另一个版本。在标签上使用外部样式表<head>，即在您有权访问的区域外使用<link>元素（即在网站上，不在标签内，是在标签内）。该解决方案符合MDN和w3schools的建议，如上所述，作为第二个选项解决方案。将创建一个新对象。bodyheadLink
要通过 JS 解决这个问题，有很多方法，但在以下代码行中，我演示了一个简单的方法。
我在这里测试了它（桌面环境，在浏览器上），它对我有用。创建一个文件f.html：
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
里面的script标签：
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
然后在 CSS 文件中，在同一目录中，调用bar.css（如第二个选项）：
.test1 {
color: green;
};
正如我已经说过的：如果您知道如何在机构系统的某处上传 CSS 文件，这看起来是可能的。
<style>上<head>在标签上使用新的内部样式表<head>，即在您有权访问的区域外使用新<style>元素（即在网站上，不在标签内，是在标签内）。将创建一个新对象。bodyheadStyle
这是通过JS解决的。下面演示一种简单的方法。
我在这里测试了它（桌面环境，在浏览器上），它对我有用。创建一个文件foobar.html：
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
里面的script标签：
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
<style>的<head>在标签上使用现有的内部样式表<head>，即，在您有权访问的区域之外使用<style>元素（即，在站点上，不在标签内，是在标签内），如果存在的话。将创建一个新对象或使用一个对象（在此处采用的解决方案的代码中）。bodyheadStyleCSSStyleSheet
这在某些方面是有风险的。
首先，因为它可能不存在某个<style> 对象。根据您实施此解决方案的方式，您可能会得到undefined回报（系统可能使用外部样式表）。
其次，因为您将编辑系统设计作者的作品（作者身份问题）。
第三，因为您所在机构的 IT 安全政策可能不允许这样做。因此，请务必获得许可才能这样做（如在其他 JS 解决方案中一样）。
假设再次获得许可：
您将需要考虑这种方式可用的方法的一些限制：insertRule(). 建议的解决方案使用默认方案，并在第一个操作（stylesheet如果存在）。
我在这里测试了它（桌面环境，在浏览器上），它对我有用。创建一个文件foo_bar.html：
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
里面的script标签：
function demoLoop(){ // remove this line
var elmnt = document.getElementsByTagName("style");
if (elmnt.length === 0) {
// there isn't style objects, so it's more interesting create one
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {" +
"color: green;" +
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
} else {
// Using CSSStyleSheet interface
var firstCSS = document.styleSheets[0];
firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
}
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too
该解决方案的另一种方法是使用CSSStyleDeclaration对象（w3schools和MDN 上的文档）。但考虑到覆盖系统 CSS 上现有规则的风险，这可能并不有趣。
使用内联 CSS。这解决了问题，尽管取决于页面大小（以代码行为单位），代码的维护（由作者自己或其他指定人员）可能非常困难。
但根据您在机构中的角色背景或其网络系统安全策略，这可能是您唯一可用的解决方案。
创建一个文件_foobar.html：
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
浏览器应该如何呈现不连续的 css？
- 是否应该使用页面上的所有 css 样式生成一些数据结构并将其用于渲染？
- 或者它是否按照它看到的顺序使用样式信息进行渲染？
（报价改编）
为了更准确的答案，我建议谷歌这些文章：
我想这会因浏览器而异:全局显示规则可能会随着浏览器在代码中的运行而更新.
有时在外部样式表加载延迟时,您可以在全局显示规则中看到此类更改.类似的东西可能会在这里发生,但是在如此短暂的连续中它实际上并没有被渲染.
无论如何它都不是有效的HTML,所以我想说这是一件无用的事情.<style>标签属于head页面的部分.
正如其他人所说,这不是有效的HTML,因为样式标签属于头部.
但是,大多数浏览器都没有真正强制执行验证.相反,一旦加载文档,则合并并应用样式.在这种情况下,第二组样式将始终覆盖第一组样式,因为它们是遇到的最后一个定义.
再次强调，这是一场理论与实践的争论。没有真正的赢家。
首先让我向您展示一个CodePen：
https://codepen.io/dkellner/pen/gOzXGjz?editors=1100
CSS：
.jeff { background:red; transform:rotate(2deg); color:white; }
HTML：
<style> .jeff { margin:20% 0 0 20%; width:400px; } </style>
<div class="jeff">
This is Jeff.
<style> .jeff {background:blue; padding:40px;} </style>
</div>
<style> .jeff {background:green} </style>
在这个例子中，我使用了 4 个不同样式的块。直接在 CodePen 的 CSS 框中，他们会把它放在一个不错的地方，可能在头部，无论如何。下一个位于div之前，然后是 div内部，最后一个位于div之后。杰夫现在正在经历很多事情。他是绿色的，因为这是最后一条规则告诉他的，但他也旋转和定位，并且里面的文本是白色的，所以我们可以有把握地说他已经阅读了样式标签告诉他的所有内容，并且：
style块均已应用；就是这样。
再说一遍，浏览器是有耐心的野兽。他们希望你享受互联网，而创建网站的人并没有很好的纪律，因此浏览器进化到容忍他们的疯狂行为。