内联样式直接写在HTML标签的style属性中，优先级最高但仅作用于单个元素；因其难以维护、易引发冲突且不支持响应式设计，仅适用于临时调试、邮件模板或服务端动态注入少量样式。
内联样式怎么写，为什么别乱用
内联样式就是直接在 HTML 标签里写 style 属性，比如 <p style="color: red; font-size: 14px;">文字</p>。它优先级最高，能强行覆盖其他样式，但只对单个元素生效。
常见错误是把大量样式堆在 style 里，结果改一个颜色要翻十页 HTML 找所有 style；还有人用它做响应式（比如 style="display: none;"），结果 JS 控制显隐时和 CSS 冲突，!important 满天飞。
适用场景其实很窄：临时调试、邮件模板（部分客户端只认内联）、或服务端渲染时动态注入极少量样式。别把它当主力方案。
嵌入式样式（<style>）该放哪、放多少
<style> 标签写在 <head> 里，作用域是当前 HTML 文件。它比内联灵活，支持选择器、伪类、媒体查询，但依然和结构混在一起。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
– 放在 <body> 里（浏览器会容忍，但不符合规范，可能触发怪异模式）
– 用 @import 在 <style> 里引入外部 CSS（阻塞渲染，且不推荐）
– 把整站样式都塞进去，导致 HTML 文件膨胀、无法缓存
建议只放页面独有、复用率极低的样式，比如某个活动页的特殊动效规则，或需要配合 <script> 动态生成的 CSS 变量。
外部 CSS 文件怎么引入才不卡页面
用 <link rel="stylesheet" href="main.css"> 引入外部文件，这是最推荐的方式。它让 HTML 更轻、CSS 可缓存、多人协作更清晰。
但实际用错的地方不少：
– 把 href 指向 404 路径，控制台报 Failed to load resource: net::ERR_ABORTED 却没注意
– 在 <body> 底部放 <link>（浏览器会等 CSS 加载完才渲染，白屏时间变长）
– 不加 media 属性，比如打印样式 print.css 也被手机端下载
性能关键点：首屏 CSS 尽量精简；非关键样式（如动画、主题色切换）可用 media="print" 或 onload 动态加载；路径必须相对或绝对明确，别依赖 base 标签搞混。
三种方式的优先级和覆盖逻辑
优先级不是“谁在后面谁赢”，而是按来源权重算：内联 > 嵌入式 = 外部文件 > 浏览器默认。同级则看具体选择器权重（id > class > tag）和声明顺序。
典型陷阱：
– 认为把 <link> 放在 <style> 后面就能覆盖它（错，两者同级，得看选择器强度）
– 在外部 CSS 里写 p { color: blue; }，又在内联写 style="color: red;"，结果发现没生效——其实是元素上另有 class 规则带 !important
– 修改了外部 CSS 文件，但页面还是旧样式（缓存没清，或没更新文件名里的 hash）
调试时打开开发者工具的 Styles 面板，看哪条被划掉、哪条生效，比猜快得多。真正难的不是写法，是理清样式从哪来、被谁干掉了。
