css常用属性

发布时间 2023-04-20 11:03:40作者: linux星

CSS 常用属性和高级属性的详细参数说明如下:

 

常用属性

字体属性

 

font-family: 字体系列

 

font-size: 字体大小

 

font-weight: 字体粗细

 

font-style: 字体样式

 

line-height: 行高

 

文本属性

 

color: 字体颜色

 

text-align: 文本对齐方式

 

text-decoration: 文本修饰

 

text-transform: 文本转换

 

text-indent: 首行缩进

 

背景属性

 

background-color: 背景颜色

 

background-image: 背景图片

 

background-repeat: 背景重复方式

 

background-position: 背景位置

 

background-size: 背景大小

 

盒子模型属性

 

width: 盒子宽度

 

height: 盒子高度

 

padding: 内边距

 

margin: 外边距

 

border: 边框

 

高级属性

伸缩布局(Flexbox)属性

 

display: 容器和项目的显示方式

 

flex-direction: 容器内项目的排列方向

 

flex-wrap: 容器内项目的换行方式

 

justify-content: 容器内项目的对齐方式

 

align-items: 容器内项目的垂直对齐方式

 

align-self: 单个项目的垂直对齐方式

 

flex: 项目的伸缩比例

 

网格布局(Grid)属性

 

display: 容器和项目的显示方式

 

grid-template-columns: 网格列的大小和数量

 

grid-template-rows: 网格行的大小和数量

 

grid-template-areas: 网格区域的命名

 

grid-gap: 网格行列之间的间隔

 

grid-column-start: 项目开始的列位置

 

grid-column-end: 项目结束的列位置

 

grid-row-start: 项目开始的行位置

 

grid-row-end: 项目结束的行位置

 

grid-column: 项目跨越的列数

 

grid-row: 项目跨越的行数

 

动画属性

 

animation-name: 动画名称

 

animation-duration: 动画持续时间

 

animation-delay: 动画延迟时间

 

animation-timing-function: 动画时间函数

 

animation-iteration-count: 动画重复次数

 

animation-direction: 动画播放方向

 

animation-fill-mode: 动画停留状态

 

过渡属性

 

transition-property: 过渡的属性

 

transition-duration: 过渡的持续时间

 

transition-timing-function: 过渡的时间函数

 

transition-delay: 过渡的延迟时间

 

2D 转换属性

 

transform: 转换方式

 

transform-origin: 转换的基点位置

 

3D 转换属性

 

perspective: 视角距离

 

perspective-origin: 视角的基点位置

 

transform-style: 转换方式

 

backface-visibility: 背面是否可见