Question

根据W3C标准，显然在文档正文中添加<link rel="stylesheet" ...被认为是不好的做法。在身体中添加<style>块也一样......

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

Answer 1

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

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

document.head.appendChild(linkElement);

这样做的另一个好处是可以以异步方式添加样式表，这不会阻止浏览器下载任何其他内容。

Answer 2

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

<强> JQUERY

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添加后才能运行！< / p>

Answer 3

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

对于静态HTML文件，您绝对可以/应该遵循仅在HEAD标记内包含CSS的规则，但对于条件输出和交互性，它有时可以简化条件样式。考虑到最后，这会使得到的文档卷入其中。即使浏览器可以正常渲染它，如果您自己要查看源代码，如果定义布局/显示的所有样式都在HEAD中，则更容易阅读。当然，还有其他一些例子和原因，说明为什么这是不好的做法。

HTML标准除了服务器端脚本和DHTML之外还存在，即它不是HTML / SSS / JavaScript标准。

Answer 4

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

<style type="text/css" scoped>
.textbox {
color: pink
}
</style>

Answer 5

如果您正在谈论外部CSS表，那么正确的方法如下：

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

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

<style>
 ....Your style here...
</style>

之后包含CSS的正确方法

5 个答案: