404错误通常由路径配置不当引起，确保HTML和CSS文件置于C:xampphtdocsyour-project下，通过http://localhost/your-project/访问，使用正确相对路径或以/开头的绝对路径引用CSS，并在浏览器开发者工具中检查网络请求以确认路径与MIME类型，避免使用反斜杠或本地磁盘路径。
在Windows环境下使用XAMPP运行本地网站时，HTML文件引用CSS出现404错误，通常是因为路径配置不正确。只要确保路径写法准确、服务器正常运行，就能顺利加载CSS文件。
确认文件存放位置正确
将HTML和CSS文件放在XAMPP的web根目录下，通常是：
C:xampphtdocsyour-project 例如：把 index.html 和 style.css 都放在这里，或分目录管理
确保Apache已启动，通过浏览器访问 http://localhost/your-project/index.html 而不是直接打开HTML文件（file://）
使用正确的相对路径引用CSS
在HTML中通过link标签引入CSS，路径要相对于HTML文件的位置：
立即学习“前端免费学习笔记（深入）”；
CSS与HTML在同一目录：
CSS在css子目录中：
HTML在子目录，CSS在上级目录：
避免使用绝对路径或错误斜杠
不要写成Windows风格的反斜杠或本地磁盘路径：
❌ href=”C:xampphtdocscssstyle.css”（绝对路径，危险且无效） ❌ href=”cssstyle.css”（反斜杠在HTML中不被识别） ✅ href=”/your-project/css/style.css”（以/开头，从localhost根开始）
如果项目在根目录下，可使用 / 开头的路径；否则建议统一用相对路径更安全。
检查浏览器开发者工具中的网络请求
按F12打开开发者工具，切换到Network选项卡，刷新页面，查看CSS文件是否显示404：
看到红色404？说明路径写错或文件不存在 点击该请求，看“Request URL”具体指向哪里，据此调整路径 确认MIME类型是否为text/css，如果不是可能是服务器配置问题
基本上就这些。只要文件在htdocs里，路径写对，用localhost访问，就不会出现404。路径问题最常见，细心核对即可解决。
以上就是Windows XAMPP中HTML如何正确引用CSS避免404的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596677.html
微信扫一扫 
支付宝扫一扫 
