前言：CSS 是什么？

HTML 是网页的骨架（结构），CSS 是网页的皮肤（样式）。同样一份 HTML，配上不同的 CSS，可以是惨不忍睹的默认样式，也可以是大厂级别的设计感。CSS（Cascading Style Sheets，层叠样式表）就是用来控制页面外观的语言。

学习 CSS 不需要编程基础，它没有逻辑判断、没有循环，只有一条规则：选择谁，怎么改。本文从零开始，把最核心的知识一次讲透。

一、CSS 的三种引入方式

1. 外部样式表（推荐，主力方式）

/* style.css 文件 */
body { font-family: Arial, sans-serif; }
/* HTML 中引入 */
<link rel="stylesheet" href="style.css">

2. 内嵌样式（页面内 <style> 标签）

适合单页小工具，写在 head 里：

<style>
  h1 { color: #5f9e82; }
</style>

3. 内联样式（style 属性，尽量少用）

<p style="color: red;">这一句是红的</p>

原则：优先用外部样式表——好维护、可缓存、一处改处处生效。

二、基本语法

选择器 {
    属性1: 值1;
    属性2: 值2;
}
  • 选择器：告诉浏览器“改谁”
  • 属性:值：告诉浏览器“改成什么”，每条以分号结尾
  • 注释用 /* 注释内容 */

三、选择器全家桶

3.1 基础三件套

h1 { color: red; }        /* 元素选择器：所有 h1 */
.title { font-size: 20px; }  /* 类选择器：class="title" 的元素 */
#logo { width: 100px; }   /* ID 选择器：id="logo" 的元素（只能有一个） */

3.2 组合选择器

.parent .child { }   /* 后代选择器：.parent 里面的所有 .child */
.parent > .child { }  /* 子代选择器：.parent 直接子元素中的 .child */
h1 + p { }          /* 相邻兄弟：紧跟在 h1 后面的第一个 p */
h1 ~ p { }          /* 通用兄弟：h1 后面的所有 p */

3.3 属性选择器

input[type="text"] { }  /* type 属性等于 text 的 input */
a[href^="https"] { }  /* href 以 https 开头 */

3.4 伪类（状态）与伪元素（局部）

a:hover { color: orange; }          /* 鼠标悬停 */
li:first-child { }                  /* 第一个 li */
li:nth-child(2n) { }                /* 偶数个 li */
p::before { content: "→ "; }        /* p 前面插入内容 */
p::after { content: " ←"; }        /* p 后面插入内容 */

3.5 分组选择器

h1, h2, h3 { font-weight: bold; }

四、层叠与优先级（新手第一道坎）

同一个元素被多条规则命中时，谁生效？按优先级从高到低：

  1. !important（最后手段，滥用会让 CSS 变垃圾场）
  2. 内联样式（style 属性）
  3. ID 选择器（#logo）
  4. 类/伪类/属性选择器（.title、:hover、[type]）
  5. 元素/伪元素选择器（h1、::before）
  6. 相同优先级时，后写的生效（层叠的由来）

另一个重要概念是继承：文字颜色、字体、行高等属性会自动传给子元素（所以给 body 设置字体，全站生效）。

五、盒子模型（必须刻进脑子）

网页上每一个元素都是一个盒子，从内到外四层：content（内容）→ padding（内边距）→ border（边框）→ margin（外边距）。

盒子模型：从外到内四层 margin 外边距（盒子与外面的距离） border 边框（1px solid #ccc） padding 内边距（内容与边框的距离 20px） content 内容（width: 200px） 总宽度 = width + padding×2 + border×2 默认 width 只算内容层——用 box-sizing: border-box 让 width 包含 padding 和 border
图 1：记住这张图，80% 的 CSS 布局 bug 都出在这四层的关系上
.box {
    width: 200px;
    padding: 20px;    /* 内容与边框的距离 */
    border: 1px solid #ccc;
    margin: 10px;     /* 盒子与外面元素的距离 */
}

致命陷阱：默认情况下 width 只算内容宽度，padding 和 border 会把它撑大。绝大多数项目第一件事就是：

* { box-sizing: border-box; }  /* width 包含 padding 和 border */

六、常用属性速查

/* 颜色：hex / rgb / hsl */
color: #5f9e82;  color: rgb(95, 158, 130);  color: hsl(150, 26%, 50%);

/* 文字 */
font-size: 16px;  font-weight: bold;  font-family: "Microsoft YaHei", sans-serif;
text-align: center;  line-height: 1.6;  text-decoration: none;

/* 背景与边框 */
background-color: #f5f5f5;  background-image: url(bg.png);
border: 1px solid #eee;  border-radius: 8px;  /* 圆角 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 阴影 */

/* 尺寸与显示 */
width: 100px;  height: 50px;  max-width: 1200px;
display: block;  display: none;  /* 隐藏，不占位 */
visibility: hidden;  /* 隐藏，占位 */

七、定位：position

position: static;    /* 默认，正常文档流 */
position: relative;  /* 相对自己原来的位置偏移 */
position: absolute;  /* 相对最近的 relative/absolute 祖先定位 */
position: fixed;     /* 相对浏览器视口，滚动不动（回到顶部按钮就是它） */
position: sticky;    /* 吸顶：滚动到阈值后固定 */

口诀：absolute 要找爸爸，爸爸要有 position（relative 是最常用的锚点）。

八、Flexbox 弹性布局（现代布局的核心）

Flexbox：一根主轴 + 一根交叉轴 .container { display: flex; justify-content: space-between; align-items: center; } 1 2 3 4 主轴（flex-direction: row）→ justify-content 控制这里 交叉轴 → align-items 控制这里 空间不够时子元素默认挤压——用 flex: 1 或 flex-wrap: wrap 控制换行
图 2：justify-content 管主轴（横竖由 flex-direction 决定），align-items 管交叉轴
/* 容器上设置 */
.container {
    display: flex;              /* 开启弹性布局 */
    flex-direction: row;        /* 主轴方向：row 横排 / column 竖排 */
    justify-content: space-between; /* 主轴对齐：center / space-between / flex-end */
    align-items: center;        /* 交叉轴对齐 */
    gap: 16px;                  /* 子元素间距（不用再写 margin） */
}

一条口诀：justify-content 管主轴（方向由 flex-direction 决定），align-items 管交叉轴。

子元素常用：flex: 1（等分剩余空间）、flex-grow（放大比例）、align-self（单独对齐）。

九、Grid 网格布局（两栏布局一把梭）

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr;  /* 两列，右边两倍宽 */
    gap: 20px;
}

