20

显然<link rel="stylesheet" ...，W3C 标准认为在文档正文中添加是一种不好的做法。在正文中添加<style>块也是如此...

那么是否有任何符合标准的解决方案可以在<head>标签之外添加 CSS？就像在文件的末尾一样。

4

5 回答 5

28

如果您只想在特定事件中包含 CSS 样式，那么没有什么能阻止您这样做：

var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href = "path/to/file.css"; //Replace here

document.head.appendChild(linkElement);

这具有以异步方式添加样式表的额外好处，这不会阻止浏览器下载其他任何内容。

于 2012-05-19T13:00:14.657 回答
3

解决该问题的一种方法是加载CSSwith .get()并仅在需要时将其附加到 head 标签：

查询

var css = "foobar.css";
var callback = function() {
  alert("CSS is now included");
  // your jquery plugin for a navigation menu or what ever...
};

$.get(css, function(data){
  $("<style type=\"text/css\">" + data + "</style>").appendTo(document.head);
  callback();
});

该callback功能有助于使script依赖于CSS文件的代码正确格式化，仅在CSS添加后才能运行！

于 2012-05-19T12:46:56.517 回答
2

我认为一旦你开始做服务器端编程或 DHTML 之类的事情，大多数人都会忽略这个标准。

对于静态 HTML 文件，您绝对可以/应该遵循仅在 HEAD 标记中包含 CSS 的规则，但对于条件输出和交互性，它有时也可以简化事情以具有条件样式。考虑到最后，这会使生成的文档变得复杂。尽管浏览器可能会很好地呈现它，但如果您自己查看源代码，如果定义布局/显示的所有样式都在 HEAD 中，则更容易阅读。当然，还有许多其他示例和原因说明为什么这是不好的做法。

HTML 标准与服务器端脚本和 DHTML 之类的东西分开存在，即它不是 HTML/SSS/JavaScript 标准。

于 2012-05-19T14:57:21.170 回答
1

只有 HTML5 允许使用 scoped 属性，但请确保正确声明 DOCTYPE。

<style type="text/css" scoped>
.textbox {
color: pink
}
</style>
于 2012-05-19T12:46:31.970 回答
-4

如果你说的是一个外部的 css sheet，那么正确的方法如下：

<link href="....link to your style...." rel="stylesheet">

如果要包含内联 css，则只需执行以下操作：

<style>
 ....Your style here...
</style>
于 2015-11-25T14:09:15.467 回答