所以我注意到,当我从html
选择器中删除background
或background-color
属性时,当body
选择器存在background
或background-color
属性时,身体的背景占据了整个屏幕。
但是,当为html
标记设置了background
或background-color
属性时,正文的background
属性仅影响正文占用的屏幕部分,即正文的内容,而不是整个屏幕。
这是什么原因(错误,决定...(,我现在必须同时设置html
和body
的背景吗?谢谢。
这是设计使然。
根据 W3C 颜色和背景页面,
但是,对于 HTML 文档,我们建议作者指定 BODY 元素而不是 HTML 元素的背景。对于根元素是 HTML "HTML" 元素或 XHTML "html" 元素的文档,该元素的计算值为"背景色"的"透明"和"背景图像"的计算值为"无",用户代理在为画布绘制背景时必须改用该元素的第一个 HTML "BODY" 元素或 XHTML "body" 元素子元素的背景属性的计算值, 并且不得为该子元素绘制背景。
或者,tl;dr:不考虑<html>
的背景,只设置正文的样式,将导致背景被分配给整个文档。这是建议。
原因可能是出于兼容性原因。很久以前,<body>
元素也扮演了画布的角色,<html>
元素实际上没有任何自己的属性。因此,您可以将bgcolor
属性分配给<body>
(但不能分配给<html>
(,这将成为画布背景。
你最后一个问题的答案是:只有当你愿意的时候。在大多数情况下,根本不设置<html>
样式就足够了。除非在特殊情况下,例如,如果您想要在身体周围使用不同颜色的边缘,正如您所注意到的。
仅具有<body>
背景的示例:
body {background:lime}
Hello world
具有不同背景的<html>
和<body>
示例:
html {background:orange}
body {background:lime}
Hello world