全局的CSS样式应该设置在html元素还是body元素?

有时我看到人们将全局CSS样式应用于html ,有时候我会看到他们将这些样式应用于body ,同时使用raw css和javascript。

两者有什么区别? 制定全球css风格的标准是什么? 有什么我应该知道时,他们之间的select?

我假设“全球页面样式”在这里是指诸如字体,颜色和背景的东西。

就个人而言,我将全局页面样式,大部分应用于body和简单元素select器( ph1, h2, h3...inputimg等)。 这些元素与HTML页面内容呈现给用户的关系更密切。

我的理由很简单:为body元素,而不是html元素提供了属性bgcolorbackgroundtexttopmarginleftmargin和其他属性。 这些属性现在转换为各自的CSS规则,级联中的优先级非常低 :

UA可以select在HTML源文件中表示属性。 如果是这样的话,这些属性将被转换为相应的CSS规则,其特异性等于0,并且被视为在作者样式表开始时被插入。

大部分(如果不是全部)我知道的实现将基于它们的HTML等价物将它们转换为body CSS规则。 其他如linkalinkvlink将分别成为a:linka:activea:visited规则。

当然,应该注意的是,CSS本身并没有真正的语义,因为它本身就是一种与HTML文档内容结构完全分离的样式语言。 尽pipeCSS2.1的介绍涵盖了HTML文档样式的基础知识,但请注意,该部分自称是非规范性的(或者是信息性的)。 这意味着它没有为CSS实施者遵循任何硬性规定。 相反,它只是为读者提供信息。

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

 html { overflow: hidden; } 

您也可以将规则应用于htmlbody以获得有趣的效果; 有关详细信息和示例,请参阅以下问题:

  • 将CSS应用于html,body和*有什么区别?
  • 将背景应用于<html>和/或<body>

请注意, html不是视口; 该视口build立了html所在的初始包含块。 该初始包含块不能用CSS来定位,因为在HTML中,根元素是html

还要注意的是,从技术上来说,将属性应用到默认情况下inheritance的htmlbody之间没有区别,如font-familycolor

最后但并非最不重要的是,这里有一篇很好的文章 ,详细介绍了htmlbody之间在CSS方面的区别。 总结(从第一部分引用):

  • 在父/子关系中, htmlbody元素是不同的块级实体。
  • html元素的高度和宽度由浏览器窗口控制。
  • 它是(默认情况下) overflow:autohtml元素overflow:auto ,导致滚动条在需要的时候出现。
  • body元素是(默认情况下) position:static ,这意味着它的定位子元素相对于html元素的坐标系被定位。
  • 在几乎所有的现代浏览器中,页面边缘的内置偏移量都通过body元素的margin来应用,而不是在html元素上进行padding

作为根元素, html与浏览器视口的关系比body更紧密(这就是为什么它说htmloverflow: auto滚动条的overflow: auto )。 但请注意,滚动条不一定是由html元素本身生成的。 默认情况下,它是生成这些滚动条的视口 ; overflow的值只是在bodyhtml和视口之间传递(或传播 ),取决于你设置的值。 所有这一切的细节都在CSS2.1规范中进行了说明,其中说 :

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

最后一个要点可能在于上述的body元素的topmarginleftmargin属性。

如果只想要显示将要显示的内容,则定位<body>元素会将样式规则保存为不必要级别的级联。

是否有一个原因,你想要风格应用<title><meta><script> etc …标签? 这将通过定位<html>