CSS 在样式表中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4770872/
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 not working in stylesheet
提问by Charlie Smith
I have a set of Styles that were first created inside the style attribute on a page.
我有一组首先在页面上的样式属性中创建的样式。
I want to move it from being on the page itself into a stylesheet.
我想将它从页面本身移到样式表中。
however, when I move it to a .css file, the page breaks, move the code back to the html doc and it works fine again.
但是，当我将它移动到 .css 文件时，页面会中断，将代码移回 html 文档，它又可以正常工作了。
This makes absolutely no sense, moving styles from a style to a css file shouldnt break the code should it?
这完全没有意义，将样式从样式移动到 css 文件不应该破坏代码吗？
Am I missing something? I am not changing any of the code, its simply a copy and paste.
我错过了什么吗？我没有更改任何代码，它只是复制和粘贴。
回答by zzzzBov
This is just a shot in the dark as (at the time of this post) you haven't provided source code.
这只是黑暗中的一个镜头，因为（在撰写本文时）您还没有提供源代码。
Make sure you're linking to your stylesheet using a linktag in the headof the HTML document.
确保使用HTML 文档中的link标记链接到样式表head。
If you had:
如果你有：
<style type="text/css">
/* <![CDATA[ */
#someid
{
margin: 0;
padding: 3px 12px;
}
/* ]]> */
</style>
You'll need to have
你需要有
#someid
{
margin: 0;
padding: 3px 12px;
}
in your CSS file with:
在您的 CSS 文件中使用：
<link rel="stylesheet" type="text/css" href="path/to/style.css" />
to link to the stylesheet.
链接到样式表。
Some common newbie mistakes include:
一些常见的新手错误包括：
<style type="text/css" src="path/to/style.css">: because it's a similar syntax to the<script>tag, which would make sense, but is invalid<link rel="stylesheet" src="path/to/style.css">: butlinkelements use href not src- placing
linkelements within the body: although browsers will tend to managelinkelements in the body, there are likely going to be some errors, and it's not a defined behavior - notspecifying a doctype declaration: allows the browser to go into quirks mode, which is nevera good idea.
<style type="text/css" src="path/to/style.css">: 因为它的语法与<script>标签相似，这很有意义，但无效<link rel="stylesheet" src="path/to/style.css">: 但link元素使用 href 而不是 srclink在 body 中放置元素：虽然浏览器会倾向于管理linkbody 中的元素，但可能会出现一些错误，这不是一个定义的行为- 不指定 doctype 声明：允许浏览器进入怪癖模式，这从来都不是一个好主意。
回答by Amit
You should make sure the stylesheet is properly imported.
Sometimes the @importdoesn't work well if not used accordingly, so always reference your stylesheet:
您应该确保正确导入样式表。有时，@import如果不相应地使用，则效果不佳，因此请始终参考您的样式表：
<link rel="stylesheet" type="text/css" href="name-of-stylesheet.css" />
<link rel="stylesheet" type="text/css" href="name-of-stylesheet.css" />
Always remember to close the <link>tag as it's a self-close tag. I think @zzzzBov forgot to mention that.
永远记住关闭<link>标签，因为它是一个自我关闭的标签。我认为@zzzzBov 忘了提及这一点。
Finally, if that doesn't work, try to override some of the styles by physically writing (above the </head>section) something like:
最后，如果这不起作用，请尝试通过物理编写（在该</head>部分上方）以下内容来覆盖某些样式：
<style type="text/css">
body { background: blue; }
* { color: red; }
</style>
and see if that gives you a blue background and red colored text. It should. After that, try to implement the referencing method and make sure you reference the stylesheet file to the right directory.
看看这是否会给你一个蓝色背景和红色文本。这应该。之后，尝试实现引用方法并确保将样式表文件引用到正确的目录。
Good luck!
祝你好运！
回答by Mihai
I had the same problem, but the cause was not some mistake in the code but the fact that the .css file was loaded with some delay after making the modifications in it. The server needed 5 - 10 minutes to update the changes.
我遇到了同样的问题，但原因不是代码中的错误，而是 .css 文件在对其进行修改后加载有一些延迟的事实。服务器需要 5 到 10 分钟来更新更改。
回答by Joakim
I had this problem as well, and the reason was that the path had to be updated for some url() references since the css file was in another folder than the html file it previously was called from.
我也遇到了这个问题，原因是必须更新某些 url() 引用的路径，因为 css 文件位于另一个文件夹中，而不是之前调用它的 html 文件。
So basically
所以基本上
background-image: url('patterns/debut_dark.png');
had to be changed to
必须改为
background-image: url('../patterns/debut_dark.png');
回答by Philip Rego
Don't include <style type="text/css"></style>in your .css file.
不要包含<style type="text/css"></style>在您的 .css 文件中。
回答by steven
I had the same issue and was quite frustrating. I had a css file that was properly referenced, however not all the elements were being loaded from it. As it turns out, it was a cache problem in Chrome. After clearing it and restarting the window, the the css elements were working correctly.
我有同样的问题，非常令人沮丧。我有一个正确引用的 css 文件，但并非所有元素都从中加载。事实证明，这是 Chrome 中的缓存问题。清除它并重新启动窗口后，css 元素工作正常。
