轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PHP PYTHON MYSQL GIT 问答 工具 导航 更多 实例 参考

CSS 教程

CSS 首页CSS 教程CSS 简介CSS 语法CSS 选择器CSS 如何使用CSS 注释CSS 颜色CSS RGB 颜色CSS HEX 颜色CSS HSL 颜色CSS 背景颜色CSS 背景图像CSS 背景重复CSS 背景附着CSS 简写背景CSS 边框CSS 边框宽度CSS 边框颜色CSS 边框各边CSS 简写边框属性CSS 圆角边框CSS 外边距CSS 外边距合并CSS 内边距CSS 高度和宽度CSS 盒子模型CSS 轮廓CSS 轮廓宽度CSS 轮廓颜色CSS 轮廓简写属性CSS 轮廓偏移CSS 文本CSS 文本对齐CSS 文本修饰CSS 文本转换CSS 文本间距CSS 文本阴影CSS 字体CSS 字体样式CSS 字体大小CSS 谷歌字体CSS 字体属性CSS 图标CSS 样式链接CSS 样式列表CSS 表格CSS 布局 - display 属性CSS 布局 - width 和 max-widthCSS 布局 - 定位属性CSS 布局 - 溢出CSS 布局 - 浮动和清除CSS 布局 - clear 和 clearfixCSS 布局 - 浮动实例CSS 布局 - display: inline-blockCSS 布局 - 水平和垂直对齐CSS 组合器CSS 伪类CSS 伪元素CSS 图像不透明度 / 透明度CSS 导航栏CSS 垂直导航栏CSS 水平导航栏CSS 下拉菜单CSS 图片库CSS 图像精灵CSS 属性选择器CSS 表单CSS 计数器CSS 网站布局CSS 单位CSS 特异性CSS3 教程CSS3 简介CSS3 圆角CSS3 边框图像CSS3 多重背景CSS3 颜色CSS3 渐变CSS3 径向渐变CSS3 阴影效果CSS3 Box 盒子阴影CSS3 文本效果CSS3 Web 字体CSS3 2D 转换CSS3 3D 转换CSS3 过渡CSS3 动画CSS 提示框CSS3 样式图像CSS3 object-fit 属性CSS3 按钮CSS3 分页实例CSS3 多列CSS3 用户界面CSS3 变量 - var() 函数CSS3 覆盖变量CSS3 使用 JavaScript 更改变量CSS3 Box SizingCSS3 媒体查询CSS3 媒体查询 - 实例CSS3 FlexboxCSS3 Flex 容器CSS3 Flex 项目CSS3 Flex 响应式响应式网页设计 - 简介响应式网页设计 - 视口响应式网页设计 - 网格响应式网页设计 - 媒体查询响应式网页设计 - 图像响应式网页设计 - 视频响应式网页设计 - 框架CSS 响应式网页设计 - 模板CSS 网格布局CSS 网格容器CSS 网格项目CSS 布局模板CSS 实例CSS 测验CSS 练习实践CSS 参考手册CSS 浏览器支持参考手册CSS 选择器参考手册CSS 函数参考手册CSS 听觉参考手册CSS 网络安全字体CSS 动画相关属性CSS 单位Px/Em 换算CSS 颜色CSS 合法颜色值CSS 默认值参考手册CSS 实体


CSS 参考手册

CSS 属性

A

align-content 规定弹性容器内的行之间的对齐方式，当项目不使用所有可用空间时。
align-items 规定弹性容器内项目的对齐方式。
align-self 规定弹性容器内所选项目的对齐方式。
all 重置所有属性（除了 unicode-bidi 和 direction）。
animation 所有 animation-* 属性的简写属性。
animation-delay 规定开始动画的延迟。
animation-direction 规定动画是向前播放、向后播放还是交替播放。
animation-duration 规定动画完成一个周期应花费的时间。
animation-fill-mode 规定元素在不播放动画时（在开始之前、结束之后、或同时）的样式。
animation-iteration-count 规定动画的播放次数。
animation-name 规定 @keyframes 动画的名称。
animation-play-state 规定动画是播放还是暂停。
animation-timing-function 规定动画的速度曲线。

B

backface-visibility 定义当面对用户时元素的背面是否应可见。
background 所有 background-* 属性的简写属性。
background-attachment 设置背景图像是与页面的其余部分一起滚动还是固定的。
background-blend-mode 规定每个背景图层（颜色/图像）的混合模式。
background-clip 定义背景（颜色或图像）应在元素内延伸的距离。
background-color 规定元素的背景色。
background-image 规定元素的一幅或多幅背景图像。
background-origin 规定背景图像的初始位置。
background-position 规定背景图像的位置。
background-repeat 设置是否以及如何重复背景图像。
background-size 规定背景图像的尺寸。
border border-width、border-style 以及 border-color 的简写属性。
border-bottom border-bottom-width、border-bottom-style 以及 border-bottom-color 的简写属性。
border-bottom-color 设置下边框的颜色。
border-bottom-left-radius 定义左下角的边框圆角。
border-bottom-right-radius 定义右下角的边框圆角。
border-bottom-style 设置下边框的样式。
border-bottom-width 设置下边框的宽度。
border-collapse 设置表格边框是折叠为单一边框还是分开的。
border-color 设置四条边框的颜色。
border-image border-image-* 属性的简写属性。
border-image-outset 规定边框图像区域超出边框的量。
border-image-repeat 规定边框图像应重复、圆角、还是拉伸。
border-image-slice 规定如何裁切边框图像。
border-image-source 规定用作边框的图像的路径。
border-image-width 规定边框图像的宽度。
border-left 所有 border-left-* 属性的简写属性。
border-left-color 设置左边框的颜色。
border-left-style 设置左边框的样式。
border-left-width 设置左边框的宽度。
border-radius 四个 border-*-radius 属性的简写属性。
border-right 所有 border-right-* 属性的简写属性。
border-right-color 设置右边框的颜色。
border-right-style 设置右边框的样式。
border-right-width 设置右边框的宽度。
border-spacing 设置相邻单元格边框之间的距离。
border-style 设置四条边框的样式。
border-top border-top-width、border-top-style 以及 border-top-color 的简写属性。
border-top-color 设置上边框的颜色。
border-top-left-radius 定义左上角的边框圆角。
border-top-right-radius 定义右上角的边框圆角。
border-top-style 设置上边框的样式。
border-top-width 设置上边框的宽度。
border-width 设置四条边框的宽度。
bottom 设置元素相对于其父元素底部的位置。
box-decoration-break 设置元素在分页符处的背景和边框的行为，或对于行内元素在换行符处的行为。
box-shadow 将一个或多个阴影附加到元素。
box-sizing 定义元素的宽度和高度的计算方式：它们是否应包含内边距和边框。
break-after 规定指定元素之后是否应出现 page-、column- 或 region-break。
break-before 规定指定元素之前是否应出现 page-、column- 或 region-break。
break-inside 规定指定元素内部是否应出现 page-、column- 或 region-break。

C

caption-side 规定表格标题的放置方式。
caret-color 规定光标在 input、textarea 或任何可编辑元素中的颜色。
@charset 规定样式表中使用的字符编码。
clear 规定不允许在元素的哪一侧浮动元素
clip 剪裁绝对定位的元素。
color 设置文本的颜色。
column-count 规定元素应分为的列数。
column-fill 指定如何填充列（是否 balanced）。
column-gap 规定列间隙。
column-rule 所有 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间的规则样式。
column-rule-width 规定列之间的规则宽度。
column-span 规定元素应该跨越多少列。
column-width 规定列宽度。
columns column-width 和 column-count 的简写属性。
content 与 :before 和 :after 伪元素一起使用，来插入生成的内容。
counter-increment 增加或减少一个或多个 CSS 计数器的值。
counter-reset 创建或重置一个或多个 CSS 计数器。
cursor 规定当指向元素时要显示的鼠标光标。

D

direction 规定文本方向/书写方向。
display 规定如何显示某个 HTML 元素。

E

empty-cells 规定是否在表格中的空白单元格上显示边框和背景。

F

