CSS 入门：为什么需要 CSS 与三种添加方式
BeginnerCSS FundamentalsCSS（Cascading Style Sheets，层叠样式表）是 Web 开发三大核心语言之一，负责定义网页的 视觉表现——颜色、字体、布局、动画等一切与"看起来如何"相关的部分。
一、📜 CSS 的历史与诞生
1.1 HTML "无法满足样式需求" 的时代
在互联网早期（~1996 年），只有 HTML 而没有 CSS。开发者想控制网页的外观却没有好的手段。Mosaic 浏览器创始人 Marc Andreessen 曾在邮件中回复开发者：
"Sorry, you're screwed."（抱歉，你没办法。）
1.2 HTML 3.2 的尝试与问题
1997 年 W3C 发布 HTML 3.2，引入了样式相关的标签和属性：
| 元素/属性 | 作用 | 状态 |
|---|---|---|
<font> 标签 | 设置字体大小、颜色、字体类型 | ❌ 已弃用 |
color 属性 | 设置文本颜色 | ❌ 已弃用 |
<center> 元素 | 居中对齐内容 | ❌ 已弃用 |
为什么弃用？
将样式混入 HTML 会导致代码 严重耦合：一个简单页面都会有成千上万行的样式代码与内容标记混在一起，完全无法维护。
1.3 CSS 的诞生
1996 年，Håkon Wium Lie 提出 CSS 推荐标准（W3C CSS1），核心思想是 关注点分离（Separation of Concerns）：
- HTML → 负责 内容与结构
- CSS → 负责 视觉呈现
这种模块化设计使得前端开发变得可维护、可协作。
二、🎨 CSS 能做什么
CSS 可以在 不修改 HTML 的前提下，彻底改变网页的外观：
| 维度 | 控制内容 |
|---|---|
| 颜色 | 背景色、文字色、边框色 |
| 字体 | 字体族、大小、粗细、行高 |
| 布局 | 定位、浮动、Flex、Grid |
| 间距 | Margin、Padding |
| 动画 | 过渡、关键帧动画、变换 |
CSS 的魔法
同一份 HTML，仅通过切换/添加 CSS 文件就能呈现截然不同的视觉效果。内容不变，样式任选。
三、📝 CSS 规则的基本语法
一条 CSS 规则由 选择器 和 声明块 组成：
selector {
property: value;
}| 组成部分 | 说明 | 示例 |
|---|---|---|
| Selector（选择器） | 指定要应用样式的 HTML 元素 | h1、.class、#id |
| Property（属性） | 要改变的样式属性 | color、font-size |
| Value（值） | 属性的取值 | red、16px |
冒号 : 分隔属性与值，分号 ; 结束一条声明。
四、🔌 三种添加 CSS 的方式
4.1 Inline CSS（行内样式）
直接在 HTML 元素的 style 属性 中编写 CSS：
<html style="background-color: blue;">| 特点 | 说明 |
|---|---|
| ✅ 优先级高 | 几乎唯一指定这 一个 元素 |
| ✅ 快速测试 | 适合临时调试某个元素的样式 |
| ❌ 不可复用 | 只对当前元素生效，其他元素需重复写 |
| ❌ 耦合严重 | 样式与 HTML 混在一起，难以维护 |
注意
Inline CSS 中 不需要选择器，因为样式已经写在了具体元素的标签内，上下文已明确。
4.2 Internal CSS（内部样式表）
在 HTML 文件的 <head> 内使用 <style> 元素：
<head>
<style>
html {
background-color: red;
}
</style>
</head>| 特点 | 说明 |
|---|---|
| ✅ 需要选择器 | 可以选择当前页面中的 任意元素 |
| ✅ 集中管理 | 样式写在一处，便于查看 |
| ❌ 仅限单页 | 只对当前 HTML 文件生效 |
4.3 External CSS（外部样式表）⭐ 推荐
将 CSS 写在独立的 .css 文件中，通过 <link> 元素引入：
<!-- index.html -->
<head>
<link rel="stylesheet" href="./styles.css" />
</head>/* styles.css */
html {
background-color: green;
}| 特点 | 说明 |
|---|---|
| ✅ 完全分离 | HTML 与 CSS 各管各的 |
| ✅ 多页复用 | 多个 HTML 文件可以链接同一个 CSS 文件 |
| ✅ 浏览器缓存 | CSS 文件可被缓存，加快后续页面加载 |
| ✅ 协作友好 | 设计师改 CSS，开发者改 HTML，互不干扰 |
五、📊 三种方式对比总结
| 维度 | Inline | Internal | External |
|---|---|---|---|
| 作用范围 | 单个元素 | 单个页面 | 整个网站 |
| 是否需要选择器 | ❌ 不需要 | ✅ 需要 | ✅ 需要 |
| 可维护性 | ⭐ | ⭐⭐ | ⭐⭐⭐ |
| 复用性 | 无 | 低 | 高 |
| 推荐场景 | 临时调试 | 单页原型 | 生产环境 |
优先级法则
当三种方式同时作用于同一元素的同一属性时，Inline > Internal > External。这是 CSS 层叠机制的一部分（详见《选择器与优先级》）。