网站
引入
CSS 写好之后，需要放到网页中才能生效。
常见方式有三种：内联 CSS、内部 CSS 和 外部 CSS。
正文
定义
定义
内联、内部、外部 CSS 是三种把 CSS 应用到 HTML 页面中的方式，区别主要在于 CSS 写在哪里。
简单说：
- 内联 CSS 写在 HTML 元素的
style属性中 - 内部 CSS 写在 HTML 文件的
<style>标签中 - 外部 CSS 写在单独的
.css文件中，再通过<link>引入
内联 CSS
内联 CSS 直接写在元素的 style 属性中。
<p style="color: red; font-size: 16px;">这是一段文字</p>这里的 style 属性用于给当前这个 <p> 单独设置样式。
内联 CSS 只影响当前元素。
内部 CSS
内部 CSS 写在 HTML 文件中的 <style> 标签里。
通常放在 <head> 中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部 CSS 示例</title>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一段文字</p>
</body>
</html>这里的 CSS 会影响当前 HTML 文件中符合选择器的元素。
例如上面的 p 会选中页面中的 <p> 元素。
外部 CSS
外部 CSS 写在单独的 .css 文件中。
然后在 HTML 中使用 <link> 引入。
HTML 文件：
<head>
<link rel="stylesheet" href="style.css">
</head>CSS 文件：
p {
color: green;
font-size: 16px;
}这里的 href 用于指定 CSS 文件路径。
外部 CSS 是实际开发中最常用的方式，因为它可以让 HTML 和 CSS 分开管理。
三种方式对比
| 方式 | 写在哪里 | 影响范围 | 常见场景 |
|---|---|---|---|
| 内联 CSS | 元素的 style 属性中 | 当前元素 | 临时测试、特殊单个样式 |
| 内部 CSS | HTML 的 <style> 标签中 | 当前 HTML 文件 | 小页面、练习、单页示例 |
| 外部 CSS | 单独的 .css 文件中 | 引入它的页面 | 正式项目、多个页面共用样式 |
什么时候使用
使用内联 CSS
适合：
- 临时测试某个样式
- 单个元素需要特殊处理
- 学习阶段快速查看效果
不适合：
- 大量重复样式
- 正式项目中的通用样式
- 需要统一维护的页面样式
使用内部 CSS
适合：
- 只有一个 HTML 文件的小练习
- 页面样式很少
- 写教程或演示代码
不适合：
- 多个页面共用样式
- 样式很多的大项目
使用外部 CSS
适合：
- 正式项目
- 多个页面共用同一套样式
- 希望 HTML 结构和 CSS 样式分开管理
外部 CSS 更利于维护。
比如多个页面都使用 style.css，只要改一个 CSS 文件，多个页面都能更新样式。
优先级关系
如果三种方式同时给同一个元素设置样式，可能会发生覆盖。
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p style="color: red;">这是一段文字</p>
</body>最后文字通常会显示为红色。
因为内联 CSS 的优先级通常高于内部 CSS 和外部 CSS。
更完整的优先级内容可以看：CSS 优先级
例子
内联 CSS 示例
<button style="background-color: blue; color: white;">按钮</button>这个样式只影响当前这个按钮。
内部 CSS 示例
<style>
button {
background-color: blue;
color: white;
}
</style>
<button>按钮</button>这个样式会影响当前页面中所有符合选择器的 <button>。
外部 CSS 示例
<link rel="stylesheet" href="style.css">button {
background-color: blue;
color: white;
}这种写法可以把样式放到单独文件里，结构更清楚。
特点
- 内联 CSS 写在
style属性中，只影响当前元素 - 内部 CSS 写在
<style>标签中，只影响当前页面 - 外部 CSS 写在
.css文件中，可以被多个页面引用 - 外部 CSS 更适合正式项目
- 内联 CSS 优先级通常较高，但不利于维护
- 内部 CSS 适合小练习或单页示例
注意事项
- 不建议在正式项目中大量使用内联 CSS
- 外部 CSS 文件路径要写对，否则样式不会生效
<link rel="stylesheet" href="style.css">通常写在<head>中- CSS 文件扩展名一般是
.css - 如果样式没生效，可以先检查文件路径、选择器和优先级
- 多个外部 CSS 文件同时引入时，后引入的样式可能覆盖前面的样式
理解
可以把三种 CSS 写法理解为样式放置的位置不同。
内联 CSS 像是直接在某个元素身上写备注，方便但不适合大量使用。
内部 CSS 像是写在当前页面顶部的统一说明，只管这个页面。
外部 CSS 像是单独的样式文件，可以让多个页面一起使用，更适合长期维护。
学习时三种都要认识，实际写项目时通常优先使用外部 CSS。
引出
理解了 CSS 的引入方式之后，可以继续学习 CSS 基础语法，了解选择器、属性和值是怎么组成一条 CSS 规则的。