应该在html元素还是body元素上设置全局css样式？ [英] Should global css styles be set on the html element or the body element?

问题描述

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

两者之间有什么区别吗？哪个是使全局css风格的标准？

解决方案

我假设全局页面样式在这里指的是事物例如字体，颜色和背景。

就个人而言，我应用全局页面样式，大部分是 body 和简单元素选择器（ p ， h1，h2，h3 ... ，输入， img 等）。这些元素与向用户呈现HTML页面的内容更密切相关。

我的理由很简单：呈现属性 bgcolor ，背景，文本， topmargin html <$ c>，<$ c>， leftmargin / code>元素。这些属性现在已转换为各自的CSS规则，级联中的优先级极低：

UA可以选择尊重HTML源文档中的演示属性。如果是，这些属性被转换为特定等于0的相应CSS规则，并被视为在作者样式表的开头插入。

如果不是所有的实现，我知道的大多数将转换这些CSS规则在 body ，基于他们的HTML等效。其他例如链接， alink 和 vlink code> a：link ， a：active 和 a：visited

当然，应该注意的是CSS本身实际上并没有任何语义本身，因为它是一个样式语言本身，它完全独立于HTML文档的内容结构。尽管 CSS2.1简介介绍了HTML文档样式的基本知识，但请注意，该部分自称非规范性（或信息性）;这意味着它没有设置任何硬的和快速的规则CSS实现者遵循。

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

  html {
 overflow：hidden ; 
} 
  

您也可以将规则应用于 html 和 body 用于有趣的效果;请参阅以下问题的详细信息和示例：

• 将CSS应用到html，body和*有什么区别


• 将背景应用于< html> < body>

注意 html 不是视口;视口建立了 html 所在的初始包含块。由于在HTML中，根元素是 html 。

注意也不能用CSS定位初始包含块从技术上讲，在应用属性到默认情况下继承的 html 和 body 之间没有区别， code> font-family 和 color 。

，这里是一个很好的文章，详细介绍了 html 和 body 。总结（从第一部分引述）：

• html 和 body 元素是不同的块级实体，在
  父/子关系中。


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


• 它是 html 元素（默认） overflow：auto ，导致
  滚动条在需要时出现。


• body元素是（默认） position：static ，这意味着
  定位的孩子是
  相对于 html
  元素的坐标系。


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







b $ b

作为根元素， html 与浏览器视口的关联性比 body 是为什么它对于滚动条说 html 有 overflow：auto ）。注意，滚动条不一定由 html 元素本身生成。默认情况下，它是生成这些滚动条的视口; overflow 的值只是在 body ，<$ c>之间传递（或 $ c> html 和视口，具体取决于您设置的值。所有这些的详细信息都在CSS2.1规范中介绍，说：

UA必须将根元素上的overflow属性集应用于视口。当根元素是HTMLHTML元素或XHTMLhtml元素，并且该元素具有作为子代的HTMLBODY元素或XHTMLbody元素时，用户代理必须改为应用overflow属性从第一个这样的子元素到视口，如果根元素上的值是'visible'。用于视口的可见值必须解释为自动。传播值的元素必须具有visible的overflow的已使用值。

最后一个项目符号可能具有其根源于正文的上述 topmargin 和 leftmargin 属性元素。

Sometimes I see people apply global css styles to html, sometimes I see them apply them to body, with both raw css and 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?

解决方案

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.

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, which have extremely low precedence in the cascade:

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.

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.

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.

That said, certain styles may be applied to html to modify viewport behavior. For example, to hide the page scrollbars use:

html {
    overflow: hidden;
}

You can also apply rules to both html and body for interesting effects; see the following questions for details and examples:

• What's the difference in applying CSS to html, body, and *?
• 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.

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.

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):

• The html and body elements are distinct block-level entities, in a parent/child relationship.
• The html element's height and width are controlled by the browser window.
• It is the html element which has (by default) overflow:auto, causing scrollbars to appear when needed.
• The body element is (by default) position:static, which means that positioned children of it are positioned relative to the html element's coordinate system.
• In almost all modern browsers, the built-in offset from the edge of the page is applied through a margin on the body element, not padding on the html element.

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:

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'.

The last bullet point probably has its roots in the aforementioned topmargin and leftmargin attributes of the body element.

这篇关于应该在html元素还是body元素上设置全局css样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！