Question

在body？

中链接CSS文件是不是一个坏主意

我已经读过，如果它在head之外找到另一个CSS文件，浏览器就会被迫再次启动CSS渲染，因为它可能需要将样式应用于已经渲染的元素。另外我认为HTML不会正确验证（我需要确认这一点）。

还有其他原因吗？

Answer 1

已经回答了问题（这是不好的，为什么......）但是如果你不能在标题中添加你的链接（或脚本），那么正确的方法就是用javascript动态插入它们。有时候提高代码速度也是一个好主意。对于链接，您可以使用此功能：

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

您应该使用像require.js这样的JavaScript文件加载器作为脚本。

Answer 2

HTML标准（至少我查看过的HTML 4）mandates <link>标记必须位于<head>。没有人知道浏览器会对<link>中的<body>做什么。如果我正在构建浏览器，我可能会忽略它。

为什么你到底想要这个？

Answer 3

我看到人们用来证明这样做的唯一原因是当他们使用某些模板引擎时，他们不能随意更改加载新内容或特定视图时在头部链接的样式表（在MVC框架的案例）。

无论哪种方式，都应该不惜一切代价避免这种情况，因为它很邋and，而且不合适。相反，总是以这样一种方式开发项目，以便随时可以将任意样式表放入头部。我通常通过在头部循环一个样式表数组来做到这一点。这样，如果我需要添加一个新的样式表，我只需将其路径名添加到要在头部打印的数组中。

<?php

  $styles   = array();
  $styles[] = "css/main.css";
  $styles[] = "css/text.css";

?>

<head>
  <?php foreach ($styles as $style) { ?>
    <link href="<?php print $style; ?>" rel="stylesheet" type="text/css" />
  <?php } ?>
</head>

Answer 4

在link中使用stylesheet链接类型body元素允许

当前版本的WHATWG HTML（2016-07-28），请参阅link：allowed in the body / body-ok

W3C HTML 5.2（2016-07-04）的当前草案，请参阅link：allowed in the body / body-ok

和不允许

W3C的HTML5（2014年推荐），见link

W3C HTML 5.1（2016-06-21）的当前候选推荐，见link

Answer 5

您可以链接到外部样式表或直接写入，但是如果您尝试不同的话，它将无法正常工作。

Answer 6

我使用的是JQuery UI，但仅限于会员的区域区域，其中发生了大量的交互。在我的静态页面中，没有使用JQuery UI，因此此链接在<?PHP include "header.php" ?>之后转到正文：

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/south-street/jquery-ui.css" />

我会限制说它没关系，但我可以确认到目前为止我还没有看到任何现代浏览器出现任何错误。

样式表<link />在？

6 个答案: