Question

所以我一直在试图弄清楚为什么我的Xampp服务器无法读取我的CSS文件。我认为一切都写得正确，所有参考文献都应该是它们的位置，但我没有得到不同的结果。

body {
  background-color: black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>ETB</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/theme.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header ">
        <a id="logo" href="homepage.html"><img src="media/logotext.png" class="wtv"></a>
        <ul id="navigation" class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Downloads</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

Answer 1

引导链接覆盖了你的css链接，所以只需将css链接放在引导程序下面即可。

int

Answer 2

我遇到了同样的问题。我刚决定将CSS代码放在与我的html代码相同的文档中。您需要做的就是键入：

<style>
  body {
   background-color:black;
  }
</style>

我假设你这样做，但只是因为你不知道每个html文档可以包含多个<style>标签。

Answer 3

在所有其他引用之后将链接放到css/theme.css，如下所示（看起来该属性被Bootstrap css覆盖）：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/theme.css">

Answer 4

这里有两个选项：

在部署时，无论您使用的代码是更改theme.css的路径，还是实际上没有将其复制过来。
Bootstrap.min.css正在覆盖您的CSS样式（请参阅alex-bell的答案）

检查＃1 ...我老实说不确定，从未使用过您的部署系统。通常我会检查磁盘上的文件，并确保我可以访问它们。另一个选择是访问.html的任何地方，尝试通过浏览器访问css / theme.css。它应该尝试下载该文件。如果它没有尝试下载文件，这可能是您的问题。

检查＃2很容易。只需在任何浏览器中打开页面（让本例中使用chrome）并打开Web Developer工具。检查body元素，您将看到如何应用或覆盖特定样式。

Answer 5

问题是，我认为<body>只是打开和关闭<body>标记之间的空格，它会立即被<nav>栏覆盖，所以黑色是被设定，只是你看不到它。要设置整个页面背景，您可以use this：

html
{
    background-color: black;
}

请参阅this JSFiddle - body规则不执行任何操作，但html规则将整个页面栏设置为工具栏。

Answer 6

熟悉浏览器中的开发人员工具。它们非常便于帮助解决这些问题。

以Chrome为例，点击f12打开开发者工具

转到“网络”标签并重新加载页面。检查是否正在加载您的css文件。我怀疑没有，因为您的路径css/themes/theme.css将解析为http:\\yoursite.com\folder-where-the-page-is\themes\theme.css。您很可能希望使用/css/theme.css来解析为http:\\yoursite.com\themes\theme.css

使用“网络”选项卡确认路径正确后，可以使用“元素”选项卡检查页面的各个元素。在这里，您可以看到正在应用于元素的样式以及它们的来源。

最后，与开发工具无关，了解CSS Specificity

不确定为什么不读CSS

6 个答案: