样式表中的CSS无法工作

Question

样式表中的CSS无法工作

css

8

我有一组样式，最初是在页面的style属性中创建的。

我想将其从页面中移动到样式表中。

然而，当我将它移动到.css文件中时，页面就出错了，将代码移回到html文档中，它又可以正常工作。

这完全没有道理，把样式从style移到css文件中不应该破坏代码，是吗？

我有什么遗漏的吗？我没有改变任何代码，只是复制和粘贴。

- Lawrence Cooke

这可能是一个愚蠢的问题，但你是在页面中引用CSS文件吗？ - Mihai

2

你显然缺少“足够的信息让别人帮助你解决问题”。请提供详细信息，例如你是如何在HTML文件中引入CSS文件的？ - DwB

没有示例我们无法帮助您。 - Yorian

8个回答

4

您应该确保样式表被正确导入。有时如果不按照规定使用，@import可能无法正常工作，因此请始终引用您的样式表： <link rel="stylesheet" type="text/css" href="样式表名称.css" /> 请记得关闭<link>标签，因为它是一个自闭合标签。我认为@zzzzBov忘记提到这一点了。

最后，如果这样做仍然不起作用，请尝试通过编写以下内容（位于</head>部分之前）覆盖某些样式：

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

试试看是否能够得到蓝色背景和红色文字。如果可以的话，接下来尝试实现引用样式表的方法，并确保将样式表文件引用到正确的目录中。

祝你好运！

- Amit

你只需要在XML/XHTML中关闭(/>)单标签，即使如此，浏览器也非常宽容。 - zzzzBov

1

我也遇到了这个问题，原因是由于CSS文件在另一个文件夹中，所以必须更新某些url()引用的路径，因为之前它是从HTML文件中调用的。

基本上来说，

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

必须更改为

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

- Jocke

1

我曾经遇到过相同的问题，但是原因不是代码出错，而是 .css 文件在修改后加载有一定的延迟。服务器需要 5-10 分钟才能更新更改。

- Mihai

0

如果您的语法看起来都没问题，那么很可能是浏览器缓存问题，我们可以轻松解决。在您的html/php文件中，通过添加额外的随机参数引用您的新.css样式表（例如styles.css）。这将强制访问您页面的浏览器获取最新的styles.css。

在您的html/php文件的标签中，您应该有类似以下内容来加载您的新styles.css文件：

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

只需将它改为这样：

<link rel="stylesheet" type="text/css" href="styles.css?ref=v1" />

那个额外的"?ref=v1"将防止浏览器重复使用他们缓存的styles.css文件，并强制浏览器获取您最新的styles.css文件。当您更新styles.css文件并将其上传到您的Web服务器时，只需更改"v1"为"v2"等或任何您喜欢的命名系统，以便强制浏览器重新加载最新的styles.css。请注意，将此"?ref=v1"添加到链接中不需要更改styles.css文件的名称（您可以更改文件名，但我发现这会变得混乱）。这是一种简单而干净的方法，可以强制浏览器重新获取您最新的.css文件。

- carrabino

0

我曾经遇到过同样的问题，非常令人沮丧。我有一个正确引用的CSS文件，但并非所有元素都从中加载。事实证明，这是Chrome浏览器中的缓存问题。清除缓存并重新启动窗口后，CSS元素就能正常工作了。

- steven

0

遇到了同样的问题。发现我的CSS文件中有一些应该被注释掉的行（一个颜色调色板信息的块，我将其剪切并粘贴到文件顶部以便快速参考）。

- chixi77

0

不要在你的 .css 文件中包含 <style type="text/css"></style>。

- Philip Rego

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zzzzBov · Accepted Answer

由于您在此帖子发布时尚未提供源代码，因此这只是一次瞎猜。

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

假设您有：

<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 元素放置在 body 中：虽然浏览器通常会处理 body 中的 link 元素，但可能会出现一些错误，这不是一个定义好的行为。
未指定文档类型声明：这会使浏览器进入怪异模式，这绝对是不好的想法。