404错误通常由路径配置不当引起，确保HTML和CSS文件置于C:\xampp\htdocs\your-project\下，通过http://localhost/your-project/访问，使用正确相对路径或以/开头的绝对路径引用CSS，并在浏览器开发者工具中检查网络请求以确认路径与MIME类型，避免使用反斜杠或本地磁盘路径。
在Windows环境下使用XAMPP运行本地网站时，HTML文件引用CSS出现404错误，通常是因为路径配置不正确。只要确保路径写法准确、服务器正常运行，就能顺利加载CSS文件。
确认文件存放位置正确
将HTML和CSS文件放在XAMPP的web根目录下，通常是：
确保Apache已启动，通过浏览器访问 http://localhost/your-project/index.html 而不是直接打开HTML文件（file://）
使用正确的相对路径引用CSS
在HTML中通过link标签引入CSS，路径要相对于HTML文件的位置：
立即学习“前端免费学习笔记（深入）”；
- CSS与HTML在同一目录：
<link rel="stylesheet" href="style.css"> - CSS在css子目录中：
<link rel="stylesheet" href="css/style.css"> - HTML在子目录，CSS在上级目录：
<link rel="stylesheet" href="../style.css">
避免使用绝对路径或错误斜杠
不要写成Windows风格的反斜杠或本地磁盘路径：
- ❌ href="C:\xampp\htdocs\css\style.css"（绝对路径，危险且无效）
- ❌ href="css\style.css"（反斜杠在HTML中不被识别）
- ✅ href="/your-project/css/style.css"（以/开头，从localhost根开始）
如果项目在根目录下，可使用 / 开头的路径；否则建议统一用相对路径更安全。
检查浏览器开发者工具中的网络请求
按F12打开开发者工具，切换到Network选项卡，刷新页面，查看CSS文件是否显示404：
- 看到红色404？说明路径写错或文件不存在
- 点击该请求，看“Request URL”具体指向哪里，据此调整路径
- 确认MIME类型是否为text/css，如果不是可能是服务器配置问题
基本上就这些。只要文件在htdocs里，路径写对，用localhost访问，就不会出现404。路径问题最常见，细心核对即可解决。
