CSS层叠样式表基础教程

适合人群：

本课程适合零基础想学习网页设计的初学者、前端开发入门者、希望提升页面美化能力的后端工程师、以及想要独立完成网站样式设计的创业者。无论你是完全不懂CSS的小白，还是已经学过一点但觉得布局混乱，本课程都将带你从零开始，系统掌握CSS核心知识，让你的网页从此告别“土气”。

你将会学到：

学员将系统掌握CSS核心概念与引入方式、选择器体系（基础/组合/关系/伪类）、字体/背景/文本/表格属性、盒子模型、弹性盒子模型、文档流与浮动、定位、CSS3新特性、动画与过渡、媒体查询响应式设计、雪碧图与字体图标等核心技能，具备独立完成网页样式设计与布局的能力，能够制作出美观、专业的静态网页。

课程简介：

1. 为什么要学习本课程？

CSS（层叠样式表）是网页的“化妆师”，没有CSS的网页就像没有装修的毛坯房。掌握CSS能够带来显著的价值提升：

• 让网页更美观：控制颜色、字体、布局、动画，打造视觉吸引力

• 提升用户体验：合理的布局和交互反馈让用户更愿意停留

• 响应式设计：一套代码适配PC、平板、手机

• 职业必备：前端开发、网页设计岗位必备技能

然而，很多学习者在学习CSS时遇到以下问题：

• 属性太多记不住，不知道哪个是重点

• 布局总是不对，浮动、定位搞不清楚

• 写了样式不生效，选择器优先级混乱

• Flex和Grid不知道选哪个

• 响应式布局不知如何下手

本课程定位 “基础教程” ，从最核心的知识点讲起，通过大量实例和实战项目，带你系统掌握CSS，能够独立完成网页样式设计。

2. 课程特点

• 绝对零基础：从CSS是什么、如何引入讲起

• 选择器体系：基础/组合/关系/伪类全覆盖

• 布局专题：浮动、清除浮动、定位、弹性盒子逐个击破

• CSS3新特性：动画、过渡、变换、媒体查询

• 性能优化：雪碧图、字体图标的使用

• 代码演示：每个知识点都有完整代码示例

3. 主体大纲与设计思路

课程分为六大模块，共20节视频课：

模块一：CSS入门与选择器（5节）

• CSS简介：什么是CSS、CSS的作用与基本语法

• CSS的引入方式（内联/内部/外部）

• 选择器一（元素/类/ID/通配符/群组选择器）

• 选择器二（属性选择器/伪类选择器/伪元素）

• 关系选择器（后代/子元素/相邻兄弟/通用兄弟选择器）

模块二：CSS常用属性（4节）

• 字体属性（font-family/font-size/font-weight/font-style）

• 背景属性（background-color/image/position/size）

• 文本属性（color/text-align/text-decoration/line-height）

• 表格属性（border-collapse/边框/单元格样式）

模块三：CSS核心布局（5节）

• CSS盒子模型（margin/padding/border/content）

• 弹性盒子模型（Flex容器属性与项目属性）

• 文档流（标准文档流与脱离文档流）

• 浮动（float属性与浮动原理）

• 清除浮动（clear属性/清除浮动的多种方法）

模块四：定位与CSS3新特性（3节）

• 定位（relative/absolute/fixed/sticky）

• CSS3新特性（圆角/阴影/渐变/变换transform）

• 动画（transition过渡/animation关键帧动画）

模块五：响应式与性能优化（3节）

• 媒体查询（响应式布局原理与实战）

• 雪碧图（CSS Sprites原理与使用）

• 字体图标（Font Awesome/Iconfont的使用）