Sometimes I see people apply global css styles to html, sometimes I see them apply them to body, with both raw css and javascript.
有时我看到人们将全局css样式应用于html，有时我看到它们将它们应用于body，同时包含原始css和javascript。
Are there any differences between the two? Which is the standard to make a global css style? Is there anything I should know when picking between them?
这两者有什么不同吗？制作全球css风格的标准是什么？在他们之间挑选时我有什么需要知道的吗？
2 个解决方案
#1
26
I'm assuming that "global page styling" here refers to things such as fonts, colors and backgrounds.
我假设“全局页面样式”在这里指的是诸如字体，颜色和背景之类的东西。
Personally, I apply global page styling, for the most part, to body and the simple element selectors (p, h1, h2, h3..., input, img, etc). These elements are more closely related to the presentation of content of an HTML page to the user.
就个人而言，我将全局页面样式应用于body和简单元素选择器（p，h1，h2，h3 ......，input，img等）。这些元素与向用户呈现HTML页面的内容更密切相关。
My rationale for this is simple: the presentational attributes bgcolor, background, text, topmargin, leftmargin and others were given to the body element, not the html element. These attributes are now converted to their respective CSS rules with extremely low precedence in the cascade:
我的理由很简单：表示属性bgcolor，background，text，topmargin，leftmargin和其他属性被赋予body元素，而不是html元素。这些属性现在转换为各自的CSS规则，级联中的优先级极低：
The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet.
UA可以选择在HTML源文档中表示表示属性。如果是这样，这些属性将被转换为特定于等于0的相应CSS规则，并被视为在作者样式表的开头插入它们。
Most if not all implementations I'm aware of will convert these to CSS rules on body, based on their HTML equivalents. Others such as link, alink and vlink will become a:link, a:active and a:visited rules respectively.
我知道的大多数（如果不是全部）实现将基于它们的HTML等价物将这些实现转换为主体上的CSS规则。其他如link，alink和vlink将分别成为：link，a：active和a：visited规则。
Of course, it should be noted that CSS itself doesn't really have any semantics to it per se, as it's a styling language in itself which is completely separate from the content structure of an HTML document. Although the introduction to CSS2.1 covers the basics of styling an HTML document, note that the section calls itself non-normative (or informative); this means it doesn't set any hard and fast rules for CSS implementers to follow. Instead, it simply provides information for readers.
当然，应该注意的是CSS本身并没有真正具有任何语义，因为它本身就是一种样式语言，它完全独立于HTML文档的内容结构。尽管CSS2.1的介绍涵盖了HTML文档样式的基础知识，但请注意该部分称其为非规范性（或提供信息）;这意味着它没有为CSS实现者设置任何硬性和快速的规则。相反，它只是为读者提供信息。
That said, certain styles may be applied to html to modify viewport behavior. For example, to hide the page scrollbars use:
也就是说，某些样式可以应用于html来修改视口行为。例如，要隐藏页面滚动条使用：
html {
overflow: hidden;
}
You can also apply rules to both html and body for interesting effects; see the following questions for details and examples:
您还可以将规则应用于html和body以获得有趣的效果;有关详细信息和示例，请参阅以下问题：
- What's the difference in applying CSS to html, body, and *?
- 将CSS应用于html，body和*有什么区别？
- Applying a background to <html> and/or <body>
- 将背景应用于和/或
Note that html is not the viewport; the viewport establishes an initial containing block in which html is situated. That initial containing block cannot be targeted with CSS, because in HTML, the root element is html.
请注意，html不是视口;视口建立一个初始包含块，其中包含html。初始包含块不能用CSS作为目标，因为在HTML中，根元素是html。
Note also that, technically, there is no difference between applying properties to html and body that are inherited by default, such as font-family and color.
另请注意，从技术上讲，将属性应用于默认继承的html和body之间没有区别，例如font-family和color。
Last but not least, here is an excellent article that details the differences between html and body in terms of CSS. In summary (quoted from its first section):
最后但并非最不重要的，这是一篇很好的文章，详细介绍了CSS与CSS之间的差异。总结（引自其第一部分）：
- The
htmlandbodyelements are distinct block-level entities, in a parent/child relationship.- html和body元素是父/子关系中不同的块级实体。
- The
htmlelement's height and width are controlled by the browser window.- html元素的高度和宽度由浏览器窗口控制。
- It is the
htmlelement which has (by default)overflow:auto, causing scrollbars to appear when needed.- 它是html元素（默认情况下）溢出：auto，导致滚动条在需要时出现。
- The body element is (by default)
position:static, which means that positioned children of it are positioned relative to thehtmlelement's coordinate system.- body元素（默认情况下）position：static，这意味着它的定位子元素相对于html元素的坐标系定位。
- In almost all modern browsers, the built-in offset from the edge of the page is applied through a
marginon thebodyelement, notpaddingon thehtmlelement.- 在几乎所有现代浏览器中，页面边缘的内置偏移量通过body元素上的边距应用，而不是在html元素上填充。
As the root element, html is more closely associated with the browser viewport than body (which is why it says html has overflow: auto for scrollbars). Note however that the scrollbars are not necessarily generated by the html element itself. By default, it's the viewport that generates these scrollbars; the values of overflow are simply transferred (or propagated) between body, html, and the viewport, depending on which values you set. The details of all this are covered in the CSS2.1 spec, which says:
作为根元素，html与浏览器视口的关联性比body更紧密（这就是为什么它说html有溢出：auto for scrollbars）。但请注意，滚动条不一定由html元素本身生成。默认情况下，它是生成这些滚动条的视口;溢出值只是在body，html和视口之间传输（或传播），具体取决于您设置的值。 CSS2.1规范中包含了所有这些的详细信息，其中说明：
UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.
UA必须将根元素上的“溢出”属性集应用于视口。当根元素是HTML“HTML”元素或XHTML“html”元素，并且该元素具有HTML“BODY”元素或XHTML“body”元素作为子元素时，用户代理必须改为应用'overflow'属性从第一个这样的子元素到视口，如果根元素上的值是“可见的”。用于视口时的“可见”值必须解释为“auto”。传播值的元素必须具有“可见”的“溢出”的使用值。
The last bullet point probably has its roots in the aforementioned topmargin and leftmargin attributes of the body element.
最后一个要点可能源于body元素的上述topmargin和leftmargin属性。
#2
2
If you want to style only the content that'll be displayed, targeting the <body> element saves the style rules an unnecessary level of cascading.
如果您只想设置要显示的内容，则定位元素会将样式规则保存为不必要的级联级别。
Is there a reason you'd want to apply styles to the <title>, <meta>, <script> etc... tags? That would happen by targeting <html>.
您是否有理由将样式应用于
#1
26
I'm assuming that "global page styling" here refers to things such as fonts, colors and backgrounds.
我假设“全局页面样式”在这里指的是诸如字体，颜色和背景之类的东西。
Personally, I apply global page styling, for the most part, to body and the simple element selectors (p, h1, h2, h3..., input, img, etc). These elements are more closely related to the presentation of content of an HTML page to the user.
就个人而言，我将全局页面样式应用于body和简单元素选择器（p，h1，h2，h3 ......，input，img等）。这些元素与向用户呈现HTML页面的内容更密切相关。
My rationale for this is simple: the presentational attributes bgcolor, background, text, topmargin, leftmargin and others were given to the body element, not the html element. These attributes are now converted to their respective CSS rules with extremely low precedence in the cascade:
我的理由很简单：表示属性bgcolor，background，text，topmargin，leftmargin和其他属性被赋予body元素，而不是html元素。这些属性现在转换为各自的CSS规则，级联中的优先级极低：
The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet.
UA可以选择在HTML源文档中表示表示属性。如果是这样，这些属性将被转换为特定于等于0的相应CSS规则，并被视为在作者样式表的开头插入它们。
Most if not all implementations I'm aware of will convert these to CSS rules on body, based on their HTML equivalents. Others such as link, alink and vlink will become a:link, a:active and a:visited rules respectively.
我知道的大多数（如果不是全部）实现将基于它们的HTML等价物将这些实现转换为主体上的CSS规则。其他如link，alink和vlink将分别成为：link，a：active和a：visited规则。
Of course, it should be noted that CSS itself doesn't really have any semantics to it per se, as it's a styling language in itself which is completely separate from the content structure of an HTML document. Although the introduction to CSS2.1 covers the basics of styling an HTML document, note that the section calls itself non-normative (or informative); this means it doesn't set any hard and fast rules for CSS implementers to follow. Instead, it simply provides information for readers.
当然，应该注意的是CSS本身并没有真正具有任何语义，因为它本身就是一种样式语言，它完全独立于HTML文档的内容结构。尽管CSS2.1的介绍涵盖了HTML文档样式的基础知识，但请注意该部分称其为非规范性（或提供信息）;这意味着它没有为CSS实现者设置任何硬性和快速的规则。相反，它只是为读者提供信息。
That said, certain styles may be applied to html to modify viewport behavior. For example, to hide the page scrollbars use:
也就是说，某些样式可以应用于html来修改视口行为。例如，要隐藏页面滚动条使用：
html {
overflow: hidden;
}
You can also apply rules to both html and body for interesting effects; see the following questions for details and examples:
您还可以将规则应用于html和body以获得有趣的效果;有关详细信息和示例，请参阅以下问题：
- What's the difference in applying CSS to html, body, and *?
- 将CSS应用于html，body和*有什么区别？
- Applying a background to <html> and/or <body>
- 将背景应用于和/或
Note that html is not the viewport; the viewport establishes an initial containing block in which html is situated. That initial containing block cannot be targeted with CSS, because in HTML, the root element is html.
请注意，html不是视口;视口建立一个初始包含块，其中包含html。初始包含块不能用CSS作为目标，因为在HTML中，根元素是html。
Note also that, technically, there is no difference between applying properties to html and body that are inherited by default, such as font-family and color.
另请注意，从技术上讲，将属性应用于默认继承的html和body之间没有区别，例如font-family和color。
Last but not least, here is an excellent article that details the differences between html and body in terms of CSS. In summary (quoted from its first section):
最后但并非最不重要的，这是一篇很好的文章，详细介绍了CSS与CSS之间的差异。总结（引自其第一部分）：
- The
htmlandbodyelements are distinct block-level entities, in a parent/child relationship.- html和body元素是父/子关系中不同的块级实体。
- The
htmlelement's height and width are controlled by the browser window.- html元素的高度和宽度由浏览器窗口控制。
- It is the
htmlelement which has (by default)overflow:auto, causing scrollbars to appear when needed.- 它是html元素（默认情况下）溢出：auto，导致滚动条在需要时出现。
- The body element is (by default)
position:static, which means that positioned children of it are positioned relative to thehtmlelement's coordinate system.- body元素（默认情况下）position：static，这意味着它的定位子元素相对于html元素的坐标系定位。
- In almost all modern browsers, the built-in offset from the edge of the page is applied through a
marginon thebodyelement, notpaddingon thehtmlelement.- 在几乎所有现代浏览器中，页面边缘的内置偏移量通过body元素上的边距应用，而不是在html元素上填充。
As the root element, html is more closely associated with the browser viewport than body (which is why it says html has overflow: auto for scrollbars). Note however that the scrollbars are not necessarily generated by the html element itself. By default, it's the viewport that generates these scrollbars; the values of overflow are simply transferred (or propagated) between body, html, and the viewport, depending on which values you set. The details of all this are covered in the CSS2.1 spec, which says:
作为根元素，html与浏览器视口的关联性比body更紧密（这就是为什么它说html有溢出：auto for scrollbars）。但请注意，滚动条不一定由html元素本身生成。默认情况下，它是生成这些滚动条的视口;溢出值只是在body，html和视口之间传输（或传播），具体取决于您设置的值。 CSS2.1规范中包含了所有这些的详细信息，其中说明：
UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.
UA必须将根元素上的“溢出”属性集应用于视口。当根元素是HTML“HTML”元素或XHTML“html”元素，并且该元素具有HTML“BODY”元素或XHTML“body”元素作为子元素时，用户代理必须改为应用'overflow'属性从第一个这样的子元素到视口，如果根元素上的值是“可见的”。用于视口时的“可见”值必须解释为“auto”。传播值的元素必须具有“可见”的“溢出”的使用值。
The last bullet point probably has its roots in the aforementioned topmargin and leftmargin attributes of the body element.
最后一个要点可能源于body元素的上述topmargin和leftmargin属性。
#2
2
If you want to style only the content that'll be displayed, targeting the <body> element saves the style rules an unnecessary level of cascading.
如果您只想设置要显示的内容，则定位元素会将样式规则保存为不必要的级联级别。
Is there a reason you'd want to apply styles to the <title>, <meta>, <script> etc... tags? That would happen by targeting <html>.
您是否有理由将样式应用于