CSS 实例

• CSS 网格项目
• CSS 测验

CSS 语法

• CSS 语法

实例解释：CSS 语法

CSS 选择器

• 元素选择器
• id 选择器
• 类选择器（针对所有元素）
• 类选择器（只针对 <p> 元素）
• 引用两个类的 HTML 元素
• 通用选择器
• 分组选择器

实例解释：CSS 选择器

CSS 使用

• 外部 CSS
• 内部 CSS
• 行内 CSS
• 多个样式表
• 层叠顺序

实例解释：如何添加 CSS

CSS 注释

• 单行注释
• 多行注释

实例解释：CSS 注释

CSS 颜色

• 设置颜色的背景色
• 设置文本颜色
• 设置边框颜色
• 设置不同的颜色值
• 设置 RGB 值
• 设置 HEX 值
• 设置 HSL 值

实例解释：CSS 颜色

CSS 背景

• 设置页面的背景色
• 设置不同元素的背景色
• 把图像设置为页面背景
• 如何只在水平方向重复背景图像
• 如何定位背景图像
• 固定的背景图像（该图像不会随着页面的其余部分滚动）
• 所有背景属性在一条声明中
• 高级背景实例

实例解释：背景属性

CSS 边框

• 设置四条边框的宽度
• 设置上边框的宽度
• 设置下边框的宽度
• 设置左边框的宽度
• 设置右边框的宽度
• 设置四条边框的样式
• 设置上边框的样式
• 设置下边框的样式
• 设置左边框的样式
• 设置右边框的样式
• 设置四条边框的颜色
• 设置上边框的颜色
• 设置下边框的颜色
• 设置左边框的颜色
• 设置右边框的颜色
• 所有边框属性在一条声明中
• 为元素添加圆角
• 为每个边设置不同的边框
• 所有上边框属性在一条声明中
• 所有下边框属性在一条声明中
• 所有左边框属性在一条声明中
• 所有右边框属性在一条声明中

实例解释：边框属性

CSS 外边距

• 为元素的各边规定不同的外边距
• 使用带有四个值的简写 margin 属性
• 使用带有三个值的简写 margin 属性
• 使用带有两个值的简写 margin 属性
• 使用带有一个值的简写 margin 属性
• 把外边距设置 auto，来居中其容器内的元素
• 让左外边距继承父元素
• 外边距合并

实例解释：外边距属性

CSS 内边距

• 为元素的各边规定不同的内边距
• 使用带有四个值的简写内边距
• 使用带有三个值的简写内边距
• 使用带有两个值的简写内边距
• 使用带有一个值的简写内边距
• 内边距和元素宽度（不设置 box-sizing）
• 内边距和元素宽度（设置 box-sizing）
• 设置元素的左内边距
• 设置元素的右内边距
• 设置元素的上内边距
• 设置元素的下内边距

实例解释：内边距属性

CSS 高度/宽度

• 设置元素的高度和宽度
• 设置元素的最大宽度
• 设置不同元素的高度和宽度
• 使用百分百来设置图像的高度和宽度
• 设置元素的最小宽度和最大宽度
• 设置元素的最小高度和最大高度

实例解释：定位属性

CSS 盒模型

• 演示盒模型
• 规定总宽度为 250 像素的元素

实例解释：盒模型

CSS 轮廓

• 绘制围绕元素的线条（轮廓）
• 设置轮廓的样式
• 设置轮廓的颜色
• 使用 outline-color：翻转轮廓
• 设置轮廓的宽度
• 使用简写的轮廓属性
• 在元素的轮廓与边框之间添加空间

实例解释：轮廓属性

CSS 文本

• 设置不同元素的文本色
• 对齐文本
• 删除链接下面的线
• 修饰文本
• 控制文本中的字母大小写
• 缩进文本
• 规定字符间距
• 规定行间距
• 设置元素的文本方向
• 增加字间距
• 规定元素的文本阴影
• 在元素内禁用文本换行
• 垂直对齐文本内的图像

