这本供网络开发人员使用的综合参考书列出了万维网联盟推荐的层叠样式表规范中规定的所有 CSS 属性。
以下是按字母顺序排列的所有 CSS 属性列表。
A
属性 | 描述 |
---|---|
accent-color | 为用户界面上的控件设置高亮颜色。 |
align-content | 指定柔性线在柔性容器内沿横轴或网格块轴的分布方式。 |
align-items | 描述柔性容器内的对象应如何对齐。 |
align-self | 定义柔性容器中选定对象的对齐方式。 |
all | 重置除 unicode-bidi 和 direction 以外的所有属性。 |
animation | 在样式之间应用动画。 |
animation-delay | 定义动画开始前的暂停。 |
animation-direction | 指定动画是以反向、正向还是交替循环的方式播放。 |
animation-duration | 指示动画完成一个循环所需的时间。 |
animation-fill-mode | 定义在动画前后应用于目标元素的样式。 |
animation-iteration-count | 定义动画应播放的次数。 |
animation-name | 为 @keyframes 动画命名。 |
animation-play-state | 指定动画是正在运行还是暂停。 |
animation-timing-function | 提供动画的速度曲线规格。 |
aspect-ratio | 定义元素所需的纵横比。 |
B
C
属性 | 描述 |
---|---|
caption-side | 定义表格标题的位置。 |
caret-color | 定义文本区域、输入字段和其他元素中可编辑光标(游标)的颜色。 |
@charset | 提供有关样式表使用的字符编码的详细信息。 |
clear | 定义浮动元素旁边元素的行为。 |
clip | 剪切精确定位的元素。 |
clip-path | 创建一个剪切区域,设置要显示的元素部分。 |
color | 定义文本的前景色。 |
column-count | 定义元素应划分的列数。 |
column-fill | 控制元素的内容并将其分成几列。 |
column-gap | 定义列之间的间隙大小。 |
column-rule | 用于设置列间线条的颜色、样式和宽度的简写属性。 |
column-rule-color | 定义列间规则的颜色。 |
column-rule-style | 定义列间规则的样式。 |
column-rule-width | 定义规则在列之间的宽度。 |
column-span | 定义元素跨列的列数。 |
column-width | 定义列的宽度。 |
columns | 设置列宽和列数的快捷属性。 |
content | 使用生成的值替换内容。 |
counter-increment | 用于增加或减少已命名 CSS 计数器的值。 |
counter-reset | 创建已命名的 CSS 计数器,并为其初始化特定值。 |
counter-set | 为 CSS 计数器设置给定值。 |
cursor | 定义指向项目时显示的鼠标指针。 |
E
属性 | 描述 |
---|---|
empty-cells | 定义是否在表格中的空单元格上显示边框和背景。 |
F
属性 | 描述 |
---|---|
filter | 对元素应用图形效果。 |
flex | 简写属性,用于设置柔性项是增长还是收缩。 |
flex-basis | 定义柔性对象的起始长度。 |
flex-direction | 定义柔性元素在柔性容器中的方向。 |
flex-flow | 用于指定柔性容器的方向和包装行为的快捷属性。 |
flex-grow | 定义项目相对于其他项目的增长程度。 |
flex-shrink | 定义项目相对于其他项目的收缩程度。 |
flex-wrap | 定义是否需要包裹柔性元素。 |
float | 将元素放置在其容器的左侧或右侧。 |
font | 用于设置所有字体相关属性的简写属性。 |
@font-face | 允许网站下载和使用网络安全字体以外的字体的规则。 |
font-family | 定义文本的字体家族。 |
font-feature-settings | 为用户提供对 OpenType 字体复杂排版功能的控制。 |
font-kerning | 决定如何使用分隔信息,即字母之间的间距。 |
font-language-override | 决定字体中如何使用某种语言特有的字形。 |
font-size | 确定文本的字体大小。 |
font-size-adjust | 在字体回退时保持文本的可读性。 |
font-strech | 选择字体的标准、浓缩或扩展面。 |
font-style | 设置文本的字体样式。 |
font-synthesis | 确定浏览器是否应合成字体家族中缺少的样式。 |
font-variant | 设置字体的所有字体变量。 |
font-variant-alternate | 控制备用字形的使用。 |
font-variant-caps | 控制用于小写字母的备用字形的使用。 |
font-variant-east-asian | 控制用于东亚文字(如中文和日文)的替代字形的使用。 |
font-variant-ligatutes | 规范上下文形式和连字符的使用。 |
font-variant-numeric | 规范序号标记、分数和整数的不同字形的使用。 |
font-variant-position | 规定使用较小的备用字形作为上标或下标定位。 |
font-weight | 指定字体的权重。 |
G
属性 | 描述 |
---|---|
gap | 设置行和列间隙的快捷方式属性。 |
grid | 在一个声明中设置所有网格相关属性的快捷方式属性。 |
grid-area | 简写属性,用于指定网格项在网格中的大小和位置。 |
grid-auto-columns | 定义列的默认大小。 |
grid-auto-flow | 定义网格的自动放置项目插入流程。 |
grid-auto-rows | 定义默认行大小。 |
grid-column | 简写属性,指定网格项在网格列中的大小和位置。 |
grid-column-end | 定义网格列中网格项的终点。 |
grid-column-start | 定义网格列中网格项的起点。 |
grid-row | 指定网格项在网格行中的大小和位置的简写属性。 |
grid-row-end | 指定网格项在网格行中的终点。 |
grid-row-gap | 以大小定义行间空隙。 |
grid-row-start | 指定网格行中网格项的起始点。 |
grid-template | 指定与网格列、网格行和网格区域相关属性的简写属性。 |
grid-template-areas | 定义已命名的网格项及其在显示列和行时的用途。 |
grid-template-columns | 定义网格布局中列的数量和大小。 |
grid-template-rows | 定义网格布局中行的大小。 |
H
属性 | 描述 |
---|---|
height | 定义元素的高度。 |
hyphens | 定义如何分割单词以增强文本布局。 |
hyphenate-character | 设置行尾连字符前使用的字符。 |
I
属性 | 描述 |
---|---|
image-rendering | 定义要使用的图像缩放方法。 |
@import | 方便将一个样式表导入另一个样式表。 |
inline-size | 定义元素块的水平和垂直尺寸。 |
inset | 指示元素与其父元素之间的距离。 |
inset-block | 定义元素的逻辑块开始和结束偏移。 |
inset-block-end | 定义元素的逻辑块结束偏移。 |
inset-block-start | 定义元素的逻辑块起始偏移。 |
inset-inline | 定义元素在内联方向上的逻辑起始和结束偏移。 |
inset-inline-end | 定义元素末端与其父元素之间在内联方向上的距离。 |
inset-inline-start | 定义元素的起点与其父元素之间在内联方向上的距离。 |
isolation | 定义元素是否必须创建新的堆叠内容。 |
J
属性 | 描述 |
---|---|
justify-content | 定义在柔性和网格容器中内容项之间和周围的空间分配方式。 |
justify-items | 定义网格元素在网格容器中应如何沿水平轴对齐。 |
justify-self | 定义网格项在网格容器中应如何沿内联方向对齐。 |
K
属性 | 描述 |
---|---|
@keyframes | 为动画或过渡定义一组关键帧。 |
L
属性 | 描述 |
---|---|
left | 定义元素的水平位置。 |
letter-spacing | 设置文本字符之间的水平间距。 |
line-break | 定义是否换行以及如何换行东亚脚本。 |
line-height | 定义行框的高度。 |
list-style | 简写属性,用于在单个声明中设置所有列表样式属性。 |
list-style-image | 将图像设置为列表项标记。 |
list-style-position | 设置标记在列表中的位置。 |
list-style-type | 定义列表项标记的类型。 |
M
属性 | 描述 |
---|---|
margin | 设置元素四边边距的简写属性。 |
margin-block | 定义元素逻辑块开始和结束边距的快捷方式属性。 |
margin-block-end | 定义元素的逻辑块结束边距。 |
margin-block-start | 定义元素的逻辑块起始边距。 |
margin-bottom | 设置元素底部的边距区域。 |
margin-block-start | 定义元素的逻辑块起始边距。 |
margin-inline | 定义元素的逻辑内联开始和结束边距。 |
margin-inline-end | 定义元素的逻辑内联结束边距。 |
margin-inline-start | 定义元素的逻辑内嵌页边距。 |
margin-left | 设置元素左侧的边距区域。 |
margin-right | 设置元素右侧的边距区域。 |
margin-top | 设置元素顶部的边距。 |
mask | 在特定点屏蔽或剪切图像,以隐藏元素(部分或全部)。 |
mask-clip | 确定遮罩所覆盖的区域。 |
mask-composite | 在执行合成操作后显示位于当前遮罩层下方的遮罩层。 |
mask-image | 设置将用作元素遮罩层的图像。 |
mask-mode | 定义 mask-image 提供的掩码参考应被视为亮度掩码还是 alpha 掩码。 |
mask-origin | 定义蒙版图像的原点。 |
mask-position | 定义屏蔽图像在元素中的位置。 |
mask-repeat | 定义屏蔽图像在元素中的重复方式。 |
mask-size | 使用屏蔽图像属性定义应用于元素的屏蔽图像的大小。 |
mask-type | 将 SVG <蒙版>元素设置为亮度或 alpha 蒙版。 |
max-height | 设置元素高度的上限。 |
max-width | 设置元素宽度的上限。 |
@media | 为特定媒体类型、设备和尺寸设置 CSS 样式规则。 |
max-block-size | 设置元素的最大尺寸,其方向与其书写方向相反。 |
max-inline-size | 定义元素块的水平或垂直最大尺寸。 |
min-block-size | 根据元素的书写模式设置元素块的水平或垂直最小尺寸。 |
min-inline-size | 定义元素块的最小水平或垂直尺寸。 |
min-height | 设置元素高度的下限。 |
min-width | 设置元素宽度的下限。 |
mix-blend-mode | 定义元素内容与其父元素内容和元素背景的混合方式。 |
O
属性 | 描述 |
---|---|
object-fit | 定义图像或视频应如何调整大小或裁剪以适合其容器。 |
object-position | 定义内容在具有定义尺寸的元素中的位置。 |
offset | 简写属性,使元素更容易沿特定路径生成动画。 |
offset-anchor | 定义元素在沿偏移路径移动的框内的移动位置。 |
offset-distance | 定义元素沿偏移路径放置的位置。 |
offset-path | 定义元素在父容器或 SVG 坐标系中的路径。 |
offset-rotate | 定义元素沿指定偏移路径移动时的方向。 |
opacity | 设置元素的透明度。 |
order | 定义柔性项目在柔性容器中的显示顺序。 |
orphans | 定义页面、区域或列底部防止断开所需的最小行数。 |
outline | 设置元素周围轮廓的宽度、颜色和样式。 |
outline-color | 设置元素周围轮廓的颜色。 |
outline-offset | 定义轮廓与元素边框边缘之间的空间。 |
outline-style | 确定元素周围轮廓的样式。 |
outline-width | 定义元素周围轮廓的宽度。 |
overflow | 定义如何处理溢出其容器边界的内容。 |
overflow-anchor | 提供了一种禁用浏览器滚动锚定行为的方法,该行为可调整滚动位置以减少内容移动。 |
overflow-wrap | 允许浏览器将一行文本分割成一个不可断开的字符串,以防止内容溢出其容器。 |
overflow-clip-margin | 定义内容在被剪切之前溢出元素框的距离。 |
overflow-x | 定义元素的内容将溢出到其左侧和右侧边距以及水平方向。 |
overflow-y | 定义块级元素的内容超出元素的顶部和底部边缘时的显示方式。 |
overflow-block | 定义当元素的内容超出其方框的左右边界时的行为方式。 |
overflow-inline | 定义当溢出元素的内联边缘时溢出内容的显示方式。 |
overcroll-behavior | 确定浏览器在到达滚动区域边界时的操作。 |
overcroll-behavior-block | 确定浏览器在到达滚动区域的块方向边界时的行为。 |
overscroll-behavior-inline | 决定当达到滚动区域的内联方向边界时浏览器的行为方式。 |
overscroll-behavior-x | 确定当达到滚动区域的水平边界时浏览器的行为。 |
overcroll-behavior-y | 确定当达到滚动区域的垂直边界时浏览器的操作。 |
P
属性 | 描述 |
---|---|
padding | 定义元素所有边的 padding 的简写属性。 |
padding-block | 确定元素的逻辑块开始和结束 padding。 |
padding-block-end | 确定元素的逻辑块结束填充。 |
padding-block-start | 设置元素底部 padding 的宽度。 |
padding-bottom | 设置元素底部的填充宽度。 |
padding-inline | 确定元素的逻辑内联开始和结束 padding。 |
padding-inline-end | 确定元素的逻辑内联结束padding。 |
padding-inline-start | 用于创建自定义计数器样式。 |
padding-left | 设置元素左侧的填充空间。 |
padding-right | 设置元素右侧的填充空间。 |
padding-top | 设置元素顶部的填充空间。 |
perspective-origin | 定义 z=0 平面与用户之间的距离。 |
perspective-origin | 定义观看者/用户所看的位置。 |
place-content | 同时对齐块(列)和内联(行)轴中的内容。 |
place-items | 同时沿块(列)和内联(行)轴对齐网格和 Flexbox 容器中的项目。 |
place-self | 同时沿块和内联方向对齐各个项目。 |
pointer-events | 决定元素是否接收指针事件。 |
position | 定义元素在网页上的位置。 |
Q
属性 | 描述 |
---|---|
quotes | 定义嵌入式引号使用的引号样式。 |
S
属性 | 描述 |
---|---|
scale | 指定元素的缩放变换,与 transform 属性无关。 |
scroll-behavior | 定义当用户点击链接或使用滚动条时浏览器滚动的流畅程度。 |
scroll-margin | 定义抓取区域内元素的边距。 |
scroll-margin-block | 在块轴上定义滚动抓取区域边距的简写属性。 |
scroll-margin-block-end | 定义块轴末端滚动抓取区域的边距。 |
scroll-margin-block-start | 定义块轴开始时滚动快照区域的边距。 |
scroll-margin-bottom | 定义滚动容器底部的边距。 |
scroll-margin-inline | 设置元素在行(水平轴)维度上的滚动边距。 |
scroll-margin-inline-end | 定义水平维度末端滚动快照区域的边距。 |
scroll-margin-inline-start | 定义水平尺寸开始时滚动快照区域的边距。 |
scroll-margin-bottom | 定义元素滚动快照区域的下边距。 |
scroll-margin-left | 定义元素滚动抓取区域的左边距。 |
scroll-margin-top | 定义元素滚动快照区域的上边距。 |
scroll-margin-right | 定义元素滚动快照区域的右边距。 |
scroll-padding | 定义滚动容器边缘和元素区域之间的滚动填充,滚动停止后,该填充将锁定到位。 |
scroll-padding-block | 定义元素在块尺寸中的滚动衬垫。 |
scroll-padding-block-start | 定义块维度中元素滚动填充起始边缘的偏移量。 |
scroll-padding-block-end | 定义块维度中元素的滚动填充结束边缘的偏移量。 |
scroll-padding-bottom | 定义元素滚动抓取区域的底部偏移。 |
scroll-padding-left | 定义滚动容器左边缘与元素的滚动抓取区域之间的空间大小。 |
scroll-padding-right | 定义滚动容器右边缘与元素的滚动抓取区域之间的空间大小。 |
scroll-padding-top | 定义元素滚动抓取区域的顶部偏移。 |
scroll-padding-inline | 定义元素在内联尺寸中的滚动填充。 |
scroll-padding-inline-start | 以内联尺寸定义滚动端口起始边缘的偏移量。 |
scroll-padding-inline-end | 以内联尺寸定义滚动端口末端边缘的偏移量。 |
scroll-snap-align | 定义在快照容器中如何定位快照元素。 |
scroll-snap-align | 决定滚动容器是滚动过去还是紧贴最近的快照位置。 |
scroll-snap-shot | 定义滚动容器如何抓取到抓取位置。 |
scrollbar-color | 定义滚动条轨道和缩略图的颜色。 |
scrollbar-width | 用于样式化滚动条轨道和缩略图的宽度。 |
scrollbar-gutter | 它有助于为滚动条创建固定的空间。 |
shape-image-threshold | 使用形状-外部属性的图像时,指定形状提取的 alpha 通道阈值。 |
shape-margin | 定义指定 CSS 形状周围的边距。 |
shape-outside | 定义内联内容应包绕的形状。 |
T
属性 | 描述 |
---|---|
tab-size | 定义元素中制表符字符的宽度。 |
table-layout | 定义<表格>单元格、行和列的显示方式。 |
text-align | 定义文本与页面边距的对齐方式。 |
text-align-last | 设置块或行的最后一行(强制换行之前)的对齐方式。 |
text-combine-upright | 定义如何将多个字符放入一个字符区域。 |
text-decoration | 定义添加到文本中的装饰。 |
text-decoration-color | 定义文本装饰的颜色。 |
text-decoration-line | 用于为文本添加装饰线。 |
text-decoration-style | 用于为文本装饰行添加样式。 |
text-decoration-thickness | 用于为文本装饰行添加厚度。 |
text-emphasis | 用于为文本添加强调的简写属性。 |
text-emphasis-color | 用于设置文本周围强调标记的颜色。 |
text-emphasis-position | 用于设置文本周围强调标记的位置。 |
text-emphasis-style | 定义强调标记的外观。 |
text-indent | 定义文本第一行的缩进。 |
text-orientation | 定义一行中文本字符的方向。 |
text-overflow | 控制如何向用户显示隐藏的溢出内容。 |
text-shadow | 用于为文本添加阴影效果。 |
text-transform | 通过各种方式转换文本,从而改变文本的外观。 |
text-underline-offset | 定义下划线文本装饰线与其初始位置的距离。 |
text-underline-position | 定义下划线文本装饰的位置。 |
top | 定义元素相对于其包含元素的垂直位置。 |
transform | 它适用于元素的旋转、缩放、倾斜或平移。 |
transform-box | 定义与变换属性相关的布局框。 |
transform-origin | 帮助设置元素变换的原点。 |
transform-style | 定义嵌套项的三维空间渲染。 |
transition | 一个可作为每个过渡属性速记的属性。 |
transition-delay | 定义了启动过渡效果前的等待时间 |
transition-duration | Defines the amount of time that a transition animation should take to complete. |
transition-property | 定义应用过渡效果的 CSS 属性。 |
transition-timing-function | 定义过渡效果的速度曲线。 |
translate | 允许您沿 X、Y 和 Z 轴移动元素。 |
U
属性 | 描述 |
---|---|
unicode-bidi | 控制文档中双向文本的显示方式。 |
user-select | 决定用户是否可以选择文本。 |
V
属性 | 描述 |
---|---|
vertical-align | 定义元素的垂直对齐方式。 |
visibilty | 定义是否需要在不改变文档布局的情况下显示或隐藏元素。 |
W
属性 | 描述 |
---|---|
white-space | 定义元素中文本内部的空白区域。 |
Widows | 定义页面或列顶部必须留出多少行。 |
width | 定义元素内容区域的宽度。 |
word-break | 定义在单词超出元素可用宽度时应如何断开或包裹单词。 |
word-spacing | 定义文本中字与字之间的间距。 |
writing-mode | 定义文本应垂直还是水平显示。 |
Z
属性 | 描述 |
---|---|
z-index | 控制网页中元素的堆叠顺序。 |