css教程

lichongyang

3 周前

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

一、CSS 是什么？

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

颜色
字体
间距
布局
动画

👉 HTML 管结构，CSS 管样子

二、CSS 的三种引入方式

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

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

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

&lt;style>
  p {
    color: blue;
  }
&lt;/style>

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

&lt;link rel="stylesheet" href="style.css">

三、CSS 基础语法

选择器 {
  属性: 值;
}

示例：

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

四、常见选择器（必学）

1️⃣ 标签选择器

p { color: black; }

2️⃣ 类选择器 ⭐⭐⭐

.box { width: 100px; }

HTML：

&lt;div class="box">&lt;/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 学习路线（推荐）

CSS 选择器
盒模型
Flex 布局
Grid 布局
定位
响应式
动画
预处理器（Sass）
框架（Tailwind / Bootstrap）

十二、实战建议

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