个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
有时我看到人们将全局 css 样式应用于 html，有时我看到他们将它们应用于 body，同时使用原始 css 和 javascript。
两者有什么区别吗？制作全局css样式的标准是什么？在它们之间进行选择时有什么我应该知道的吗？
最佳答案
我假设这里的“全局页面样式”是指字体、颜色和背景等内容。
就我个人而言，我主要将全局页面样式应用到 body 和简单的元素选择器(p、h1、h2、h3.. .、输入、img 等)。这些元素与向用户呈现 HTML 页面的内容更密切相关。
我的理由很简单:表示属性 bgcolor、background、text、topmargin、leftmargin 和其他元素被赋予了 body 元素，而不是 html 元素。这些属性现在转换为 their respective CSS rules with extremely low precedence in the cascade :
The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet.
我所知道的大多数(如果不是全部)实现都会根据它们的 HTML 等效项将它们转换为 body 上的 CSS 规则。其他如link、alink和vlink会变成a:link、a:active 和 a:visited 规则。
当然，应该注意的是，CSS 本身本身并没有任何语义，因为它本身就是一种样式语言，完全独立于 HTML 的内容结构文档。虽然introduction to CSS2.1涵盖了 HTML 文档样式的基础知识，请注意该部分称自己为非规范性(或信息性)；这意味着它没有为 CSS 实现者设置任何必须遵循的硬性规定。相反，它只是为读者提供信息。
也就是说，某些样式可以应用于 html 以修改视口(viewport)行为。例如，要隐藏页面滚动条，请使用:
html {
overflow: hidden;
}
您还可以将规则应用于 html 和 body 以获得有趣的效果；有关详细信息和示例，请参阅以下问题:
请注意，html 不是视口(viewport)；视口(viewport)建立了一个初始包含 block ，html 位于其中。初始包含 block 不能作为 CSS 的目标，因为在 HTML 中，根元素是 html。
另请注意，从技术上讲，将属性应用于默认继承的 html 和 body 之间没有区别，例如 font-family 和 color。
最后但并非最不重要的一点，这是一个优秀的 article详细说明了 html 和 body 在 CSS 方面的区别。总结(引自其第一部分):
- The
htmlandbodyelements are distinct block-level entities, in a parent/child relationship.- The
htmlelement's height and width are controlled by the browser window.- It is the
htmlelement which has (by default)overflow:auto, causing scrollbars to appear when needed.- The body element is (by default)
position:static, which means that positioned children of it are positioned relative to thehtmlelement's coordinate system.- In almost all modern browsers, the built-in offset from the edge of the page is applied through a
marginon thebodyelement, notpaddingon thehtmlelement.
作为根元素，html 与浏览器视口(viewport)的关联比 body 更紧密(这就是为什么它说 html 有 overflow: auto 用于滚动条)。但是请注意，滚动条不一定由 html 元素本身生成。默认情况下，生成这些滚动条的是视口(viewport)； overflow 的值只是在 body、html 和视口(viewport)之间传输(或传播)，具体取决于您设置的值。所有这些的细节都包含在 CSS2.1 规范中，says :
UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.
最后一个要点可能源于上述 body 元素的 topmargin 和 leftmargin 属性。
关于html - 应该在 html 元素还是 body 元素上设置全局 css 样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6740393/
24
4
0
这个问题已经有答案了: Is there any way to accept only numeric values in a JTextField? (20 个回答) It's possible i
我使用戴尔 XPS M1710。笔记本电脑的盖子、侧面扬声器和前置扬声器都有灯(3 组灯可以单独调节)和鼠标垫下方的灯。在 BIOS 中，我可以更改这些灯的颜色，至少是每个组。另外，我可以在鼠标垫下打
我知道我可以使用 在 iOS 5 中打开设置应用 [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"prefs://"
我有一个 Django 应用程序，我正在尝试为其设置文档。目录结构如下: - doc - project | - manage.py 我已经设置了路径以便 Sphinx 可以看到东西，但是当我尝试使用
我正在使用 768mb ram 运行 centos 5.5。我一直在日志中获取 server reached MaxClients setting, consider raising the MaxC
我在具有以下配置的服务器内运行了 Drupal 安装: StartServers 5 MinSpareServers 5 MaxSpareServers 15 MaxClien
是否可以使用 Microsoft.Web.Administration 包为给定的 location 配置 asp 设置？ 我想以编程方式将以下部分添加到本地 IIS applicationHost.
我一直在阅读为 kube-proxy 提供参数的文档，但没有解释应该如何使用这些参数。我使用 az aks create 创建我的集群使用 azure-cli 程序，然后我获得凭据并使用 kubect
我想知道与在 PHP 中使用 setcookie() 函数相比，在客户端通过 JavaScript 设置一些 cookie 是否有任何明显的优势？我能想到的唯一原因是减少一些网络流量(第一次)。但不是
我有一个按钮可以将 body class 设置为 .blackout 我正在使用 js-cookie设置cookie，下面的代码与我的按钮相关联。 $('#boToggle').on('click'
我有一堆自定义的 HTML div。我将其中的 3 存储在具有 slide 类的 div 中。然后，我使用该幻灯片类调用 slick 函数并应用如下设置: $('.slide').slick({
我正在创建一个应该在 Windows 8(桌面)上运行的应用 我需要: 允许用户使用我的应用启动“文件历史记录”。我需要找到打开“文件历史记录”的命令行。 我需要能够显示“文件历史记录”的当前设置。
我刚买了一台新的 MacBook Pro，并尝试在系统中设置 RVM。我安装了 RVM 并将默认设置为 ➜ rvm list default Default Ruby (for new shells)
由于有关 Firestore 中时间戳行为即将发生变化的警告，我正在尝试更改我的应用的初始化代码。 The behavior for Date objects stored in Firestore
在 ICS 中，网络 -> 数据使用设置屏幕中现在有“限制后台数据”设置。 有没有办法以编程方式为我的应用程序设置“限制后台数据”？ 或 有没有办法为我的应用程序调出具有选项的“数据使用”设置？ 最佳
我正在尝试使用 NextJS 应用程序设置 Jest，目前在 jest.config.js : module.exports = { testPathIgnorePatterns: ["/.n
我最近升级到 FlashDevelop 4，这当然已经将我之前的所有设置恢复到原来的状态。 我遇到的问题是我无法在新设置窗口的哪个位置找到关闭它在方括号、大括号等之前插入的自动空格的选项。 即它会自动
有没有办法以编程方式访问 iPhone/iPod touch 设置？ 谢谢。比兰奇 最佳答案 大多数用户设置可以通过读取存储在 /User/Library/Preferences/ 中的属性列表来访问
删除某些值时，我需要选择哪些设置来维护有序队列。我创建了带有自动增量和主键的 id 的表。当我第一次插入值时，没问题。就像 1,2,3,4,5... 当删除某些值时，顺序会发生变化，例如 1,5,3.
我正在尝试设置示例 Symfony2 项目，如此处所示 http://symfony.com/doc/current/quick_tour/the_big_picture.html 在访问 confi
我是一名优秀的程序员,十分优秀！