filter 定义元素显示之前的效果（例如，模糊或颜色偏移）。
flex flex-grow、flex-shrink 以及 flex-basis 的简写属性。
flex-basis 规定弹性项目的初始长度。
flex-direction 规定弹性项目的方向。
flex-flow flex-direction 和 flex-wrap 的简写属性。
flex-grow 规定项目相对于其余项目的增量。
flex-shrink 规定项目相对于其余项目的减量。
flex-wrap 规定弹性项目是否应该换行。
float 规定弹性项目是否应该换行。
font font-style、font-variant、font-weight、font-size/line-height 以及 font-family 的简写属性。
@font-face 允许网站下载和使用 "web-safe" 字体以外的其他字体的规则。
font-family 规定文本的字体族（字体系列）。
font-feature-settings 允许控制 OpenType 字体中的高级印刷特性。
@font-feature-values 允许创作者使用 font-variant-alternate 中的通用名来实现在 OpenType 中以不同方式激活的特性。
font-kerning 控制字距调整信息的使用（字母间距）。
font-language-override 控制特定语言的字形在字体的使用。
font-size 规定文本的字体大小。
font-size-adjust 保持发生字体回退时的可读性。
font-stretch 从字体系列中选择一个普通的、压缩的或扩展的字体。
font-style 规定文本的字体样式。
font-synthesis 控制哪些缺失的字体（粗体或斜体）可以由浏览器合成。
font-variant 规定是否应该以小型大写字体显示文本。
font-variant-alternates 控制与 @font-feature-values 中定义的备用名称关联的备用字形的使用。
font-variant-caps 控制大写字母的备用字形的使用。
font-variant-east-asian 控制东亚文字（例如中文和日语）的备用字形的使用。
font-variant-ligatures 控制在适用于元素的文本内容中使用哪些连字和上下文形式。
font-variant-numeric 控制数字、分数和序号标记的备用字形的使用。
font-variant-position 控制较小字体的替代字形的使用，这些字形相对于字体基线定位为上标或下标。
font-weight 规定字体的粗细。

G

grid grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 以及 grid-auto-flow 属性的简写属性。
grid-area 即可规定网格项的名称，也可以是 grid-row-start、grid-column-start、grid-row-end 以及 grid-column-end 属性的简写属性。
grid-auto-columns 规定默认的列尺寸。
grid-auto-flow 规定如何在网格中插入自动放置的项目。
grid-auto-rows 规定默认的行尺寸。
grid-column grid-column-start 和 grid-column-end 属性的简写属性。
grid-column-end 规定如何结束网格项目。
grid-column-gap 规定列间隙的尺寸。
grid-column-start 规定网格项目从何处开始。
grid-gap grid-row-gap 和 grid-column-gap 的简写属性。
grid-row grid-row-start 和 grid-row-end 属性的简写属性。
grid-row-end 规定网格项目在何处结束。
grid-row-gap 规定列间隙的尺寸。
grid-row-start 规定网格项目从何处开始。
grid-template grid-template-rows、grid-template-columns 以及 grid-areas 属性的简写属性。
grid-template-areas 规定如何使用命名的网格项显示列和行。
grid-template-columns 指定列的尺寸以及网格布局中的列数。
grid-template-rows 指定网格布局中的行的尺寸。

H

hanging-punctuation 规定是否可以在行框外放置标点符号。
height 设置元素的高度。
hyphens 设置如何分割单词以改善段落的布局。

I

image-rendering 当图像被缩放时，向浏览器提供关于保留图像的哪些最重要的方面的信息。
@import 允许您将样式表导入另一张样式表。
isolation 定义元素是否必须创建新的堆叠内容。

J

justify-content 规定项目在弹性容器内的对齐方式，当项目未用到所有可用空间时。

K

@keyframes 规定动画代码。

L

left 规定定位元素的左侧位置。
letter-spacing 增加或减少文本中的字符间距。
line-break 如何如何/是否换行。
line-height 设置行高。
list-style 在一条声明中设置所有列表属性。
list-style-image 把图像指定为列表项标记。
list-style-position 规定列表项标记的位置。
list-style-type 规定列表项标记的类型。

M

margin 在一条声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
mask 通过在特定位置遮罩或剪切图像来隐藏元素。
mask-type 规定将遮罩元素用作亮度或 Alpha 遮罩。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
@media 为不同的媒体类型、设备、尺寸设置样式规则。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
mix-blend-mode 规定元素内容应如何与其直接父的背景相混合。

O

object-fit 规定替换元素的内容应如何适合其所用高度和宽度建立的框。
object-position 指定替换元素在其框内的对齐方式。
opacity 设置元素的不透明等级。
order 设置弹性项目相对于其余项目的顺序。
orphans 设置在元素内发生分页时必须保留在页面底部的最小行数。
outline outline-width、outline-style 以及 outline-color 属性的简写属性。
outline-color 设置轮廓的颜色。
outline-offset 对轮廓进行偏移，并将其绘制到边框边缘之外。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
overflow
 规定如果内容溢出元素框会发生什么情况。
