CSS 实例
创建于 2024-12-03 /
28
字体：
[默认]
[大]
[更大]
CSS 语法
CSS 语法CSS 选择器
元素选择器 元素选择器 类选择器（针对所有元素） 类选择器（只针对 <p> 元素） 引用两个类的 HTML 元素 通用选择器 分组选择器CSS 使用
外部 CSS 内部 CSS 行内 CSS 多个样式表 层叠顺序CSS 注释
单行注释 多行注释CSS 颜色
设置颜色的背景色 设置文本颜色 设置边框颜色 设置不同的颜色值 设置 RGB 值 设置 HEX 值 设置 HSL 值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 在链接上使用 text-decoration 为超链接添加其他样式 不同类型的指针 高级 - 创建链接框 高级 - 创建带边框的链接框CSS 列表
列表中的所有不同的列表项标记 把图像设置为列表项标记 定位列表项标记 删除默认列表设置 所有列表属性在一条声明中 用颜色设置列表样式 全宽带边框的列表CSS 表格
规定 table、th 以及 td 元素的黑色边框 使用 border-collapse 围绕表格的单一边框 规定表格的宽度和高度 设置内容的水平对齐（text-align） 设置内容的垂直对齐（vertical-align） 规定 th 和 td 元素的内边距 水平分隔符 可悬停的表格 条状表格 规定表格边框的颜色 设置表格标题的位置 响应式表格 创建美观的表格CSS 显示
如何隐藏元素（visibility:hidden） 如何不显示元素（display:none） 如何把块级元素显示为行内元素 如何把行内元素显示为块级元素 如何将 CSS 与 JavaScript 一起使用来显示隐藏内容CSS 定位
相对于浏览器窗口来放置元素 相对于元素正常位置来放置元素 用绝对值定位元素 粘性定位 重叠元素 设置元素的形状 使用像素值设置图像的上边缘 使用像素值设置图像的下边缘 使用像素值设置图像的左边缘 使用像素值设置图像的右边缘 定位图像文本（左上角） 定位图像文本（右上角） 定位图像文本（左下角） 定位图像文本（右下角） 定位图像文本（居中）CSS 溢出
使用 overflow: visible - 溢出没有被裁剪。它在元素框之外渲染。 使用 overflow: hidden - 溢出被裁剪，其余内容被隐藏。 使用 overflow: scroll - 溢出被裁剪，但是添加了滚动条以查看其余内容。 使用 overflow: auto - 如果裁剪了溢出，则应添加滚动条以查看其余内容。 使用 overflow-x 和 overflow-yCSS 浮动
float 属性的简单使用 带有边框和外边距的图像浮动到段落的右侧 带标题的图像向右浮动 让段落的第一个字母向左浮动 关闭浮动（使用 clear 属性） 关闭浮动（使用 clearfix hack） 创建浮动框 创建并排图像 创建等高框（通过 flexbox） 创建水平菜单 创建 web 布局实例CSS 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 元素 使用 :langCSS 伪元素
制作文本中特别的首字母 制作文本中特别的首行 制作特别的首字母和首行 使用 :before 在元素之前插入内容 使用 :after 在元素之后插入内容CSS 内容生成
在每个带有 content 属性的链接之后的括号中插入 URL 用 "Section 1", "1.1", "1.2" 等为节和子节编号 用 quotes 属性指定引号CSS 不透明度
创建透明图像 创建透明图像 - mouseover 效果 透明图像的反转的 mouseover 效果 透明框（div） 用了 RGBA 值的透明框 创建一个文本位于背景图像上的透明框CSS 导航栏
拥有完整样式的垂直导航栏 拥有完整样式的水平导航栏 全高的固定垂直导航栏 固定的水平导航栏 固定的水平导航栏 响应式的顶部导航栏 响应式的侧边导航栏CSS 下拉列表
下拉文本 下拉菜单 下拉菜单 下拉图像 下拉导航栏CSS 图片库
图片库 响应式图片库CSS 图像精灵
图像精灵 图像精灵 - 导航列表 有悬停效果的图像精灵CSS 属性选择器
选取带有 target 属性的所有 <a> 元素 选取带有 target="_blank" 属性的所有 <a> 元素 选取所有带有 title 属性的元素，其中 title 属性包含以空格分隔的单词列表，单词之一是 "flower" 选取所有带有以 "top" 开头的 class 属性值的元素（必须是整个单词） 选取所有带有以 "top" 开头的 class 属性值的元素（一定不能是整个单词） 选取所有带有以 "test" 结尾的 class 属性值的元素 选择带有包含 "te" 的 class 属性值的所有元素CSS 表单
全宽的输入字段 填充的输入字段 填充的输入字段 带下边框的输入字段 带颜色的输入字段 获得焦点的输入字段 获得焦点的输入字段 带图标的输入字段 有动画效果的搜索框 设置文本框的样式 设置选择菜单的样式 设置按钮的样式 响应式表单CSS 计数器
创建计数器 嵌套计数器 1 嵌套计数器 2CSS 网站布局
简单的响应式网站布局 简单的响应式网站布局CSS 圆角
为元素添加圆角 单独设置每个圆角 创建椭圆角CSS 边框图像
创建椭圆角 创建围绕元素的图像边框，使用 stretch 关键字 图像边框 - 不同的 slice 边框CSS 背景
图像边框 - 不同的 slice 边框 规定背景图像的大小 使用 "contain" 和 "cover" 缩放背景图像 使用 "contain" 和 "cover" 缩放背景图像 全尺寸的背景图像（完全覆盖内容区域） 使用 background-origin 来规定放置背景图像的位置 使用 background-clip 来规定背景的绘制区域CSS 渐变
线性渐变 - 从上到下 线性渐变 - 从左到右 线性渐变 - 从左到右 线性渐变 - 特定角度 线性渐变 - 多个色标 线性渐变 - 彩虹色 + 文本 线性渐变 - 透明度 线性渐变 - 重复的线性渐变 线性渐变 - 重复的线性渐变 径向渐变 - 间距不同的色标 径向渐变 - 设置形状 径向渐变 - 不同的尺寸关键字 径向渐变 - 重复的径向渐变CSS 阴影效果
简单的阴影效果 向阴影添加颜色 向阴影添加模糊效果 带黑色阴影的白色文本 红色霓虹灯发光阴影 红色和蓝色霓虹灯发光阴影 黑色、蓝色和深蓝色阴影的白色文本 向元素添加简单的 box-shadow 向 box-shadow 添加颜色 向 box-shadow 添加颜色和模糊效果 创建类似纸质卡片（文本） 创建类似纸质卡片（宝丽来图像）CSS 文本效果
指定应如何向用户呈现未显示的溢出内容 将鼠标悬停在元素上时如何显示溢出的内容 允许长文字能够被折断并换到下一行 规定换行规则CSS Web 字体
在 @font-face 规则中使用您自己的字体 在 @font-face 规则中使用您自己的字体（粗体）CSS 2D 转换
translate() - 从当前位置删除元素 rotate() - 顺时针旋转元素 rotate() - 逆时针旋转元素 scale() - 增加元素 scale() - 减少元素 skewX() - 沿 X 轴倾斜元素 skewY() - 沿 Y 轴倾斜元素 skew() - 沿 X 和 Y 轴倾斜元素 matrix() - 旋转、缩放、移动和倾斜元素CSS 3D 转换
rotateX() - 将元素绕其 X 轴旋转给定角度 rotateY() - 将元素绕其 Y 轴旋转给定角度 rotateZ() - 将元素绕其 Z 轴旋转给定角度CSS 过渡
过渡 - 更改元素的宽度 过渡 - 更改元素的宽度和高度 为过渡规定不同的速度曲线 为过渡效果规定延迟 向过渡效果添加变换 在一条简写属性中规定所有过渡属性CSS 动画
把动画绑定到一个元素 动画 - 改变一个元素的背景色 动画 - 改变一个元素的背景色和位置 延迟动画 在动画停止前运行三次 永远运行动画 从反方向运行动画 交替运行动画 动画的速度曲线 动画的简写属性CSS 工具提示
右侧工具提示 左侧工具提示 顶部工具提示 底部工具提示 底部工具提示 底部工具提示CSS 样式图像
圆角图像 圆形图像 缩略图 作为链接的缩略图 响应式图像 图像文本（左上角） 图像文本（右上角） 图像文本（左下角） 图像文本（右上角） 图像文本（居中） 宝丽来图像 灰度图像滤镜 高级 - 通过 CSS 和 JavaScript 实现的图像模态CSS Object-fit
剪裁图像的两边，保留长宽比，然后填充空间 所有 object-fit 属性值的例子CSS 按钮
基础的 CSS 按钮 按钮颜色 按钮尺寸 圆角按钮 圆角按钮 可悬停的按钮 带阴影的按钮 被禁用的按钮 按钮宽度 按钮分组 带边框的按钮分组 带动画的按钮（悬停效果） 带动画的按钮（按键效果） 带动画的按钮（涟漪效果）CSS 分页
简单的分页 活动的、可悬停的分页 活动的、可悬停的分页 可悬停的过渡效果 带边框的分页 带边框的分页 链接之间隔着空白的分页 分页的大小 居中的分页 面包屑CSS 多列
创建多列 规定列之间的间隙 规定列之间的规则样式 规定列之间的规则样式 规定列之间的规则颜色 规定列之间的规则的宽度、样式和颜色 规定元素应该横跨多少列 为列规定建议的最佳宽度CSS 用户界面
允许用户调整元素的宽度 允许用户调整元素的高度 允许用户同时调整元素的宽度和高度 在元素轮廓与边框之间添加空间CSS 变量
使用 var() 函数 使用 var() 函数来插入若干自定义的属性值CSS Box Sizing
不设置 box-sizing 的元素宽度 设置 box-sizing 的元素宽度 表单元素 + box-sizingCSS 弹性盒
带有三个弹性项目的弹性盒 带有三个弹性项目的弹性盒 - 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 媒体查询
如果视口宽度为 480 像素或更宽，则将背景色改为浅绿色 如果视口宽度为 480 像素或更宽，显示一个浮动到页面左侧的菜单CSS 媒体查询 - 更多实例
如果视口宽度为 480 像素或更宽，显示一个浮动到页面左侧的菜单 响应式的导航菜单 使用浮动的响应式列 使用弹性盒的响应式列 通过媒体查询隐藏元素 响应式字体大小 响应式图片库 响应式网站 根据浏览器方向改变页面布局 最小宽度到最大宽度CSS 响应式 Web 设计
响应式网格视图 为台式机、笔电和手机添加断点 典型的断点 响应式图像 响应式视频 响应式框架:W3.CSS 响应式框架:BootstrapCSS 网格
网格布局 网格元素 网格元素 网格行 网格容器 网格项目
0 人点赞过
