HTML中添加CSS有三种方式：内嵌（style标签）、内联（style属性）和外链（link标签）；优先级按权重计算，!important最高，其次为内联、ID、类/伪类/属性、标签/伪元素；布局问题可用开发者工具定位；CSS加载顺序影响覆盖规则，但仅限相同优先级时生效。
怎么在HTML里加CSS样式
直接写 标签最简单，放 里就行：
也可以用 style 属性内联写，适合单个元素临时改：
紧急提示
外链样式表更规范，但要注意路径别写错：
如果 main.css 实际在 assets/css/ 下，就会白加载——浏览器控制台 Network 标签页里能看到 404。
立即学习“前端免费学习笔记（深入）”；
CSS选择器优先级怎么算出来的
浏览器不是“谁在后面谁赢”，而是按权重加总：
-
!important最高（不推荐滥用） - 内联
style算 1000 - ID 选择器（如
#header）算 100 - 类、伪类、属性选择器（如
.btn、:hover、[type="text"]）各算 10 - 标签、伪元素（如
div、::before）各算 1
比如：
.container .item:hover { color: blue; } /* 10 + 10 + 10 = 30 */
#nav .item { color: red; } /* 100 + 10 = 110 */后者优先级更高，哪怕它写在前面，.item 文字还是红色。
布局乱了，怎么快速定位是哪段CSS在捣鬼
打开浏览器开发者工具（F12），选中出问题的元素，看右边 Styles 面板：
- 左侧列出所有命中该元素的规则，带删除线的是被覆盖的
- 点击某条规则右侧的文件名和行号，能跳转到源码位置
- 把可疑的规则前的复选框取消勾选，实时看效果变化
常见干扰源：
- 某个全局重置样式（如
* { box-sizing: border-box; }）影响了预期盒模型 - 第三方库（比如 Bootstrap）的
.row或.container自带margin/padding - 父元素用了
display: flex但子元素又设了float，后者会失效
多个CSS文件同时加载，顺序搞错会怎样
CSS 是从上到下解析的，后加载的同名规则会覆盖前面的——但前提是优先级相同。
所以这些写法结果不同：
/* .btn { color: black; } */
/* .btn { color: blue; } */→ 按钮是蓝色。
但如果 base.css 里写的是：
.btn#submit { color: black; }而 theme.css 里只是：
.btn { color: blue; }那按钮还是黑色——ID 选择器权重压倒了类选择器，顺序就无效了。
真正容易被忽略的是：构建工具（如 Webpack）或 CMS 可能自动调整 CSS 加载顺序，你写的顺序未必是最终 HTML 里的顺序。上线前务必检查生成的 HTML 源码。