实例解释：文本属性

CSS 字体

• 设置文本的字体
• 设置字体的大小
• 以 px 为单位设置字体大小
• 以 em 为单位设置字体大小
• 以百分百和 em 为单位设置字体大小
• 设置字体的样式
• 设置字体的变体
• 设置字体的粗细
• 所有字体属性在一条声明中

实例解释：字体属性

CSS 图标

• Font Awesome 图标
• Bootstrap 图标
• Google 图标

实例解释：图标

CSS 链接

• 为已访问/未访问链接添加不同的颜色
• 在链接上使用 text-decoration
• 为链接规定背景色
• 为超链接添加其他样式
• 不同类型的指针
• 高级 - 创建链接框
• 高级 - 创建带边框的链接框

实例解释：链接属性

CSS 列表

• 列表中的所有不同的列表项标记
• 把图像设置为列表项标记
• 定位列表项标记
• 删除默认列表设置
• 所有列表属性在一条声明中
• 用颜色设置列表样式
• 全宽带边框的列表

实例解释：列表属性

CSS 表格

• 规定 table、th 以及 td 元素的黑色边框
• 使用 border-collapse
• 围绕表格的单一边框
• 规定表格的宽度和高度
• 设置内容的水平对齐（text-align）
• 设置内容的垂直对齐（vertical-align）
• 规定 th 和 td 元素的内边距
• 水平分隔符
• 可悬停的表格
• 条状表格
• 规定表格边框的颜色
• 设置表格标题的位置
• 响应式表格
• 创建美观的表格

实例解释：表格属性

CSS 显示

• 如何隐藏元素（visibility:hidden）
• 如何不显示元素（display:none）
• 如何把块级元素显示为行内元素
• 如何把行内元素显示为块级元素
• 如何将 CSS 与 JavaScript 一起使用来显示隐藏内容

实例解释：display 属性

CSS 定位

• 相对于浏览器窗口来放置元素
• 相对于元素正常位置来放置元素
• 用绝对值定位元素
• 粘性定位
• 重叠元素
• 设置元素的形状
• 使用像素值设置图像的上边缘
• 使用像素值设置图像的下边缘
• 使用像素值设置图像的左边缘
• 使用像素值设置图像的右边缘
• 定位图像文本（左上角）
• 定位图像文本（右上角）
• 定位图像文本（左下角）
• 定位图像文本（右下角）
• 定位图像文本（居中）

实例解释：定位属性

CSS 溢出

• 使用 overflow: visible - 溢出没有被裁剪。它在元素框之外渲染。
• 使用 overflow: hidden - 溢出被裁剪，其余内容被隐藏。
• 使用 overflow: scroll - 溢出被裁剪，但是添加了滚动条以查看其余内容。
• 使用 overflow: auto - 如果裁剪了溢出，则应添加滚动条以查看其余内容。
• 使用 overflow-x 和 overflow-y

实例解释：溢出属性

CSS 浮动

• float 属性的简单使用
• 带有边框和外边距的图像浮动到段落的右侧
• 带标题的图像向右浮动
• 让段落的第一个字母向左浮动
• 关闭浮动（使用 clear 属性）
• 关闭浮动（使用 clearfix hack）
• 创建浮动框
• 创建并排图像
• 创建等高框（通过 flexbox）
• 创建水平菜单
• 创建 web 布局实例

实例解释：浮动属性

CSS Inline-block

• 展示行内、行内块、块级元素的区别
• 使用 inline-block 来创建导航链接

实例解释：Inline-block

CSS 对齐元素

• 通过外边距进行居中对齐
• 居中对齐文本
• 居中对齐图像
• 通过 position 实现左对齐/右对齐
• 通过 position 实现左对齐/右对齐 - 跨浏览器方案
• 通过 float 实现左对齐/右对齐
• 通过 float 实现左对齐/右对齐 - 跨浏览器方案
• 通过 padding 垂直居中
• 垂直和水平居中
• 通过 line-height 垂直居中
• 通过 position 实现垂直和水平居中

