打开任何一个像样的引入网站，右键查看源代码，引入你几乎总能在<head>标签里找到一行<link rel="stylesheet" href="style.css">。引入这就是引入最普遍的做法——把CSS单独写在一个文件里，然后从HTML里链过去。引入浏览器读到这行代码，引入就会去下载那个.css文件，引入再把样式应用到页面上。引入干净，引入好维护，引入改颜色不用翻遍整个HTML。引入
但这不是引入唯一的路。刚学网页那会儿，引入我图省事，引入直接在标签上写style="color: red; font-size: 20px;"。引入这叫行内样式，确实能立刻看到效果，可一旦页面里有二十个红色标题，你就得改二十次。更糟的是，行内样式优先级高得离谱，后面想用外部CSS覆盖它，得加!important，写多了自己都嫌烦。所以除非是临时调试，或者给邮件模板做兼容，我基本不用行内样式。
还有一种介于两者之间的办法：把CSS写在<style>标签里，放在<head>中。比如：
<head> <style> body { background: #f5f5f5; } h1 { color: #333; } </style> </head> 这种叫内部样式表。适合单页面、样式不多的情况。我以前做静态demo时常用，不用额外建文件，复制粘贴就能跑。但要是页面多了，每个HTML都塞一段重复的<style>，改起来就是灾难。所以项目一旦超过三个页面，我立刻拆成外部文件。
外部CSS的引入方式就一个标签：<link>。它必须放在<head>里，但不需要闭合标签。写法是<link rel="stylesheet" href="路径/到/你的.css">。路径可以是相对路径，比如css/main.css，也可以是绝对URL，甚至跨域——不过跨域加载CSS得注意CORS，一般没人这么干。另外，<link>还能配合media属性做响应式，比如<link rel="stylesheet" href="print.css" media="print">，只在打印时生效。这个细节很多人忽略，但做打印样式时特别有用。
另一种引入外部CSS的方式是@import。你可以在<style>里写@import url("style.css");，或者在一个CSS文件里导入另一个。听起来灵活，实际性能差——浏览器得等HTML解析到@import那行才开始下载CSS，容易造成页面闪烁。我试过在大型项目里用@import组织模块，结果首屏加载慢了一截。后来全换成多个<link>标签，让浏览器并行下载。所以除非是老旧项目维护，我不推荐@import。
有个细节值得提：多个<link>的顺序会影响层叠。后加载的CSS会覆盖前面同优先级的规则。比如你先引bootstrap.css，再引自己的custom.css，那custom里的.btn颜色就能盖掉bootstrap的默认值。反过来就无效。这个顺序问题我踩过坑——有次把重置样式放在框架后面，结果按钮全变丑了，查了半天才发现是顺序反了。
还有，别忘了HTML里可以同时用多种方式。比如外部文件管全局，页面内<style>管这个页面特有的微调，行内样式只给某个动态元素临时用。浏览器会按优先级合并：行内 > 内部/外部（看顺序） > 继承。理解这套规则，比死记“哪种最好”有用得多。
最后说个真实案例。我帮朋友改一个企业站，他之前把所有CSS都塞在<style>里，足足两千多行。首页加载时，HTML和CSS混在一起，文件大小1.2MB。我把它拆成reset.css、layout.css、components.css三个外部文件，用<link>引入，并开启gzip。结果首页体积降到180KB，渲染时间从3秒多变成不到1秒。他问我用了什么高级技术，我说只是把样式挪了个地方。有时候，最基础的引入方式，反而最有效。
```