整理所有CSS属性以及对应的功能说明

风之吻 网站开发 428

整理所有CSS属性以及对应的功能说明-第1张图片-风享汇

  CSS(层叠样式表)具有丰富的属性,以下是对一些主要属性的功能说明。


A

accent-color指定用户界面控件的主题色
align-content指定当项目未使用所有可用空间时,灵活容器内各行之间的对齐方式
align-items指定灵活容器内项的对齐方式
align-self指定灵活容器内选定项的对齐方式
all重置所有属性(Unicode-bidi 和方向除外)
animation所有 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

backdrop-filter定义元素后面区域的图形效果
backface-visibility定义面向用户时元素的背面是否应可见
background所有background -* 属性的速记属性
background-attachment设置背景图像是随页面的其余部分一起滚动还是固定
background-blend-mode指定每个背景图层(颜色/图像)的混合模式
background-clip定义背景(颜色或图像)在元素内应延伸多远
background-color指定元素的背景色
background-image为元素指定一个或多个背景图像
background-origin指定背景图像的原点位置
background-position指定背景图像的位置
background-position-x指定背景图像在 x 轴上的位置
background-position-y指定背景图像在 y 轴上的位置
background-repeat设置是否/如何重复背景图像
background-size指定背景图像的大小
block-size指定元素在块方向上的大小
borderborder-width, border-style, border-color的简写属性
border-block边框块宽度、边框块样式和边框块颜色的简写属性
border-block-color设置块方向上开始和结束处边框的颜色
border-block-end-color设置块方向末端边框的颜色
border-block-end-style设置块方向末端边框的样式
border-block-end-width设置块方向末端边框的宽度
border-block-start-color在块方向上设置开头边框的颜色
border-block-start-style在块方向的开头设置边框的样式
border-block-start-width设置块方向上开头边框的宽度
border-block-style设置块方向上开始和结束处边框的样式
border-block-width设置块方向上开始和结束处边框的宽度
border-bottom边框底部宽度、底部边框样式和底部边框颜色的简写属性
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-outset指定边框图像区域超出边框框的量
border-image-repeat指定边框图像是应重复、圆角还是拉伸
border-image-slice指定如何对边框图像进行切片
border-image-source指定要用作边框的图像的路径
border-image-width指定边框图像的宽度
border-inlineborder-inline-width, border-inline-style, border-inline-color的简写属性
border-inline-color设置沿内联方向开始和结束的边框颜色
border-inline-end-color在内联方向上设置末端边框的颜色
border-inline-end-style在内联方向上设置边框末尾的样式
border-inline-end-width设置边框末端沿内联方向的宽度
border-inline-start-color在嵌入方向上设置开头边框的颜色
border-inline-start-style在嵌入方向上设置开头边框的样式
border-inline-start-width设置开头沿内联方向的边框宽度
border-inline-style设置沿内联方向开始和结束的边框样式
border-inline-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-color设置上边框的颜色
border-top-left-radius定义左上角边框的半径
border-top-right-radius定义右上角边框的半径
border-top-style设置上边框的样式
border-top-width设置上边框的宽度
border-width设置四个边框的宽度
bottom设置元素的位置,从其父元素的底部开始
box-decoration-break设置元素的背景和边框在分页符处的行为,或者对于内联元素,设置换行符处的背景和边框的行为。
box-reflect框反射属性用于创建元素的反射。
box-shadow将一个或多个阴影附加到元素
box-sizing定义如何计算元素的宽度和高度:它们是否应包括填充和边框
break-after指定是否应在指定元素之后出现分页符、列分隔符或区域分隔符
break-before指定是否应在指定元素之前出现分页符、列分隔符或区域分隔符
break-inside指定是否应在指定元素内出现分页符、列分隔符或区域分隔符

C

caption-side指定表格标题的位置
caret-color指定输入、文本区域或任何可编辑元素中光标(插入符号)的颜色
@charset指定样式表中使用的字符编码
clear指定浮动元素旁边的元素应执行的操作
clip剪切绝对定位的元素
color设置文本的颜色
column-count指定元素应划分为的列数
column-fill指定如何填充列,无论是否平衡
column-gap指定列之间的间距
column-rule所有column-rule-* 属性的简写属性
column-rule-color指定列间规则的颜色
column-rule-style指定列间规则的样式
column-rule-width指定列之间的规则宽度
column-span指定元素应跨越的列数
column-width指定列宽
columnscolumn-width和column-count的速记属性
content与 :before 和 :after 伪元素一起使用,以插入生成的内容
counter-increment增加或减少一个或多个 CSS 计数器的值
counter-reset创建或重置一个或多个 CSS 计数器
cursor指定指向元素时要显示的鼠标光标

D

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

E

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

F

filter在元素显示之前定义元素上的效果(例如模糊或颜色偏移)
flex弹性增长、弹性收缩和弹性基础属性的简写属性
flex-basis指定弹性项的初始长度
flex-direction指定灵活项目的方向
flex-flow挠flex-direction和flex-wrap属性的简写属性
flex-grow指定项目相对于其余项目的增长量
flex-shrink指定项目相对于其余项目的收缩方式
flex-wrap指定弹性项目是否应换行
float指定元素是否应向左、向右浮动或根本不浮动
fontfont-style, font-variant, font-weight, font-size/line-height, font-family属性的速记属性
@font-face允许网站下载和使用“网页安全”字体以外的字体的规则
font-family指定文本的字体系列
font-feature-settings允许控制 OpenType 字体中的高级排版功能
@font-feature-values允许作者在 OpenType 中以不同的方式激活功能的字体-变体-替代中使用通用名称
font-kerning控制字距调整信息的使用(字母间距)
font-language-override控制字体中特定于语言的字形的使用
font-size指定文本的字体大小
font-size-adjust在发生字体回退时保留文本的可读性
font-stretch从字体系列中选择普通、压缩或扩展的字体
font-style指定文本的字体样式
font-synthesis浏览器可以合成哪些缺少的字体(粗体或斜体)的控件
font-variant指定文本是否应以小型大写字体显示
font-variant-alternates控制与@font特征值中定义的备用名称关联的备用字形的使用
font-variant-caps控制大写字母的替代字形的使用
font-variant-east-asian控制东亚文字(例如日语和中文)的替代字形的使用
font-variant-ligatures控制在所应用的元素的文本内容中使用哪些连字和上下文形式
font-variant-numeric控制数字、分数和序号标记的备用字形的使用
font-variant-position控制相对于字体基线定位为上标或下标的较小大小的替代字形的使用
font-weight指定字体的粗细

G

gap行间距和列间距属性的简写属性
gridgrid-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-columngrid-column-start, grid-column-end属性的简写属性
grid-column-end指定网格项的结束位置
grid-column-gap指定列间间距的大小
grid-column-start指定网格项的开始位置
grid-gap网格行间距和网格列间隙属性的简写属性
grid-row网格行开始和网格行结束属性的简写属性
grid-row-end指定网格项的结束位置
grid-row-gap指定行间距的大小
grid-row-start指定网格项的开始位置
grid-templategrid-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允许您将一个样式表导入到另一个样式表中
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设置行高
line-style在一个声明中设置列表的所有属性
line-style-image将图像指定为列表项标记
line-style-position指定列表项标记(项目符号点)的位置
line-style-type指定列表项标记的类型

M

margin在一个声明中设置所有边距属性
margin-block指定块方向上的边距
margin-block-end指定块方向末端的边距
margin-block-start指定块方向上起始处的边距
margin-bottom设置元素的下边距
margin-inline指定内联方向的边距
margin-inline-end指定内联方向末尾的边距
margin-inline-start指定内联方向开头的边距
margin-left设置元素的左边距
margin-right设置元素的右边距
margin-top设置元素的上边距
mask通过遮罩或剪切特定位置的图像来隐藏元素的某些部分
mask-clip指定遮罩区域
mask-composite表示在当前遮罩层及其下方的遮罩层上使用的合成操作
mask-image指定要用作元素遮罩层的图像
mask-mode指定是将蒙版层图像视为亮度蒙版还是 Alpha 蒙版
mask-origin指定遮罩层图像的原点位置(遮罩位置区域)
mask-position设置蒙版层图像的起始位置(相对于蒙版位置区域)
mask-repeat指定如何重复遮罩层图像
mask-size指定遮罩层图像的大小
mask-type指定是将 SVG <蒙版> 元素视为亮度蒙版还是 Alpha 蒙版
max-height设置元素的最大高度
max-width设置元素的最大宽度
@media为不同的媒体类型/设备/大小设置样式规则
max-block-size设置元素在块方向上的最大大小
max-inline-size设置元素在内联方向上的最大大小
min-block-size设置元素在块方向上的最小大小
min-inline-size在内联方向上设置元素的最小大小
min-height设置元素的最小高度
min-width设置元素的最小宽度
min-blend-mode指定元素的内容应如何与其直接父背景混合

