CSS 三种引入方式
写完的 CSS 放在哪里，浏览器怎么知道要用它，这是学 CSS 的第一个实际问题。一共有三种引入方式，内联样式、内部样式表、外部样式表，按使用频率从低到高讲。
内联样式
内联样式直接把样式写在 HTML 标签的 style 属性里。
<p style="color: red; font-size: 18px;">这段文字是红色</p>优点是最直接，不用找文件，看一眼标签就知道它长什么样。缺点也很明显，它只作用于当前这一个标签，想给十个段落统一样式，就得复制十遍，改一处要改十处。而且样式混在 HTML 里，违背了结构样式分离的原则，页面一大就失控。
所以内联样式只适合两种场景，临时调试，或者用 JavaScript 动态修改某个元素的样式。正经项目里基本不用。
内部样式表
内部样式表把 CSS 集中写在一个 style 标签里，放在 head 里。
<head>
<style>
p {
color: #333;
font-size: 16px;
}
.highlight {
background: #ffd54f;
}
</style>
</head>
<body>
<p>普通段落</p>
<p class="highlight">高亮段落</p>
</body>和内联相比，它最大的进步是样式可以复用了，一条规则管住页面上所有的 p。但它的作用范围仍然只限当前页面，另一个页面想用同样的样式，还得再写一遍。所以内部样式表适合单页的小项目，或者给某个页面单独定制样式时偶尔用一下。
外部样式表
外部样式表把 CSS 单独存成一个 .css 文件，页面里用 link 标签引入。
<head>
<link rel="stylesheet" href="style.css">
</head>/* style.css */
p {
color: #333;
font-size: 16px;
}这是项目里的标准做法，三个理由。第一，多个页面可以 link 同一个文件，改一处全站生效。第二，浏览器会缓存这个文件，用户第二次访问不用重新下载，页面加载更快。第三，样式和结构彻底分离，HTML 文件干干净净，CSS 文件独立维护，团队协作也方便。
实际开发中还会把样式按功能拆成多个文件，比如 reset.css、layout.css、components.css，然后分别 link 进来，这是后话。
优先级关系
三种方式同时出现时，以谁为准。记住一条主线，内联样式优先级最高，内部和外部样式表之间的冲突，按”谁在 HTML 里出现得更晚谁生效”来裁定。后面学层叠的时候会发现，这只是完整的优先级规则的一个局部，现在先记住大方向。
| 引入方式 | 作用范围 | 优先级 | 适用场景 |
|---|---|---|---|
| 内联样式 | 单个元素 | 最高 | 调试、JS 动态修改 |
| 内部样式表 | 单个页面 | 中等 | 单页小项目 |
| 外部样式表 | 多页面共享 | 看引入顺序 | 正式项目首选 |
小结
三种方式，核心记住一句，能外部就别内部，能内部就别内联。样式是拿来复用的，放得越靠外，复用越方便。下一篇看 CSS 的语法规则，终于要写正式的代码了。