使用< style>标签中的< body>与其他HTML [英] Using <style> tags in the <body> with other HTML
问题描述
< 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样式生成一些数据结构，并将其用于渲染？
还是按照它看到的样式信息进行渲染？
正如其他人已经提到的，HTML 4需要< style> 标签放置在< head> 部分（即使大多数浏览器允许< style> 然而，HTML 5包括 w3.org/TR/html-markup/style.html#style.attrs.scopedrel =nofollow> scoped 属性 ，它允许您创建在< style> 标签的父元素内限定范围的样式表。这还使您能够在< body> 元素中放置< style> 标记：
<！DOCTYPE html>
< html>
< head>< / head>
< body>
< div id =scoped-content>
< style type =text / cssscoped>
h1 {color：red; }
< / style>
< h1> Hello< / h1>
< / div>
< h1>
World
< / h1>
< / body>
< / html>
如果您在支持 scoped ，您将看到样式表的受限范围。
只有一个 主要 警告。 。
当我写这个答案（2013年5月）时，几乎没有主流浏览器支持 scoped 属性。 （虽然显然是开发人员构建的Chromium 支持它。）
然而，与此问题有关的 scoped 属性有一个有趣的含义。这意味着未来的浏览器必须通过标准来允许< body> （）中的< style> 只要< style> 元素有作用域。）
- 几乎每个现有的浏览器目前都忽略
scoped属性 - 几乎每个现有的浏览器都允许
< body> $ b中的 - 未来的实现需要在
< body> < style>c>
< style> $ b ...然后有 无害 只要您未来用 scoped 属性证明它们，就可以将< style> 唯一的问题是，当前的浏览器实际上不会限制样式表的范围 - 它们会将它应用于整个文档。但是要点在于，对于所有实际目的，您可以在< body>中包含只要您：< style> ;
- 通过添加
scoped属性 - 了解到现在，
< body>中的样式表实际上不会（因为目前还没有主流的浏览器支持）
* ..
最后，关于在HTML中嵌入CSS的常见（但主观）是不好的实践，应该注意 scoped 属性的整点是适应典型的现代开发框架，允许开发人员导入大块HTML作为模块或联合内容。只有仅适用于特定大块HTML的嵌入CSS非常方便，以便开发具有特定样式的封装，模块化组件。
<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>
How is a browser supposed to render css which is non contiguous? Is it supposed to generate some data structure using all the css styles on a page and use that for rendering?
Or does it render using style information in the order it sees?
As others have already mentioned, HTML 4 requires the <style> tag to be placed in the <head> section (even though most browsers allow <style> tags within the body).
However, HTML 5 includes the scoped attribute, which allows you to create style sheets that are scoped within the parent element of the <style> tag. This also enables you to place <style> tags within the <body> element:
<!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>
If you render the above code in an HTML-5 enabled browser that supports scoped, you will see the limited scope of the style sheet.
There's just one major caveat...
At the time I'm writing this answer (May, 2013) almost no mainstream browser currently supports the scoped attribute. (Although apparently developer builds of Chromium support it.)
HOWEVER, there is an interesting implication of the scoped attribute that pertains to this question. It means that future browsers are mandated via the standard to allow <style> elements within the <body> (as long as the <style> elements are scoped.)
So, given that:
- Almost every existing browser currently ignores the
scopedattribute - Almost every existing browser currently allows
<style>tags within the<body> - Future implementations will be required to allow (scoped)
<style>tags within the<body>
...then there is literally no harm * in placing <style> tags within the body, as long as you future proof them with a scoped attribute. The only problem is that current browsers won't actually limit the scope of the stylesheet - they'll apply it to the whole document. But the point is that, for all practical purposes, you can include <style> tags within the <body> provided that you:
- Future-proof your HTML by including the
scopedattribute - Understand that as of now, the stylesheet within the
<body>will not actually be scoped (because no mainstream browser support exists yet)
* except of course, for pissing off HTML validators...
Finally, regarding the common (but subjective) claim that embedding CSS within HTML is poor practice, it should be noted that the whole point of the scoped attribute is to accommodate typical modern development frameworks that allow developers to import chunks of HTML as modules or syndicated content. It is very convenient to have embedded CSS that only applies to a particular chunk of HTML, in order to develop encapsulated, modular components with specific stylings.
这篇关于使用< style>标签中的< body>与其他HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
