如果我将css文件放在<head>或<body>中有什么区别？

Question

通常css文件放在里面<head></head>,如果我把它放在里面<body></body>,它会有什么区别？

Answer 1

只是为了补充jdelStrother提到的有关w3规范和ARTstudio关于浏览器渲染的内容.

建议使用,因为当你在<body>启动之前声明了CSS 时,你的样式实际上已经加载了.因此,用户很快就会看到屏幕上出现的内容(例如背景颜色).如果没有,用户在CSS到达用户之前会看到空白屏幕一段时间.

此外,如果您将样式保留在某处,<body>则在解析声明的样式时,浏览器必须重新呈现页面(加载时新旧).

是的,当然在HTML5中没关系.但就渲染而言,它可能会更慢,因为浏览器重新渲染页面,就像我提到的那样. (10认同)
是的,毫无疑问.我刚刚在这里添加了它,以便那些刚读完已接受的答案的人不会错过它.:) (4认同)
@Vilx那是错误的信息!`link`和`style`不得出现在正文中,除非它们是作用域(样式)或声明属性`itemprop`(link). (3认同)
@Christoph这不是事实，`style`是html5和html4.1中的[flow元素]（https://www.w3.org/TR/html5/dom.html#flow-content）不受限制），可以放在体内。 (2认同)

Answer 2

最新版本的HTML规范现在允许<style>标签在body元素中. https://www.w3.org/TR/html5/dom.html#flow-content 此外scoped,以前style在其中包含标记的先决条件的属性body现已过时.

这意味着,您可以在style任何地方使用标记,唯一的影响是,一旦浏览器在页面树中进一步向下命中样式,可能会重排/重新绘制页面性能.

过时的答案:

根据w3规范,<style>不允许使用该标记<body>.(当然,您可以<div style="color:red">根据需要应用内联样式,但通常认为样式和内容的分离很差)

这不是真的,`<style>`是html 5和4.1中的[flow element](https://www.w3.org/TR/html5/dom.html#flow-content),可以放入身体(与所有其他流动元素一样). (3认同)

Answer 3

将CSS放在body中意味着稍后加载它.这是一种让浏览器开始更快地绘制界面的技术(即,它删除了阻塞步骤).这对于SmartPhone的用户体验非常重要.

我会尽力保持一个小css <head>,我将其余部分移到底部.例如,如果一个页面使用JQuery UI CSS,我总是在它的底部移动它<body>,就在链接到JQuery javascript之前.至少,可以绘制所有非Jquery项.

Answer 4

Head专为(引用W3C)而设计:

"有关当前文档的信息,例如标题,可能对搜索引擎有用的关键字以及其他不被视为文档内容的数据 "

请参阅HTML文档的全局结构.由于CSS不是文档内容,因此它应该在头脑中.

此外,每个其他Web开发人员都希望在那里看到它,所以不要把它放在体内,即使它有效!

你应该放在体内的唯一CSS是内联CSS,尽管我通常避免使用内联样式.

我完全听从你说的话.但是你如何处理你有很多页面的情况,其中一些页面包含来自单独文件的内容(在我的情况下,是一个.NET Razor部分页面),每当包含该文件时,还应该链接一个特定的样式表？链接在每个includ_ing_页面的标题中,或链接在includ_ed_页面的主体中.前者符合"头部中的css",而后者符合"一次写入". (3认同)