HTML文件无法关联CSS文件？新手Web开发者求助

问题说明 #

刚入门Web开发，遇到HTML文件无法加载关联CSS文件的问题。代码经检查无语法错误，已尝试修改文件名、在在线解释器运行、修改文件内容排查，均未解决，怀疑和Visual Studio Code环境有关。

代码示例 #

HTML (index.html) #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 style="color:red">Esto es un archivo de pruebas</h1>
</body>
</html>

CSS (styles.css) #

body{
    background-color: blue;
}

排查与解决步骤 #

• 确认目录结构：确保index.html和styles.css在同一根目录下，无嵌套子文件夹差异。若CSS在子目录（如css/styles.css），需将href修改为对应路径。
• 使用正确的本地服务启动方式：若用VS Code的Live Server等插件运行页面，必须通过插件的「Open with Live Server」启动，而非直接双击打开HTML文件。file://协议可能存在资源加载限制，http://协议才能正常加载关联文件。
• 强制刷新浏览器缓存：按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新，避免浏览器缓存旧资源导致的加载异常。
• 检查文件名大小写：部分系统（如Linux）区分文件名大小写，确保styles.css与代码中href的文件名大小写完全一致。
• 查看浏览器控制台报错：按F12打开开发者工具，切换至「控制台」面板，查看是否存在CSS文件404等加载错误，直接定位问题根源。
• 验证文件编码：确保两个文件均为UTF-8编码，可在VS Code右下角查看编码，点击后选择「通过编码重新打开」确认。

内容的提问来源于stack exchange，提问作者Miguel Ángel