实例解释：对齐属性

CSS 组合器

• 后代选择器
• 子选择器
• 相邻同胞选择器
• 通用同胞选择器

实例解释：组合器选择器

CSS 伪类

• 给链接添加不同的颜色
• 为链接添加其他样式
• 使用 :focus
• :first-child - 匹配首个 p 元素
• :first-child - 匹配所有 p 元素内的首个 i 元素
• :first-child - 匹配所有第一个子 p 元素中的所有 i 元素
• 使用 :lang

实例解释：伪类

CSS 伪元素

• 制作文本中特别的首字母
• 制作文本中特别的首行
• 制作特别的首字母和首行
• 使用 :before 在元素之前插入内容
• 使用 :after 在元素之后插入内容

实例解释：伪元素

CSS 内容生成

• 在每个带有 content 属性的链接之后的括号中插入 URL
• 用 "Section 1"、"1.1"、"1.2" 等为节和子节编号
• 用 quotes 属性指定引号

实例解释：CSS 计数器

CSS 不透明度

• 创建透明图像
• 创建透明图像 - mouseover 效果
• 透明图像的反转的 mouseover 效果
• 透明框（div）
• 用了 RGBA 值的透明框
• 创建一个文本位于背景图像上的透明框

实例解释：图像不透明度

CSS 导航栏

• 拥有完整样式的垂直导航栏
• 拥有完整样式的水平导航栏
• 全高的固定垂直导航栏
• 固定的水平导航栏
• 粘性导航栏（在 IE 或 Edge 15 及更早版本中不起作用）
• 响应式的顶部导航栏
• 响应式的侧边导航栏

实例解释：导航栏

CSS 下拉列表

• 下拉文本
• 下拉菜单
• 右对齐的下拉菜单
• 下拉图像
• 下拉导航栏

实例解释：下拉菜单

CSS 图片库

• 图片库
• 响应式图片库

实例解释：图片库

CSS 图像精灵

• 图像精灵
• 图像精灵 - 导航列表
• 有悬停效果的图像精灵

实例解释：图像精灵

CSS 属性选择器

• 选取带有 target 属性的所有 <a> 元素
• 选取带有 target="_blank" 属性的所有 <a> 元素
• 选取所有带有 title 属性的元素，其中 title 属性包含以空格分隔的单词列表，单词之一是 "flower"
• 选取所有带有以 "top" 开头的 class 属性值的元素（必须是整个单词）
• 选取所有带有以 "top" 开头的 class 属性值的元素（一定不能是整个单词）
• 选取所有带有以 "test" 结尾的 class 属性值的元素
• 选择带有包含 "te" 的 class 属性值的所有元素

实例解释：属性选择器

CSS 表单

• 全宽的输入字段
• 填充的输入字段
• 带边框的输入字段
• 带下边框的输入字段
• 带颜色的输入字段
• 获得焦点的输入字段
• 获得焦点的输入字段 2
• 带图标的输入字段
• 有动画效果的搜索框
• 设置文本框的样式
• 设置选择菜单的样式
• 设置按钮的样式
• 响应式表单

实例解释：表单

CSS 计数器

• 创建计数器
• 嵌套计数器 1
• 嵌套计数器 2

实例解释：计数器

CSS 网站布局

• 简单的响应式网站布局
• 一个网站的实例

实例解释：网站布局

CSS 圆角

• 为元素添加圆角
• 单独设置每个圆角
• 创建椭圆角

实例解释：CSS 圆角边框

CSS 边框图像

• 创建围绕元素的图像边框，使用 round 关键字
• 创建围绕元素的图像边框，使用 stretch 关键字
• 图像边框 - 不同的 slice 边框

实例解释：CSS 边框图像

CSS 背景

