在CSS中如何为`<html>`元素应用样式？

Question

在CSS中如何为`<html>`元素应用样式？

31

有人能解释一下为什么我们可以为元素html设置样式吗？与body有什么区别？

我通常看到教程和多个网站使用body而不是html，只有在使用YUI 3：CSS重置时才发现这一点，因为更改body中的背景颜色没有起作用。编辑：事实上，我还没有找到关于这个问题的原因，当我添加reset.css时，背景变成了白色，当我将其删除后，背景恢复正常。但Chrome检查器显示背景是正常的。顺便说一句，这已经离题了。 :p
编辑2：罪魁祸首是文档类型。不知何故，它使得css-reset中的html样式在我的样式表中的body样式之后呈现。也许我应该提出一个关于此问题的问题。

文档类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

- Diogo Gomes

你应该能够更改<body>元素的背景；我怀疑你只是在拼写或语法方面犯了错误。 - ewall

肯定可以使用<body>元素更改背景颜色。这就是它的作用！ - dscher

6个回答

12

我们之所以可以样式化html元素，是因为它和其他任何DOM元素一样。所有的DOM元素都可以被样式化成它们本身并非的东西，比如一个容器。看这个例子：

<html><body>This is my page.</body></html>

使用CSS将body限制在80%的宽度，为body设置边框并为html设置不同的背景颜色（创建“离线页面”效果）是完全可以接受的，保持标记语言的语义完整，而不需要使用div混乱。

这里有一个我发现的技巧，可以在屏幕上水平和垂直地居中容器，而不需要使用大量的div或表格，甚至不需要知道居中容器的大小。

html {
  display:table;
  width:100%;
  height:100%;
}
body {
  display:table-cell;
  vertical-align:middle;
}
body > div {
  # "shrink wraps" the div so you don't have to specify a width.
  # there's probably a better way to do precisely that, but this works.
  display:table; 
  margin:0 auto; # center the div
}

- Tor Valamo

它使用HTML元素的样式。 - Diogo Gomes

6

没问题，这是一个关于如何给HTML元素添加样式的示例。 - Tor Valamo

4

您可以为 html 元素设置样式（甚至可以像这样设置 head, title { display: block; }），但浏览器支持不太好（如果我没记错，Internet Explorer <8 有问题）。

- Quentin

2

问题出在哪里？我的意思是，“渲染”那个CSS的正确方式是什么？ - Diogo Gomes

2

问题就像“不允许您在body之外设置样式，而且对于某些方式的body样式也不太满意”...如果我没记错的话。 - Quentin

2

关于正确的方法——与应用于任何其他元素的方式相同。头部和标题默认为 display: none。它们仍然是 DOM 的一部分，（理论上）可供样式化。如果我的时间记忆没有出错，我曾经在 Mozilla 是自己的浏览器时尝试将 <title> 显示在视口中。 - Quentin

2

简单来说，<html>并不是一个可见元素，它包含了语义化的部分（例如<head>）和展示数据的部分（<body>）。

而<body>则是一个可见元素的块，因此可以给它设置展示样式。

但有些情况下人们会对<html>元素应用样式：(a) 因为其所有子元素都会继承该样式，(b) 在一些特殊情况下，比如Jamie Dixon提到的滚动条技巧。

- ewall

追求严谨：那是<head>，不是<header>。 - Syntactic

0

我不相信你可以这样做，但是对于你来说，样式化<body>应该是可行的。

- Owen Orwell

很奇怪，在我的项目中它不起作用，但在专门为此创建的测试页面上，它却可以正常工作。我甚至已经删除了大部分页面和CSS。 - Diogo Gomes

0

HTML 是整个文档的包含元素，它包含了 <body> 元素，这是浏览器渲染的内容，以及 <head> 元素，其中包含有关您正在查看的页面/文档的元信息。实际上，能够为 html 元素设置样式没有任何用处，因为它不会被浏览器渲染。

但是，它可以用于构建 CSS 选择器（例如：html div.dataView { color: red }）。

- ChrisR

1

请问能否对这个答案的问题进行详细说明？我渴望学习/了解 :) - ChrisR

3

可能是因为您两次使用了“body”而不是“html”，这意味着该语句不真实：“无法样式化<body>元素，因为浏览器不会呈现它”。 - cjk

糟糕...你说得太对了...我至少读了四遍...谢谢澄清！ - ChrisR

3

可能是因为你可以给HTML元素添加样式（正如其他答案所指出的），这也使得第一段中的其余内容都是错误的。 - Quentin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jamie Dixon · Accepted Answer

很多人经常会给HTML元素添加样式，因为它确实会影响页面的呈现方式。

你最有可能看到的样式是：

html,body{
   min-height:101%;
}

这是用来确保像Firefox这样的浏览器中滚动条始终显示在页面上。这可以防止在长页面和短页面之间切换时页面左右移动。