最适合网络开发者的网站
HTML CSS JavaScript SQL PYTHON PHP 引导 如何 W3.CSS JQUERY XML JAVA 更多的 🔍 ◑ 图书 参考 练习

CSS 教程

CSS 主页 CSS 简介 CSS 语法 CSS 选择器 CSS 如何 CSS 注释 CSS 颜色
颜色 RGB 十六进制 高速链路
CSS 背景
背景颜色 背景图 背景重复 背景附件 背景速记
CSS 边框
边界 边框宽度 边框颜色 边界边 边框速记 圆角边框
CSS 边距
边距 边距折叠
CSS 填充 CSS 高度/宽度 CSS 盒子模型 CSS 大纲
大纲 轮廓宽度 轮廓颜色 大纲速记 轮廓偏移
CSS 文本
文字颜色 文本对齐 文本修饰 文本转换 文本间距 文字阴影
CSS 字体
字体系列 字体网页安全 字体回退 字体样式 字体大小 字体谷歌 字体搭配 字体速记
CSS 图标 CSS 链接 CSS 列表 CSS 表格
表格边框 表大小 表格对齐 表格样式 响应式表格
CSS 显示 CSS 最大宽度 CSS 位置 CSS Z 索引 CSS 溢出 CSS 浮动
漂浮 清除 浮点示例
CSS 内联块 CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏
导航栏 垂直导航栏 水平导航栏
CSS 下拉菜单 CSS 图片库 CSS 图像精灵 CSS Attr 选择器 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 图像反射 CSS 对象适合 CSS 对象位置 CSS 遮罩 CSS 按钮 CSS 分页 CSS 多列 CSS 用户界面 CSS 变量
var() 函数 覆盖变量 变量和 JavaScript 媒体查询中的变量
CSS 盒子尺寸 CSS 媒体查询 CSS MQ 示例 CSS 弹性框
CSS 弹性框 CSS 弹性容器 CSS 弹性项目 CSS Flex 响应式

CSS 响应式

RWD 简介 RWD 视口 RWD 网格视图 RWD 媒体查询 RWD 图像 RWD 视频 RWD 框架 RWD 模板

CSS 网格

网格简介 网格容器 网格项

CSS 南苏丹援助协会

SASS 教程

CSS 例子

CSS 模板 CSS 示例 CSS 代码片段 CSS 测验 CSS 练习 CSS 证书

CSS 参考

CSS 参考 CSS 选择器 CSS 函数 CSS 参考 Aural CSS Web 安全字体 CSS 动画 CSS 单位 CSS PX-EM 转换器 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 浏览器支持

初学者的 CSS 课程

尿素

CSS 例子

❮ 上一页 下一个 ❯

CSS 语法

CSS 语法

CSS 语法详解

CSS 选择器

元素选择器 id 选择器 类选择器（适用于所有元素） 类选择器（仅适用于<p>元素) 引用两个类的 HTML 元素 通用选择器 分组选择器

CSS 选择器详解

CSS 使用方法 / 去哪里使用

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

CSS 解释

CSS 注释

单行注释 多行注释

CSS 注释解释

CSS 颜色

设置元素的背景颜色 设置文本颜色 设置边框颜色 设置不同的颜色值 设置 RGB 值 设置十六进制值 设置 HSL 值

CSS 颜色解释

CSS 背景

设置页面的背景颜色 设置不同元素的背景颜色 将图像设置为页面背景 如何仅水平重复背景图像 如何定位背景图像 固定的背景图像（此图像不会随页面的其余部分滚动） 所有背景属性均在一次声明中 高级背景示例

CSS 背景属性解释

CSS 边框

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

CSS 边框属性解释

CSS 边距

为元素的每一边指定不同的边距 使用具有四个值的简写边距属性 使用具有三个值的简写边距属性 使用具有两个值的简写边距属性 使用具有一个值的简写 margin 属性 将边距设置为 auto，以使元素在其容器内居中 让左边距从父元素继承 利润率崩盘

保证金属性说明

CSS 填充

为元素的每一边指定不同的填充 使用具有四个值的简写填充属性 使用具有三个值的简写填充属性 使用具有两个值的简写填充属性 使用具有一个值的简写填充属性 填充和元素宽度（无 box-sizing） 填充和元素宽度（使用 box-sizing） 设置元素的左填充 设置元素的右填充 设置元素的 padding-top 设置元素的 padding-bottom

CSS 填充属性说明

CSS 高度/宽度

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

CSS 高度/宽度属性解释

CSS 盒子模型

演示盒子模型 指定一个元素总宽度为 250px