• 为元素添加多个背景图像
• 规定背景图像的大小
• 使用 "contain" 和 "cover" 缩放背景图像
• 定义背景图像的大小
• 全尺寸的背景图像（完全覆盖内容区域）
• 使用 background-origin 来规定放置背景图像的位置
• 使用 background-clip 来规定背景的绘制区域

实例解释：CSS 背景

CSS 渐变

• 线性渐变 - 从上到下
• 线性渐变 - 从左到右
• 线性渐变 - 对角线
• 线性渐变 - 特定角度
• 线性渐变 - 多个色标
• 线性渐变 - 彩虹色 + 文本
• 线性渐变 - 透明度
• 线性渐变 - 重复的线性渐变
• 径向渐变 - 均匀分布的色标
• 径向渐变 - 间距不同的色标
• 径向渐变 - 设置形状
• 径向渐变 - 不同的尺寸关键字
• 径向渐变 - 重复的径向渐变

实例解释：CSS 渐变

CSS 阴影效果

• 简单的阴影效果
• 向阴影添加颜色
• 向阴影添加模糊效果
• 带黑色阴影的白色文本
• 红色霓虹灯发光阴影
• 红色和蓝色霓虹灯发光阴影
• 黑色、蓝色和深蓝色阴影的白色文本
• 向元素添加简单的 box-shadow
• 向 box-shadow 添加颜色
• 向 box-shadow 添加颜色和模糊效果
• 创建类似纸质卡片（文本）
• 创建类似纸质卡片（宝丽来图像）

实例解释：CSS 阴影效果

CSS 文本效果

• 指定应如何向用户呈现未显示的溢出内容
• 将鼠标悬停在元素上时如何显示溢出的内容
• 允许长文字能够被折断并换到下一行
• 规定换行规则
• 规定文本的书写模式（横着写还是竖着写）

实例解释：CSS 文本

CSS Web 字体

• 在 @font-face 规则中使用您自己的字体
• 在 @font-face 规则中使用您自己的字体（粗体）

实例解释：CSS web 字体

CSS 2D 转换

• translate() - 从当前位置删除元素
• rotate() - 顺时针旋转元素
• rotate() - 逆时针旋转元素
• scale() - 增加元素
• scale() - 减少元素
• skewX() - 沿 X 轴倾斜元素
• skewY() - 沿 Y 轴倾斜元素
• skew() - 沿 X 和 Y 轴倾斜元素
• matrix() - 旋转、缩放、移动和倾斜元素

实例解释：CSS 2D 转换

CSS 3D 转换

• rotateX() - 将元素绕其 X 轴旋转给定角度
• rotateY() - 将元素绕其 Y 轴旋转给定角度
• rotateZ() - 将元素绕其 Z 轴旋转给定角度

实例解释：CSS 3D 转换

CSS 过渡

• 过渡 - 更改元素的宽度
• 过渡 - 更改元素的宽度和高度
• 为过渡规定不同的速度曲线
• 为过渡效果规定延迟
• 向过渡效果添加变换
• 在一条简写属性中规定所有过渡属性

实例解释：CSS 过渡

CSS 动画

• 把动画绑定到一个元素
• 动画 - 改变一个元素的背景色
• 动画 - 改变一个元素的背景色和位置
• 延迟动画
• 在动画停止前运行三次
• 永远运行动画
• 从反方向运行动画
• 交替运行动画
• 动画的速度曲线
• 动画的简写属性

实例解释：CSS 动画

CSS 工具提示

• 右侧工具提示
• 左侧工具提示
• 顶部工具提示
• 底部工具提示
• 带箭头的工具提示
• 有动画效果的工具提示

实例解释：工具提示

CSS 样式图像

• 圆角图像
• 圆形图像
• 缩略图
• 作为链接的缩略图
• 响应式图像
• 图像文本（左上角）
• 图像文本（右上角）
• 图像文本（左下角）
• 图像文本（右上角）
• 图像文本（居中）
• 宝丽来图像
• 灰度图像滤镜
• 高级 - 通过 CSS 和 JavaScript 实现的图像模态

