Question

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

<!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文件中图形更改将不适用。有任何想法吗？

Answer 1

如果您的CSS文件的路径没有问题，可能会发生以下几件事情：

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

Answer 2

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

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

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

CSS内部样式表和外部样式表

2 个答案: