为什么需要 CSS

你写好了一个结构完美的 HTML 页面，但打开浏览器一看——白底黑字，丑得像 1995 年的网页

<h1>标题</h1>
<p>普通文字。</p>
<a href="#">链接</a>
<button>按钮</button>

→ 白底黑字
→ 全靠浏览器默认样式
→ 看起来像记事本

<h1>渐变标题，大字体</h1>
<p>舒适的行高和间距</p>
<a href="#">悬停变色的链接</a>
<button>圆角阴影按钮</button>

→ 配色和谐
→ 布局清晰
→ 有交互反馈

Part 1: 引入方式

有四种方式把 CSS 塞进 HTML，但只有一种是最佳实践。

内联与内部样式

了解即可，不推荐日常使用

<p style="color: red;
  font-size: 18px;">
  红色文字
</p>

<head>
  <style>
    body { font-family: Arial; }
    h1 { color: #333; }
  </style>
</head>

外部样式表

独立 .css 文件，多页面共享——这是唯一推荐的标准做法

<!-- HTML 文件 head 中 -->
<link rel="stylesheet" href="style.css">

/* style.css */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

Part 2: 语法规则

CSS 的语法极其简单：选择器 + 大括号里的声明。

基本语法结构

一条 CSS 规则 = "给谁穿什么衣服"

选择器 {
  属性名: 属性值;
  属性名: 属性值;
  /* 注释 */
}

/* 实际示例 */
h1 {
  color: #2c3e50;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-align: center;
}

Part 3: 选择器

选择器是 CSS 的"定位器"——告诉浏览器"给谁穿衣服"。

基础选择器

四种最基本的选择方式，覆盖 90% 的日常需求

p        { color: #333; }     /* 所有段落 */
.error   { color: red; }      /* class="error" */
#logo    { width: 150px; }    /* id="logo" */
*        { margin: 0; padding: 0; box-sizing: border-box; }

组合选择器

用关系符号组合多个选择器，精确定位元素

div p   { color: blue; }       /* div 里的 p 蓝色 */
div > p { font-weight: bold; } /* div 直接子 p 加粗 */
h1 + p  { margin-top: 0; }    /* 紧接 h1 的 p 无上边距 */
h1 ~ p  { color: gray; }      /* h1 后所有同级 p 变灰 */

属性与伪类

根据属性值或元素状态来匹配

/* 有 target 属性的元素 */
a[target] { }

/* href 以 https 开头 */
a[href^="https"] { }

/* src 以 .png 结尾 */
img[src$=".png"] { }

/* class 包含 btn */
[class*="btn"] { }

/* 鼠标悬停 */
a:hover { color: red; }
/* 获得焦点 */
input:focus { border: 2px solid blue; }
/* 被点击时 */
button:active { }
/* 第一个子元素 */
li:first-child { }
/* 奇偶行 */
tr:nth-child(even) { }

伪元素

创建不存在于 DOM 中的虚拟元素，通常用于装饰

/* 引用装饰 */
.quote::before {
  content: "\201C";
  font-size: 2em;
  color: #ccc;
}

/* 清除浮动（经典用法） */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Part 4: 优先级

当多条规则冲突时，浏览器怎么知道听谁的？

层叠规则

优先级从低到高，后面的覆盖前面的

1. 浏览器默认样式    （最低）
2. 用户样式表
3. 外部/内部样式表
4. 内联样式
5. !important         （最高，慎用）

/* 正常情况下，后面的覆盖前面的 */
p { color: black; }
p { color: red; }    /* 生效：红色 */

/* !important 可以打破一切规则 */
p { color: blue !important; }  /* 强制蓝色 */

特异性计算

同一来源的规则冲突时，按选择器"权重"决定胜负

/* 0,0,0,1 — 权重 1 */
p { color: black; }

/* 0,0,1,0 — 权重 10 */
.error { color: red; }

/* 0,1,0,0 — 权重 100 */
#header { color: blue; }

/* 0,0,1,1 — 权重 11 → 胜出 */
div.error { color: green; }

Part 5: 盒模型

每个 HTML 元素都是一个矩形盒子。理解盒模型是理解 CSS 布局的基础。

两种盒模型

content-box 和 border-box 的区别，直接影响你的布局计算

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* 实际占用 = 200 + 40 + 10
   = 250px */

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* 实际占用 = 200px
   内容区 = 200 - 40 - 10
   = 150px */

┌─ margin ──────────────────┐
│ ┌─ border ──────────────┐ │
│ │ ┌─ padding ─────────┐ │ │
│ │ │ ┌─ width = content ─┐ │ │ │
│ │ │ │                  │ │ │ │
│ │ │ └──────────────────┘ │ │ │
│ │ └──────────────────────┘ │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘
实际占宽 = content + padding + border + margin

┌─ margin ──────────────────┐
│ ┌─ width ───────────────┐ │
│ │ ┌─ border ──────────┐ │ │
│ │ │ ┌─ padding ─────┐ │ │ │
│ │ │ │ content      │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ └───────────────────┘ │ │
│ └───────────────────────┘ │
└───────────────────────────┘
实际占宽 = width + margin

Part 6: CSS3 特性

CSS3 带来了渐变、过渡、变换和动画——让网页从静态变成生动。

渐变与过渡

渐变让背景有层次感，过渡让交互有温度

/* 线性渐变 */
.gradient {
  background: linear-gradient(
    45deg, #ff6b6b, #51cf66
  );
}

/* 径向渐变 */
.radial {
  background: radial-gradient(
    circle, #ff9a9e, #fecfef
  );
}

.button {
  background: #007bff;
  transition:
    background 0.3s ease,
    transform 0.2s;
}

.button:hover {
  background: #0056b3;
  transform: translateY(-2px);
}

变换与动画

transform 让元素动起来，animation 让元素按剧本表演

/* 位移 */
transform: translate(10px, -5px);
/* 缩放 */
transform: scale(1.2);
/* 旋转 */
transform: rotate(45deg);
/* 倾斜 */
transform: skew(10deg);

/* 组合使用 */
.icon {
  transform: scale(1.1) rotate(5deg);
}

/* 定义关键帧 */
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* 应用动画 */
.fade-in {
  animation: fadeIn 1s ease-in;
}

/* 弹跳动画 */
@keyframes bounce {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}
.bounce {
  animation: bounce 0.6s
    ease-in-out infinite alternate;
}

为什么需要自定义变量

一个颜色值在 20 个地方使用，改一次要搜遍整个 CSS？

.button   { background: #D06519; }
.title    { color: #D06519; }
.link     { border-color: #D06519; }
.badge    { background: #D06519; }
/* ... 还有 16 处 */
/* 换品牌色？搜 #D06519 → 全替换 → 漏一个就翻车 */

:root {
  --primary: #D06519;
}

.button { background: var(--primary); }
.title  { color: var(--primary); }
.link   { border-color: var(--primary); }
.badge  { background: var(--primary); }
/* 换品牌色？改 :root 里的一行即可 */

声明与使用

定义在 :root 里的变量 = 全局可用

/* 在 :root 中声明 = 全局作用域 */
:root {
  --primary:    #D06519;
  --text:       #1A1A1A;
  --bg:         #F9F9F7;
  --radius:     14px;
  --font-body:  'DM Sans', sans-serif;
}

/* 使用 var() 引用 */
.card {
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius);
}

.button {
  background: var(--primary);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius);
}

变量继承与 fallback

子元素可以覆盖父元素的变量，就像作用域

:root {
  --card-bg: #fff;
}

.card {
  background: var(--card-bg);
}

/* 暗色主题卡片：覆盖变量即可 */
.card.dark {
  --card-bg: #1a1a1a;
  color: #f0f0f0;
}
/* .card.dark 内部所有用 var(--card-bg) 的地方都变成暗色 */

/* 如果 --accent 没定义，就用 #D06519 */
color: var(--accent, #D06519);

/* 即使未声明变量，页面也不会报错 */

/* 全局亮色主题 */
:root { --bg: #fff; --text: #1a1a1a; }

/* 用户在设置里勾选暗色模式 */
body.dark {
  --bg: #1a1a1a;
  --text: #f0f0f0;
}
/* 所有用 --bg / --text 的组件自动切换 */

变量与设计系统

好的变量命名让样式表像说明书一样易读

:root {
  /* —— 字号阶梯 —— */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;

  /* —— 间距系统 —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* —— 圆角层级 —— */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* —— 阴影层级 —— */
  --shadow-card:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-modal:  0 10px 30px rgba(0,0,0,0.15);
  --shadow-float:  0 4px 12px rgba(0,0,0,0.12);
}

常用属性速查

日常开发最常写的 CSS 属性，查这张表就够了

动手练习