18

如果我的 HTML 页面部分中包含外部样式表<head></head>，它们会在 HTML 之前加载并在呈现时立即应用吗？让我介绍一下我的具体用例。

外部styles.css 文件：

form label {
    display: none;
}

包含表单的页面：

<head>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<form action="process.php" method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
</form>

我可以确信标签在页面加载时不可见（由于 CSS 下载而不会闪烁）？

否则，我可以内联添加样式属性，但这可能是维护的噩梦。

4

4 回答 4

13

如果您在 head 部分中包含 CSS，您可以确信标签不会显示。

首先下载 HTML。浏览器从顶部开始读取 html，并开始获取 HEAD 部分中引用的所有 CSS 和 JavaScript 文件。在下载和评估 HEAD 中的所有 CSS 和 JavaScript 文件之前，不会绘制（显示）页面。

于 2011-06-28T00:06:00.447 回答
7

样式表不会阻止文档被下载，但浏览器不会呈现文档，直到所有链接的样式表都已下载并加载到 DOM 中。

这样浏览器就不需要渲染页面两次（在这个过程中浪费时间），并且在样式表被下载和解析之前，一个没有样式的页面不会在用户面前闪现。

于 2011-06-28T00:06:43.987 回答
1

我相信所有内容都会按照您在创建的 html（或任何格式）文档中放置的确切顺序加载。

因此，在样式表调用的情况下，它将在直接读取与您编写它的位置相关的情况下被调用（通常在 .

一个很好的“概念证明”是创建一个 javascript 函数，该函数将在经过一定时间后加载样式表。在此函数中，您可以使用 ajax 加载样式表。

于 2011-06-27T23:59:46.307 回答
0

我相信对您的问题最简单的答案是：“是的...首先加载样式表。”这就是为什么您在头部链接到它们。正如上面 ghostcake 建议的那样，您可以做一些时髦的事情来调整浏览器响应的顺序并在您的 html 文件中呈现任何指令，但是浏览器的默认功能本质上是尝试按其呈现顺序处理每一行标记。因此，这也是为什么最好将跟踪脚本等放在页面底部...在页脚下方, 但在 body 标记上方。（这样做让您的页面在处理用户不可见的功能之前呈现。）如果您将浏览器视为您委托绘制的艺术家或绘图员，您必须告诉艺术家如何/在他们把笔放在纸上之前要画什么。同样，告诉浏览器从哪里获取你的指令。通过头部中的链接进行样式设置允许它“知道”什么以及如何“绘制”在它开始“绘制”之前。

于 2011-07-20T05:45:13.057 回答