主题
CSS 属性
动画属性(Animation)
| 属性 | 描述 |
|---|---|
animation | 指定基于关键帧的动画 |
animation-delay | 指定动画何时开始 |
animation-direction | 指定动画是否应在交替的循环中反向播放 |
animation-duration | 指定动画完成一个周期应花费的秒数或毫秒数 |
animation-fill-mode | 指定CSS动画在执行之前和之后应如何将样式应用于其目标 |
animation-iteration-count | 指定在停止之前动画循环应播放的次数 |
animation-name | 指定@keyframes应应用于所选元素的已定义动画的名称 |
animation-play-state | 指定动画是运行还是暂停 |
animation-timing-function | 指定CSS动画在每个周期内应如何进行 |
背景属性(Background)
| 属性 | 描述 |
|---|---|
background | 在一个声明中定义各种背景属性 |
background-attachment | 指定背景图像是在视口中固定还是滚动 |
background-clip | 指定背景的绘制区域 |
background-color | 定义元素的背景色 |
background-image | 定义元素的背景图像 |
background-origin | 指定背景图像的定位区域 |
background-position | 定义背景图像的原点 |
background-repeat | 指定是否/如何平铺背景图像 |
background-size | 指定背景图像的大小 |
边框属性(Border)
| 属性 | 描述 |
|---|---|
border | 设置元素边框所有四个侧面的宽度，样式和颜色 |
border-bottom | 设置元素底部边框的宽度，样式和颜色 |
border-bottom-color | 设置元素底部边框的颜色 |
border-bottom-left-radius | 定义元素左下边界的形状 |
border-bottom-right-radius | 定义元素右下边界的形状 |
border-bottom-style | 设置元素底部边框的样式 |
border-bottom-width | 设置元素底部边框的宽度 |
border-color | 设置元素所有四个侧面的边框颜色 |
border-image | 指定如何使用图像代替边框样式 |
border-image-outset | 指定边框图像区域超出边框的范围 |
border-image-repeat | 指定图像边框应重复、四舍五入还是拉伸 |
border-image-slice | 指定图像边框的向内偏移量 |
border-image-source | 指定要用作边框的图像位置 |
border-image-width | 指定图像边框的宽度 |
border-left | 设置元素左边框的宽度、样式和颜色 |
border-left-color | 设置元素的左边框的颜色 |
border-left-style | 设置元素左边框的样式 |
border-left-width | 设置元素左边框的宽度 |
border-radius | 定义元素边界角的形状 |
border-right | 设置元素右边框的宽度、样式和颜色 |
border-right-color | 设置元素右边框的颜色 |
border-right-style | 设置元素右边框的样式 |
border-right-width | 设置元素右边框的宽度 |
border-style | 在元素的所有四个面上设置边框的样式 |
border-top | 设置元素顶部边框的宽度、样式和颜色 |
border-top-color | 设置元素顶部边框的颜色 |
border-top-left-radius | 定义元素左上边界的形状 |
border-top-right-radius | 定义元素右上边界的形状 |
border-top-style | 设置元素顶部边框的样式 |
border-top-width | 设置元素顶部边框的宽度 |
border-width | 设置元素所有四个侧面的边框宽度 |
颜色属性(Color)
| 属性 | 描述 |
|---|---|
color | 指定元素文本的颜色 |
opacity | 指定元素的透明度 |
尺寸属性(Size)
| 属性 | 描述 |
|---|---|
height | 指定元素的高度 |
max-height | 指定元素的最大高度 |
max-width | 指定元素的最大宽度 |
min-height | 指定元素的最小高度 |
min-width | 指定元素的最小宽度 |
width | 指定元素的宽度 |
内容属性(Content)
| 属性 | 描述 |
|---|---|
content | 插入生成的内容 |
quotes | 指定嵌入引用的引号类型 |
counter-reset | 创建或重置一个或多个计数器 |
counter-increment | 递增一个或多个计数器值 |
弹性Flex盒子布局(Flex)
| 属性 | 描述 |
|---|---|
align-content | 指定flex容器中flex容器的项目的对齐方式 |
align-items | 为flex容器中的项目指定默认对齐方式 |
align-self | 指定flex容器中选定项目的对齐方式 |
flex | 指定弹性长度的分量 |
flex-basis | 指定flex项目的初始主要尺寸 |
flex-direction | 指定flex项目的方向 |
flex-flow | flex-direction和flex-wrap属性的简写属性 |
flex-grow | 指定flex项目相对于flex容器内其他项目的增长方式 |
flex-shrink | 指定flex项目相对于flex容器内其他项目的收缩方式 |
flex-wrap | 指定是否应包装柔性物品 |
justify-content | 指定在解决了任何弹性长度和自动页边距之后，flex项目如何沿flex容器的主轴对齐 |
order | 指定flex项目在flex容器中的显示和布局顺序 |
字体属性(Fonts)
| 属性 | 描述 |
|---|---|
font | 在一个声明中定义各种字体属性 |
font-family | 定义元素的字体列表 |
font-size | 定义文本的字体大小 |
font-size-adjust | 发生字体回退时，保留文本的可读性 |
font-stretch | 从字体中选择一个普通的，压缩的或扩展的字体 |
font-style | 定义文本的字体样式 |
font-variant | 指定字体变体 |
font-weight | 指定文本的字体粗细 |
列表项属性(Lists)
| 属性 | 描述 |
|---|---|
list-style | 定义列表和列表元素的显示样式 |
list-style-image | 指定用作列表项标记的图像 |
list-style-position | 指定列表项标记的位置 |
list-style-type | 指定列表项的标记样式 |
边距属性(Margin)
| 属性 | 描述 |
|---|---|
margin | 在元素的所有四个面上设置边距 |
margin-bottom | 设置元素的底边距 |
margin-left | 设置元素的左边距 |
margin-right | 设置元素的右边距 |
margin-top | 设置元素的上边距 |
多列布局属性(Column)
| 属性 | 描述 |
|---|---|
column-count | 指定多列元素中的列数 |
column-fill | 指定如何填充列 |
column-gap | 指定多列元素中各列之间的间隔 |
column-rule | 指定在多列元素的每一列之间绘制的直线或“规则” |
column-rule-color | 指定在多列布局中的列之间绘制的规则的颜色 |
column-rule-style | 指定在多列布局中的列之间绘制的规则的样式 |
column-rule-width | 指定在多列布局中的列之间绘制的规则的宽度 |
column-span | 指定元素在多列布局中跨越的列数 |
column-width | 指定多列元素中列的最佳宽度 |
columns | 用于设置column-width和column-count属性的简写属性 |
轮廓属性(Outline)
| 属性 | 描述 |
|---|---|
outline | 设置元素轮廓的所有四个边的宽度、样式和颜色 |
outline-color | 设置轮廓的颜色 |
outline-offset | 设置轮廓和元素边框之间的空间 |
outline-style | 设置轮廓样式 |
outline-width | 设置轮廓的宽度 |
填充属性(Padding)
| 属性 | 描述 |
|---|---|
padding | 在元素的所有四个面上设置填充 |
padding-bottom | 将填充设置为元素的底侧 |
padding-left | 将填充设置为元素的左侧 |
padding-right | 将填充设置为元素的右侧 |
padding-top | 将填充设置为元素的顶部 |
打印属性(Print)
| 属性 | 描述 |
|---|---|
page-break-after | 在元素之后插入分页符 |
page-break-before | 在元素之前插入分页符 |
page-break-inside | 在元素内插入分页符 |
表属性(Table)
| 属性 | 描述 |
|---|---|
border-collapse | 指定是连接还是分隔表格单元格边界 |
border-spacing | 设置相邻表格单元格的边界之间的间距 |
caption-side | 指定表格标题的位置 |
empty-cells | 显示或隐藏空表单元格的边框和背景 |
table-layout | 指定表布局算法 |
文字属性(Text)
| 属性 | 描述 |
|---|---|
direction | 定义文本方向/书写方向 |
tab-size | 指定制表符的长度 |
text-align | 设置内联内容的水平对齐方式 |
text-align-last | 指定当text-align时如何对齐块的最后一行或强制换行符之前的行justify |
text-decoration | 指定添加到文本的装饰 |
text-decoration-color | 指定的颜色 |
text-decoration-line | 指定将哪种线条装饰添加到元素 |
text-decoration-style | 指定text-decoration-line属性指定的线条样式 |
text-indent | 缩进文本的第一行 |
text-justify | 指定当text-align属性设置为时要使用的对正方法justify |
text-overflow | 指定当文本内容溢出块容器时将如何显示 |
text-shadow | 将一个或多个阴影应用于元素的文本内容 |
text-transform | 转换文本的大小写 |
line-height | 设置文本行之间的高度 |
vertical-align | 设置元素相对于当前文本基线的垂直位置 |
letter-spacing | 设置字母之间的额外间距 |
word-spacing | 设置单词之间的间距 |
white-space | 指定如何处理元素内的空白 |
word-break | 指定如何在单词内换行 |
word-wrap | 指定在内容超出其容器边界时是否中断单词 |
转换属性(Transform)
| 属性 | 描述 |
|---|---|
backface-visibility | 指定当面对用户时，转换后的元素的“背面”是否可见 |
perspective | 定义从中查看对象的所有子元素的透视图 |
perspective-origin | 定义透视图属性的原点（3D空间的消失点） |
transform | 将2D或3D变换应用于元素 |
transform-origin | 定义元素的变换原点 |
transform-style | 指定如何在3D空间中渲染嵌套元素 |
过渡属性(Transition)
| 属性 | 描述 |
|---|---|
transition | 定义元素的两种状态之间的过渡 |
transition-delay | 指定过渡效果何时开始 |
transition-duration | 指定过渡效果要花费的秒数或毫秒数 |
transition-property | 指定应将过渡效果应用到的CSS属性的名称 |
transition-timing-function | 指定过渡效果的速度曲线 |
视觉格式属性
| 属性 | 描述 |
|---|---|
display | 指定元素在屏幕上的显示方式 |
position | 指定如何定位元素 |
top | 指定所定位元素的上边缘的位置 |
right | 指定所定位元素的右边缘的位置 |
bottom | 指定所定位元素底边的位置 |
left | 指定定位元素左边缘的位置 |
float | 指定一个框是否应该浮动 |
clear | 指定相对于浮动元素的元素位置 |
z-index | 指定定位元素的分层或堆叠顺序 |
overflow | 指定对溢出元素框的内容的处理 |
overflow-x | 指定当内容超出元素内容区域的宽度时如何管理内容 |
overflow-y | 指定当内容超出元素内容区域的高度时如何管理内容 |
resize | 指定元素是否可由用户调整大小 |
clip | 定义裁剪区域 |
visibility | 指定一个元素是否可见 |
cursor | 指定游标的类型 |
box-shadow | 将一个或多个阴影应用于元素的框 |
box-sizing | 更改默认的CSS框模型 |