Question

我在页面上声明CSS样式的位置是否重要？

这是：

<style>

    div{
        height: 50px;
        width: 200px;
    }

</style>

<body>

    <div>This div</div>

</body>

与此不同？

<body>

    <div>This div</div>

</body>


<style>

    div{
        height: 50px;
        width: 200px;
    }

</style>

若然，怎么样？

我已经看过两者的例子，但从未真正注意到样式在页面加载上花费多长时间的任何重大变化。虽然，大约90％的时间，样式都在页面顶部声明。

就个人而言，我更喜欢使用单独的样式表来避免以这种方式向页面添加样式。

Answer 1

将其置于开始

您应该将STYLE元素放在HEAD中，以便更快地加载页面，因为该页面可以render as the HTML loads。

当Web浏览器读取网页时，它会按照HTML编写的顺序读取它。因此，当您的样式表首先出现时，这就是首先阅读的内容。然后，当浏览器访问HTML时，它已经知道如何设置样式，因此在显示内容之前不必等待加载CSS。

为什么不将样式表放在页面底部

当您在底部放置样式表时，这会阻止许多浏览器（尤其是Internet Explorer）执行progressive rendering。 Internet Explorer甚至会阻止rendering of the page，直到添加所有样式，因此不必重绘页面。这意味着客户将看到一个空白的白页，直到所有元素和样式都已加载。

Answer 2

最好将样式表放在头上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 50px;
            width: 200px;
        }
    </style>
</head>
<body>

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

此外，如果您将样式保留在某处，则在解析声明的样式时，浏览器必须重新呈现页面（加载时新旧）。

Answer 3

当您向html页面添加样式时，它们会在页面加载时加载，并按此顺序进行相应解析。与第一个示例一样，首先加载样式，然后加载无意义的元素。在第二个中，元素首先使用默认样式加载，然后对它们进行样式设置。将文件添加到单独的样式表等待页面加载，然后显示样式。在非常慢的连接或重页中，差异很大。

Answer 4

你应该把你的样式表放在头上

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            div {
                ...
            }
        </style>
    </head>
    <body>
        <div>
            ....
        </div>
    </body>
</html>

Answer 5

style元素应该适用于整个文档，无论它放在何处，但通常的做法是始终将其放在head元素中。如果你将它放在其他地方，如果浏览器处理有点不稳定，我不会感到惊讶。

请注意，html5允许您为style元素指定范围属性，这意味着它仅适用于样式元素的父元素及其所有子元素。

顺便说一下，通常的做法是将css放在一个单独的文件中，并使用<link>标记将CSS包含在文档中。这样，您就可以跨多个页面共享css。

Answer 6

根据任何CSS规范，只有style之前的第一个选项body才有效。结束标记</body>后面不允许使用任何标记，但结束标记</html>除外。

虽然浏览器是允许的，但通常没有理由想到偏离正确的顺序。在某些创作情况下，您可能无法在其所属的style部分注入head元素，但即便如此，它也应放在结束标记</body>之前。< / p>

我应该在哪里声明我的页面上的样式？为什么？

6 个答案: