小编典典

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

html

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

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


阅读 659

收藏
2020-05-10

共1个答案

小编典典

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

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

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

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

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

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

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

html {
    overflow: hidden;
}

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

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

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

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

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

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

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

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

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

2020-05-10