# CSS、CSS3 系统学习视频合集
TIP
全面系统深入的学习 CSS、CSS3 样式相关内容，这也将是 Web 前端的核心重点部分，每一节课都配有作业和针对性的应用场景案例训练。
课程完成后达到独立完成企业真实 PC 端项目开发、移动 WebApp 项目开发、多端响应式项目开发，云服务器项目部署上线，并掌握一线大厂项目开发布局规范和标准。
# 1、CSS 基础认知 和 选择器
本节课包含的知识内容概述：
- CSS/CSS3 基础认知，CSS 简介
- CSS 的基本语法，CSS 样式的两种书写方式
- CSS 注释，CSS 的书写位置
- CSS 样式的优先级，总结：CSS4 种书写位置特点与区别
- CSS 基础选择器：选择器的作用，选择器的分类，标签选择器，ID 选择器，class 选择器，通配符选择器，基础选择器的权重和优先级，后代选择器 ...
点击查看完整版视频讲解
# 2、CSS 文本和字体属性、列表属性
本节课包含的知识内容概述：
- 常用文本样式属性
- color 属性：十六进制表示法、rgb() 表示法、rgba() 表示法
- font-size 属性、font-weight 属性、font-style 属性
- @font-face 自定义字体
- CSS 文本属性
- text-decoration 属性 - 修饰线，text-indent 属性 - 首行缩进，line-height 属性 - 行高
- 行文本垂直、水平居中，font 合写属性 - 复合写法，继承性
- word-spacing 字间距，letter-spacing 字符间距
- 列表样式
- list-style-type 属性，list-style-image 属性，list-style-position 属性
- list-style 综合写法
- 在实际项目中的应用场景
- 单行文本水平垂直居中
- 设置中英文混合间距
- 新闻图文排版
点击查看完整版视频讲解
# 3、CSS 盒子模型
本节课包含的知识内容概述：
- 深入理解盒子模型
- 盒模型的属性
- width 和 height 属性，border 属性，padding 属性，padding 的不同数值写法
- margin 属性，margin 的不同数值写法，margin 的塌陷，margin 负值
- 去掉元素的默认样式，盒子的水平居中，盒子模型占位计算
- box-sizing 怪异盒模型
- box-sizing 深入解读，盒模型的两种类型：标准盒模型、怪异盒模型
- 标准盒模型和怪异盒模型区别，盒模型转换
- 前端切图工具安装和使用
- Photoshop 设计软件，PxCook
- Snipaste，蓝湖
- 针对性案例训练（作业）
- 商品卡片布局，利用 CSS 绘制小三角形，利用 CSS 开发新闻列表
点击查看完整版视频讲解
# 4、CSS display 属性、背景属性
本节课包含的知识内容概述：
- display 属性
- display 属性的作用，元素外部显示类型，行内元素和块级元素的互相转换
- 隐藏元素方法，常见大厂面试真题，去掉行内块元素默认的空白间隙
- background 背景属性
- background-color，background-image，background-repeat，background-position
- background 复合属性，CSS 精灵图，background-attachment 背景固定
点击查看完整版视频讲解
# 5、背景属性，线性渐变、径向渐变、其他属性
本节课包含的知识内容概述：
- background-size 背景尺寸，background-clip，background-origin
- 线性渐变
- 未设置角度，则默认从上向下渐变
- 关键字来指定渐变的方向，用度数来指定渐变方向
- 多个颜色值，并且可以用百分数定义它出现的位置、浏览器私有前缀、渐变色工具
- 径向渐变
- 简单的径向渐变，设置颜色节点出现位置，设置径向渐变的形状 shape
- 指定径向渐变中心位置 position，指定不同尺寸的大小 size
- 背景相关属性的补充
- 其它常用属性
- cursor 鼠标样式，outline 外轮廓，overflow 超出部分隐藏，vertical-align 属性
- 应用场景：常用的 a 标签布局按钮，水平居中的轮播图按扭
- 针对性案例训练（作业）
- 常见的产品展示效果，常用的分页导航，小米官网左侧菜单，精美的 Tab 选项卡菜单
点击查看完整版视频讲解
# 6、CSS 复合选择器
本节课包含的知识内容概述：
- 交集选择器、并集（分组）选择器
- 关系选择器
- 后代选择器，子代选择器，相邻兄弟选择器，后续兄弟选择器
- 伪类选择器
- a 伪类选择器，
:focus获取焦点，:checked被选中
- a 伪类选择器，
- 伪元素选择器：
::after，::before，::placeholder - 属性选择器
E[attr]，E[attr="value"]，E[attr~="value"]，E[attr^="value"]E[attr$="value"]，E[attr*="value"]，E[attr|='value']
- 序号选择器
:first-child和:last-child选择器，:nth-child(n)和:nth-last-child(n)选择器:nth-of-type(n)和:nth-last-of-type(n)
- 其它选择器：
only-child选择器，:root选择器，:empty选择器
点击查看完整版视频讲解
# 7、CSS 三大特性：继承性、层叠性、优先级
本节课包含的知识内容概述：
- CSS 继承性
- 什么是 CSS 继承性，CSS 继承性遵顺 “就近原则” ，可继承和不可继承属性有哪些
- line-height 的继承性，body 标签样式初始化，设置继承性
- CSS 层叠性
- CSS 层叠性解读，CSS 的叠加，CSS 的覆盖，层叠性的冲突处理
- CSS 选择器优先级
- 选择器类型的权重，选择器优先级计算
!important提升权重，总结 CSS 选择器优先级
- 测试题，针对性应用场景案例训练
点击查看完整版视频讲解
# 8、浮动、BFC 规范、清除浮动的最佳实践
本节课包含的知识内容概述：
- 实现 CSS 布局的几种策略
- 正常布局流（Normal Flow）
- 正常布局流中，块级元素的排列方式、 内联元素排版方式
- 浮动布局
- 浮动布局起源，浮动是如何工作的，浮动的本质和要点，如何产生浮动
- 元素浮动的特性
- 元素添加浮动后，脱离文档流
- 如果父元素的宽度不够，浮动的顺序贴靠特性；元素浮动后，具有行内块级元素特性
- 浮动的元素会造成父元素高度塌陷，浮动对文字的影响，使用浮动实现网页布局
- BFC 规范 和 浏览器差异
- 创建 BFC，BFC 的其他作用，浏览器差异
- 清除浮动：清除浮动方法 1、2、3、4 清除浮动的最佳实践
- 浮动应用场景
- 实现左右两列式布局、实现一行多列式布局、三列式布局，中间自适应
- 多行多列式布局，实现整站结构布局
- 针对性案例训练（作业）
- 前端必会的 3 种 css 布局技术，酷狗音乐热门榜单，小米商城产品展示效果
点击查看完整版视频讲解
# 9、CSS 定位、z-index 层叠顺序
本节课包含的知识内容概述：
- 相对定位
- 相对定位的特点，相对定位前后的对比
- 相对定位应用场景
- 鼠标滑动到元素，元素少量位置偏移动画、网站导航、导航（鼠标划过带下划线）、水平进度条
- 绝对定位
- 绝对定位元素 8 大特性，绝对定位脱离标准的文档流、脱离文档流，层级提升
- 相对于其最近的定位的父元素定位、父元素及祖先元素都未定位，则相对于 body 定位
- 父元素及祖先元素都未定位，则相对于 body 定位、行内元素绝对定位后，具有行内块元素特性
margin: 0 auto;水平居中失效、top 与 bottom 及 left 与 right 同时设置，调节宽高- top 与 bottom 及 left 与 right 的优先级，绝对定位的盒子垂直、水平居中
- 绝对定位应用场景
- 绝对定位用来结合 CSS 精灵，垂直居中对齐使用
- 绝对定位实现黑色半透明遮罩层
- 绝对定位实现带三角形的会话框
- 固定定位：语法和实践
- 固定定位应用场景
- 固定定位实现返回顶部，常见的登录弹窗效果，左右固定、中间自适应布局
- 粘性定位
- 粘性定位解读，元素的父级拥有“滚动机制”
- 粘性定位应用场景
- 头部和左侧吸顶盒效果，字母排序显示效果，表格首行冻结
- z-index 设置定位元素层叠顺序
- z-index 正值，z-index 负值
点击查看完整版视频讲解
# 10、CSS 层叠上下文、iconfont、margin 负值
本节课包含的知识内容概述：
- CSS 中的层叠上下文
- 什么是 “层叠上下文”，层叠上下文的创建
- 根层叠上下文，定位元素的传统层叠上下文，CSS3 与新时代的层叠上下文
- 什么是层叠顺序，3 大应用案例，何确定两个元素的的层叠顺序
- 阿里图标库 iconfont
- 二维码图片生成
- margin 负值
- margin 负值特性：margin-left、margin-right、margin-top、margin-bottom 负值
- margin 负值在塌陷时合并规则
- margin 负值应用场景
- 等高布局，一行多列网格布局，头像叠加效果
- 元素水平垂直居中，圣杯布局 与 双飞翼布局
- 弹性滑动导航，水平进度条
点击查看完整版视频讲解
# 11、圆角、阴影、文本图像处理、CSS 函数
本节课包含的知识内容概述：
- CSS 圆角
- 圆角边框，圆角边框 - border-radius 4 种不同值写法
- 椭圆边框，椭圆边框 - border-radius 4 种不同值写法
- border-radius 的值百分比表示法，单独设置四个方向圆角-小属性
- box-shadow 盒子阴影
- 简单阴影，阴影延展，内阴影，多个阴影，去掉阴影
- 实战应用：纸张效果
- text-shadow 文本阴影
- 文本溢出显示省略号
- 单行文本溢出显示省略号，多行文本溢出显示省略号
- opacity 设置元素不透明度
- filter 滤镜-图片模糊
- object-fit 图片裁剪
- 防止拖拽文本域
- calc 函数，var 函数，:root 选择器
- 专项案例训练（作业）
- CSS 开发天猫登录注册页面，CSS 表格布局（QQ 音乐排行榜效果）
点击查看完整版视频讲解
# 12、transition 过渡动画与 animation 自定义动画
本节课包含的知识内容概述：
- transition 过渡动画
- 如何理解过渡动画 ？过渡动画何时发生 ？
- transition 基本语法，可参于过渡的属性，all 这个特殊属性，定义多个过渡动画
- 过渡的四个小属性，时间函数，贝塞尔曲线
- transition 过渡动画在实际开发中的应用
- 鼠标滑动，背景从透明到半透明效果、鼠标滑动，文字从下往上滑动效果、商城右侧通栏导航
- animation 自定义动画
- 动画的定义、调用动画、多关键帧动画、animation 完整写法
- animation 指定多组动画、steps 帧动画、transition 与 animation 的区别
animate.css动画库- 深入学习
animate.css动画库官网，下载animate.css文件 - 在页面引入
animate.css文件，选择对应动画效果应用，BootCDN 上下载animate.css文件
- 深入学习
- 专项案例训练（作业）
- CSS3 网站全屏加载动画
点击查看完整版视频讲解
# 13、transform 2D 与 3D 转换
本节课包含的知识内容概述：
- transform 属性
- transform 的 2D 变换函数，transform 的 3D 转换属性值
- 2D 转换
- translate 位移，
translate(x,y)，translateX(x)与translateY(y) - translate 与绝对定位结合实现元素水平垂直居中，scale 缩放，
scale(x,y)，scaleX(x)与scaleY(y) - skew 斜切，rotate 旋转，
transform-origin，2D 转换综合写法顺序问题
- translate 位移，
- 2D 转换在实际开发中的应用
- 旋转的三角形，鼠标滑动图片放大
- 3D 转换
- perspective 透视，translate 3D 位移，rotate 3D 旋转，transform-style
- 2D 与 3D 总结
- 变换函数，重要属性，注意事项
- 在实际开发中的应用
- 飞行的火箭，创建 3D 导航，翻书效果，创建长方体
- 专项案例训练（作业）
- CSS3 动画（鼠标移入文字滑入动画效果），CSS3 动画（鼠标悬停缩放动画），CSS3 动画（鼠标移入旋转动画）
- CSS3 开发 Loading 加载动画，CSS3 开发吃豆豆动画效果，鼠标悬停 3D 旋转动画效果，3D 旋转木马效果
点击查看完整版视频讲解
# 14、PC 端项目开发视频教程
第一个 PC 端项目训练
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X