CSS 文件未链接到 HTML 文件答案

【问题标题】：CSS file not linking to HTML fileCSS 文件未链接到 HTML 文件
【发布时间】：2022-08-18 01:47:25
【问题描述】：

我正在尝试创建一个基本网页，但我的 css 文件似乎不想链接到我的 html 文件。我查看了几种不同的资源，但不知道为什么会这样。

body {
    background-color: red;
}

<!DOCTYPE html>
<html lang=\"en\">
    <head>
        <meta charset=\"utf-8\">
        <meta name=\"viewport\" content=\"width=device-width initial-scale=1\">

        <link href=\"index.css\" rel=\"stylesheet\" type=\"text/css\"/>
        <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx\" crossorigin=\"anonymous\">

        <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/vis-network@latest/styles/vis-network.css\" type=\"text/css\" />

        <script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/vis-network@latest/dist/vis-network.min.js\"> </script>

        <center>
        <h1>Welcome</h1>
        </center>

    </head>

    <body>
        Welcome


        <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\" crossorigin=\"anonymous\"></script>
        
    </body>
</html>

如果您打开浏览器控制台，您会收到任何错误吗？由于路径不正确，可能没有加载 css。根据您的示例的 href，您应该将 html 文件和 css 文件放在同一目录中。
没有控制台错误，是的，它们在同一个目录中

标签： html css

【解决方案1】：

问题似乎与链接样式表无关。

在浏览器中打开开发者工具。看督察。查看应用于 body 元素的样式规则。

当多个规则设置相同的属性时，equal specificity 最后一个覆盖前面的。

您将 Bootstrap CSS 放在您自己的 CSS 之后，因此设置 background-color 的规则正在替换您的规则。

订单很重要。

你有可能也可能链接您自己的样式表时遇到问题，在这种情况下，您应该使用“网络”选项卡查找 HTTP 请求以加载它并查看 HTTP 服务器做出的响应。

一旦您知道问题是权限错误、404 Not Found 错误还是 Content-Type 错误，那么您就可以采取措施修复它。

【讨论】：

这解决了它非常感谢你

【解决方案2】：

显然，引导程序已将您的背景覆盖为白色。删除此行或将您制作的 css 文件放在 head 标签的底部，以便您可以控制背景颜色。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

【讨论】：