实例解释：CSS 图像

CSS Object-fit

• 剪裁图像的两边，保留长宽比，然后填充空间
• 所有 object-fit 属性值的例子

实例解释：Object-fit

CSS 按钮

• 基础的 CSS 按钮
• 按钮颜色
• 按钮尺寸
• 圆角按钮
• 带颜色的按钮边框
• 可悬停的按钮
• 带阴影的按钮
• 被禁用的按钮
• 按钮宽度
• 按钮分组
• 带边框的按钮分组
• 带动画的按钮（悬停效果）
• 带动画的按钮（按键效果）
• 带动画的按钮（涟漪效果）

实例解释：CSS 按钮

CSS 分页

• 简单的分页
• 活动的、可悬停的分页
• 带圆角的活动可悬停分页
• 可悬停的过渡效果
• 带边框的分页
• 圆角带边框的分页
• 链接之间隔着空白的分页
• 分页的大小
• 居中的分页
• 面包屑

实例解释：CSS 分页

CSS 多列

• 创建多列
• 规定列之间的间隙
• 规定列之间的规则样式
• 规定列之间的规则宽度
• 规定列之间的规则颜色
• 规定列之间的规则的宽度、样式和颜色
• 规定元素应该横跨多少列
• 为列规定建议的最佳宽度

实例解释：CSS 多列

CSS 用户界面

• 允许用户调整元素的宽度
• 允许用户调整元素的高度
• 允许用户同时调整元素的宽度和高度
• 在元素轮廓与边框之间添加空间

实例解释：CSS 用户界面

CSS 变量

• 使用 var() 函数
• 使用 var() 函数来插入若干自定义的属性值

实例解释：CSS 变量

CSS Box Sizing

• 不设置 box-sizing 的元素宽度
• 设置 box-sizing 的元素宽度
• 表单元素 + box-sizing

实例解释：CSS box sizing

CSS 弹性盒

• 带有三个弹性项目的弹性盒
• 带有三个弹性项目的弹性盒 - rtl 方向
• flex-direction - row-reverse
• flex-direction - column
• flex-direction - column-reverse
• justify-content - flex-end
• justify-content - center
• justify-content - space-between
• justify-content - space-around
• align-items - stretch
• align-items - flex-start
• align-items - flex-end
• align-items - center
• align-items - baseline
• flex-wrap - nowrap
• flex-wrap - wrap
• flex-wrap - wrap-reverse
• align-content - center
• 弹性项目排序
• Margin-right:auto;
• Margin:auto; = 完美的居中
• 在弹性项目上设置 align-self
• 规定弹性项目的长度，相对于弹性项目的其余部分
• 用弹性盒创建响应式的图片库
• 用弹性盒创建响应式网站

实例解释：CSS flexbox

CSS 媒体查询

• 如果视口宽度为 480 像素或更宽，则将背景色改为浅绿色
• 如果视口宽度为 480 像素或更宽，显示一个浮动到页面左侧的菜单

实例解释：CSS 媒体查询

CSS 媒体查询 - 更多实例

• 根据屏幕宽度设置不同的背景色
• 响应式的导航菜单
• 使用浮动的响应式列
• 使用弹性盒的响应式列
• 通过媒体查询隐藏元素
• 响应式字体大小
• 响应式图片库
• 响应式网站
• 根据浏览器方向改变页面布局
• 最小宽度到最大宽度

实例解释：CSS 媒体查询实例

CSS 响应式 Web 设计

• 响应式网格视图
• 为台式机、笔电和手机添加断点
• 典型的断点
• 响应式图像
• 响应式视频
• 响应式框架：W3.CSS
• 响应式框架：Bootstrap

实例解释：CSS 响应式 Web 设计

CSS 网格

• 网格布局
• 网格元素
• 网格列间隙
• 网格行
• 网格容器
• 网格项目

实例解释：CSS 网格

• CSS 网格项目
• CSS 测验