什么时候用哪个：一维排列（一行/一列）用 Flexbox，二维布局（行列同时控制）用 Grid。你的博客两栏布局（内容+侧栏）就是典型的 Grid/Flex 场景。

十、响应式：一套代码适配手机和电脑

/* 移动优先：先写手机样式，再在断点处增强 */
.card { width: 100%; }

@media (min-width: 768px) {   /* 屏幕 ≥ 768px 时生效 */
    .card { width: 50%; }
}

@media (min-width: 1200px) {
    .card { width: 33.33%; }
}

常用断点：768px（平板）、1024px（笔记本）、1200px（桌面）。优先用相对单位：rem（相对根字号）、em（相对父字号）、%（相对父容器）、vw/vh（相对视口）。

十一、过渡与动画：让页面动起来

/* 过渡：属性变化时平滑过渡 */
.btn { transition: all 0.3s ease; }
.btn:hover { transform: translateY(-2px); background: #4a8b6a; }

/* 关键帧动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.box { animation: fadeIn 0.6s ease; }

十二、调试：用浏览器开发者工具

  1. 右键元素 → 检查（或 F12），打开 DevTools
  2. Elements 面板：看元素的盒模型、临时改样式试效果
  3. Computed 面板：看最终生效的计算值（查“为什么没生效”神器）
  4. 改完记得：刷新前先在 DevTools 里验证，再回编辑器改源码

十三、实战练习建议

  1. 把本文的代码逐条复制到 CodePen 或本地 HTML 里跑一遍
  2. 练习目标：做一张“卡片”——圆角、阴影、悬停上浮、响应式三列
  3. 然后模仿一个你喜欢的网站首页（只看样式，不看源码）
  4. 遇到不懂的属性，直接查 MDN（mozilla 官方文档），比任何教程都权威

结语：CSS 的学习路线

第一步：吃透选择器和盒子模型（本文三四五章）→ 第二步：Flexbox 布局（八章）→ 第三步：响应式和动画（十、十一章）→ 第四步：Grid 和进阶（BEM 命名、CSS 变量、预处理器）。CSS 是那种“看起来简单，写起来全是细节”的语言，没有捷径，但每多写一行，你的审美和手感就多一分。