下面是一套从零开始、循序渐进的 CSS 教程，适合初学者，也方便你后期查阅速学 👇

一、CSS 是什么？

CSS（Cascading Style Sheets，层叠样式表）
用于控制 HTML 的 样式和布局，比如：

  • 颜色
  • 字体
  • 间距
  • 布局
  • 动画

👉 HTML 管结构，CSS 管样子

二、CSS 的三种引入方式

1️⃣ 行内样式（不推荐）

<p style="color:red; font-size:16px;">Hello</p>

2️⃣ 内部样式（小项目可用）

<style>
  p {
    color: blue;
  }
</style>

3️⃣ 外部样式（推荐 ✅）

<link rel="stylesheet" href="style.css">

三、CSS 基础语法

选择器 {
  属性: 值;
}

示例：

h1 {
  color: red;
  font-size: 24px;
}

四、常见选择器（必学）

1️⃣ 标签选择器

p { color: black; }

2️⃣ 类选择器 ⭐⭐⭐

.box { width: 100px; }

HTML：

<div class="box"></div>

3️⃣ ID 选择器

#header { height: 60px; }

4️⃣ 组合选择器

div p { color: blue; }   /* 后代 */
div > p { color: red; } /* 子元素 */

五、CSS 盒模型（核心）

每个元素都由 4 部分组成：

┌─────────────┐
│  margin     │
│ ┌─────────┐ │
│ │ border  │ │
│ │ ┌─────┐ │ │
│ │ │padding││
│ │ │content││
│ │ └─────┘ │ │
│ └─────────┘ │
└─────────────┘


.box {
  width: 200px;
  padding: 10px;
  border: 1px solid #000;
  margin: 20px;
}

👉 推荐：

* {
  box-sizing: border-box;
}

六、常用样式属性

字体

p {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
}

文本

h1 {
  text-align: center;
  color: #333;
}

背景

body {
  background-color: #f5f5f5;
}

七、布局（重点 ⭐⭐⭐）

1️⃣ Flex 布局（必学）

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

常用属性：

  • justify-content（主轴）
  • align-items（交叉轴）
  • flex-direction
  • gap

2️⃣ Grid 布局（进阶）

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

八、定位 position

.box {
  position: relative;
}
.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

类型：

  • static（默认）
  • relative
  • absolute
  • fixed
  • sticky

九、响应式设计

媒体查询

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

十、动画与过渡

过渡

button {
  transition: all 0.3s;
}
button:hover {
  background: red;
}

动画

@keyframes move {
  from { left: 0; }
  to { left: 100px; }
}

十一、CSS 学习路线（推荐）

  1. CSS 选择器
  2. 盒模型
  3. Flex 布局
  4. Grid 布局
  5. 定位
  6. 响应式
  7. 动画
  8. 预处理器（Sass）
  9. 框架（Tailwind / Bootstrap）

十二、实战建议

✅ 多写
✅ 多调试（F12）
✅ 模仿优秀网站布局
✅ 少背，多理解