为什么我的 CSS 代码不起作用？它已正确链接，但样式规则根本不适用答案

【问题标题】：Why does my CSS code not work? It is linked correctly but the style rules just dont apply at all为什么我的 CSS 代码不起作用？它已正确链接，但样式规则根本不适用
【发布时间】：2022-01-12 05:35:03
【问题描述】：

我现在正在使用在线课程学习编码，并且我已经设置了一个服务器并在线提供了一个测试网站，只是为了测试它在浏览器中的实际外观。不幸的是，尽管我已将 index.html 和 style.css 文件上传到服务器上 public-HTML 的同一文件夹中，但我的 CSS 还是无法正常工作。我认为我已经正确链接了 CSS 样式表，但由于某种原因它不起作用。这就是它的样子，根本没有任何意义：

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>home</title>

</head>

<body>

    <header>

    <h1 class = "brand">(coming soon)</h1>
    <h3 class = "brand">-Websites, presenting your company to the world-</h3>

    <nav>
      <ul>
        <li><a href="./Codecademy/index">Playing around with coding course</a></li>
        <li><a href="portfolio">Portfolio</a></li>
        <li><a href="prices">Prices</a></li>
        <li><a href="team">Team</a></li>
        <li><a href="contact">Contact</a></li>
      </ul>
    </nav>

    </header>

    <main>

      <h1>Elegant Interactive Websites</h1>
      <img src="Media/Website_image.jpeg" alt="" style = "width: 500px; height: 300px;">
      <h1>Beautiful Graphic Design</h1>
      <img src="Media/GraphicDesign_image.png" alt="" style = "width: 500px; height: 300px;">
      <h1>Seamless Animations</h1>
      <img src="Media/Animation.jpeg" alt="" style = "width: 500px; height: 300px;">
      <h1>Reliable Databases</h1>
      <img src="Media/Data base.jpeg" alt="" style = "width: 500px; height: 300px;">

    </main>

  <footer>
      <p>Code written in HTML, (some CSS) and JavaScript</p>
  </footer>

</body>

</html>

这是我的 CSS 代码：

html, body {
    margin: 0;
    padding: 0;
    background-color: black;
  }

a {
    color: red;
}

.brand{
    color: red;
    font-size: 300px;
    font-family: cursive;
    background-color: black;
}

h1{
    color: red;
    font-size: 300px;
    background-color: black;
}

【问题讨论】：

css 和 html 文件在同一个目录下吗？ <link ... href="style.css"> 声明它们必须是。
无复制~codesandbox.io/s/shy-dawn-91uuy?file=/index.html
使用浏览器的开发工具检查元素并查看应用了哪些样式。还要检查 Console 和 Network 面板中的任何错误
您的HTML 和CSS 似乎不存在同一个目录。请了解如何在 HTML 文件中包含外部 css。例如 link1 或 link2

标签： html css server

【解决方案1】：

如果您的CSS 是您的HTML 当前目录之外的一个文件夹，那么您可以尝试像这样链接它

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

【讨论】：