logo

CSS

作者
Modified on
Reading time
3 分钟阅读:..评论:..

第一部分:CSS 入门

第一章:初识 CSS

  1. CSS 简介
    • CSS 的历史与发展
    • CSS 的应用领域
    • 为什么选择 CSS
  2. CSS 基础
    • CSS 的基本概念
    • CSS 的层叠与继承
    • CSS 的语法与结构
  3. CSS 的引入方式
    • 内联样式
    • 内部样式表
    • 外部样式表

第二章:选择器与规则

  1. 基础选择器
    • 元素选择器
    • 类选择器
    • ID 选择器
  2. 组合选择器
    • 后代选择器
    • 子选择器
    • 相邻兄弟选择器
    • 通用兄弟选择器
  3. 伪类与伪元素
    • 常见伪类(如 :hover, :active, :focus
    • 常见伪元素(如 ::before, ::after

第三章:文本与字体

  1. 文本样式
    • 字体系列(font-family
    • 字体大小(font-size
    • 字体样式(font-style
    • 字体粗细(font-weight
  2. 文本对齐与装饰
    • 文本对齐(text-align
    • 文本装饰(text-decoration
    • 文本缩进(text-indent
  3. 行高与字间距
    • 行高(line-height
    • 字母间距(letter-spacing
    • 单词间距(word-spacing

第二部分:CSS 进阶

第四章:盒模型

  1. 盒模型的基本概念
    • 内容区域
    • 内边距(padding
    • 边框(border
    • 外边距(margin
  2. 盒模型属性
    • box-sizing 属性
    • 盒模型的尺寸计算
  3. 内边距与外边距的折叠
    • 内边距的应用
    • 外边距的折叠与影响

第五章:布局基础

  1. 流动布局
    • 块级元素与内联元素
    • 标准文档流
  2. 浮动布局
    • 浮动的基本概念
    • 清除浮动
    • 浮动布局的实例应用
  3. 定位布局
    • 定位的基本概念
    • 相对定位与绝对定位
    • 固定定位与粘性定位

第六章:弹性布局(Flexbox)

  1. Flexbox 的基本概念
    • Flex 容器与 Flex 项目
    • Flex 容器属性
    • Flex 项目属性
  2. 弹性布局的应用
    • 水平居中与垂直居中
    • 多列布局与均分布局
    • 响应式布局的实现

第七章:网格布局(Grid)

  1. Grid 的基本概念
    • Grid 容器与 Grid 项目
    • 定义网格行与列
    • 网格线与网格区域
  2. 网格布局的应用
    • 创建复杂布局
    • 网格对齐与间距
    • 响应式网格布局

第三部分:高级应用与实战

第八章:响应式设计

  1. 媒体查询
    • 媒体查询的基本语法
    • 常见媒体查询示例
  2. 流式布局与弹性布局
    • 流式布局的定义与应用
    • 弹性布局在响应式设计中的应用

第九章:过渡与动画

  1. CSS 过渡
    • 过渡的基本概念
    • 过渡属性与过渡效果
  2. CSS 动画
    • 动画的基本概念
    • 关键帧动画(@keyframes
    • 动画属性与动画效果

第十章:变换与特效

  1. 变换(Transform)
    • 平移(translate
    • 缩放(scale
    • 旋转(rotate
    • 倾斜(skew
  2. 滤镜效果(Filter)
    • 常见滤镜效果(如 blur, brightness, contrast
    • 滤镜效果的组合与应用

第十一章:项目实战:创建个人作品集网站

  1. 项目介绍与规划
    • 项目需求分析与功能规划
    • 项目目录结构的设计
  2. 页面结构与布局
    • 使用 HTML 构建页面结构
    • 使用 CSS 进行布局与样式美化
  3. 互动与特效
    • 实现导航栏的交互效果
    • 添加动画与过渡效果
    • 创建响应式设计
  4. 项目总结与发布
    • 项目优化与测试
    • 部署网站到 GitHub Pages 或 Netlify

第十二章:CSS 最佳实践

  1. CSS 代码风格与规范
    • 编写高质量 CSS 代码的原则
    • 常见的 CSS 编码规范
  2. 可维护性与模块化
    • 使用 BEM 命名法
    • CSS 预处理器(如 Sass, Less)
  3. 性能优化
    • 减少重排与重绘
    • 使用 CSS 压缩工具

第十三章:前沿技术与工具

  1. CSS 预处理器
    • Sass 的基本语法与使用
    • Less 的基本语法与使用
  2. CSS 框架
    • Bootstrap 的基本概念与使用
    • Tailwind CSS 的基本概念与使用
  3. 现代 CSS 功能
    • CSS 变量(Custom Properties)
    • CSS Houdini