CSS 内部与外部样式表答案

【问题标题】：CSS Internal vs External Style SheetsCSS 内部与外部样式表
【发布时间】：2012-09-28 19:13:12
【问题描述】：

我正在创建一个网页，并开始使用顶部的样式标签：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Front Page</title>
    <link rel="stylesheet" type="text/css" href="CSS/Styles.css" /> 

    <style type="text/css">
    </style>
</head>
<body>
</body>
</html>

我希望我的所有图形设计都在我的 Styles.css 中，但由于某种原因，它不起作用。当我添加类似：

div.box {
        margin:0 auto;
        width:500px;
        background:#222;
        position:relative;
        left: 50px;
        top: -200px;
        height: 100%;
        border:1px solid #262626;
        padding: 0 5px 5px 0;
    }

要设计这个元素：

<div class="box"></div>

当我将它放在文档上方的标签中时它可以工作，但如果我将它放在 CSS 文件中则不行。以前这不是问题，但现在我一直在将所有内容添加到样式标签中，并且它变得非常长（150 行！）。我想将它全部移动到 css 文件中，这样我的主页就可以滚动浏览了。但我不明白为什么如果放在 CSS 文件中，图形更改将不适用。有什么想法吗？

【问题讨论】：

你的路径很可能是错误的。在“网络”选项卡中检查您的检查器 (chrome) 或 firebug (firefox)，看看它是否被正确获取。
@MadaraUchiha 使用 chrome，所以我按 F12 然后我到底在哪里看？
网络标签：i.stack.imgur.com/GGRG2.png。搜索你的 CSS 文件，看看它的 Status 是不是 200 OK，如果不是，就是问题所在。
@MadaraUchiha 不，它说 200 OK。
您清除缓存了吗？ Ctrl + F5 通常可以解决问题。

标签： html css styles

【解决方案1】：

如果您的 CSS 文件的路径正常，则可能发生了几件事：

您可能只需要清除缓存。 CTRL+F5 通常可以解决问题。访问您网站的新用户无需这样做。
可能是您打错了，或者忘记用; 结束上述声明，请检查。
这可能是一个特殊性问题，即另一个更具体的规则覆盖了您的规则。 Read about it here。

【讨论】：

【解决方案2】：

您是否使用区分大小写的文件系统 (Linux)？您到CSS/Styles.css 的路径必须完全正确。此外，它与页面和<basepath/> 相关。尝试使用绝对 URL 来排除路径问题。

如果您没有路径问题，那么您可能不小心在 CSS 文件的某处输入了拼写错误，从而导致您的规则被遗漏。

如果您的 CSS 文件不错，那么您的浏览器可能缓存了旧版本。您是否尝试过清除缓存？

【讨论】：

奇怪的是，我知道这不是路径问题，因为 css 文件中的某些内容适用于相应的元素。知道为什么会发生这种情况吗？
听起来您的 CSS 文件中有错字，并且规则处理提前结束。仔细检查您的 CSS 文件是否有正确的语法？
当它在样式标签中并且有效时，我只是简单地剪切粘贴到 css 文件中。它不应该仍然有效吗？
是的，应该。 CSS 对我来说看起来不错。也许您的浏览器缓存了旧版本。您是否尝试过清除缓存？
你是第二个告诉我这个的人。让我清楚并测试一下，会让你知道的。