Question

可能重复：
Declare CSS style outside the “HEAD” element of an “HTML” page ?

我正在创建一些在CMS内部使用的内容，我无权访问标头标记。有没有办法在文档的<BODY>中添加CSS规则？

我想这样做......

.ClassName
{
  border: 2px solid red;
  margin: 5px;
  padding: 5px;
}

我可以在元素中添加样式规则“inline”，但我希望尽可能避免这种情况，因为CSS规则将在许多元素中使用。

我想避免这个......

<div style="border: 2px solid red; margin: 5px; padding: 5px">content</div>

Answer 1

您可以在<style>内添加body，但是get a validation error：

在此上下文中，元素样式不允许作为元素主体的子元素。（抑制此子树中的更多错误。）

（这是因为根据规范不允许，请参阅@Oded's answer）

它在浏览器中运行良好。 Browsers do not care:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<style type="text/css">
.ClassName
{
  border: 2px solid red;
  margin: 5px;
  padding: 5px;
}
</style>

<div class="ClassName">content</div>

</body>
</html>

Answer 2

是。您可以使用<style>元素。

<style type="text/css" scoped>
.redOutline {
    border: 2px solid red;
    margin: 5px;
    padding: 5px;
}
</style>

<div class="redOutline">content</div>

Answer 3

根据the spec，这不是有效的HTML。

在DTD中，STYLE元素如下所示：

<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->

head.misc仅显示为HEAD或TITLE的pard。

但是，正如其他人所说，许多浏览器仍然会解析并使用在body标签中定义的样式表。您的里程可能会有所不同......特别是如果您在标记中使用DOCTYPE。

Answer 4

Answered before：）

但简而言之，它们无效，但许多网站都将它们添加到正文中，尤其是那些由（糟糕的）内容管理系统构建的网站。

是否可以在Header之外添加CSS规则？

4 个答案: