HTML样式需通过关联或嵌入实现，不可“添加”；内联样式优先级高但难维护；class用于复用，id须唯一且少用于CSS；外部CSS引入需注意路径、MIME类型及编码；样式失效多因路径错、选择器不匹配或权重覆盖。
HTML 样式不能靠“添加”来实现，而是靠“关联”或“嵌入”——直接写 <style> 或用 class / id 连接外部 CSS，没有“一键添加样式”的操作。
内联样式怎么写，为什么尽量别用
就是在 HTML 标签里加 style 属性，比如 <p style="color: red; margin: 0;">文字</p>。它优先级最高，能立刻覆盖其他规则，适合临时调试或极个别动态样式（比如 JS 改单个元素颜色）。
但问题明显：style 值难维护、无法复用、不能被浏览器缓存、破坏 HTML 结构语义。一旦页面有 10 个按钮要统一改边框，就得手动改 10 次 style——不是“加样式”，是埋雷。
- 别在 Vue/React 组件的模板里狂写
style="..."，用class配合 CSS-in-JS 或外部样式表更可控 - JS 动态设置样式时，优先改
className而非直接操作style属性 -
style里的单位别省略：写margin: 10px，不写margin: 10
class 和 id 怎么选，实际怎么连 CSS
这是最常用也最容易混淆的环节。id 必须全局唯一，适合锚点跳转（#section2）或 JS 精准控制单个元素；class 可重复，是 CSS 样式绑定的主力。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
例如：<button class="btn btn--primary">提交</button> 对应 CSS 中的 .btn { ... } 和 .btn--primary { ... }。BEM 命名不是必须，但至少别用 class="red big center" 这种描述性命名——它把样式逻辑塞进了 HTML。
- 一个元素可以有多个
class，用空格隔开，顺序无关 -
id的 CSS 选择器权重比class高，容易导致后续样式覆盖困难，日常开发中少用#header写样式 - 用
[type="submit"]这类属性选择器替代无意义的class，更语义化
外部 CSS 文件怎么引入，常见加载失败原因
用 <link rel="stylesheet" href="style.css"> 放在 <head> 里。路径错误、服务器没返回 text/css MIME 类型、文件编码不是 UTF-8（带中文注释时出错），都会导致样式不生效。
检查方法很简单：打开浏览器开发者工具的 Network 标签页，找 style.css 这一行，看状态码是不是 200，Content-Type 是不是 text/css，预览里能不能看到 CSS 内容。
- 相对路径以 HTML 文件位置为基准，不是以 CSS 文件位置——
href="css/main.css"表示从 HTML 所在目录进css/文件夹 - 本地双击打开 HTML（
file://协议）时，部分浏览器会拦截file://协议下的 CSS 加载，必须起本地服务（如python3 -m http.server） - 不要在
<body>底部放<link>，会导致页面先无样式渲染（FOUC），哪怕 CSS 很小
真正卡住人的从来不是“怎么加样式”，而是“样式为什么没生效”——90% 是路径错、选择器没匹配上、CSS 权重被覆盖，或者浏览器缓存了旧版本。查的时候别只盯 HTML，要切到 DevTools 的 Elements 和 Styles 面板，看那个元素最终计算出的样式值从哪来。
