如果将css文件放入<head>或<body>有什么区别?


155

通常,将css文件放入其中<head></head>,如果我将其放入里面<body></body>,会有什么不同?

Answers:


116

只是要补充jdelStrother关于w3规范和ARTstudio关于浏览器渲染的内容。

建议这样做,因为在<body>启动之前声明了CSS 时,您的样式实际上已经加载了。因此,用户很快就会看到一些东西出现在他们的屏幕上(例如背景色)。如果没有,在CSS到达用户之前,用户会看到空白屏幕一段时间。

此外,如果您将样式保留在中<body>,则在解析声明的样式后,浏览器必须重新渲染页面(加载时为新旧)。


10
是的,在HTML5中当然可以。但是在渲染方面,它可能会变慢,因为浏览器会像我提到的那样重新渲染页面。
毛里求斯2012年

4
是的,毫无疑问。我只是在这里添加了它,这样,阅读已接受答案的人们就不会错过它。:)
Vilx- 2012年

3
@Vilx这是错误的信息!link并且style除非它们是范围(样式)或itemprop声明了属性(链接),否则不得出现在主体中。
Christoph

2
@Christoph这是不正确的,它是html5和html4.1中styleflow元素(即使它没有作用域),并且可以放在正文中。
Kpym '18年

1
@Kpym您晚了3年;-)但是您是正确的,样式现在是流程元素,并且该scoped属性已过时。
Christoph

40

HTML规范的最新版本现在允许<style>在body元素中使用标记。 https://www.w3.org/TR/html5/dom.html#flow-contentscoped以前必须在style标签中添加标签 的属性body现在也已过时。

这意味着,您可以在所需的style任何位置使用该标记,唯一的含义是,一旦浏览器在页面树中击中样式之后,由于可能的重排/重画而导致页面性能下降。

过时的答案:

根据w3规范,该<style>标签内不允许使用该标签<body>。(当然,您可以<div style="color:red">根据需要通过应用内联样式,但是通常认为样式和内容之间的分隔不佳)


3
这是不正确的,它<style>是html 5和4.1中的流元素,可以放在主体中(与所有其他流元素一样)。
Kpym '18年

1
我的+1,让您的答案保持最新!
本杰明

14

将CSS放在主体中意味着它会在以后加载。它是一种使浏览器更快地开始绘制界面的技术(即,它消除了阻塞步骤)。这对于智能手机上的用户体验很重要。

我会尽力将一个小CSS放在上,<head>然后将其余的放在底部。例如,如果页面使用JQuery UI CSS,我总是将其移动到底部<body>,就在指向JQuery javascript的链接之前。至少,所有非Jquery项目都可以绘制。


7

头设计用于(引用W3C):

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

请参见HTML文档全局结构。由于CSS不是文档内容,因此应该放在最前面。

另外,每个其他Web开发人员都希望能在那里看到它,因此即使它可以工作,也不要通过将其放在主体中来混淆事情!

您应该放在正文中的唯一CSS是内联CSS,尽管我通常避免使用内联样式。


3
我完全遵循你的意思。但是,当页面很多时,其中一些包含来自单独文件的内容(在我的情况下是.NET Razor部分页面),并且无论何时包含该文件,都应链接特定的样式表,该如何处理?可以在每个includ_ing_页面的页眉中链接,也可以在includ_ed_页面的正文中链接。前者符合“标头中的css”,而后者则符合“一次写入”。
OutstandingBill

4

标准(HTML 4.01:style元素)明确指定仅在head标签内允许使用style标签。如果将样式标签放在body标签中,浏览器将尽可能尝试尽力而为。

如果指定严格的文档类型,浏览器可能会忽略主体中的样式标签。我不知道是否有任何当前的浏览器会这样做,但是我不会指望所有将来的版本都可以如此轻松地放置样式元素。


1
@Pacerier:在HTML5 style中,如果标签具有scoped属性,则允许它们在体内。
Guffa

天哪,每个人都在给矛盾的答案:stackoverflow.com/questions/4957446/...
Pacerier

2
@Pacerier:那是因为该评论中的信息不完整。您可以在body标签中包含样式标签,但前提是它们具有一定范围的属性。以下是指定样式标签的标准文档:dev.w3.org/html5/spec-preview/the-style-element.html
Guffa 2014年

根据W3的作用域属性仅受firefox支持,这有什么意义?
JSON


1

除了较早的答案之外,尽管在现代浏览器中可能会在样式元素中放置样式代码块(尽管仍然无法正确实现),但始终存在危险,尤其是对于较旧的浏览器,浏览器会将代码呈现为文本除非样式部分包含在CDATA部分中。

当然,除了内联样式之外,将其放入元素中的另一件事是,由于它不符合W3C HTML / XHTML规范,因此,在主体中包含该页面的任何页面都将在W3C验证器上失败。如果您所有的代码都有效,查找意外的显示问题总是很容易,从而更容易发现错误。无效的HTML元素会对代码中超出其位置的所有元素的呈现产生不利影响,因此,如果元素在不应包含的位置,则可能会产生意想不到的效果,因为当浏览器发现无效元素时,它只是最好就其显示方式进行猜测,不同的浏览器在呈现方式上可能会做出不同的决定。

无论您使用过渡文档类型还是严格文档类型,根据(X)HTML规范,该文档类型仍然无效。


0

通过将样式放在正文中,您实际上会打败使用CSS的目的。重点是将内容与表示(和功能)分开。这样,对样式的任何更改都可以在样式表中完成,而不是在内容中完成。使用内联样式方法后,每个具有内联样式的页面都需要一个一个地更改。繁琐且冒险,因为您可能会错过一页或三页或十页。

使用样式表,您只需要更改样式表即可;更改会自动传播到链接到样式表的每个HTML页面。

neonble的观点也是另一个重要原因。如果通过添加CSS内联来弄乱HTML,则呈现会成为问题。HTML不会向您的代码抛出异常。相反,它会消失并以最佳方式呈现并继续前进。

通过使用样式表遵守Web标准,可以打造一个更好的网站。当您因为页面上的内容与所需的方式不完全而需要帮助时,将CSS放在头顶而不是正文的位置,可以使您自己以及向您寻求帮助的任何人都可以更好地进行故障排除。


2
我不明白你在说什么。“ 一旦您使用了内联样式方法” -谁在这里谈论使用内联样式?问题是css文件
TJ

0

两个矛盾的答案:

在链接标签的MDN 页面上:

<link>元件可以在任一发生<head><body> 元件,这取决于它是否有链路类型,它是身体-OK。例如,样式表链接类型为body-ok,因此<link rel="stylesheet">在主体中允许使用a 。然而,这不是最佳实践。将您的<link>元素与身体内容分开,放在脑海中更有意义。

来自CSS权威指南(2017年第4版)第10页

要成功加载外部样式表,必须将链接放置在head元素内部,但不得放置在任何其他元素中。


-1

区别是。页面的加载是异步的,因此,如果您具有外部样式表,则它将在到达链接标签时立即加载css文件,这就是为什么最好放在顶部的原因。


-1

会有什么不同?

优点:有时更容易在某些地方应用某些属性,尤其是在动态生成代码的情况下(例如通过php构建,并且每个动态调整大小的列表都需要自己的类...例如用于转换的项目计时)。

缺点:速度稍慢,在遥远的将来可能无法正常工作。

我对此的一般看法:不必这样做,您不必这样做,但是如果您必须这样做,则不要为它睡不着觉。


-3

将其<style>置于主体中,可与所有现代浏览器完美配合。

我一直在eBay中使用它。

如果可行,请不要踢它。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.