直接修改h1的font-size和color即可，推荐使用rem单位和css变量；若失效需检查css优先级、加载顺序或视口设置；统一样式用元素选择器，例外情况用上下文选择器。
直接改 h1 的 font-size 和 color 就行
浏览器默认会给 h1 加上较大的字号和加粗样式，但没锁死——它完全受 CSS 控制。只要写对选择器、没被更高优先级规则覆盖，改 font-size 和 color 是最直接有效的方式。
常见错误是只写 h1 { font-size: 20px; } 却发现没生效，大概率是 CSS 加载顺序或选择器权重问题，不是写法本身错。
- 用像素（
px）、em（em）、rem（rem）都行，但rem更利于响应式，推荐优先试rem - 颜色值写
#333、rgb(51, 51, 51)或var(--text-primary)都可以，后者适合有 CSS 变量体系的项目 - 别漏掉单位：写
font-size: 20是无效的，必须是font-size: 20px或font-size: 1.25rem
h1 样式被其他规则覆盖了怎么办
CSS 优先级常让新手困惑：明明写了 h1 { color: red; }，页面上还是黑色。本质是浏览器默认样式或你引入的框架（比如 Bootstrap、Tailwind）里有更重的选择器压过了它。
- 打开浏览器开发者工具（F12），选中那个
h1，看右边 Styles 面板里哪条color被划掉了——被划掉的就是被覆盖的 - 临时加
!important可验证是否是优先级问题，但上线前应改用更具体的选择器，比如.article-header h1或section > h1 - Tailwind 用户注意：
class="text-blue-600 text-4xl"这类 utility class 默认比普通h1规则权重高，得用h1.text-4xl或h1[class*="text-"]才能覆盖
移动端 h1 字号突然变小？检查 viewport 和缩放
有些手机上 h1 看着比 PC 小很多，不是 CSS 写错了，而是视口设置或系统缩放干扰了渲染。
立即学习“前端免费学习笔记（深入）”；
- 确保 HTML 里有正确的
<meta name="viewport" content="width=device-width, initial-scale=1">，缺了这句，iOS Safari 会强制缩放文本 - 用
rem时，如果根元素html的font-size没做媒体查询适配，小屏下可能显得过小；可加一句@media (max-width: 768px) { html { font-size: 14px; } } - 安卓某些定制系统会默认放大文字，用户在「设置→显示→字体大小」调大后，所有
px单位都会被强制放大，而rem相对稳定些
想统一全站标题样式，但又不想每个 h1 都写 class
完全没必要给每个 h1 加 class。CSS 天然支持元素选择器，直接写 h1 就能命中所有一级标题。真正要小心的是“过度泛化”带来的意外影响。
- 如果你的站点有多个
h1（比如首页一个、文章页一个、弹窗里又一个），统一设h1 { font-size: 2rem; }很方便，但也意味着它们全被绑定了 - 若某处需要例外（比如弹窗里的
h1要更小），就用上下文选择器：.modal h1 { font-size: 1.25rem; }，比给每个加 class 更干净 - 避免写
* { font-size: 16px; }这种通配符去“重置”，它会影响h1的继承行为，反而让字号更难控制
真正麻烦的不是改大小颜色，而是当设计稿要求不同区块的 h1 有细微差别（比如字重、行高、上下边距），又没留 class 接口时，得靠父容器选择器一层层套——这时候回头补 class 反而更省事。
