CSS属性的分类
和 HTML 的标签类似，CSS 功能的实现是通过属性来完成的。同样 CSS3 有⾮常多的属性，据说（由于这个问题中提到的 CSS 属性是参考的，我统计了下，⽬前⼀共有 274 个了）。如此多的属性，如果不将其分类组织，恐怕是很难记住的，当然，要记住这些属性没有⽐亲⾃动⼿写代码更为有效的了。不过，为了⽅便⽇后查询，还是整理如下：
1. 样式
1.1 背景（9 个属性），背景主要是两种：颜⾊或图⽚。
a) 颜⾊，设置背景颜⾊的属性只有⼀个就是：background-color，属性后⾯的值可以是颜⾊名、RGB 颜⾊值或⼗六进制颜⾊值，如：
css表格样式body {
background-color:yellow;  // 颜⾊名
}
h1 {
background-color:rgb(255,0,255); // RGB 颜⾊值
}
p {
background-color:#00ff00;  // ⼗六进制颜⾊值
}
b) 图⽚，除了设置背景为图⽚这⼀属性外，针对图⽚还有这些属性：设置图⽚的开始位置，是否重复背景图⽚，设置背景图⽚的尺⼨等。属性对应如下：
CSS 图⽚属性描述
background-image设置元素的背景图像
background-position设置背景图像的开始位置
background-repeat设置是否及如何重复背景图像
background-size规定背景图⽚的尺⼨
background-attachment设置背景图像是否固定或者随着页⾯的其余部分滚动
background-clip规定背景的绘制区域
background-origin规定背景图⽚的定位区域
除了分别设置颜⾊或图⽚属性外，background 还可以⼀次性设置所有属性。如：
body {
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
1.2 ⽂本（23 个），针对⽂本我们可以设置⽂本的颜⾊（后⾯会将字体单独当作⼀个分类），对齐⽅式，⾏⾼，装饰⽂本，⽂本间距等属性。对应的属性如下：
CSS ⽂本属性描述
color设置⽂本的颜⾊
direction规定⽂本的⽅向 / 书写⽅向
letter-spacing设置字符间距
line-height设置⾏⾼
text-align规定⽂本的⽔平对齐⽅式
text-decoration规定添加到⽂本的装饰效果
text-indent规定⽂本块⾸⾏的缩进
text-shadow规定添加到⽂本的阴影效果
text-transform控制⽂本的⼤⼩写
unicode-bidi设置⽂本⽅向
white-space规定如何处理元素中的空⽩
word-spacing设置单词间距
hanging-punctuation规定标点字符是否位于线框之外
punctuation-trim规定是否对标点字符进⾏修剪
text-align-last设置如何对齐最后⼀⾏或紧挨着强制换⾏符之前的⾏
text-emphasis向元素的⽂本应⽤重点标记以及重点标记的前景⾊
text-justify规定当 text-align 设置为 "justify" 时所使⽤的对齐⽅法
text-outline规定⽂本的轮廓
text-overflow规定当⽂本溢出包含元素时发⽣的事情
text-shadow向⽂本添加阴影
text-wrap规定⽂本的换⾏规则
word-break规定⾮中⽇韩⽂本的换⾏规则
CSS ⽂本属性描述
word-wrap允许对长的不可分割的单词进⾏分割并换⾏到下⼀⾏
⽐如设置⽂本对齐⽅式为居中：
h1 {text-align:center}
1.3 字体（8个）
CSS 字体属性描述
font在⼀个声明中设置所有字体属性
font-family规定⽂本的字体系列
font-size规定⽂本的字体尺⼨
font-size-adjust为元素规定 aspect 值
font-stretch收缩或拉伸当前的字体系列
font-style规定⽂本的字体样式
font-variant规定是否以⼩型⼤写字母的字体显⽰⽂本
font-weight规定字体的粗细
1.4 链接（4 个）
CSS 链接属性描述
target简写属性，设置target-name、target-new以及target-position属性target-name规定在何处打开链接（链接的⽬标）
target-new规定⽬标链接在新窗⼝还是在已有窗⼝的新标签页中打开target-position规定在何处放置新的⽬标链接
1.5 列表（4个）
CSS 列表属性描述
list-style在⼀个声明中设置所有的列表属性
list-style-image将图象设置为列表项标记
list-style-position设置列表项标记的放置位置
list-style-type设置列表项标记的类型
1.6 表格（25个）
CSS 表格属性描述
border-collapse规定是否合并表格边框
border-spacing规定相邻单元格边框之间的距离
caption-side规定表格标题的位置
empty-cells规定是否显⽰表格中的空单元格上的边框和背景
table-layout设置⽤于表格的布局算法
column-count规定元素应该被分隔的列数
column-fill规定如何填充列
column-gap规定列之间的间隔
column-rule设置所有 column-rule-* 属性的简写属性
column-rule-color规定列之间规则的颜⾊
column-rule-style规定列之间规则的样式
column-rule-width规定列之间规则的宽度
column-span规定元素应该横跨的列数
column-width规定列的宽度
columns规定设置 column-width 和 column-count 的简写属性
box-align规定如何对齐框的⼦元素
box-direction规定框的⼦元素的显⽰⽅向
box-flex规定框的⼦元素是否可伸缩
box-flex-group将可伸缩元素分配到柔性分组
box-lines规定当超出⽗元素框的空间时，是否换⾏显⽰
box-ordinal-group规定框的⼦元素的显⽰次序
box-orient规定框的⼦元素是否应⽔平或垂直排列
CSS 表格属性描述
box-pack规定⽔平框中的⽔平位置或者垂直框中的垂直位置
grid-columns规定⽹格中每个列的宽度
grid-rows规定⽹格中每个列的⾼度
1.7 盒⼦模型（46个），综合起来主要属性有：margin, padding, border, outline 这四种，每⼀种⼜分：上、下、左、右，宽度、以及颜⾊和样式。所以，这些属性的细分属性⼀下就变得很多。
CSS 盒⼦模型属性描述
margin所有外边距属性
margin-bottom设置元素的下外边距
margin-left设置元素的左外边距
margin-right设置元素的右外边距
margin-top设置元素的上外边距
padding设置所有内边距属性
padding-bottom设置元素的下内边距
padding-left设置元素的左内边距
padding-right设置元素的右内边距
padding-top设置元素的上内边距
border设置所有的边框属性
border-bottom设置所有的下边框属性
border-bottom-color设置下边框的颜⾊
border-bottom-style设置下边框的样式
border-bottom-width设置下边框的宽度
border-color设置四条边框的颜⾊
border-left设置所有的左边框属性
border-left-color设置左边框的颜⾊
border-left-style设置左边框的样式
border-left-width设置左边框的宽度
border-right设置所有的右边框属性
border-right-color设置右边框的颜⾊
border-right-style设置右边框的样式
border-right-width设置右边框的宽度
border-style设置四条边框的样式
border-top设置所有的上边框属性
border-top-color设置上边框的颜⾊
border-top-style设置上边框的样式
border-top-width设置上边框的宽度
border-width设置四条边框的宽度
outline设置所有的轮廓属性
outline-color设置轮廓的颜⾊
outline-style设置轮廓的样式
outline-width设置轮廓的宽度
border-bottom-left-radius定义边框左下⾓的形状
border-bottom-right-radius定义边框右下⾓的形状
border-image设置所有 border-image-* 属性
border-image-outset规定边框图像区域超出边框的量
border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
border-image-slice规定图像边框的向内偏移
border-image-source规定⽤作边框的图⽚
border-image-width规定图⽚边框的宽度
border-radius设置所有四个 border-*-radius 属性
border-top-left-radius定义边框左上⾓的形状
border-top-right-radius定义边框右下⾓的形状
box-shadow向⽅框添加⼀个或多个阴影
1.8 定位（14 个）
CSS 定位属性描述
bottom设置定位元素下外边距边界与其包含块下边界之间的偏移
bottom设置定位元素下外边距边界与其包含块下边界之间的偏移
CSS 定位属性描述
clear规定元素的哪⼀侧不允许其他浮动元素
clip剪裁绝对定位元素
cursor规定要显⽰的光标的类型（形状）
display规定元素应该⽣成的框的类型
float规定框是否应该浮动
left设置定位元素左外边距边界与其包含块左边界之间的偏移
overflow规定当内容溢出元素框时发⽣的事情
position规定元素的定位类型
right设置定位元素右外边距边界与其包含块右边界之间的偏移
top设置定位元素的上外边距边界与其包含块上边界之间的偏移
vertical-align设置元素的垂直对齐⽅式
visibility规定元素是否可见
z-index设置元素的堆叠顺序
1.9 动画（30 个）
CSS 动画属性描述
@keyframes规定动画
animation所有动画属性的简写属性，除了 animation-play-state 属性animation-name规定 @keyframes 动画的名称
animation-duration规定动画完成⼀个周期所花费的秒或毫秒
animation-timing-function规定动画的速度曲线
animation-delay规定动画何时开始
animation-iteration-count规定动画被播放的次数
animation-direction规定动画是否在下⼀周期逆向地播放
animation-play-state规定动画是否正在运⾏或暂停
animation-fill-mode规定对象动画时间之外的状态
transform向元素应⽤ 2D 或 3D 转换
transform-origin允许你改变被转换元素的位置
transform-style规定被嵌套元素如何在 3D 空间中显⽰
perspective规定 3D 元素的透视效果
perspective-origin规定 3D 元素的底部位置
backface-visibility定义元素在不⾯对屏幕时是否可见
transition简写属性，⽤于在⼀个属性中设置四个过渡属性
transition-property规定应⽤过渡的 CSS 属性的名称
transition-duration定义过渡效果花费的时间
transition-timing-function规定过渡效果的时间曲线
transition-delay规定过渡效果何时开始
overflow-x如果内容溢出了元素内容区域，是否对内容的左/右边缘进⾏裁剪overflow-y如果内容溢出了元素内容区域，是否对内容的上/下边缘进⾏裁剪overflow-style规定溢出元素的⾸选滚动⽅法
rotation围绕由 rotation-point 属性定义的点对元素进⾏旋转
rotation-point定义距离上左边框边缘的偏移点
marquee-direction设置移动内容的⽅向
marquee-play-count设置内容移动多少次
marquee-speed设置内容滚动得多快
marquee-style设置移动内容的样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。