Answers:
只是要补充jdelStrother关于w3规范和ARTstudio关于浏览器渲染的内容。
建议这样做,因为在<body>
启动之前声明了CSS 时,您的样式实际上已经加载了。因此,用户很快就会看到一些东西出现在他们的屏幕上(例如背景色)。如果没有,在CSS到达用户之前,用户会看到空白屏幕一段时间。
此外,如果您将样式保留在中<body>
,则在解析声明的样式后,浏览器必须重新渲染页面(加载时为新旧)。
link
并且style
除非它们是范围(样式)或itemprop
声明了属性(链接),否则不得出现在主体中。
scoped
属性已过时。
HTML规范的最新版本现在允许<style>
在body元素中使用标记。 https://www.w3.org/TR/html5/dom.html#flow-contentscoped
以前必须在style
标签中添加标签
的属性body
现在也已过时。
这意味着,您可以在所需的style
任何位置使用该标记,唯一的含义是,一旦浏览器在页面树中击中样式之后,由于可能的重排/重画而导致页面性能下降。
过时的答案:
根据w3规范,该<style>
标签内不允许使用该标签<body>
。(当然,您可以<div style="color:red">
根据需要通过应用内联样式,但是通常认为样式和内容之间的分隔不佳)
将CSS放在主体中意味着它会在以后加载。它是一种使浏览器更快地开始绘制界面的技术(即,它消除了阻塞步骤)。这对于智能手机上的用户体验很重要。
我会尽力将一个小CSS放在上,<head>
然后将其余的放在底部。例如,如果页面使用JQuery UI CSS,我总是将其移动到底部<body>
,就在指向JQuery javascript的链接之前。至少,所有非Jquery项目都可以绘制。
头设计用于(引用W3C):
“有关当前文档的信息,例如其标题,可能对搜索引擎有用的关键字以及不视为文档内容的其他数据”
请参见HTML文档的全局结构。由于CSS不是文档内容,因此应该放在最前面。
另外,每个其他Web开发人员都希望能在那里看到它,因此即使它可以工作,也不要通过将其放在主体中来混淆事情!
您应该放在正文中的唯一CSS是内联CSS,尽管我通常避免使用内联样式。
标准(HTML 4.01:style元素)明确指定仅在head标签内允许使用style标签。如果将样式标签放在body标签中,浏览器将尽可能尝试尽力而为。
如果指定严格的文档类型,浏览器可能会忽略主体中的样式标签。我不知道是否有任何当前的浏览器会这样做,但是我不会指望所有将来的版本都可以如此轻松地放置样式元素。
style
中,如果标签具有scoped
属性,则允许它们在体内。
尽管style
主体中不允许使用该标签,但是该标签是允许的link
,因此,只要您引用的是外部样式表,所有浏览器都应在中使用时正确渲染和使用CSS body
。
资料来源:https : //html.spec.whatwg.org/multipage/semantics.html#the-link-element
除了较早的答案之外,尽管在现代浏览器中可能会在样式元素中放置样式代码块(尽管仍然无法正确实现),但始终存在危险,尤其是对于较旧的浏览器,浏览器会将代码呈现为文本除非样式部分包含在CDATA部分中。
当然,除了内联样式之外,将其放入元素中的另一件事是,由于它不符合W3C HTML / XHTML规范,因此,在主体中包含该页面的任何页面都将在W3C验证器上失败。如果您所有的代码都有效,查找意外的显示问题总是很容易,从而更容易发现错误。无效的HTML元素会对代码中超出其位置的所有元素的呈现产生不利影响,因此,如果元素在不应包含的位置,则可能会产生意想不到的效果,因为当浏览器发现无效元素时,它只是最好就其显示方式进行猜测,不同的浏览器在呈现方式上可能会做出不同的决定。
无论您使用过渡文档类型还是严格文档类型,根据(X)HTML规范,该文档类型仍然无效。
通过将样式放在正文中,您实际上会打败使用CSS的目的。重点是将内容与表示(和功能)分开。这样,对样式的任何更改都可以在样式表中完成,而不是在内容中完成。使用内联样式方法后,每个具有内联样式的页面都需要一个一个地更改。繁琐且冒险,因为您可能会错过一页或三页或十页。
使用样式表,您只需要更改样式表即可;更改会自动传播到链接到样式表的每个HTML页面。
neonble的观点也是另一个重要原因。如果通过添加CSS内联来弄乱HTML,则呈现会成为问题。HTML不会向您的代码抛出异常。相反,它会消失并以最佳方式呈现并继续前进。
通过使用样式表遵守Web标准,可以打造一个更好的网站。当您因为页面上的内容与所需的方式不完全而需要帮助时,将CSS放在头顶而不是正文的位置,可以使您自己以及向您寻求帮助的任何人都可以更好地进行故障排除。