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 外边距

为元素的每一侧指定不同的边距使用具有四个值的简写边距属性使用具有三个值的简写边距属性使用具有两个值的简写边距属性使用具有一个值的简写边距属性将边距设置为自动以将元素居中在其容器内让左边距从父元素继承边距折叠

边距属性详解

CSS 填充

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

CSS 填充属性详解

CSS 高度/宽度

设置元素的高度和宽度设置元素的 max-width 设置不同元素的高度和宽度使用百分比设置图像的高度和宽度设置元素的 min-width 和 max-width 设置元素的 min-height 和 max-height

CSS 高度/宽度属性详解

CSS 盒模型

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

CSS 盒模型详解

CSS 轮廓

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

CSS 轮廓属性详解

CSS 文本

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

CSS 文本属性详解

CSS 字体

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

字体属性详解

CSS 图标

Font Awesome 图标 Bootstrap 图标 Google 图标

CSS 图标详解

CSS 链接

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

CSS 链接属性解释

CSS 列表

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

CSS 列表属性解释

CSS 表格

为表格、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: hidden - 溢出被剪切，其余内容被隐藏。使用 overflow: scroll - 溢出被剪切，但添加了滚动条以查看其余内容。使用 overflow: auto - 如果溢出被剪切，则应添加滚动条以查看其余内容。使用 overflow-x 和 overflow-y。

CSS 溢出属性解释

CSS 浮动

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

CSS 浮动属性解释

CSS 内联块

显示内联、内联块和块之间的差异使用内联块创建导航链接

CSS 内联块解释

CSS 对齐元素

使用边距居中对齐居中对齐文本居中图像使用位置左/右对齐使用位置左/右对齐 - 跨浏览器解决方案使用浮动左/右对齐使用浮动左/右对齐 - 跨浏览器解决方案使用填充垂直居中垂直和水平居中使用行高垂直居中使用位置垂直和水平居中

CSS 对齐属性解释

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> 元素选择所有具有包含以空格分隔的单词列表（其中一个单词为“flower”）的 title 属性的元素选择所有具有以“top”开头的 class 属性值的元素（必须是整个单词）选择所有具有以“top”开头的 class 属性值的元素（不必是整个单词）选择所有具有以“test”结尾的 class 属性值的元素选择所有具有包含“te”的 class 属性值的元素

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 网页字体

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

将动画绑定到元素动画 - 更改元素的背景颜色动画 - 更改元素的背景颜色和位置延迟动画动画在停止之前运行 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 对象拟合解释

CSS 对象位置

将图像定位，使古老的建筑位于中心将图像定位，使著名的埃菲尔铁塔位于中心

CSS 对象位置解释

CSS 按钮

基本的 CSS 按钮按钮颜色按钮大小圆角按钮彩色按钮边框可悬停的按钮阴影按钮禁用按钮按钮宽度按钮组带边框的按钮组动画按钮（悬停效果）动画按钮（波纹效果）动画按钮（按下效果）

CSS 按钮解释

CSS 分页

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

CSS 分页解释

CSS 多列

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

CSS 多列解释

CSS 用户界面

让用户调整元素的宽度让用户调整元素的高度让用户同时调整元素的宽度和高度在轮廓和元素边框之间添加间距

CSS 用户界面解释

CSS 变量

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

CSS 变量解释

CSS 盒模型

没有 box-sizing 的元素宽度带有 box-sizing 的元素宽度表单元素 + box-sizing

CSS 盒模型解释

CSS Flexbox

CSS 弹性盒解释

CSS 媒体查询

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

CSS 媒体查询解释

CSS 媒体查询 - 更多示例

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

CSS 媒体查询示例解释

CSS 响应式网页设计

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

CSS 响应式网页设计解释

CSS 网格

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

CSS 网格解释

❮ 上一页下一页 ❯

W3schools Pathfinder

Track your progress - it's free!

Get Certified

颜色选择器

colorpicker

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

Top Tutorials

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples

HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples

Get Certified

HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate

FORUM ABOUT ACADEMY

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.