css核心教程

封面图 • 2026-04-11 • Html/Css

《CSS核心教程》是一个关于**CSS（层叠样式表）**的基础和进阶知识的教程，帮助开发者掌握如何使用 CSS 为网页添加样式、布局和美化。以下是一个结构清晰、内容全面的 **CSS 核心教程大纲**，适合初学者到中级开发者。

---

## 📘 CSS 核心教程大纲

### 一、CSS 简介
1. 什么是 CSS？
2. CSS 的作用
3. CSS 与 HTML 的关系
4. CSS 的发展历史
5. CSS 的基本语法

---

### 二、CSS 基础语法
1. CSS 选择器
   - 元素选择器（如 `p`, `div`）
   - 类选择器（`.class`）
   - ID 选择器（`#id`）
   - 属性选择器（`[type="text"]`）
   - 后代选择器（`div p`）
   - 子元素选择器（`div > p`）
   - 伪类选择器（`:hover`, `:first-child`）
   - 伪元素选择器（`::before`, `::after`）

2. CSS 属性与值
   - 属性名：值
   - 常见属性：颜色、字体、背景、边距、内边距等

3. CSS 注释
   ```css
   /* 这是一个注释 */
   ```

---

### 三、CSS 样式应用方式
1. 内联样式（不推荐）
   ```html
   <p style="color: red;">Hello</p>
   ```

2. 内部样式（在 `<style>` 标签中）
   ```html
   <style>
     p { color: blue; }
   </style>
   ```

3. 外部样式（通过 `<link>` 引入外部 `.css` 文件）
   ```html
   <link rel="stylesheet" href="styles.css">
   ```

---

### 四、CSS 布局基础
1. 盒模型（Box Model）
   - width / height
   - padding
   - border
   - margin

2. 布局方式
   - 浮动（`float`）
   - 定位（`position`：static, relative, absolute, fixed, sticky）
   - Flexbox 布局
   - Grid 布局（现代布局）

3. 响应式设计（媒体查询 `@media`）

---

### 五、CSS 文本与字体样式
1. 字体设置
   - `font-family`
   - `font-size`
   - `font-weight`
   - `font-style`
   - `font-variant`

2. 文本样式
   - `color`
   - `text-align`
   - `text-decoration`
   - `text-indent`
   - `line-height`
   - `letter-spacing`
   - `word-spacing`
   - `text-transform`

---

### 六、CSS 背景与边框
1. 背景颜色与图片
   - `background-color`
   - `background-image`
   - `background-repeat`
   - `background-position`
   - `background-size`

2. 边框样式
   - `border-width`
   - `border-style`
   - `border-color`
   - `border-radius`（圆角）
   - `box-shadow`（阴影）

---

### 七、CSS 动画与过渡
1. 过渡（Transition）
   - `transition` 属性
   - `transition-property`, `transition-duration`, `transition-timing-function`, `transition-delay`

2. 动画（Animation）
   - `@keyframes`
   - `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`

---

### 八、CSS 高级技巧
1. CSS 变量（Custom Properties）
   ```css
   :root {
     --primary-color: #007bff;
   }

.btn {
     background-color: var(--primary-color);
   }
   ```

2. CSS 模块化（如使用 CSS Modules 或 Sass/SCSS）

3. 响应式设计（移动优先原则）

4. CSS 框架简介（如 Bootstrap、Tailwind CSS）

---

### 九、CSS 实用工具与资源
1. 开发者工具（Chrome DevTools）
2. 自动格式化工具（如 Prettier）
3. CSS 预处理器（Sass、Less）
4. 在线学习平台（W3Schools、MDN Web Docs、CSS-Trick）

---

### 十、实战项目（可选）
1. 创建一个简单的个人博客页面
2. 构建一个响应式的导航栏
3. 使用 Flexbox 和 Grid 实现多列布局
4. 制作一个动画按钮或轮播图

---

## 📚 推荐学习资源
- [MDN Web Docs - CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS)
- [W3Schools CSS 教程](https://www.w3schools.com/css/)
- [CSS-Tricks](https://css-tricks.com/)
- [Codecademy - CSS Course](https://www.codecademy.com/learn/learn-css)
- [freeCodeCamp - CSS Tutorial](https://www.freecodecamp.org/news/what-is-css-in-2023-a-complete-guide-for-beginners/)

---

如果你需要更详细的某一部分（比如 Flexbox、Grid、动画等），我可以为你提供更深入的讲解或示例代码。欢迎继续提问！