我的书签
添加书签
移除书签- CSS 语法
- CSS 选择器
- CSS 使用
- CSS 注释
- CSS 颜色
- CSS 背景
- CSS 边框
- CSS 外边距
- CSS 内边距
- CSS 高度/宽度
- CSS 盒模型
- CSS 轮廓
- CSS 文本
- CSS 字体
- CSS 图标
- CSS 链接
- CSS 列表
- CSS 表格
- CSS 显示
- CSS 定位
- CSS 溢出
- CSS 浮动
- CSS Inline-block
- CSS 对齐元素
- CSS 组合器
- CSS 伪类
- CSS 伪元素
- CSS 不透明度
- CSS 导航栏
- CSS 下拉列表
- CSS 图片库
- CSS 图像精灵
- CSS 属性选择器
- CSS 表单
- CSS 计数器
- CSS 网站布局
- CSS 圆角
- CSS 边框图像
- CSS 背景
- CSS 渐变
- CSS 阴影效果
- CSS 文本效果
- CSS Web 字体
- CSS 2D 转换
- CSS 3D 转换
- CSS 过渡
- CSS 动画
- CSS 工具提示
- CSS 样式图像
- CSS Object-fit
- CSS 按钮
- CSS 分页
- CSS 多列
- CSS 用户界面
- CSS 变量
- CSS Box Sizing
- CSS 弹性盒
- CSS 媒体查询
- CSS 媒体查询 - 更多实例
- CSS 响应式 Web 设计
- 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 不透明度
- 创建透明图像
- 创建透明图像 - 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 计数器
实例解释：计数器
CSS 网站布局
实例解释：网站布局
CSS 圆角
实例解释：CSS 圆角边框
CSS 边框图像
实例解释：CSS 边框图像
CSS 背景
- 为元素添加多个背景图像
- 规定背景图像的大小
- 使用
- 定义背景图像的大小
- 全尺寸的背景图像（完全覆盖内容区域）
- 使用 background-origin 来规定放置背景图像的位置
- 使用 background-clip 来规定背景的绘制区域
实例解释：CSS 背景
CSS 渐变
- 线性渐变 - 从上到下
- 线性渐变 - 从左到右
- 线性渐变 - 对角线
- 线性渐变 - 特定角度
- 线性渐变 - 多个色标
- 线性渐变 - 彩虹色 + 文本
- 线性渐变 - 透明度
- 线性渐变 - 重复的线性渐变
- 径向渐变 - 均匀分布的色标
- 径向渐变 - 间距不同的色标
- 径向渐变 - 设置形状
- 径向渐变 - 不同的尺寸关键字
- 径向渐变 - 重复的径向渐变
实例解释：CSS 渐变
CSS 阴影效果
- 简单的阴影效果
- 向阴影添加颜色
- 向阴影添加模糊效果
- 带黑色阴影的白色文本
- 红色霓虹灯发光阴影
- 红色和蓝色霓虹灯发光阴影
- 黑色、蓝色和深蓝色阴影的白色文本
- 向元素添加简单的 box-shadow
- 向 box-shadow 添加颜色
- 向 box-shadow 添加颜色和模糊效果
- 创建类似纸质卡片（文本）
- 创建类似纸质卡片（宝丽来图像）
实例解释：CSS 阴影效果
CSS 文本效果
实例解释：CSS 文本
CSS Web 字体
实例解释：CSS web 字体
CSS 2D 转换
- translate() - 从当前位置删除元素
- rotate() - 顺时针旋转元素
- rotate() - 逆时针旋转元素
- scale() - 增加元素
- scale() - 减少元素
- skewX() - 沿 X 轴倾斜元素
- skewY() - 沿 Y 轴倾斜元素
- skew() - 沿 X 和 Y 轴倾斜元素
- matrix() - 旋转、缩放、移动和倾斜元素
实例解释：CSS 2D 转换
CSS 3D 转换
实例解释：CSS 3D 转换
CSS 过渡
实例解释：CSS 过渡
CSS 动画
实例解释：CSS 动画
CSS 工具提示
实例解释：工具提示
CSS 样式图像
- 圆角图像
- 圆形图像
- 缩略图
- 作为链接的缩略图
- 响应式图像
- 图像文本（左上角）
- 图像文本（右上角）
- 图像文本（左下角）
- 图像文本（右上角）
- 图像文本（居中）
- 宝丽来图像
- 灰度图像滤镜
- 高级 - 通过 CSS 和 JavaScript 实现的图像模态
实例解释：CSS 图像
CSS Object-fit
实例解释：Object-fit
CSS 按钮
- 基础的 CSS 按钮
- 按钮颜色
- 按钮尺寸
- 圆角按钮
- 带颜色的按钮边框
- 可悬停的按钮
- 带阴影的按钮
- 被禁用的按钮
- 按钮宽度
- 按钮分组
- 带边框的按钮分组
- 带动画的按钮（悬停效果）
- 带动画的按钮（按键效果）
- 带动画的按钮（涟漪效果）
实例解释：CSS 按钮
CSS 分页
实例解释：CSS 分页
CSS 多列
实例解释：CSS 多列
CSS 用户界面
实例解释：CSS 用户界面
CSS 变量
实例解释：CSS 变量
CSS 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 媒体查询
实例解释：CSS 媒体查询
CSS 媒体查询 - 更多实例
实例解释：CSS 媒体查询实例
CSS 响应式 Web 设计
- 响应式网格视图
- 为台式机、笔电和手机添加断点
- 典型的断点
- 响应式图像
- 响应式视频
- 响应式框架：W3.CSS
- 响应式框架：Bootstrap
实例解释：CSS 响应式 Web 设计
CSS 网格
实例解释：CSS 网格
