创建基础网页时CSS文件无法关联HTML文件问题求助

针对你的CSS文件无法生效的问题，按以下步骤逐一排查：

1. 确认文件路径与命名 #

• 确保index.css和HTML文件处于同一目录。如果CSS在子文件夹（如css/index.css），需把link的href改为对应路径。
• 检查文件名大小写：Linux/macOS系统区分大小写，确保文件名是index.css而非Index.css或index.CSS。
• 用浏览器开发者工具（F12）打开「Network」标签，刷新页面后查看index.css的请求状态：如果显示404，说明路径完全错误。

2. 调整CSS加载优先级 #

你的本地CSS在Bootstrap之前加载，Bootstrap的全局样式可能覆盖了body的背景色。把本地CSS的link标签移到Bootstrap之后，让本地样式优先级更高：

<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">
<!-- 把本地CSS移到这里 -->
<link href="index.css" rel="stylesheet" type="text/css"/>

3. 清除浏览器缓存 #

浏览器可能缓存了旧的CSS文件，导致新修改不生效：

• 按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新页面。
• 打开开发者工具，在「Network」标签勾选「Disable cache」选项，再刷新页面。

4. 检查标签语法与细节 #

你的link标签语法没问题，但注意原HTML里的viewport meta标签缺少逗号，修正后避免渲染异常：

<meta name="viewport" content="width=device-width, initial-scale=1">

修改后的完整HTML示例 #

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

        <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 href="index.css" rel="stylesheet" type="text/css"/>
        <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>

内容的提问来源于stack exchange，提问作者Alex