CSS 基础入门

前言：为什么需要 CSS？

在早期，网页的“内容”和“样式”是混在一起的。想改 100 个标题的颜色，就得改 100 次 HTML 代码，简直是噩梦。

1996 年，CSS（层叠样式表） 诞生，彻底解决了这个问题。
如果把网页比作建房子：

HTML 是“搭骨架”：决定哪里是墙、哪里是门（内容结构）。
CSS 是“搞装修”：决定墙刷什么漆、地板铺什么砖（视觉外观）。

核心优势：结构与样式分离。样式写一次，全站复用，极大地提升了维护效率。

核心 1：怎么把 CSS 用到网页里？（3 种方式）

要让 CSS 生效，必须把它和 HTML 关联起来。按推荐程度排序：

方式	写法示例	适用场景	推荐指数
1. 外部样式表	`<link rel="stylesheet" href="style.css">`	实际项目必备。一个 CSS 文件搞定全站样式，修改一次全网生效。	⭐⭐⭐⭐⭐
2. 内部样式表	在 HTML 的 `<head>` 里写 `<style> p { color: red; } </style>`	单页面临时测试。不需要新建文件，但代码无法跨页面复用。	⭐⭐⭐
3. 内联样式	`<p style="color: green;">文字</p>`	极不推荐。样式和标签死死绑定，后期改起来让人崩溃。	⭐

实战演示

<!DOCTYPE html>
<html>
<head>
  <!-- 1. 外部样式表：通过 link 标签引入外部的 style.css 文件 -->
  <link rel="stylesheet" href="style.css">
  
  <!-- 2. 内部样式表：直接写在 head 里的 style 标签中 -->
  <style>
    h1 { color: blue; }
  </style>
</head>
<body>
  <!-- 3. 内联样式：直接写在标签的 style 属性里 -->
  <p style="color: green;">这是一段绿色的文字</p>
</body>
</html>

核心 2：CSS 语法公式 —— “选谁” + “怎么改”

CSS 的语法非常像下达指令，核心公式是：选择器 { 属性: 值; }

/* 这是一个 CSS 注释，浏览器会忽略它 */
p { 
  color: red;       /* 声明：把文字颜色（属性）改成红色（值） */
  font-size: 16px;  /* 注意：必须用冒号分隔，分号结尾！ */
}

关键零件：选择器（我要改谁？）

最常用的 3 种基础选择器：

选择器类型	语法	作用	示例
元素选择器	`标签名`	选中所有同名标签	`p { color: red; }` (所有段落变红)
类选择器	`.类名`	选中带有特定 `class` 的元素（最常用，可复用）	`.box { background: yellow; }`
ID 选择器	`#ID名`	选中带有特定 `id` 的元素（全页唯一，不可复用）	`#header { font-size: 20px; }`

实战演示：HTML 与 CSS 的配合

<!-- HTML 骨架 -->
<p>我是普通段落</p>
<p class="highlight">我是高亮段落（带 class）</p>
<div id="footer">我是底部区域（带 id）</div>

/* CSS 装修 */
p { color: #333; }                  /* 元素选择器：所有 p 标签变深灰 */
.highlight { background: yellow; }  /* 类选择器：带 class="highlight" 的背景变黄 */
#footer { font-size: 14px; }        /* ID选择器：带 id="footer" 的字号变小 */

核心 3：万物皆盒子 —— CSS 盒模型 (Box Model)

这是 CSS 最核心的概念：网页里的每一个元素（段落、图片、按钮），本质上都是一个矩形盒子。

从内到外，盒子分为 4 层：

Content（内容区）：文字或图片本身占据的核心区域。
Padding（内边距）：内容与边框之间的“缓冲带”（比如让文字不贴着边框）。
Border（边框）：盒子的外壳（可以设置粗细、颜色、实线/虚线）。
Margin（外边距）：盒子与其他盒子之间的距离（用来推开别人）。

💡 通俗理解：想象一个装在快递箱里的易碎品。
物品本身是 Content，包裹物品的防震气泡膜是 Padding，纸箱纸板是 Border，两个快递箱之间的距离是 Margin。

实用技巧：方向简写 (Shorthand)

设置 padding 或 margin 时，经常需要指定上下左右。CSS 提供了一行搞定的“顺时针简写法”（上 ➡️ 右 ➡️ 下 ➡️ 左）：

简写代码	实际含义	记忆口诀
`padding: 10px;`	上下左右全是 10px	1个值：全包圆
`padding: 10px 20px;`	上下 10px，左右 20px	2个值：上下、左右
`padding: 10px 20px 30px;`	上 10px，左右 20px，下 30px	3个值：上、左右、下
`padding: 10px 20px 30px 40px;`	上、右、下、左（顺时针）	4个值：顺时针转一圈

(注：margin: 0 auto; 是一个经典技巧，表示上下外边距为 0，左右自动平分，能让盒子水平居中。)

🚀 总结

今天你掌握了 CSS 的三大基石：

引入方式：知道该把 CSS 写在哪里（首选外部样式表）。
基础语法：学会用“选择器”精准定位元素，用“属性: 值;”修改样式。
盒模型：看透网页布局的本质，学会用 Margin 和 Padding 控制间距。