把CSS写进HTML里，引用最省事的外部办法是直接塞在<style>标签里，或者更狠一点，引用直接写在元素的外部style属性上。但只要你做过超过三个页面的引用项目，就会知道这种搞法有多难受——改一个颜色，外部得打开十几个HTML文件挨个替换。引用外部CSS就是外部来解决这个问题的。它把样式单独放在一个.css文件里，引用HTML只负责结构，外部样式全交给那个文件管。引用改一处，外部全站生效。引用

引用外部CSS，外部核心就一个标签：<link>。引用它是个自闭合标签，写在<head>里面。最简形式长这样：

<link rel="stylesheet" href="style.css">

别小看这一行。rel="stylesheet"告诉浏览器“这是个样式表”，href指向文件路径。浏览器读到这行，就会去下载style.css，然后把里面的规则应用到当前页面。路径可以是相对路径，比如css/style.css、../styles/main.css，也可以是绝对URL，比如https://example.com/css/base.css。我一般把CSS放在项目根目录的css文件夹里，HTML里写<link rel="stylesheet" href="css/style.css">，结构清晰，不容易乱。

还有一种写法是用@import。你可以在<style>标签里写@import url("style.css");，或者在一个CSS文件里导入另一个CSS文件。但这玩意儿有性能问题——浏览器得先把主CSS下载完，解析到@import那行，才会去下载被导入的文件。多一层串行等待，页面渲染就慢一拍。除非你有特别的分层需求，否则别用@import，老老实实用<link>。

说个我踩过的坑。有次帮朋友看一个页面，样式死活不生效。打开开发者工具，Network面板里那个CSS文件状态是404。路径写的是href="styles.css"，但文件实际在css子目录里。改对路径后，样式立刻出来了。所以引用外部CSS，路径错一个字符，整个文件就废了。还有个常见问题：文件编码。如果CSS文件里有中文注释，而文件保存成了GBK，HTML页面是UTF-8，注释里的中文就会变成乱码，虽然不影响样式，但看着膈应。统一用UTF-8保存，在<link>前面加<meta charset="UTF-8">，省心。

多个<link>标签可以同时存在。比如你有一个重置样式reset.css，一个基础布局layout.css，一个主题theme.css。按顺序写：

<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/theme.css">

后面的会覆盖前面同名选择器的规则。这个顺序不能乱。reset放最前面，把浏览器默认样式清掉；layout定义网格、容器宽度这些骨架；theme最后，管颜色、字体、阴影这些皮肤。我见过有人把theme放最前面，结果reset一上来就把theme的边距全干掉了，页面布局直接崩。顺序就是层叠的优先级，别搞反。

另外，<link>标签还能配合media属性做响应式加载。比如：

<link rel="stylesheet" href="css/print.css" media="print"> <link rel="stylesheet" href="css/mobile.css" media="(max-width: 600px)">

这样print.css只在打印时生效，mobile.css只在窄屏时下载和应用。浏览器会智能判断，不满足条件的文件甚至不会去下载，省带宽。比在一个大CSS文件里写一堆@media查询要清爽，尤其是移动端和桌面端样式差异巨大的时候。

最后提一嘴性能。外部CSS文件会被浏览器缓存。用户第一次访问下载了style.css，第二次访问直接读缓存，页面加载飞快。这也是为什么别把样式写死在HTML里——内联样式每次都得重新传，缓存帮不上忙。当然，CSS文件也别太大，超过100KB就该考虑拆分了。我一般按功能拆成base、components、pages三个文件，每个控制在30KB以内，维护和加载都舒服。

引用外部CSS就这么点事。一个<link>标签，一个正确的路径，注意加载顺序和编码。剩下的就是写CSS本身了。