不知道为什么没有读取 CSS答案

【问题标题】：Not sure why CSS is not being read不知道为什么没有读取 CSS
【发布时间】：2017-09-02 21:18:04
【问题描述】：

所以我一直在绞尽脑汁想弄清楚为什么我的 CSS 文件无法被我的 Xampp 服务器读取。我认为一切都写得正确，所有参考都在它们应该在的地方，但我没有得到不同的结果。

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>

【问题讨论】：

您是否检查了控制台输出（Chrome 上的Ctrl+Shift+I）是否有错误消息？它说什么？
很难说出您到底遇到了什么问题以及“我没有得到不同的结果”是什么意思，但是您在 html 中遇到的一个问题是您包含 Bootstrap CSS after 你的css，所以它会覆盖任何常见的样式。您应该在 Bootstrap 之后包含您自己的主题 CSS。
好吧，这是我正在试验的东西，我注意到了一些差异。我的意思是说“得到不同的结果”实际上是我没有得到任何结果。除非它的内联 css，否则它似乎对结果没有影响。但你就是为了那个！
也没有出现错误信息。它可以很好地读取文件，只是似乎没有输出更改。
您是同时测试引导样式和theme.css 样式还是只测试theme.css？如果两者都不起作用，或者只有一个不起作用，我会很好奇。

标签： html css

【解决方案1】：

引导链接会覆盖您的 css 链接，因此只需将 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">

【讨论】：

【解决方案2】：

将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">

【讨论】：

您可能必须为 css 使用绝对路径（例如 href="/css/theme.css"）
@GillesGouaillardet 不是和绝对路径，即根相对路径。

【解决方案3】：

问题是，我认为<body> 只是打开和关闭<body> 标签之间的空间，它立即被<nav> 条覆盖，所以设置了黑色，就是这样你看不到它。设置整页背景，可以use this：

html
{
    background-color: black;
}

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

【讨论】：

【解决方案4】：

这里有两个选项：

在部署时，无论您使用什么代码来部署，要么更改 theme.css 的路径，要么实际上并没有复制它。
Bootstrap.min.css 正在覆盖您的 css 样式（请参阅alex-bell 的回答）

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

检查 #2 很容易。只需在任何浏览器中打开页面（让我们在此示例中使用 chrome）并打开 Web 开发人员工具。检查 body 元素，您将看到特定样式是如何被应用或覆盖的。

【讨论】：

【解决方案5】：

熟悉浏览器中的开发者工具。他们在帮助解决这类问题方面非常得心应手。

以 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

【讨论】：

【解决方案6】：

我遇到了同样的问题。我刚刚决定将 CSS 代码与我的 html 代码放在同一个文档中。您需要做的就是输入以下内容：

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

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

【讨论】：

FWIW 虽然这是一个潜在的解决方案，但它并不能直接解决问题，而且通常是不好的建议——由于各种原因，CSS 几乎总是应该外部化。