CSS已设置header高度与颜色但HTML页面样式不生效求助

1. 核心问题：CSS文件引用路径错误 #

你在HTML头部写的样式表引用路径为.assets/css/styles.css，该路径的含义是在当前HTML文件所在目录下，寻找名称为.assets的隐藏文件夹，再向下查找css目录下的styles.css文件。
绝大多数场景下，你的静态资源文件夹应为和index.html同级、不带前置点的assets目录，路径写错会导致浏览器完全加载不到CSS文件，自然所有样式都不会生效。
解决方法：将link标签的href属性修改为正确的相对路径：

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

如果你的assets文件夹确实是带前置点的隐藏命名，排查本地环境/服务器是否禁止访问带点前缀的隐藏文件/文件夹即可。

2. 次要问题：CSS全局重置语法错误 #

你styles.css文件开头的全局样式重置规则漏写了通配符选择器*，当前开头{ padding: 0; margin: 0; box-sizing: border-box; }属于无效CSS规则，虽然不会影响后续#header的规则生效，但会导致全局默认边距重置不生效。
解决方法：给开头规则补全通配符：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

验证方式 #

修改后刷新页面，打开浏览器开发者工具的「网络」面板，筛选CSS资源，查看styles.css的加载状态，状态码为200说明加载成功，此时#header的样式就会正常生效。如果修改后还是不生效，按Ctrl+Shift+R强制刷新忽略浏览器缓存即可。

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