overflow-wrap 规定浏览器是否可能为了防止溢出而在单词内折行（当字符串太长而无法适应其包含框时）。
overflow-x 规定是否剪裁内容的左右边缘，如果它溢出了元素的内容区域。
overflow-y 规定是否剪裁内容的上下边缘，如果它溢出了元素的内容区域。

P

padding 所有 padding-* 属性的简写属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
page-break-after 设置元素之后的分页（page-break）行为。
page-break-before 设置元素之前的分页（page-break）行为。
page-break-inside 设置元素内的分页（page-break）行为。
perspective 为 3D 定位元素提供透视。
perspective-origin 定义用户观看 3D 定位元素的位置。
pointer-events 定义元素是否对指针事件做出反应。
position 规定用于元素的定位方法的类型（静态、相对、绝对或固定）。

Q

quotes 设置引号类型。

R

resize 定义用户是否以及如何调整元素的尺寸。
right 规定定位元素的左侧位置。

S

scroll-behavior 规定可滚动框中是否平滑地滚动，而不是直接跳跃。

T

tab-size 规定制表符的宽度。
table-layout 定义用于对单元格、行和列进行布局的算法。
text-align 规定文本的水平对齐方式。
text-align-last 描述当 text-align 为 "justify" 时，如何在强制换行之前对齐块或行的最后一行。
text-combine-upright 将多个字符组合到到单个字符的空间中。
text-decoration 规定文本装饰。
text-decoration-color 规定文本装饰（text-decoration）的颜色。
text-decoration-line 规定文本装饰（text-decoration）中的的行类型。
text-decoration-style 规定文本装饰（text-decoration）中的行样式。
text-indent 规定文本块（text-block）中的的首行缩进。
text-justify 规定当 text-align 为 "justify" 时使用的对齐方法。
text-orientation 定义行中的文本方向。
text-overflow 规定当文本溢出包含元素时应该发生的情况。
text-shadow 添加文本阴影。
text-transform 控制文本的大写。
text-underline-position 规定使用 text-decoration 属性设置的下划线的位置。
top 规定定位元素的顶端位置。
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许您更改转换元素的位置。
transform-style 规定如何在 3D 空间中渲染嵌套的元素。
transition 所有 transition-* 属性的简写属性。
transition-delay 规定合适开始过渡效果。
transition-duration 规定完成过渡效果所需的秒或毫秒数。
transition-property 规定过渡效果对应的 CSS 属性的名称。
transition-timing-function 规定过渡效果的速度曲线。

U

unicode-bidi 与 direction 属性一起使用，设置或返回是否应覆写文本来支持同一文档中的多种语言。
user-select 规定是否能选取元素的文本。

V

vertical-align 设置元素的垂直对齐方式。
visibility 规定元素是否可见。

W

white-space 规定如何处理元素内的空白字符。
widows 设置如果元素内发生分页，必须在页面顶部保留的最小行数。
width 设置元素的宽度。
word-break 规定单词到达行末后如何换行。
word-spacing 增加或减少文本中的单词间距。
word-wrap 允许长的、不能折行的单词换到下一行。
writing-mode 规定文本行是水平还是垂直布局。

Z

z-index 设置定位元素的堆叠顺序。

每章中的实例

本 CSS 教程包含数百个 CSS 实例。

通过使用我们的在线编辑器（btschools TIY），您可以编辑 CSS，然后单击运行按钮来查看结果。

CSS 实例

body {
  background-color: lightblue;
}
h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
亲自试一试 »

点击 "亲自试一试" 按钮查看运行结果。

CSS 实例

从 300 多个实例中学习！使用我们的在线编辑器，您可以编辑 CSS，然后单击运行按钮来查看结果。

访问 CSS 实例!

使用菜单

我们建议按照菜单中列出的顺序阅读本教程。

如果你有一个大屏幕，菜单将始终出现在左边。

如果屏幕很小，请单击顶部的菜单标志打开菜单 ☰.

CSS 模板

我们已经创建了一些响应式 W3.CSS 的模板供您使用。

您可以在所有项目中自由修改、保存、共享和使用它们。

免费 CSS 模板！

CSS 习题和测试

在 W3Schools 测试您的 CSS 技能！

开始 CSS 实验!

开始 CSS 测试!

CSS 参考手册

