解决CSS加载报错：Failed to load resource: net::ERR_FILE_NOT_FOUND

你的问题核心是绝对路径的使用场景不匹配：

• VSCode预览模式基于本地小型服务器运行，此时/指向项目根目录，所以CSS能正常加载；
• 但直接通过本地文件路径（file://协议）在浏览器打开时，/会指向系统根目录（比如C:\），浏览器找不到/Course 4/portfolioproject/styles.css这个路径下的文件。

解决方法 #

方法1：改用相对路径 #

根据你的实际目录结构调整href：

• 若HTML文件和styles.css在同一文件夹（比如都在portfolioproject下），修改为：

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

• 若HTML文件在Course 4文件夹下，styles.css在portfolioproject子文件夹里，修改为：

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

方法2：通过本地服务器打开页面 #

安装VSCode的「Live Server」插件，右键HTML文件选择「Open with Live Server」，浏览器会以http://localhost:xxxx形式访问页面，此时/会自动指向项目根目录，原有的绝对路径就能正常生效。

验证步骤 #

改完后打开浏览器开发者工具的「Network」面板，刷新页面，查看styles.css的请求状态：如果显示200 OK，说明路径正确，样式会正常加载。

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