CSS-hack - 在网站正文中添加 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11833325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS-hack - Adding css in the body of a website
提问by fuddin
I am stuck in a situation where I only have access to the body of the website and not the head. I have to use a new stylesheet. Now the solution that I came across to add the CSS file in the body of the website. Of course, it is a hack so I was wondering if there is a better solution to it?
我陷入了一种情况，我只能访问网站的主体而不是头部。我必须使用新的样式表。现在，我遇到了在网站正文中添加 CSS 文件的解决方案。当然，这是一个黑客，所以我想知道是否有更好的解决方案？
回答by well
The conventional way to load external CSS files on a page is:
在页面上加载外部 CSS 文件的常规方法是：
<head>
<link rel="stylesheet" type="text/css" href="file.css" />
</head>
Using only JavaScript to do it, you should create a Javascript function:
仅使用 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>
Either you can add dynamic definitions such as:
您可以添加动态定义，例如：
<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>
回答by Simon Dragsb?k
what about:
关于什么：
$('head').append('<link rel="stylesheet" type="text/css" href="{yoururl}">');
回答by Santiago Rebella
Do you mean define CSS again and override previous CSS like?:
你的意思是再次定义 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>????????????????????????????????????????????????????????????????????????
You could copy the entire style sheet there or of course then include it with php or javascript.But like this, looking at the head CSS stylesheet and overriding all the styles appearing there in the body should work. Not sure if this is clean though.
您可以在那里复制整个样式表，当然，然后将其包含在 php 或 javascript 中。但是像这样，查看头部 CSS 样式表并覆盖出现在正文中的所有样式应该可以工作。不确定这是否干净。
回答by robabby
You could use the @import url("your_styles.css");method.
你可以用这个@import url("your_styles.css");方法。
If you have access to the stylesheets being called in the head of the document, you can add this at the top of the CSS doc.
如果您有权访问在文档头部调用的样式表，则可以将其添加到 CSS 文档的顶部。
You could try adding an alternate <head>to your doc as well, which I do not advise, but if you have to then you can also do this:
您也可以尝试<head>在您的文档中添加一个替代项，我不建议这样做，但如果您必须这样做，您也可以这样做：
<style type="text/css">
@import url("your_style.css");
</style>
If backwards compatibility is not a concern for you, there is also the HTML5 scopedattribute which has been addressed in this question: Does <STYLE> have to be in the <HEAD> of an HTML document?
如果您不关心向后兼容性，那么还有一个 HTML5scoped属性已在此问题中解决：<STYLE> 是否必须在 HTML 文档的 <HEAD> 中？
Hope this helps!
希望这可以帮助！
EDIT:
编辑：
Found two links in regards to @import feature. One is a working draft from Mozilla Developers center which was last updated on Jul 31, 2012:
找到两个关于@import 功能的链接。一个是 Mozilla 开发者中心的工作草案，最后更新时间为 2012 年 7 月 31 日：
https://developer.mozilla.org/en-US/docs/CSS/@import
https://developer.mozilla.org/en-US/docs/CSS/@import
Also a Sitepoint Reference article with browser support stats:
还有一篇包含浏览器支持统计信息的 Sitepoint 参考文章：
http://reference.sitepoint.com/css/at-import
http://reference.sitepoint.com/css/at-import
I would imagine this is still a functional, usable feature when necessary.
我想这在必要时仍然是一个实用的、可用的特性。
回答by BananaAcid
Apperently, it seems to work for me, if it looks like
显然，它似乎对我有用，如果它看起来像
<link href="/main.css" rel="stylesheet" type="text/css" />
but not, if it contains the /cssin rel.
但不是，如果它包含/cssin rel。
<link href="/main.css" rel="stylesheet/css" type="text/css" />
Just tested this myself, thought about posting this to underline this pitfall.
刚刚自己测试了这个，考虑发布这个以强调这个陷阱。
回答by Kwon
You can place <head></head>tags in your body section.
您可以<head></head>在正文部分放置标签。