在 W3School，您将找到所有属性和选择器的完整 CSS 参考手册，包括语法、示例、浏览器支持等。

CSS 属性参考

CSS 选择器参考

CSS 函数参考

CSS 动画参考

CSS 听觉参照

CSS 样式表单位

CSS 颜色参考

CSS 默认值

CSS 浏览器支持


按字母顺序排列 HTML 标签

标签 描述
<!--...--> 定义注释。
<!DOCTYPE>  定义文档类型。
<a> 定义锚。
<abbr> 定义缩写。
<acronym> 定义只取首字母的缩写。HTML5 中不支持。请使用 <abbr> 代替。
<address> 定义文档作者或拥有者的联系信息。
<applet> 定义嵌入的 applet。HTML5 中不支持。请使用 <embed> 和 <object> 代替。
<area> 定义图像映射内部的区域。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<b> 定义粗体字。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 定义页面中文本的默认字体、颜色或尺寸。HTML5 中不支持。请使用 CSS 代替。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<blockquote> 定义长的引用。
<body> 定义文档的主体。
<br> 定义简单的折行。
<button> 定义按钮。
<canvas> 定义图形。
<caption> 定义表格标题。
<center> 定义居中文本。HTML5 中不支持。请使用 CSS 代替。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
<data> 添加给定内容的机器可读翻译。
<datalist> 定义下拉列表。
<dd> 定义定义列表中项目的描述。
<del> 定义被删除文本。
<details> 定义元素的细节。
<dfn> 定义定义项目。
<dialog> 定义对话框或窗口。
<dir> 定义目录列表。HTML5 中不支持。请使用 CSS 代替。
<div> 定义文档中的节。
<dl> 定义定义列表。
<dt> 定义定义列表。
<em> 定义强调文本。
<embed> 定义外部交互内容或插件。
<fieldset> 定义围绕表单中元素的边框。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
<font> 定义文字的字体、尺寸和颜色。HTML5 中不支持。请使用 CSS 代替。
<footer> 定义 section 或 page 的页脚。
<form> 定义供用户输入的 HTML 表单。
<frame> 定义框架集的窗口或框架。HTML5 中不支持。
<frameset> 定义框架集。HTML5 中不支持。
<h1> to <h6> 定义 HTML 标题。
<head> 定义关于文档的信息。
<header> 定义 section 或 page 的页眉。
<hr> 定义水平线。
<html> 定义 HTML 文档。
<i> 定义斜体字。
<iframe> 定义内联框架。
<img> 定义图像。
<input> 定义输入控件。
<ins> 定义被插入文本。
<kbd> 定义键盘文本。
<label> 定义 input 元素的标注。
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目。
<link> 定义文档与外部资源的关系。
<main> 定义文档的主要内容。
<map> 定义图像映射。
<mark> 定义有记号的文本。
<meta> 定义关于 HTML 文档的元信息。
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<noframes> 定义针对不支持框架的用户的替代内容。HTML5 中不支持。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<object> 定义内嵌对象。
<ol> 定义有序列表。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<output> 定义输出的一些类型。
<p> 定义段落。
<param> 定义对象的参数。
<picture> 为多个图像资源定义一个容器
<pre> 定义预格式文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> 定义加删除线的文本。
<samp> 定义计算机代码样本。
<script> 定义客户端脚本。
<section> 定义 section。
<select> 定义选择列表（下拉列表）。
<small> 定义小号文本。
<source> 定义媒介源。
<span> 定义媒介源。
<strike> 定义加删除线文本。HTML5 中不支持。请使用 <del> 或 <s> 代替。
<strong> 定义强调文本。
<style> 定义文档的样式信息。
<sub> 定义下标文本。
<summary> 为 <details> 元素定义可见的标题。
<sup> 定义上标文本。
<svg> 定义 SVG 图形的容器。
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<template> 定义用作容纳页面加载时隐藏内容的容器。
<textarea> 定义多行的文本输入控件。
<tfoot> 定义表格中的表注内容（脚注）。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time> 定义日期/时间。
<title> 定义文档的标题。
<tr> 定义表格中的行。
<track> 定义用在媒体播放器中的文本轨道。
<tt> 定义打字机文本。HTML5 中不支持。请使用 CSS 代替。
<u> 定义下划线文本。
<ul> 定义无序列表。
<var> 定义文本的变量部分。
<video> 定义视频。
<wbr> 定义可能的换行符。

❮ 上一页 下一页 ❯