同一文件夹下HTML文件无法关联CSS文件的问题求助

问题描述 #

同一文件夹下的HTML文件无法关联CSS文件，VS Code中link标签的href="styles.css"能正常定位到styles.css文件，但样式始终无法生效，已尝试多种网络上的解决方法均无效果。

工作区截图 #

• HTML工作区：
  
• CSS工作区：
  

排查步骤 #

• 确认link标签属性完整：必须包含rel="stylesheet"，正确写法如下：

  <link rel="stylesheet" href="styles.css">
  

• 强制刷新浏览器缓存：按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac），避免浏览器加载缓存的旧资源。
• 检查CSS文件编码：确保CSS文件为UTF-8编码，防止编码异常导致样式解析失败。
• 排查CSS语法错误：检查styles.css中是否存在未闭合的大括号、拼写错误的属性名等，VS Code的内置语法检查会标注错误位置。
• 验证文件扩展名：确认CSS文件的扩展名是.css，部分系统默认隐藏扩展名，需在文件夹设置中开启显示，避免实际是.css.txt这类无效格式。
• 测试绝对路径：尝试将href改为绝对路径（如href="/styles.css"，注意网站根目录是否对应当前文件夹），排查路径解析问题。
• 查看浏览器网络请求：按下F12打开开发者工具，切换到「网络」标签，刷新页面后查看styles.css的请求状态：
  • 若状态码为404，说明路径仍存在问题；
  • 若状态码为200，查看响应内容是否为正确的CSS代码，确认文件是否被正确加载。

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