使用XAMPP本地部署PHP网站时CSS样式未生效问题求助

问题描述 #

我刚开始编写网站的.php文件，引入.css样式文件后样式不生效。因为后续要在文件中使用PHP功能，我用了PHP后缀，通过最新版本XAMPP运行站点。
我在浏览器开发者工具的network标签页查看发现，.css文件状态码为200，已经正常加载。

相关代码如下：

body {
   color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <h1 class="mainheader">Kraut und Rueben</h1>
</body>
</html>

我已验证代码本身不存在语法错误，也查阅了过往相关帖子的解决方案，包括强制浏览器刷新CSS缓存、排查XAMPP加载CSS异常、设置Chrome本地localhost禁用缓存等，均未解决问题。

解决方案 #

• 先检查CSS文件响应头的MIME类型：打开开发者工具network标签页，点击已加载的CSS文件，查看响应头的Content-Type字段是否为text/css。如果返回其他类型，说明XAMPP的Apache配置错误，打开httpd.conf文件，确认存在AddType text/css .css配置，修改后重启Apache即可。
• 确认站点根目录与相对路径匹配：如果你的项目放在XAMPP的htdocs下的子目录，访问地址带二级路径（比如localhost/xxx/index.php），那么相对路径css/styles.css会指向站点根目录下的css文件夹而非项目子目录下的css文件夹，可将link标签的href改为对应绝对路径，或者在head标签内添加<base href="/你的项目目录名/">修正相对路径基准。
• 排查样式覆盖：你同时引入了两个CSS文件，如果后面加载的index.css里也定义了body或h1的color属性，会覆盖前一个文件的样式。打开开发者工具元素面板，选中h1标签查看样式规则，看红色规则是否被划掉，即可确认是否存在覆盖。
• 检查CSS文件编码：确认CSS文件为UTF-8无BOM编码，如果带BOM头会导致浏览器解析CSS首行规则失效，将文件重新保存为无BOM的UTF-8格式即可。

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