在<body>中使用<style>标签和其他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>

正如其他人已经提到的，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）中停止支持它。在这两种情况下，用户必须在浏览器的设置中明确启用该功能。没有其他主流浏览器支持它。

在<body>中使用<style>标签和其他HTML

3回答