CSS 盒子模型详解

CSS 大纲

围绕元素画一条线（轮廓） 设置轮廓样式 设置轮廓颜色 设置轮廓的宽度 使用简写 outline 属性 在元素的轮廓和边缘/边框之间添加空间

CSS 轮廓属性解释

CSS 文本

设置不同元素的文本颜色 对齐文本 删除链接下的行 装饰文本 控制文本中的字母 缩进文本 指定字符之间的间距 指定行间距 设置元素的文本方向 增加单词之间的空白 指定元素的文本阴影 禁用元素内的文本换行 文本内图像的垂直对齐

CSS 文本属性解释

CSS 字体

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

字体属性解释

CSS 图标

Font Awesome 图标 Bootstrap 图标 Google 图标

CSS 图标解释

CSS 链接

为已访问/未访问的链接添加不同的颜色 在链接上使用文本修饰 指定链接的背景颜色 为超链接添加其他样式 不同类型的游标 高级 - 创建链接框 高级 - 创建带边框的链接框

CSS 链接属性解释

CSS 列表

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

CSS 列表属性解释

CSS 表格

为 table、th 和 td 元素指定黑色边框 使用 border-collapse 表格周围有单边框 指定表格的宽度和高度 设置内容的水平对齐方式（text-align） 设置内容的垂直对齐方式（vertical-align） 指定 th 和 td 元素的填充 水平分隔线 可悬停的表格 条纹桌子 指定表格边框的颜色 设置表格标题的位置 响应式表格 创建一个漂亮的表格

CSS 表格属性解释

CSS 显示

如何隐藏元素（visibility:hidden） 如何不显示元素（display：none） 如何将块级元素显示为内联元素 如何将内联元素显示为块级元素 如何使用 CSS 和 JavaScript 显示隐藏内容

CSS 显示属性解释

CSS 定位

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

CSS 定位属性解释

CSS 溢出

使用 overflow:visible - 溢出不会被剪裁。它会在元素框外呈现。 使用溢出：隐藏 - 溢出被剪切，其余内容被隐藏。 使用溢出：滚动 - 溢出被剪切，但添加了滚动条以查看其余内容。 使用溢出：自动 - 如果溢出被剪切，则应添加滚动条以查看其余内容。 使用 overflow-x 和 overflow-y。

CSS 溢出属性解释

CSS 浮动

float 属性的简单使用 带有边框和边距的图像在段落中浮动到右侧 带有标题的图像浮动到右侧 让段落首字母浮动到左侧 关闭浮动（使用 clear 属性） 关闭浮动（使用“clearfix”技巧） 创建浮动框 创建并排图像 创建等高框（使用 flexbox） 创建水平菜单 创建网页布局示例

CSS 浮动属性解释

CSS 内联块

显示 inline、inline-block 和 block 之间的区别 使用 inline-block 创建导航链接

CSS inline-block 详解

CSS 对齐元素

中心对齐，带边距 居中对齐文本 将图像置于中心 左/右对齐位置 左/右对齐位置 - 跨浏览器解决方案 左/右对齐浮动 左/右对齐浮动 - 跨浏览器解决方案 垂直居中并带内边距 垂直和水平居中 使用 line-height 垂直居中 垂直和水平居中定位

CSS 对齐属性解释

CSS 组合器

后代选择器 子选择器 相邻兄弟选择器 通用兄弟选择器

CSS 组合器详解

CSS 伪类

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

CSS 伪类解释

CSS 伪元素

使文本中的首字母具有特殊意义 使文本的第一行具有特殊效果 使首字母和首行特殊化 使用 :before 在元素前插入一些内容 使用 :after 在元素后插入一些内容

CSS 伪元素详解

CSS 不透明度

创建透明图像 创建透明图像 - 鼠标悬停效果 透明图像的反向鼠标悬停效果 透明盒/格 带 RGBA 值的透明框/div 在背景图像上创建带有文本的透明框

CSS 图像不透明度解释

CSS 导航栏

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

CSS 导航栏详解

CSS 下拉菜单

下拉文本 下拉式菜单 右对齐下拉菜单 下拉图片 下拉导航栏

CSS 下拉菜单详解

CSS 图片库

图片库 响应式图片库

CSS 图库详解

CSS 图像精灵

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

CSS 图像精灵详解

CSS 属性选择器

