Question

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

Answer 1

在页面上加载外部CSS文件的传统方法是：

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

只使用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>

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

 <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>

Answer 2

怎么样：

$('head').append('<link rel="stylesheet" type="text/css" href="{yoururl}">');

Answer 3

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

<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样式表并覆盖正文中出现的所有样式应该有效。不确定这是否干净。

Answer 4

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

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

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

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

如果您不关心向后兼容性，则还会在此问题中解决HTML5 scoped属性：Does <STYLE> have to be in the <HEAD> of an HTML document?

希望这有帮助！

编辑：

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

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

还是包含浏览器支持统计信息的Sitepoint参考文章：

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

我认为这在必要时仍然是一个功能性的，可用的功能。

Answer 5

您可以在您的身体部分放置<head></head>标签。

Answer 6

显然，如果看起来像

，它似乎对我有用

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

但不是，如果它包含rel。中的/css

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

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

CSS-hack - 在网站正文中添加css

6 个答案: