html引用css文件

把CSS写进HTML里，最省事的引用办法是直接在<style>标签里塞代码。但你要是引用维护过超过三个页面的小站，就会知道那种做法有多烦——改一个颜色得翻五六个文件，引用手一抖还可能漏掉某个角落。引用所以真正干活的引用时候，没人会把样式全写在HTML内部。引用用<link>标签引一个外部CSS文件，引用才是引用常态。

写法简单到几乎不需要记：

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

这一行通常放在<head>里面。引用rel属性告诉浏览器“这是引用个样式表”，href指向文件路径。引用路径可以是引用相对的，比如css/main.css，引用也可以是绝对的，比如/assets/css/main.css。我见过有人把rel写成stylesheet以外的值，比如style，浏览器直接忽略，页面裸奔，查半天查不出原因——这种坑踩过一次就记住了。

为什么非要用外部文件？举个我自己的例子。去年帮朋友改一个烘焙工作室的官网，一共七页。他之前用Dreamweaver自动生成，每页的<style>里都复制了同一段按钮样式。他想把主色从奶油黄改成巧克力棕，结果只改了首页，内页还是黄的。我花十分钟把那段样式抽到common.css，然后每页的<head>里加一行<link>。以后他再想改颜色，只动一个文件，七页全变。这就是外部引用的直接好处：一处修改，处处生效。

浏览器怎么处理这个<link>？它遇到这行标签时，会暂停渲染，去下载那个CSS文件，解析完再继续画页面。所以如果CSS文件很大或者服务器很慢，用户会看到白屏时间变长。这也是为什么现在很多人把关键CSS内联，非关键的用<link>异步加载。不过对于普通项目，直接放<head>里就行，别想太多。

路径问题值得单独说。假设你的目录结构是这样：

project/ ├── index.html ├── about.html └── css/ └── style.css

在index.html里写href="css/style.css"没问题。但如果你在css/文件夹里再建一个sub/，然后从sub/里的HTML引用style.css，就得写成../style.css。我见过新手把href写成css/style.css，但文件实际在上一级，浏览器报404，样式全丢。打开开发者工具，Network面板里那个红色的404请求，就是路径写错的铁证。

还有一个细节：<link>可以引多个CSS文件。比如一个reset.css重置默认样式，一个layout.css管布局，一个theme.css管配色。顺序很重要，后面的会覆盖前面的同名规则。我习惯把重置放最前，组件次之，页面特定样式最后。这样调试的时候，用浏览器开发者工具看“计算样式”，能清楚知道哪条规则从哪个文件来。

有人问能不能用@import在CSS文件里再引别的CSS？可以，但别这么干。@import会让浏览器串行下载，一个等一个，比直接在HTML里写多个<link>慢得多。而且老版本IE对@import的支持有坑。直接写<link>，简单粗暴，性能更好。

最后提一个实际场景。如果你用Git做版本控制，外部CSS文件的好处更明显。改样式只产生一个文件的diff，代码审查时一目了然。要是样式散落在十个HTML文件里，review的人得挨个翻，漏看一个就埋雷。所以哪怕只是为了自己以后少加班，也把CSS抽出来，用<link>引进去。

代码写完了，浏览器里刷新一下，样式生效，控制台没报错，这事儿就成了。别小看这一行<link>，它撑起了整个网站视觉一致性的地基。