菜单
×
我的 W3Schools 获取认证 空间 教师专用 Plus 获取认证 空间 教师专用 Plus
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

CSS 教程

CSS 主页 CSS 简介 CSS 语法 CSS 选择器 CSS 如何做 CSS 注释 CSS 颜色
颜色 RGB HEX HSL
CSS 背景
背景颜色 背景图像 背景重复 背景附加 背景简写
CSS 边框
边框 边框宽度 边框颜色 边框边 边框简写 圆角边框
CSS 外边距
外边距 外边距合并
CSS 内边距 CSS 高度/宽度 CSS 盒模型 CSS 轮廓
轮廓 轮廓宽度 轮廓颜色 轮廓简写 轮廓偏移
CSS 文本
文本颜色 文本对齐 文本装饰 文本转换 文本间距 文本阴影
CSS 字体
字体族 网络安全字体 字体回退 字体样式 字体大小 谷歌字体 字体搭配 字体简写
CSS 图标 CSS 链接 CSS 列表 CSS 表格
表格边框 表格大小 表格对齐 表格样式 响应式表格
CSS Display CSS Max-width CSS Position CSS Z-index CSS Overflow CSS Float
浮动 清除 浮动示例
CSS Inline-block CSS Align CSS 组合器 CSS 伪类 CSS 伪元素 CSS 透明度 CSS 导航栏
导航栏 垂直导航栏 水平导航栏
CSS 下拉菜单 CSS 图片库 CSS 图片精灵 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特异性 CSS !important CSS 数学函数

CSS 高级

CSS 圆角 CSS 边框图片 CSS 背景 CSS 颜色 CSS 颜色关键字 CSS 渐变
线性渐变 径向渐变 锥形渐变
CSS 阴影
阴影效果 盒子阴影
CSS 文本效果 CSS Web 字体 CSS 2D 变换 CSS 3D 变换 CSS 过渡 CSS 动画 CSS 工具提示 CSS 样式图片 CSS 图片反射 CSS object-fit CSS object-position CSS 遮罩 CSS 按钮 CSS 分页 CSS 多列 CSS 用户界面 CSS 变量
var() 函数 覆盖变量 变量和 JavaScript 媒体查询中的变量
CSS @property CSS 盒尺寸 CSS 媒体查询 CSS MQ 示例 CSS Flexbox
CSS Flexbox CSS Flex 容器 CSS Flex 项目 CSS Flex 响应式

CSS 响应式

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

CSS 网格

网格简介 网格容器 网格项

CSS SASS

SASS 教程

CSS 示例

CSS 模板 CSS 示例 CSS 编辑器 CSS 片段 CSS 测验 CSS 练习 CSS 网站 CSS 面试准备 CSS 训练营 CSS 证书

CSS 参考手册

CSS 参考 CSS 选择器 CSS 函数 CSS 听觉参考 CSS 网络安全字体 CSS 可动画属性 CSS 单位 CSS PX-EM 转换器 CSS 颜色 CSS 颜色值 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 边框

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

CSS 边框属性解释

CSS 外边距

为元素的每条边指定不同的外边距 使用带四个值的简写外边距属性 使用带三个值的简写外边距属性 使用带两个值的简写外边距属性 使用带一个值的简写外边距属性 设置外边距为 auto 使元素在其容器内居中 让左外边距从父元素继承 外边距合并

外边距属性解释

CSS 内边距

为元素的每条边指定不同的内边距 使用带四个值的简写内边距属性 使用带三个值的简写内边距属性 使用带两个值的简写内边距属性 使用带一个值的简写内边距属性 内边距和元素宽度（不使用 box-sizing） 内边距和元素宽度（使用 box-sizing） 设置元素的 padding-left 设置元素的 padding-right 设置元素的 padding-top 设置元素的 padding-bottom

CSS 内边距属性解释

CSS 高度/宽度

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

CSS 高度/宽度属性解释

CSS 盒模型

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

CSS 盒模型解释

CSS 轮廓

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

CSS 轮廓属性解释

CSS 文本

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

CSS 文本属性解释

CSS 字体

设置文本的字体 设置字体的大小 以 px 设置字体大小 以 em 设置字体大小 以百分比和 em 设置字体大小 设置字体的样式 设置字体的变体 设置字体的粗细 在一个声明中包含所有字体属性

字体属性解释

CSS 图标

Font Awesome 图标 Bootstrap 图标 Google 图标

CSS 图标解释

CSS 链接

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

CSS 链接属性解释

CSS 列表

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

CSS 列表属性解释

CSS 表格

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

CSS 表格属性解释

CSS Display

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

CSS display 属性解释

CSS 定位

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

CSS 定位属性解释

CSS Overflow

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

CSS overflow 属性解释

CSS 浮动

