CSS
- 作者
- Name
- 青玉白露
- Github
- @white0dew
- Modified on
- Reading time
- 3 分钟
阅读:.. 评论:..
第一部分:CSS 入门
第一章:初识 CSS
- CSS 简介
- CSS 的历史与发展
- CSS 的应用领域
- 为什么选择 CSS
- CSS 基础
- CSS 的基本概念
- CSS 的层叠与继承
- CSS 的语法与结构
- CSS 的引入方式
- 内联样式
- 内部样式表
- 外部样式表
第二章:选择器与规则
- 基础选择器
- 元素选择器
- 类选择器
- ID 选择器
- 组合选择器
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 通用兄弟选择器
- 伪类与伪元素
- 常见伪类(如
:hover
,:active
,:focus
) - 常见伪元素(如
::before
,::after
)
- 常见伪类(如
第三章:文本与字体
- 文本样式
- 字体系列(
font-family
) - 字体大小(
font-size
) - 字体样式(
font-style
) - 字体粗细(
font-weight
)
- 字体系列(
- 文本对齐与装饰
- 文本对齐(
text-align
) - 文本装饰(
text-decoration
) - 文本缩进(
text-indent
)
- 文本对齐(
- 行高与字间距
- 行高(
line-height
) - 字母间距(
letter-spacing
) - 单词间距(
word-spacing
)
- 行高(
第二部分:CSS 进阶
第四章:盒模型
- 盒模型的基本概念
- 内容区域
- 内边距(
padding
) - 边框(
border
) - 外边距(
margin
)
- 盒模型属性
box-sizing
属性- 盒模型的尺寸计算
- 内边距与外边距的折叠
- 内边距的应用
- 外边距的折叠与影响
第五章:布局基础
- 流动布局
- 块级元素与内联元素
- 标准文档流
- 浮动布局
- 浮动的基本概念
- 清除浮动
- 浮动布局的实例应用
- 定位布局
- 定位的基本概念
- 相对定位与绝对定位
- 固定定位与粘性定位
第六章:弹性布局(Flexbox)
- Flexbox 的基本概念
- Flex 容器与 Flex 项目
- Flex 容器属性
- Flex 项目属性
- 弹性布局的应用
- 水平居中与垂直居中
- 多列布局与均分布局
- 响应式布局的实现
第七章:网格布局(Grid)
- Grid 的基本概念
- Grid 容器与 Grid 项目
- 定义网格行与列
- 网格线与网格区域
- 网格布局的应用
- 创建复杂布局
- 网格对齐与间距
- 响应式网格布局
第三部分:高级应用与实战
第八章:响应式设计
- 媒体查询
- 媒体查询的基本语法
- 常见媒体查询示例
- 流式布局与弹性布局
- 流式布局的定义与应用
- 弹性布局在响应式设计中的应用
第九章:过渡与动画
- CSS 过渡
- 过渡的基本概念
- 过渡属性与过渡效果
- CSS 动画
- 动画的基本概念
- 关键帧动画(
@keyframes
) - 动画属性与动画效果
第十章:变换与特效
- 变换(Transform)
- 平移(
translate
) - 缩放(
scale
) - 旋转(
rotate
) - 倾斜(
skew
)
- 平移(
- 滤镜效果(Filter)
- 常见滤镜效果(如
blur
,brightness
,contrast
) - 滤镜效果的组合与应用
- 常见滤镜效果(如
第十一章:项目实战:创建个人作品集网站
- 项目介绍与规划
- 项目需求分析与功能规划
- 项目目录结构的设计
- 页面结构与布局
- 使用 HTML 构建页面结构
- 使用 CSS 进行布局与样式美化
- 互动与特效
- 实现导航栏的交互效果
- 添加动画与过渡效果
- 创建响应式设计
- 项目总结与发布
- 项目优化与测试
- 部署网站到 GitHub Pages 或 Netlify
第十二章:CSS 最佳实践
- CSS 代码风格与规范
- 编写高质量 CSS 代码的原则
- 常见的 CSS 编码规范
- 可维护性与模块化
- 使用 BEM 命名法
- CSS 预处理器(如 Sass, Less)
- 性能优化
- 减少重排与重绘
- 使用 CSS 压缩工具
第十三章:前沿技术与工具
- CSS 预处理器
- Sass 的基本语法与使用
- Less 的基本语法与使用
- CSS 框架
- Bootstrap 的基本概念与使用
- Tailwind CSS 的基本概念与使用
- 现代 CSS 功能
- CSS 变量(Custom Properties)
- CSS Houdini