O

object-fit指定替换元素的内容应如何适应由其使用的高度和宽度建立的框
object-position指定被替换元素在其框内的对齐方式
offset是一种速记,指定如何沿路径对元素进行动画处理
offset-anchor指定元素上的一个点,该点固定到沿其进行动画处理的路径
offset-distance指定沿放置动画元素的路径的位置
offset-path指定元素沿其进行动画处理的路径
offset-rotate指定沿路径对元素进行动画处理时的元素旋转
opacity设置元素的不透明度级别
order设置灵活项相对于其余项的顺序
orphans设置必须在页面或列底部保留的最小行数
outlineoutline-width, outline-style, outline-color属性的简写属性
outline-color设置轮廓的颜色
outline-offset偏移轮廓,并将其绘制到超出边框边缘
outline-style设置轮廓的样式
outline-width设置轮廓的宽度
overflow指定当内容溢出元素的框时发生的情况
overflow-anchor指定在上面加载新内容时,是否应向下推送可滚动附件中可视区域中的内容
overflow-wrap指定浏览器是否可以在长单词溢出容器时换行
overflow-x指定是否剪裁内容的左/右边缘(如果内容溢出元素的内容区域)
overflow-y指定如果内容溢出元素的内容区域,是否剪裁内容的上/下边缘
overscroll-behavior指定是在 x 和 y 方向上提供滚动链接还是过度滚动
overscroll-behavior-block指定在块方向上是滚动链接还是过度滚动
overscroll-behavior-inline指定是具有内联方向的滚动链接还是过度滚动提示
overscroll-behavior-x指定是在 x 方向上滚动链接还是过度滚动提示
overscroll-behavior-y指定在 y 方向上是滚动链接还是过度滚动提示

P

padding所有填充 * 属性的速记属性
padding-block指定块方向上的填充
padding-block-end指定块方向末尾的填充
padding-block-start指定块方向上开头的填充
padding-bottom设置元素的底部填充
padding-inline指定内联方向上的填充
padding-inline-end指定内联方向末尾的填充
padding-inline-start指定内联方向开头的填充
padding-left设置元素的左边距
padding-right设置元素的右边距
padding-top设置元素的顶部填充
page-break-after设置元素后的分页行为
page-break-before设置元素前的分页符行为
page-break-inside设置元素内的分页行为
paint-order设置 SVG 元素或文本的绘制顺序。
perspective为 3D 定位的元素提供一些视角
perspective-origin定义用户查看 3D 定位元素的位置
place-content指定弹性框和网格布局的对齐内容和两端对齐内容属性值
place-items指定网格布局的对齐项和两端对齐项属性值
place-self指定网格布局的对齐和对齐自身属性值
pointer-events定义元素是否对指针事件做出反应
position指定用于元素的定位方法的类型(静态、相对、绝对或固定)

Q

quotes设置嵌入引号的引号类型

R

resize定义用户是否(以及如何)调整元素大小
right指定定位元素的正确位置
rotate指定元素的旋转
row-gap指定网格行之间的间距

S

scale通过放大或缩小来指定元素的大小
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-left指定左侧对齐位置与容器之间的边距
scroll-margin-right指定右侧对齐位置与容器之间的边距
scroll-margin-top指定顶部对齐位置与容器之间的边距
scroll-padding指定从容器到子元素上的对齐位置的距离
scroll-padding-block指定从容器到子元素上的对齐位置的块方向距离
scroll-padding-block-end指定从容器末端到子元素上的捕捉位置的块方向距离
scroll-padding-block-start指定从容器起点到子元素上的捕捉位置的块方向距离
scroll-padding-bottom指定从容器底部到子元素上的对齐位置的距离
scroll-padding-inline指定从容器到子元素上的对齐位置的内联方向距离
scroll-padding-inline-end指定从容器末端到子元素上的对齐位置的内联方向距离
scroll-padding-inline-start指定从容器起点到子元素上的对齐位置的内联方向距离
scroll-padding-left指定从容器左侧到子元素上的对齐位置的距离
scroll-padding-right指定从容器右侧到子元素上的对齐位置的距离
scroll-padding-top指定从容器顶部到子元素上的对齐位置的距离
scroll-snap-align指定用户停止滚动时元素的位置
scroll-snap-stop指定在触控板或触摸屏上快速轻扫后的滚动行为
scroll-snap-type指定滚动时对齐行为应如何
scrollbar-color指定元素滚动条的颜色

T

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

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

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~