float 属性的简单使用 一个带边框和外边距的图片，在段落中向右浮动 一个带标题的图片，向右浮动 让段落的第一个字母向左浮动 关闭浮动（使用 clear 属性） 关闭浮动（使用 "clearfix" 技巧） 创建浮动框 创建并排图片 创建等高框（使用 flexbox） 创建一个水平菜单 创建一个网页布局示例

CSS float 属性解释

CSS Inline-block

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

CSS inline-block 解释

CSS 对齐元素

使用 margin 居中对齐 居中文本 居中图片 使用 position 左/右对齐 使用 position 左/右对齐 - 跨浏览器解决方案 使用 float 左/右对齐 使用 float 左/右对齐 - 跨浏览器解决方案 使用 padding 垂直居中 垂直和水平居中 使用 line-height 垂直居中 使用 position 垂直和水平居中

CSS align 属性解释

CSS 组合器

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

CSS 组合器解释

CSS 伪类

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

CSS 伪类解释

CSS 伪元素

使文本中的第一个字母特殊 使文本中的第一行特殊 使第一个字母和第一行特殊 使用 :before 在元素前插入一些内容 使用 :after 在元素后插入一些内容

CSS 伪元素解释

CSS 透明度

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

CSS 图片透明度解释

CSS 导航栏

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

CSS 导航栏解释

CSS 下拉菜单

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

CSS 下拉菜单解释

CSS 图片库

图片库 响应式图片库

CSS 图片库解释

CSS 图片精灵

一个图片精灵 一个图片精灵 - 一个导航列表 一个带悬停效果的图片精灵

CSS 图片精灵解释

CSS 属性选择器

选择所有带 target 属性的 <a> 元素 选择所有带 target="_blank" 属性的 <a> 元素 选择所有 title 属性包含一个以空格分隔的单词列表，其中一个单词是 "flower" 的元素选择所有 class 属性值以 "top" 开头的元素（必须是完整单词） 选择所有 class 属性值以 "top" 开头的元素（不必是完整单词） 选择所有 class 属性值以 "test" 结尾的元素 选择所有 class 属性值包含 "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 阴影效果

简单的阴影效果 为阴影添加颜色 为阴影添加模糊效果 带黑色阴影的白色文本 红色霓虹灯发光阴影 红色和蓝色霓虹灯发光阴影 带黑色、蓝色和深蓝色阴影的白色文本 为元素添加简单的盒子阴影 为盒子阴影添加颜色 为盒子阴影添加颜色和模糊效果 创建纸质卡片（文本） 创建纸质卡片（宝丽来照片）

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 动画

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

CSS 动画解释

CSS 工具提示

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

CSS 工具提示解释

CSS 样式图片

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

CSS 图片详解

CSS 图片倒影

在图片下方创建倒影 在图片右侧创建倒影 在图片和倒影之间创建间隙 在倒影上创建淡出效果

CSS 图片倒影详解

CSS Object-fit

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

CSS object-fit 详解

CSS Object-position

定位图片使古老的建筑居中 定位图片使著名的埃菲尔铁塔居中

CSS object-position 详解

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 Flexbox

包含三个弹性项目的 Flexbox 包含三个弹性项目的 Flexbox - 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 指定弹性项目的长度，相对于其他弹性项目 使用 flexbox 创建响应式图片库 使用 flexbox 创建响应式网站

CSS flexbox 详解

CSS 媒体查询

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

CSS 媒体查询详解

CSS 媒体查询 - 更多示例

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

CSS 媒体查询示例详解

CSS 响应式网页设计

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

CSS 响应式网页设计详解

CSS 网格

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

CSS 网格详解


❮ 上一页 下一页 ❯
PLUS
空格
获取证书
面向教师
面向企业
联系我们
×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业，请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误，或想提出建议，请发送电子邮件给我们
help@w3schools.com

热门教程
HTML 教程
CSS 教程
JavaScript 教程
操作方法教程
SQL 教程
Python 教程
W3.CSS 教程
Bootstrap 教程
PHP 教程
Java 教程
C++ 教程
jQuery 教程
热门参考
HTML 参考
CSS 参考
JavaScript 参考
SQL 参考
Python 参考
W3.CSS 参考
Bootstrap 参考
PHP 参考
HTML 颜色
Java 参考
Angular 参考
jQuery 参考
热门示例
HTML 示例
CSS 示例
JavaScript 示例
操作方法示例
SQL 示例
Python 示例
W3.CSS 示例
Bootstrap 示例
PHP 示例
Java 示例
XML 示例
jQuery 示例
获取证书
 HTML 证书
CSS 证书
JavaScript 证书
前端证书
SQL 证书
Python 证书
PHP 证书
jQuery 证书
Java 证书
C++ 证书
C# 证书
XML 证书
论坛 关于 学院
W3Schools 经过优化，旨在方便学习和培训。示例可能经过简化，以提高阅读和学习体验。
教程、参考资料和示例会不断审查，以避免错误，但我们无法保证所有内容的完全正确性。
使用 W3Schools 即表示您已阅读并接受我们的使用条款、Cookie 和隐私政策。

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持。