打开任何一个网站的应用于源代码，你几乎都能在head标签里看到这样一行：<link rel="stylesheet" href="style.css">。网页这是应用于外部样式表。但CSS进入网页的网页方式不止这一种，严格来说有三种——内联样式、应用于内部样式表、网页外部样式表。应用于它们各有各的网页脾气，用错了地方，应用于维护起来能让人抓狂。网页

内联样式最直接，应用于写在HTML元素的网页style属性里。比如<p style="color: red; font-size: 16px;">。应用于这种方式的网页优点就是“所见即所得”，修改一个元素不会影响其他任何东西。应用于但代价也明显——代码冗余，HTML结构被样式污染。我见过一些老项目，整个页面密密麻麻全是style属性，想改个全局字体颜色，得挨个元素去找，那感觉就像在迷宫里找出口。而且内联样式的优先级最高，会覆盖掉其他所有样式规则，这意味着后期想用外部样式表覆盖它，必须加上!important，简直是给自己挖坑。所以内联样式只适合临时调试，或者像邮件模板这种无法引用外部文件的环境。

内部样式表写在HTML文档的<head>区域里，用<style>标签包裹。这种方式比内联样式规整多了，所有样式集中在一个地方，页面结构也相对干净。对于单页面的小项目，比如一个简单的活动落地页，内部样式表是个不错的选择。你不需要额外维护一个CSS文件，打开HTML就能看到所有样式规则，修改起来也方便。但问题在于，它只能作用于当前页面。如果你的网站有十个页面，每个页面都写一份内部样式表，那恭喜你，以后改个按钮颜色，十个文件挨个改吧。而且页面加载时，样式是随HTML一起下载的，如果样式很多，页面首屏渲染会变慢。

外部样式表就是开头提到的那种方式，通过<link>标签引入独立的.css文件。这是目前绝大多数网站的标准做法。它的核心优势在于“复用”和“缓存”。一个style.css文件可以被整个网站的所有页面引用，改一处，全站生效。浏览器还会缓存这个CSS文件，用户第二次访问时，样式文件直接从本地读取，加载速度反而更快。我参与过一个电商项目，前期图省事用了内部样式表，后期页面膨胀到几十个，每次改样式都得全局搜索替换，苦不堪言。后来重构时全部改成外部样式表，维护成本瞬间降了下来。

三种方式的取舍，本质上是在“局部灵活性”和“全局可控性”之间做权衡。我的建议很简单：能用外部样式表就用外部样式表，这是长期维护的底线。内部样式表留给那些确实不需要复用的单页场景，比如一个临时抽奖页面。内联样式——除非你只想测试某个效果，否则能不用就不用。它就像代码里的魔法数字，看着方便，实则隐患无穷。

对了，还有一种情况容易被忽略：动态注入样式。JavaScript里可以用element.style.color = 'red'来设置样式，这本质上是操作内联样式。很多前端框架（比如Vue、React）在组件里写的scoped style，编译后也是通过生成带哈希属性的选择器来实现隔离，这算是外部样式的变体。所以，理解这三种基础方式，能帮你更好地理解框架底层在做什么。