Z
ZHANK
编程在线教程CSS 教程
🎨

CSS 教程

从选择器盒模型到 Flex/Grid/动画，覆盖 65 篇层叠样式表完整教程

CSS 入门

1

CSS 简介

了解什么是 CSS、CSS 能做什么、CSS3 新特性

2

CSS 语法

选择器 + 声明块、属性:值 格式、CSS 规则集结构

3

基本选择器

元素/类/id/通配符选择器、分组选择器、选择器列表

4

CSS 使用方式

外部样式表/内部样式表/内联样式三种方式及优先级

5

CSS 注释

/* */ 注释语法、注释用途、调试技巧

6

CSS 颜色

颜色名/RGB/RGBA/HEX/HSL/HSLA、透明度、currentColor 关键字

背景与边框

7

背景 background

background-color/image/repeat/position/size 全部背景属性

8

背景图像

background-image 设置、多背景叠加、渐变背景

9

背景附着与简写

fixed/scroll 背景固定、background 简写属性一行搞定

10

边框 border

border-width/style/color、各边独立设置、简写、圆角初识

11

圆角边框

border-radius 圆角、椭圆角、四个角独立设置、圆形头像

12

轮廓 outline

outline 不占空间的轮廓、offset 偏移、与 border 区别

13

渐变 background-image

线性渐变 linear-gradient、径向渐变 radial-gradient、锥形渐变

盒模型

14

外边距 margin

margin 外边距、各边独立设置、auto 居中、外边距合并

15

内边距 padding

padding 内边距、各方向设置、不会合并、与 margin 对比

16

宽度与高度

width/height、min/max-width/height、百分比/像素/视口单位

17

盒模型详解

内容区/padding/border/margin 四层结构、标准盒模型 vs IE 盒模型

18

box-sizing

content-box vs border-box、全局设置 *,*::before,*::after

文本与字体

19

文本样式

color/text-align/vertical-align/direction 文本颜色与对齐

20

文本装饰

underline/overline/line-through 装饰线、颜色、样式、粗细

21

文本转换与间距

uppercase/lowercase/capitalize、letter-spacing/word-spacing/line-height

22

文本阴影

text-shadow 偏移/模糊/颜色、多层阴影叠加、发光文字效果

23

字体 font

font-family/font-size/font-weight/font-style、简写、安全字体

24

Google 字体与图标

Google Fonts 引入、@font-face 自定义字体、Font Awesome 图标

25

CSS 单位

px/em/rem/vw/vh/% 等单位对比、何时用哪个

链接列表表格

26

CSS 链接

:link/:visited/:hover/:active 四种状态、链接按钮化

27

CSS 列表

list-style-type/position/image、自定义列表标记、导航列表

28

CSS 表格

border-collapse、斑马纹、悬停高亮、响应式表格、caption-side

29

display 属性

block/inline/inline-block/none/flex/grid 各种 display 值

30

不透明度

opacity 0~1、rgba 透明背景、hover 透明效果

布局基础

31

定位 position

static/relative/absolute/fixed/sticky 五种定位详解

32

z-index 层叠

z-index 控制叠放顺序、层叠上下文、只对定位元素生效

33

溢出 overflow

visible/hidden/scroll/auto、overflow-x/y 分轴控制

34

浮动 float

float left/right、文字环绕、clear 清除浮动、clearfix 技巧

35

inline-block 布局

inline-block 横向排列、空白间隙处理、vertical-align 对齐

36

水平垂直居中

margin:auto/text-align/line-height/flex/grid/transform 各种居中方案

37

max-width 应用

max-width 限制宽度、响应式适配、与 width 的配合

选择器进阶

38

关系选择器

后代/子代/相邻兄弟/通用兄弟四种组合器

39

伪类选择器

:hover/:focus/:first-child/:last-child/:nth-child()/:not() 等常用伪类

40

伪元素

::before/::after/::first-line/::first-letter/::selection 伪元素

41

属性选择器

[attr]/[attr=val]/[attr^=]/[attr$=]/[attr*=] 七种属性选择器

42

优先级与 !important

特指度计算(0,0,0,0)、!important 慎用、覆盖规则

导航与 UI

43

导航栏

垂直导航栏、水平导航栏、当前页高亮、固定导航

44

下拉菜单

纯 CSS 下拉菜单、hover 展开、嵌套子菜单

45

CSS 表单美化

input/textarea/select 样式化、focus 聚焦效果、表单布局

46

工具提示 Tooltip

纯 CSS 实现 tooltip、四个方向箭头、淡入动画

47

CSS 按钮

按钮颜色/尺寸/圆角/边框/阴影/悬停/禁用 完整按钮样式

CSS3 动效

48

盒阴影 box-shadow

box-shadow 偏移/模糊/扩散/颜色/inset、多层阴影、卡片效果

49

2D 转换

translate/rotate/scale/skew/matrix 2D 变换函数

50

3D 转换

rotateX/Y/Z、perspective 透视、transform-style 3D 空间

51

过渡 transition

transition-property/duration/delay/timing-function、贝塞尔曲线

52

动画 animation

@keyframes 定义动画、animation 属性、循环/反向/暂停

现代布局

53

Flexbox 弹性布局

display:flex、主轴/交叉轴、justify-content/align-items/flex 属性

54

Grid 网格布局

display:grid、行列定义、fr 单位、grid-area 区域命名

55

媒体查询

@media 语法、min/max-width、print/screen、and/or 逻辑

56

响应式设计入门

viewport、移动优先、断点设置、响应式图片/视频

57

CSS 变量

--变量名 定义、var() 使用、:root 全局变量、JS 操作

58

CSS 计数器

counter-reset/counter-increment、嵌套计数器、自动编号

实用技巧

59

图像样式

图片圆角/缩略图/响应式、filter 滤镜、卡片图片

60

object-fit

fill/contain/cover/scale-down/none、object-position 定位

61

多列布局

column-count/column-gap/column-rule 报纸式多栏排版

62

用户界面

resize 调整大小、cursor 鼠标样式、caret-color 光标颜色

63

数学函数

calc()/min()/max()/clamp() 动态计算、响应式数值

64

CSS 最佳实践

命名规范 BEM、文件组织、浏览器兼容、性能优化、代码规范

65

CSS 总结

CSS 知识体系回顾、学习路线、推荐资源