内联样式（style属性）优先级最高，仅作用于单个元素，支持动态覆盖但无法写伪类或媒体查询；内部样式表（）需置于中，适用于页面独有样式；外部样式表（）是工程化首选，需正确配置路径、rel属性及media类型以保障加载与缓存。
style 属性、<style></style> 标签、<link rel="stylesheet"> —— 这三种引入方式不是“选哪个好看”，而是各守边界：用错位置，轻则样式不生效，重则白屏、FOUC、缓存失效、调试抓狂。
内联样式（style 属性）只该用于动态覆盖
它写在 HTML 标签里，比如 <p style="color: red; margin: 0"></p>，优先级最高，能强行压过所有其他 CSS 规则。但这也正是它的危险点。
- 无法写伪类（
:hover）、媒体查询（@media）、选择器组合（.box p），本质是“单条声明的快照”，不是真正的 CSS - JS 动态设置时别拼字符串：
el.style.cssText = "color:red;margin:0"容易漏空格或分号；更安全的是逐属性赋值：el.style.color = "red" - 服务端渲染时若注入大量
style，HTML 体积暴涨，gzip 压缩率下降，首字节时间拉长 - 邮件模板是少数合理场景——因为 Outlook 等客户端只认内联，且会 strip 掉
<style></style>和外部链接
<style></style> 标签必须放在
<style></style> 是纯 CSS 文本容器，不是“简化版外部文件”。它和外部 CSS 同级（优先级相等），但加载时机不同：它随 HTML 一起下载解析，无额外请求，也不缓存。
- 绝对不要塞进
—— 浏览器虽容忍，但可能触发怪异模式（Quirks Mode），导致盒模型计算异常 - 禁用
@import：写在<style></style>里的@import "theme.css"是串行阻塞加载，比<link>多一次往返，且无法预加载 - 适合放什么？仅限：当前页独有的动效关键帧、由后端计算出的主题色变量（如
:root { --primary: #<?php echo $theme_color; ?>; }）、或 A/B 测试分支的微调规则 - 别信
<style scoped></style>—— 普通 HTML 中无效，只有 Vue SFC 或 Shadow DOM 支持原生作用域
<link rel="stylesheet"> 的路径、位置和属性一个都不能错
这是工程化项目的唯一正解，但错配一个参数就可能让样式加载失败或拖慢首屏。
-
rel="stylesheet"是强制项：漏写它，浏览器直接忽略该<link>，控制台不会报错，但样式全丢 - 路径必须明确：用根相对路径（
/css/main.css）而非../css/main.css，避免因 HTML 文件层级变动导致 404 - 必须放在
，不能放底部——否则浏览器先渲染无样式的 HTML，再重绘，造成布局抖动（CLS） - 非关键 CSS 加
media属性：比如打印样式加media="print"，暗色主题加media="(prefers-color-scheme: dark)"，避免手机端下载无用资源
优先级不是“谁在后面谁赢”，而是来源权重 + 选择器强度叠加
很多人以为把 <link> 放在 <style></style> 后面就能覆盖它，结果发现没生效——其实是选择器权重不够，或者被 !important 锁死了。
- 来源权重固定：内联
style><style></style>= 外部<link>> 浏览器默认 - 同来源下看选择器：ID（
#header） > 类/属性/伪类（.btn/[type="submit"]/:focus） > 标签（div） - 真正容易翻车的是
!important：它只对声明本身生效，不继承；且多个!important冲突时，仍要按来源权重和选择器强度比大小 - 缓存问题常被忽略：改了外部 CSS 文件，但用户看到的还是旧样式——不是代码没生效，而是浏览器缓存了旧文件，得靠文件名加 hash（
main.a1b2c3.css）或服务端设置Cache-Control
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
