有时我看到人们应用全局css样式html,有时我看到他们应用它们body,原始css和javascript.
这两者有什么不同吗？制作全球css风格的标准是什么？在他们之间挑选时我有什么需要知道的吗？
Bol*_*ock 33
我假设"全局页面样式"在这里指的是诸如字体,颜色和背景之类的东西.
就个人而言,我申请的全球页面样式,在大多数情况下,以body和简单的元素选择(p,h1, h2, h3...,input,img,等).这些元素与向用户呈现HTML页面的内容更密切相关.
我给这理由很简单:表现属性bgcolor,background,text,topmargin,leftmargin和其他人给予的body元素,而不是html元素.这些属性现在转换为各自的CSS规则,级联中的优先级极低:
UA可以选择在HTML源文档中表示表示属性.如果是这样,这些属性将被转换为具有等于0的特定CSS规则,并被视为在作者样式表的开头插入它们.
我知道的大多数(如果不是全部)实现都会body根据它们的HTML等价物将这些实现转换为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.
最后但并非最不重要的是,这是一篇很好的文章,详细介绍了CSS 之间html和bodyCSS 之间的差异.总结(引自其第一部分):
- 所述
html和body元素是不同的块级实体,在父/子关系.- 所述
html元件的高度和宽度是由浏览器窗口控制.- 它是
html(默认情况下)overflow:auto导致滚动条在需要时出现的元素.- body元素(默认情况下)
position:static,这意味着它的定位子html元素相对于元素的坐标系定位.- 在几乎所有的现代浏览器,内置的从页面边缘的偏移是通过应用
margin上的body元素,而不是padding在上html元素.
作为根元素,html更加紧密地与浏览器窗口比相关的body(这就是为什么它说html有overflow: auto对滚动条).但请注意,滚动条不一定由html元素本身生成.默认情况下,它是生成这些滚动条的视口 ; 的值overflow被简单地转移(或传播之间)body,html和视口,这取决于哪些值设置.CSS2.1规范中包含了所有这些的详细信息,其中说明:
UA必须将根元素上的"溢出"属性集应用于视口.当根元素是HTML"HTML"元素或XHTML"html"元素,并且该元素具有HTML"BODY"元素或XHTML"body"元素作为子元素时,用户代理必须改为应用"溢出"属性从第一个这样的子元素到视口,如果根元素上的值是"可见的".用于视口时的"可见"值必须解释为"自动".传播值的元素必须具有"可见"的"溢出"的已使用值.
最后一颗子弹点可能有它的根在上述topmargin与leftmargin该属性body的元素.