30

我陷入了只能访问网站正文而不是头部的情况。我必须使用新的样式表。现在我遇到的解决方案是在网站正文中添加 CSS 文件。当然，这是一个 hack，所以我想知道是否有更好的解决方案？

4

6 回答 6

41

我们有不同的方式来加载 CSS 文件。

1 - HTML - 在页面上加载外部 CSS 文件的常规方法是：

<head>
   <link rel="stylesheet" type="text/css" href="file.css" />
</head>

import2 - CSS - 使用CSS 文件中的标签

@import  url("another_file.css");

3 - JavaScript - 仅使用 JavaScript 来执行此操作，您应该创建一个 Javascript 函数：

<script type="text/javascript">

   function loadCSS(filename){ 
      var file = document.createElement("link");
      file.setAttribute("rel", "stylesheet");
      file.setAttribute("type", "text/css");
      file.setAttribute("href", filename);
      document.head.appendChild(file);
   }

   //just call a function to load your CSS
   //this path should be relative your HTML location
   loadCSS("path_to_css/file.css");
</script>

4 - JavaScript - 您可以添加动态定义，例如：

<script type="text/javascript">

   var sheet = (function() {
      var style = document.createElement("style");
      style.appendChild(document.createTextNode(""));
      document.head.appendChild(style);
      return style.sheet;
   })();

   sheet.insertRule("span { visibility: hidden }", 1);
</script>
于 2012-08-06T18:21:46.720 回答
11

关于什么：

$('head').append('<link rel="stylesheet" type="text/css" href="{yoururl}">');
于 2013-07-03T16:42:54.573 回答
10

你的意思是再次定义 CSS 并覆盖以前的 CSS 吗？：

​&lt;html>
    <head>
        <style type='text/css'>
            * {color:red;}
            p {background-color:yellow;}
        </style>
    </head>
    <body>
        <style type='text/css'>
            * {color:green;}
            p {background-color:black;}
        </style>
        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p> 
    </body>   
</html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

您可以在那里复制整个样式表，当然也可以将其包含在 php 或 javascript 中。但是像这样，查看头部 CSS 样式表并覆盖出现在正文中的所有样式应该可以工作。不确定这是否干净。

于 2012-08-06T18:24:19.123 回答
6

您可以使用该@import url("your_styles.css");方法。

如果您有权访问在文档头部调用的样式表，则可以将其添加到 CSS 文档的顶部。

您也可以尝试在您的文档中添加替代品<head>，我不建议这样做，但如果您必须这样做，您也可以这样做：

<style type="text/css">
  @import url("your_style.css");
</style>

如果您不关心向后兼容性，那么scoped在这个问题中还提到了 HTML5 属性：<STYLE> 必须在 HTML 文档的 <HEAD> 中吗？

希望这可以帮助！

编辑：

找到关于@import 功能的两个链接。一个是来自 Mozilla 开发者中心的工作草案，最后更新于 2012 年 7 月 31 日：

https://developer.mozilla.org/en-US/docs/CSS/@import

还有一篇带有浏览器支持统计信息的 Sitepoint 参考文章：

http://reference.sitepoint.com/css/at-import

我想这在必要时仍然是一个功能性的、可用的特性。

于 2012-08-06T18:13:34.263 回答
3

显然，它似乎对我有用，如果它看起来像

<link href="/main.css"  rel="stylesheet" type="text/css"  />

但不是，如果它包含/cssin rel。

<link href="/main.css"  rel="stylesheet/css" type="text/css"  />

刚刚自己测试了这个，想发布这个来强调这个陷阱。

于 2014-12-29T08:44:46.010 回答
2

您可以<head></head>在正文部分放置标签。

于 2012-08-06T18:05:13.397 回答