全局CSS样式应该设置在HTML元素还是BODY元素上？

Question

全局CSS样式应该设置在HTML元素还是BODY元素上？

htmlcss

25

有时我看到人们将全局CSS样式应用于html，有时他们会使用原始的CSS和JavaScript将其应用于body。

这两者之间有什么区别？哪种是制作全局CSS样式的标准？在选择它们之间时，有什么需要注意的事项吗？

- Gordon Gustafson

2个回答

3

如果你只想样式化显示的内容，那么针对 <body> 元素设置样式规则可以避免不必要的级联。

你是否有理由想要应用样式到 <title>、<meta>、<script> 等标签上？这可以通过针对 <html> 进行设置来实现。

- parisminton

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

我假设这里的“全局页面样式”是指字体、颜色和背景等内容。个人而言，我大部分情况下将全局页面样式应用于body和简单元素选择器（p，h1，h2，h3...，input，img等）。这些元素与HTML页面向用户呈现内容更密切相关。我的理由很简单：bgcolor、background、text、topmargin、leftmargin等表现属性是赋予了body元素而不是html元素。这些属性现在转换为它们各自的CSS规则，具有极低的层叠优先级：

UA可以选择遵守HTML源文档中的表现属性。如果是这样，这些属性将被转换为相应的CSS规则，其特异性等于0，并被视为插入到作者样式表的开头。

我所知道的大多数实现都会将这些属性转换为CSS规则并应用于body，基于它们的HTML等效项。其他如link、alink和vlink将分别成为a:link、a:active和a:visited规则。

当然，需要注意的是，CSS本身并没有任何语义学上的含义，因为它是一种独立于HTML文档内容结构的样式语言。虽然CSS2.1介绍介绍了如何对HTML文档进行样式设置，但需要注意的是，该部分自称为非规范性的（或信息性的）；这意味着它不会为CSS实现者设定任何硬性和明确的规则。相反，它只为读者提供信息。

话虽如此，某些样式可以应用于html以修改视口行为。例如，要隐藏页面滚动条，请使用：

html {
    overflow: hidden;
}

您还可以将规则应用于html和body，以获得有趣的效果。有关详细信息和示例，请参见以下问题：

请注意，html不是视口；视口建立了一个初始包含块，在其中html位于其中。该初始包含块无法使用CSS进行定位，因为在HTML中，根元素是html。

还要注意的是，从技术上讲，在默认情况下继承的属性（例如font-family和color）应用于html和body之间不存在任何区别。

最后，这里有一篇优秀的article详细介绍了在CSS方面html和body之间的区别。总结如下（摘自第一部分）：

html 和 body 元素是不同的块级实体，处于父子关系。

html 元素的高度和宽度由浏览器窗口控制。

默认情况下，html 元素具有 overflow:auto 属性，需要时会出现滚动条。

body 元素默认为 position:static，这意味着其定位的子元素相对于 html 元素的坐标系进行定位。

在几乎所有现代浏览器中，页面边缘的内置偏移是通过 body 元素的 margin 而非 html 元素的 padding 应用的。

作为根元素，html 比 body 更与浏览器视口相关（这就是为什么它说 html 有滚动条的 overflow: auto）。但请注意，滚动条不一定由 html 元素本身生成。默认情况下，滚动条是由视口生成的；overflow 的值只是在 body、html 和视口之间传递或传播，具体取决于您设置的值。所有这些细节都在 CSS2.1 规范中有所涉及，其中 says：

用户代理必须将设置在根元素上的 'overflow' 属性应用于视口。当根元素是HTML“HTML”元素或XHTML“html”元素，并且该元素有一个HTML“BODY”元素或XHTML“body”元素作为子元素时，如果根元素上的值为“visible”，则用户代理必须将第一个这样的子元素上的 'overflow' 属性应用于视口。当在视口中使用“visible”值时，必须将其解释为“auto”。从中传播值的元素必须具有'overflow'的使用值为'visible'。

最后一个要点可能源于上述 body 元素的 topmargin 和 leftmargin 属性。