Question

我首先在页面的style属性中创建了一组样式。

我希望将其从页面本身移到样式表中。

然而，当我将其移动到.css文件时，页面中断，将代码移回html文档，它再次正常工作。

这绝对没有意义，将样式从样式移动到css文件不应该破坏代码吗？

我错过了什么吗？我没有改变任何代码，只是复制和粘贴。

Answer 1

这只是一个黑暗的镜头，因为（在这篇文章的时候）你还没有提供源代码。

确保使用HTML文档的link中的head标记链接到您的样式表。

如果你有：

<style type="text/css">
/* <![CDATA[ */
#someid
{
  margin: 0;
  padding: 3px 12px;
}
/* ]]> */
</style>

你需要

#someid
{
  margin: 0;
  padding: 3px 12px;
}

在你的CSS文件中：

<link rel="stylesheet" type="text/css" href="path/to/style.css" />

链接到样式表。

一些常见的新手错误包括：

<style type="text/css" src="path/to/style.css">：因为它与<script>标签的语法类似，这有意义，但无效
<link rel="stylesheet" src="path/to/style.css">：但link元素使用href而不是src
将link个元素放在正文中：虽然浏览器会倾向于管理正文中的link元素，但可能会出现一些错误，而且这不是定义的行为
不指定doctype声明：允许浏览器进入怪癖模式，从不是一个好主意。

Answer 2

您应该确保正确导入样式表。有时@import如果没有相应使用则效果不佳，所以请始终参考样式表：

<link rel="stylesheet" type="text/css" href="name-of-stylesheet.css" />

始终记得关闭<link>标记，因为它是一个自我关闭标记。我想@zzzzBov忘了提到这一点。

最后，如果这不起作用，请尝试通过物理书写（在</head>部分之上）覆盖某些样式，例如：

<style type="text/css">
    body { background: blue; }
    * { color: red; }
</style>

并查看是否为您提供了蓝色背景和红色文字。这应该。之后，尝试实现引用方法，并确保将样式表文件引用到正确的目录。

祝你好运！

Answer 3

我遇到了同样的问题，但原因并不是代码中的错误，而是因为.css文件在进行修改后加载了一些延迟。服务器需要5-10分钟来更新更改。

Answer 4

我也有这个问题，原因是必须更新某些url（）引用的路径，因为css文件位于另一个文件夹中，而不是之前调用的html文件。

所以基本上

background-image: url('patterns/debut_dark.png');

必须改为

background-image: url('../patterns/debut_dark.png');

Answer 5

请勿在.css文件中加入<style type="text/css"></style>。

Answer 6

我遇到了同样的问题，感到非常沮丧。我有一个已正确引用的css文件，但是并非所有元素都已从中加载。事实证明，这是Chrome中的缓存问题。清除并重新启动窗口后，css元素即可正常工作。

Answer 7

遇到相同的问题。发现我的css文件中有一些行应被注释掉（我已剪切并粘贴到文件顶部的调色板信息块以供快速参考）。