Fatal编程技术网
  • css/
  • CSS黑客-在网站主体中添加CSS

CSS黑客-在网站主体中添加CSS

css

CSS黑客-在网站主体中添加CSS,css,Css,我陷入了这样一种境地：我只能访问网站的主体，而不能访问网站的头部。我必须使用新的样式表。现在我遇到的解决方案是在网站主体中添加CSS文件。当然，这是一个黑客行为，所以我想知道是否有更好的解决方案？您可以在身体部分放置标记。您可以使用@import url（“your_styles.css”）方法 如果您可以访问在文档头部调用的样式表，您可以将其添加到CSS文档的顶部 您也可以尝试在您的文档中添加一个备用的，我不建议这样做，但如果必须这样做，您也可以这样做： <style type="tex

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

您可以在身体部分放置
标记。

您可以使用
@import url（“your_styles.css”）方法

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

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


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




@导入url（“your_style.css”）；


如果向后兼容性不是您关心的问题，那么还有HTML5的
作用域属性，该属性已在本问题中解决：

希望这有帮助

编辑：

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



还有一篇Sitepoint参考文章，其中包含浏览器支持统计信息：




我认为这在必要时仍然是一个功能性的、可用的特性。
我们有不同的方法来加载CSS文件

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





2-CSS-使用标签
从CSS文件导入


@import  url("another_file.css");


3-JavaScript-仅使用JavaScript即可创建JavaScript函数：



函数loadCSS（文件名）{
var file=document.createElement（“链接”）；
setAttribute（“rel”、“样式表”）；
setAttribute（“类型”、“文本/css”）；
setAttribute（“href”，文件名）；
document.head.appendChild（文件）；
}
//只需调用一个函数即可加载CSS
//此路径应与您的HTML位置相对
loadCSS（“path_to_css/file.css”）；


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



变量表=（函数（）{
var style=document.createElement（“样式”）；
style.appendChild（document.createTextNode（“”）；
document.head.appendChild（样式）；
返回样式表；
})();
sheet.insertRule（“span{visibility:hidden}”，1）；

您的意思是再次定义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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 



​
*{颜色：红色；}
p{背景色：黄色；}
*{颜色：绿色；}
p{背景色：黑色；}
“如果你是我的朋友，那你就是我的朋友。”

“如果你是我的朋友，那你就是我的朋友。”
“这是我的责任，是我的责任，是我的责任，是我的责任，是我的责任……”

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 


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


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



$（'head'）。追加（''）；

表面上看，它似乎适合我，如果它看起来像


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



我自己刚测试过这个，想发布这个来强调这个缺陷。
你可以在运行时用javascript将样式表添加到头部。请看@SvenBieder：我对javascript有点陌生，所以我只想用html/css来坚持解决方案。不过，还是要感谢您提供的解决方案。@voodoo417:如果头部包含jQuery，那就行了。
.innerHTML+=”
应该只适用于javascript，据我所知，它仍然是有效的代码。如果必要的话，我会在必要的时候使用它。这就是我在研究它时被告知的，这是正确的答案。。。使用导入标记。完美的大学教师；I don’我不知道你在说什么“替换头”，你可以把它添加到你的文档正文中。这比把链接直接放在身体里好吗？我刚做了。这对我来说很有效，但也有一些小问题。这是我真正的小部件：这是我根据你的建议创建的：“头”元素不属于“身体”元素。投票结果是因为我笑得太厉害了：天哪，你疯了。他需要它在头上。$（“head”）.append（）是一个东西吗？除非从head内部调用，否则这个jquery hack不会工作。否则将无法解析css文件。至少这是我的经验。Javascript是在所有其他html之后运行的最佳实践吗？不要紧的是，我使用了花边的css，所以我只显示了关键的以前-对不同的问题使用相同的解决方案，或者您可以使用
document.head
而不是
document.getElementsByTagName（“head”）[0]
。在什么情况下您可以在这里不定义
文件
？您刚刚创建了它。@vittore您说得对，HTML5Rocks中描述的代码表明这不是必需的。此外，我在createElement的Mozilla引用中发现它不会返回未定义的HTML。这是无效的HTML。我签入了此HTML。它声明
错误：在此上下文中，元素样式不允许作为元素体的子元素。（抑制此子树中的进一步错误。）
我认为@Bachsau的评论是正确的，尽管从其他答案来看，许多（可能是大多数？可能是全部？）浏览器支持这种非标准形式。但目前还不清楚它是否会破坏某些浏览器，或者将来是否会如此。@DavidParks浏览器支持很多非标准的东西，而且一直都是这样。但是人们应该遵循标准，否则，我们最终会遇到与我们相同的情况

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