是否应在html元素或body元素上设置全局CSS样式?
有时我看到人们将原始CSS和javascript都应用于全局CSS样式html
,有时我看到他们将其应用于body
。
两者之间有什么区别吗?制作全局CSS样式的标准是什么?在它们之间进行选择时,我应该知道什么吗?
回答:
我假设这里的“全局页面样式”是指诸如字体,颜色和背景之类的东西。
就个人而言,我申请的全球页面样式,在大多数情况下,以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
以及body
CSS方面的区别。总结(引自第一节):
- 所述
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
。
以上是 是否应在html元素或body元素上设置全局CSS样式? 的全部内容, 来源链接: utcz.com/qa/420331.html