Question

有时我会看到人们将全局CSS样式应用于html，有时我会看到它们将它们应用于body，同时使用原始css和javascript。

两者之间有什么不同吗？制作全球css风格的标准是什么？在他们之间挑选时我有什么需要知道的吗？

Answer 1

我假设“全局页面样式”在这里指的是字体，颜色和背景等内容。

就个人而言，我将全局页面样式应用于body和简单元素选择器（p，h1, h2, h3...，input，{{1}等等）。这些元素与向用户呈现HTML页面的内容关系更密切。

我的理由很简单：表示属性img，bgcolor，background，text，topmargin和其他属性被赋予{{ 1}}元素，而不是leftmargin元素。这些属性现在转换为their respective CSS rules with extremely low precedence in the cascade：

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

我知道的大多数（如果不是全部）实现都会根据它们的HTML等价物将这些实现转换为body上的CSS规则。 html，body和link等其他内容将分别成为alink，vlink和a:link规则。

当然，应该注意的是CSS本身并没有任何语义本身，因为它本身就是一种样式语言，它完全独立于HTML的内容结构。文献。虽然introduction to CSS2.1涵盖了HTML文档样式的基础知识，但请注意该部分称其为非规范性（或提供信息）;这意味着它没有为CSS实现者设置任何硬性和快速的规则。相反，它只是为读者提供信息。

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

a:visited

您还可以对html和html { overflow: hidden; }应用规则以获得有趣的效果;有关详细信息和示例，请参阅以下问题：

请注意，html不是视口;视口建立了body所在的初始包含块。初始包含块不能以CSS为目标，因为在HTML中，根元素是html。

另请注意，从技术上讲，将属性应用于默认继承的html和html与html和body之间没有区别。

最后但并非最不重要的是，这里有一个很好的article，详细说明了font-family和color之间在CSS方面的差异。总结（引自其第一部分）：

html和body元素是不同的块级实体，位于   父母/子女关系。

html元素的高度和宽度由浏览器窗口控制。

导致body元素（默认情况下）html   滚动条在需要时显示。

body元素是（默认情况下）html，这意味着   定位它的孩子   相对于overflow:auto定位   元素的坐标系。

在几乎所有现代浏览器中，内置偏移距离边缘   页面是通过position:static启用的   html元素，而不是margin   body元素。

作为根元素，padding与浏览器视口关联得比html更紧密（这就是为什么它表示html为滚动条有body的原因。但请注意，滚动条不一定由html元素本身生成。默认情况下，生成这些滚动条的是 viewport ; overflow: auto的值只是在html，overflow和视口之间传输（或传播），具体取决于您设置的值。所有这些的详细信息都包含在CSS2.1规范中，says：

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

最后一个要点可能源于body元素的上述html和topmargin属性。

Answer 2

如果您只想设置要显示的内容的样式，则定位<body>元素会将样式规则保存为不必要的级联级别。

您是否有理由将样式应用于<title>，<meta>，<script>等标签？这可以通过定位<html>来实现。

是应该在html元素还是body元素上设置全局css样式？

2 个答案: