是应该在html元素还是body元素上设置全局css样式？
[英]Should global css styles be set on the html element or the body element?
问题描述
有时我看到人们将全局css样式应用于html ，有时我看到它们将它们应用于body ，同时包含原始css和javascript。
这两者有什么不同吗？ 制作全球css风格的标准是什么？ 在他们之间挑选时我有什么需要知道的吗？
2 个解决方案
解决方案1
32 已采纳 2010-12-30 20:20:44
我假设“全局页面样式”在这里指的是诸如字体，颜色和背景之类的东西。
就个人而言，我在大多数情况下将全局页面样式应用于body和简单元素选择器（ p ， h1, h2, h3... ， input ， img等）。 这些元素与向用户呈现HTML页面的内容更密切相关。
我的理由很简单：表示属性bgcolor ， background ， text ， topmargin ， leftmargin和其他属性被赋予body元素，而不是html元素。 这些属性现在转换为各自的CSS规则，级联中的优先级极低 ：
UA可以选择在HTML源文档中表示表示属性。 如果是这样，这些属性将被转换为具有等于0的特定CSS规则，并被视为在作者样式表的开头插入它们。
我知道的大多数（如果不是全部）实现都会根据它们的HTML等价物将这些实现转换为body上的CSS规则。 其他如link ， alink和vlink将分别成为a:link ， a:active和a:visited规则。
当然，应该注意的是CSS本身并没有真正具有任何语义，因为它本身就是一种样式语言，它完全独立于HTML文档的内容结构。 尽管CSS2.1的介绍涵盖了HTML文档样式的基础知识，但请注意该部分称其为非规范性（或信息性）; 这意味着它没有为CSS实现者设置任何硬性和快速的规则。 相反，它只是为读者提供信息。
也就是说，某些样式可以应用于html来修改视口行为。 例如，要隐藏页面滚动条使用：
html {
overflow: hidden;
}
您还可以将规则应用于html和body以获得有趣的效果; 有关详细信息和示例，请参阅以下问题：
请注意， html不是视口; 视口建立一个初始包含块，其中包含html 。 初始包含块不能用CSS作为目标，因为在HTML中，根元素是html 。
另请注意，从技术上讲，将属性应用于默认继承的html和body之间没有区别，例如font-family和color 。
最后但并非最不重要的，这里是一个很好的文章 ，详细描述之间的差异html和body在CSS的条款。 总结（引自其第一部分）：
html和body元素是父/子关系中不同的块级实体。html元素的高度和宽度由浏览器窗口控制。- 它是
html元素（默认情况下）overflow:auto，导致滚动条在需要时出现。- body元素（默认情况下）
position:static，这意味着它的定位子元素相对于html元素的坐标系定位。- 在几乎所有现代浏览器中，页面边缘的内置偏移量通过
body元素上的margin应用，而不是在html元素上padding。
作为根元素， html与浏览器视口的关系比body更紧密（这就是为什么它说html有overflow: auto for scrollbars）。 但请注意，滚动条不一定由html元素本身生成。 默认情况下，它是生成这些滚动条的视口 ; overflow值只是在body ， html和视口之间传输（或传播 ），具体取决于您设置的值。 CSS2.1规范中包含了所有这些的详细信息，其中说明 ：
UA必须将根元素上的“溢出”属性集应用于视口。 当根元素是HTML“HTML”元素或XHTML“html”元素，并且该元素具有HTML“BODY”元素或XHTML“body”元素作为子元素时，用户代理必须改为应用“溢出”属性从第一个这样的子元素到视口，如果根元素上的值是“可见的”。 用于视口时的“可见”值必须解释为“自动”。 传播值的元素必须具有“可见”的“溢出”的使用值。
最后一个要点可能源于body元素的上述topmargin和leftmargin属性。
解决方案2
2 2010-12-30 20:31:02
如果您只想设置要显示的内容，则定位<body>元素会将样式规则保存为不必要的级联级别。
您是否有理由将样式应用于<title> ， <meta> ， <script> etc ...标签？ 这可以通过定位<html> 。
我应该在body或html元素上设置默认字体大小吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.