草庐IT

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

coder 2023-08-01 原文

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

两者有什么区别吗?制作全局css样式的标准是什么?在它们之间进行选择时有什么我应该知道的吗?

最佳答案

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

就我个人而言,我主要将全局页面样式应用到 body 和简单的元素选择器(ph1、h2、h3.. .输入img 等)。这些元素与向用户呈现 HTML 页面的内容更密切相关。

我的理由很简单:表示属性 bgcolorbackgroundtexttopmarginleftmargin 和其他元素被赋予了 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 规则。其他如linkalinkvlink会变成a:linka:activea:visited 规则。

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

也就是说,某些样式可以应用于 html 以修改视口(viewport)​​行为。例如,要隐藏页面滚动条,请使用:

html {
    overflow: hidden;
}

您还可以将规则应用于 htmlbody 以获得有趣的效果;有关详细信息和示例,请参阅以下问题:

请注意,html 不是视口(viewport);视口(viewport)建立了一个初始包含 block ,html 位于其中。初始包含 block 不能作为 CSS 的目标,因为在 HTML 中,根元素是 html

另请注意,从技术上讲,将属性应用于默认继承的 htmlbody 之间没有区别,例如 font-familycolor

最后但并非最不重要的一点,这是一个优秀的 article详细说明了 htmlbody 在 CSS 方面的区别。总结(引自其第一部分):

  • The html and body elements are distinct block-level entities, in a parent/child relationship.
  • The html element's height and width are controlled by the browser window.
  • It is the html element 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 the html element's coordinate system.
  • In almost all modern browsers, the built-in offset from the edge of the page is applied through a margin on the body element, not padding on the html element.

作为根元素,html 与浏览器视口(viewport)的关联比 body 更紧密(这就是为什么它说 htmloverflow: auto 用于滚动条)。但是请注意,滚动条不一定由 html 元素本身生成。默认情况下,生成这些滚动条的是视口(viewport)overflow 的值只是在 bodyhtml 和视口(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 元素的 topmarginleftmargin 属性。

关于html - 应该在 html 元素还是 body 元素上设置全局 css 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4565942/

有关html - 应该在 html 元素还是 body 元素上设置全局 css 样式?的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时,我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb,在下面的代码片段中:moduleNetclass

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解,字段“Email”是一个节点,因此调用must_have_css绝对有效!我做错了什么? 最佳答案 通过JonasNicklas得到了答案:No

  5. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本,我按照提供的说明安装了arubagem。它在我的Gemfile中,我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作,我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了,但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  6. ruby - 如何使用文字标量样式在 YAML 中转储字符串? - 2

    我有一大串格式化数据(例如JSON),我想使用Psychinruby​​同时保留格式转储到YAML。基本上,我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是,当我使用YAML.dump时,它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量?解

  7. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量? - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用? 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  8. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  9. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式? - 2

    我正在为一个项目制作一个简单的shell,我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止,我一直在使用CSV::parse_line,将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  10. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

随机推荐