CSS 实例

CSS 语法

CSS 语法

实例解析：CSS 语法

CSS 选择器

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

实例解析：CSS 选择器

CSS 使用

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

实例解析：如何添加 CSS

CSS 注释

单行注释 多行注释

实例解析：CSS 注释

CSS 颜色

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

实例解析：CSS 颜色

CSS 背景

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

实例解析：CSS 背景

CSS 边框

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

实例解析：CSS 边框

CSS 外边距

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

实例解析：CSS 外边距

CSS 内边距

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

实例解析：CSS 内边距

CSS 高度/宽度

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

实例解析：CSS 高度/宽度

CSS 盒模型

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

实例解析：CSS 盒模型

CSS 轮廓

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

实例解析：CSS 轮廓属性

CSS 文本

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

实例解析：CSS 文本属性

CSS 字体

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

实例解析：CSS 字体属性

CSS 图标

Font Awesome 图标 Bootstrap 图标 Google 图标

实例解析：CSS 图标

CSS 链接

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

实例解析：CSS 链接属性

CSS 列表

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

实例解析：CSS 列表属性

CSS 表格

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

实例解析：CSS 表格属性

CSS 显示

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

实例解析：CSS Display 属性

CSS 定位

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

实例解析：CSS 定位属性

CSS 溢出

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

实例解析：CSS 溢出属性

CSS 浮动

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

实例解析：CSS 浮动属性

CSS Inline-block

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

实例解析：CSS Inline-block

CSS 对齐元素

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

实例解析：CSS 对齐属性

CSS 组合器

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

实例解析：CSS 组合器选择器

CSS 伪类

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

实例解析：CSS 伪类

CSS 伪元素

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

实例解析：CSS 伪元素

CSS 内容生成

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

实例解析：CSS 计数器

CSS 不透明度

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

实例解析：CSS 图像不透明度

CSS 导航栏

拥有完整样式的垂直导航栏 拥有完整样式的水平导航栏 全高的固定垂直导航栏 固定的水平导航栏 固定的水平导航栏 响应式的顶部导航栏 响应式的侧边导航栏

实例解析：CSS 导航栏

CSS 下拉列表

下拉文本 下拉菜单 下拉菜单 下拉图像 下拉导航栏

实例解析：CSS 下拉菜单

CSS 图片库

图片库 响应式图片库

实例解析：CSS 图片库

CSS 图像精灵

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

实例解析：CSS 图像精灵

CSS 属性选择器

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

实例解析：CSS 属性选择器

CSS 表单

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

实例解析：CSS 表单

CSS 计数器

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

实例解析：CSS 计数器

CSS 网站布局

简单的响应式网站布局 简单的响应式网站布局

实例解析：CSS 网站布局

CSS 圆角

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

实例解析：CSS 圆角边框

CSS 边框图像

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

实例解析：CSS 边框图像

CSS 背景

图像边框 - 不同的 slice 边框 规定背景图像的大小 使用 "contain" 和 "cover" 缩放背景图像 使用 "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 网络字体

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 样式图像

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

实例解析：CSS 图像

CSS Object-fit

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

实例解析：CSS 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 媒体查询 - 更多实例

如果视口宽度为 480 像素或更宽，显示一个浮动到页面左侧的菜单 响应式的导航菜单 使用浮动的响应式列 使用弹性盒的响应式列 通过媒体查询隐藏元素 响应式字体大小 响应式图片库 响应式网站 根据浏览器方向改变页面布局 最小宽度到最大宽度

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

CSS 响应式 Web 设计

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

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

CSS 网格

网格布局 网格元素 网格元素 网格行 网格容器 网格项目

实例解析：CSS 网格