选择<a>具有目标属性的所有元素</a> 选择所有<a>具有 target='_blank' 属性的元素</a> 选择所有具有 title 属性的元素，该属性包含以空格分隔的单词列表，其中一个单词为“flower”选择所有类属性值以“top”开头的元素（必须是整个单词） 选择所有类属性值以“top”开头的元素（不能是整个单词） 选择所有类属性值以“test”结尾的元素 选择类属性值包含“te”的所有元素

CSS 属性选择器详解

CSS 表单

全宽输入字段 填充的输入字段 有边框的输入字段 底部有边框的输入字段 彩色输入字段 聚焦输入字段 聚焦输入字段 2 带图标/图像的输入 动画搜索输入 样式化文本区域 选择菜单样式 输入按钮样式 响应式表单

CSS 表单解释

CSS 计数器

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

CSS 计数器详解

CSS 网站布局

简单、响应迅速的网站布局 网站示例

CSS 网站布局解释

CSS 圆角

为元素添加圆角 分别将每个角弄圆 创建椭圆角

CSS 圆角详解

CSS 边框图像

使用 round 关键字在元素周围创建图像边框 使用 stretch 关键字在元素周围创建图像边框 图像边框 - 不同的切片值

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 网络字体详解

CSS 2D 变换

Translation() - 将元素从其当前位置移动 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 动画

将动画绑定到元素 动画 - 改变元素的背景颜色 动画 - 改变元素的背景颜色和位置 延迟动画 动画运行 3 次后停止 永远运行动画 反向运行动画 交替循环运行动画 动画的速度曲线 动画简写属性

CSS 动画详解

CSS 工具提示

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

CSS 工具提示说明

CSS 样式图像

圆形图像 带圆圈的图像 缩略图 缩略图作为链接 响应式图像 图片文字（左上角） 图片文字（右上角） 图片文字（左下角） 图片文字（右下角） 图片文字（居中） 宝丽来图像 灰度图像过滤器 高级 - 使用 CSS 和 JavaScript 的图像模式

CSS 图像解释

CSS 图像反射

在图像下方创建反射 在图片右侧创建反射 在图像和反射之间创建间隙 在反射上创建淡出效果

CSS 图像反射详解

CSS 对象适配

使用 object-fit: cover 使用 object-fit: contain 使用 object-fit: fill 使用 object-fit: none 使用 object-fit: scale-down 一个示例中的所有 object-fit 属性值

CSS object-fit 详解

CSS 对象位置

将图像放置在中心位置 将图像放置在著名的埃菲尔铁塔的中心位置

CSS 对象位置解释

CSS 按钮

基本 CSS 按钮 按钮颜色 按钮大小 圆形按钮 彩色按钮边框 可悬停按钮 阴影按钮 已禁用按钮 按钮宽度 按钮组 有边框按钮组 动画按钮（悬停效果） 动画按钮（涟漪效果） 动画按钮（按下效果）

CSS 按钮详解

CSS 分页

简单分页 主动和可悬停的分页 圆形活动和可悬停分页 悬停过渡效果 有边框的分页 圆角边框分页 链接之间有空格的分页 分页大小 链接之间有空格的分页 居中分页 面包屑

CSS 分页说明

CSS 多列

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

CSS 多列解释

CSS 用户界面

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

CSS 用户界面详解

CSS 变量

使用 var() 函数 使用 var() 函数插入多个自定义属性值

CSS 变量解释

CSS 盒子尺寸

没有 box-sizing 的元素的宽度 具有 box-sizing 的元素的宽度 表单元素 + 盒子尺寸

CSS 盒子尺寸说明

CSS 弹性框

带有三个弹性项目的弹性框 带有三个弹性项目的 Flexbox - rtl 方向 弹性方向 - 行反转 弹性方向 - 列 弹性方向 - 列反转 对齐内容 - flex-end 对齐内容 - 居中 对齐内容 - 间距 对齐内容 - 周围空间 对齐项目 - 拉伸 对齐项目 - flex-start 对齐项目 - flex-end 对齐项目 - 居中 对齐项目 - 基线 flex-wrap - nowrap flex-wrap - 包裹 flex-wrap - 反向包裹 对齐内容 - 居中 对弹性项目进行排序 右边距：自动； Margin:auto; = 完美居中 flex 项目上的 align-self 指定弹性项目相对于其余弹性项目的长度 使用 flexbox 创建响应式图库 使用 flexbox 创建响应式网站

CSS 弹性框详解

CSS 媒体查询

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

CSS 媒体查询详解

CSS 媒体查询 - 更多示例

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

CSS 媒体查询示例详解

CSS 响应式网页设计

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

CSS 响应式网页设计详解

CSS 网格

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

CSS 网格解释

❮ 上一页 下一个 ❯