在HTML中,<style>标签是否可以放在<head>元素之外使用?

14

在HTML中,是否可以在<head>元素之外使用<style>标签?

像这样:

<html>
<head>
<style> some style </style>
</head>
<body> some text </body>
<style> some more style </style>
<body> some more text </body>
</html>

我希望这样做是因为:我的CGI源代码会使用其自己的样式引用其他文件。

CGI文件包含:

#!/bin/bash
echo "content-type: text/html"
echo ""
echo "<html><head><style>"
echo "h1 {color: red;}"
echo "</style>"
echo "<body>"
echo "<h1> some text here </h1>"
echo "</body>"
source ./data.sh
echo "</html>"

源文件包含以下内容:

echo "<style>"
echo "h2 {color: blue;}"
echo "</style>"
echo "<body>"
echo "<h2> and some other text here </h2>"
echo "</body>"

这似乎工作正常。但是它正确吗?

在w3schools上说: 每个HTML文档可以包含多个<style>标签。
但是它是这样完成的吗?


你可以把它们放在任何地方,都可以工作。但最好的做法是将其放在头部。如果它是一个外部CSS文件,那就更好了。 - pol
1
你所创建的有比样式元素放在<head>标签外更严重的问题。我的意思是,有两个<body>标签,不要这么做。例如,JavaScript假设只有一个<body>标签,这样就会使事情变得混乱。 - Mr Lister
同时,出现错误绝不是一个好主意。即使它似乎可以工作,也要意识到不同的浏览器有不同的错误处理方式。因此,在你没有测试过的浏览器中,它很可能不会按照你想要的方式呈现。 - Mr Lister
5个回答

15

样式表应该只包含在文档的头部。

除了验证点,当在body中使用样式时,可能会出现未经样式修饰的闪烁内容。浏览器会在元素显示后再为其应用样式,使它们在大小/形状/字体上发生变化和/或闪烁。这通常是一种不良工艺的标志。通常情况下,您可以随意放置样式,但尽可能避免使用。

HTML5引入了一个作用域属性,允许在整个body中包含样式标签,但之后又将其删除。

根据W3规范,<link>标签只应该放在<head>部分:

参考资料

HTML 4.01版本: http://www.w3.org/TR/html401/struct/links.html#edef-LINK

HTML5版本: http://www.w3.org/TR/html5/document-metadata.html#the-link-element

验证问题

如果将


8
这个回答与主题无关。azbc问的是样式标签而不是链接标签。 的确,链接标签应该放在<head>里,但内联样式标签可以放在任何地方。由于这是被接受的答案,我会重新措辞以匹配问题。 - borisrorsvort

5

<style>标签可以放置于HTML文档的任何位置,但是最好将其放在<head>标签内。

从个人经验来看,最好创建一个单独的样式表,将所有CSS放进去。


4
根据https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style的说法:
“<style>元素可以包含在文档的<head>或<body>中,样式仍将被应用,但建议您将样式包含在<head>中以进行组织。”
我认为这里的关键词是“进行组织”。因此,这不是技术要求,而是建议,旨在使您的html源代码更易读。
上面链接到的页面是“最后修改日期:2019年6月4日,由MDN贡献者编辑”。

1
现在已经进行了更正:“<style> 元素必须包含在文档的 <head> 中。通常情况下,最好将样式放在外部样式表中,并使用 <link> 元素应用它们。” - alpipego

2
根据W3标准,必须将样式标签放置在文档的元素内。如果您将样式标签放置在元素内,则整个DOM加载后会对您的网页样式产生影响,这可能导致在CSS生效前看到空白页面,并对更好的UI体验产生影响。通常,在文档中实现CSS的推荐方式是创建一个单独的样式表,并在需要的位置提供链接。

0

这真的取决于网站以及它的加载方式。在头部加载的CSS文件会阻止您的网站呈现,因此您可以将CSS内联到头部或正文中。这是因为必须获取CSS文件(通过网络或本地),这可能会影响性能。在完美的世界中,您只有一个CSS文件,但现实并不完美。

大多数主要浏览器上都有一个新功能..

在body开始后激活的样式表不会阻止绘制。

[https://www.chromestatus.com/feature/5696805480169472][1]

    <body class="gorgias-loaded">
<p>This page includes an image, followed by an external css file that is appended to the document by js (async) followed by another image.  
The css file changes the page background color black when it has been applied.</p>
<p>Optimally what you will see would be:</p>
<ol>
<li>A blank white page with this text and the title for both images.</li>
<li>Immediately after, the second image.</li>
<li>One second later the first image.</li>
<li>Four seconds later the background color should change to black.</li>
</ol>
<h2>First Image (1 second delay)</h2>
<img width="300" height="365" src="slowimage.php">
<h2>External CSS injected by JS (5 second delay)</h2>
<script>
    var attach  = document.getElementsByTagName('script')[0];
    var link  = document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'slowcss.php';
    link.media = 'all';
    attach.appendChild(link);
<link rel="stylesheet" type="text/css" href="slowcss.php" media="all"></script>
<h2>Second Image (no delay)</h2>
<img width="300" height="365" src="slowimage.php?delay=0">


</div></body>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接