```html

html引入css的三种方式

给一个纯 HTML 页面加上样式，无非就是种方让 CSS 找到它。浏览器认三种写法：行内、引入内部、种方外部。引入写错地方，种方样式要么不生效，引入要么乱成一锅粥。种方我见过有人把几百行 CSS 全塞在 style 属性里，引入改一个颜色得翻三屏代码——这不是种方技术，这是引入自虐。

行内样式：最直接，种方也最脏

直接写在标签的引入 style 属性里，像这样：

<p style="color: red; font-size: 18px;">这段文字是种方红色的</p>

浏览器解析到 style 属性，立刻把里面的引入声明套用到这个元素上。优先级高得离谱，除非用 !important 硬压，否则外部样式表根本覆盖不了它。我调试一些老项目时，经常看到按钮上挂着 style="background: #ff6600"，结果设计师要改成蓝色，开发者得一个个文件搜过去。行内样式适合什么场景？临时测试、邮件模板，或者动态生成 HTML 时顺手带一个。别在正式项目里大面积用，维护成本会吃掉你。

内部样式表：一个页面的自留地

在 <head> 里写 <style> 块，把 CSS 规则集中放进去：

<head> <style> .card {  border: 1px solid #ddd; padding: 16px; } .card h3 {  margin-top: 0; } </style> </head>

这些样式只作用于当前 HTML 文档。写单页 demo 或者小型落地页时，我经常这么干——不用额外请求文件，打开就能跑。但页面一多，每个文件里都复制一份 .card 的样式，改起来就是灾难。曾经接手过一个后台系统，二十几个 HTML 文件，每个头部都塞了几乎一样的 style，结果某个按钮的圆角在不同页面居然不一致。内部样式表适合“就这一个页面，不打算复用”的情况。

外部样式表：正经项目的标配

把 CSS 写进独立的 .css 文件，然后用 <link> 标签引入：

<head> <link rel="stylesheet" href="styles/main.css"> </head>

浏览器会发起一个额外的请求去拉取这个文件，然后解析、应用。这是绝大多数网站的做法。好处太明显了：一个 main.css 可以管几十个页面，改一处全站生效。缓存也能帮上忙——用户第二次访问时，CSS 文件直接从本地读，页面渲染快得多。

还有一种写法是在 <style> 里用 @import：

<style> @import url("styles/main.css"); </style>

效果类似，但性能差一截。@import 会等 HTML 解析到那一行才开始下载 CSS，而 <link> 是并行下载。除非有特殊理由，否则别用 @import。我早期写 Sass 时被编译出来的 @import 坑过，页面闪一下无样式内容，后来全换成 <link> 就干净了。

优先级和实际选择

三种方式同时存在时，行内样式赢内部和外部（除非外部用了 !important）。内部和外部之间，看选择器的优先级和代码顺序。我自己的习惯：永远用外部样式表，只有发邮件或者写一些会被第三方系统嵌入的片段时，才退回到内部或行内。别把 CSS 当 HTML 的附属品随手乱塞，它值得一个独立的文件。

另外提一句，现在有些框架把 CSS 写成 JS 模块，运行时再注入 <style> 标签。本质上还是内部样式表，只是动态生成。理解这三种基础方式，再看那些花哨的方案就不会晕。