是否应在html元素或body元素上设置全局CSS样式？

Question

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

两者之间有什么区别吗？制作全局CSS样式的标准是什么？在它们之间进行选择时，我应该知道什么吗？

Answer 1

我假设这里的“全局页面样式”是指诸如字体，颜色和背景之类的东西。

就个人而言，我申请的全球页面样式，在大多数情况下，以body和简单的元素选择（p，h1, h2, h3...，input，img，等）。这些元素与向用户呈现HTML页面的内容更紧密相关。

我给这理由很简单：表现属性bgcolor，background，text，topmargin，leftmargin和其他人给予的body元素，而不是html元素。这些属性现在在级联中以极低的优先级转换为它们各自的CSS规则：

UA可以选择使用HTML源文档中的表示属性。如果是这样，则将这些属性转换为对应的CSS规则，其特异性等于0，并且将它们视为在作者样式表的开头插入。

我知道的大多数（如果不是全部）实现将body基于HTML等效项将它们转换为on的CSS规则。其他如link，alink和vlink将成为a:link，a:active和a:visited规则分别。

当然，应该指出的是，CSS本身并没有真正有任何语义它 本身
，因为它本身就是一种造型语言，它是从一个HTML文档的内容结构完全分开。尽管CSS2.1的介绍涵盖了样式化HTML文档的基础，但是请注意，本节称其为非规范性（或信息性）；这意味着它没有为CSS实现者设置任何严格的规则。相反，它只是为读者提供信息。

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

html {
    overflow: hidden;
}

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

• 将CSS应用于html，body和*有什么区别？
• 将背景应用于和/或

注意这html不是视口；视口将建立一个初始的包含块html。该初始包含块不能用CSS定位，因为在HTML中，根元素是html。

还需要注意的是，在技术上，有应用性能没有区别html，并body在默认情况下被继承，如font-family和color。

最后但并非最不重要的一点是，这是一篇出色的文章，详细介绍了CSS
之间html以及bodyCSS方面的区别。总结（引自第一节）：

• 所述html和body元素是不同的块级实体，在父/子关系。
• 所述html元件的高度和宽度是由浏览器窗口控制。
• 该html元素具有（默认情况下）overflow:auto，导致在需要时显示滚动条。
• body元素（默认情况下）是position:static，这意味着它的定位子html 元素相对于元素的坐标系定位。
• 在几乎所有现代浏览器中，通过元素上而 不是元素margin上的a来应用距页面边缘的内置偏移量。body``padding``html
  
  

作为根元素，html它与浏览器视口的关联度更高body（这就是为什么它说html具有overflow: auto滚动条的原因）。但是请注意，滚动条不一定是由html元素本身生成的。默认情况下，是由 视口
生成这些滚动条。的值overflow被简单地转移（或 传播
之间）body，html和视口，这取决于哪些值设置。所有这些的细节都在CSS2.1规范中介绍，该规范说：

UA必须将在根元素上设置的“溢出”属性应用于视口。当根元素是HTML“ HTML”元素或XHTML“ html”元素，并且该元素具有HTML“
BODY”元素或XHTML“ body”元素作为子元素时，用户代理必须改为应用’overflow’属性如果根元素上的值是“
visible”，则从第一个此类子元素到视口。用于视口的“可见”值必须解释为“自动”。从中传播值的元素必须具有“可见”的“溢出”使用的值。

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