CSS（层叠样式表）
CSS（层叠样式表）包含了大量的属性，用于定义HTML元素的样式。由于CSS属性非常多，这里将列出一些最常用的属性，并简要介绍它们的作用。请注意，这不是一个完整的列表，因为CSS规范不断更新，新的属性和功能会不断被添加。
文本和字体样式
color: 设置文本颜色。
font-family: 设置字体。
font-size: 设置字体大小。
font-weight: 设置字体粗细。
font-style: 设置字体样式（如斜体）。
text-align: 设置文本对齐方式。
text-decoration: 设置文本装饰（如下划线、删除线）。
line-height: 设置行高。
letter-spacing: 设置字符间距。
word-spacing: 设置单词间距。
text-transform: 控制文本的大小写（如大写、小写）。
text-indent: 设置首行缩进。
text-shadow: 添加文本阴影效果。
盒模型
width 和 height: 设置元素的宽度和高度。
margin: 设置元素的外边距。
padding: 设置元素的内边距。
border: 设置元素的边框。
box-sizing: 设置元素的盒模型计算方式（content-box 或 border-box）。
背景和边框
background-color: 设置元素的背景颜色。
background-image: 设置元素的背景图片。
background-repeat: 控制背景图片是否重复。
background-position: 设置背景图片的位置。
background-size: 设置背景图片的大小。
background-attachment: 控制背景图片是否随滚动条滚动。
border-color: 设置边框颜色。
border-width: 设置边框宽度。
border-style: 设置边框样式（如实线、虚线）。
border-radius: 设置边框圆角。
布局
display: 设置元素的显示类型（如block, inline, flex, grid）。
position: 设置元素的定位方式（如static, relative, absolute, fixed, sticky）。
top, right, bottom, left: 设置元素的位置。
float: 设置元素浮动。
clear: 清除浮动。
overflow: 设置元素溢出内容的处理方式（如visible, hidden, scroll, auto）。
z-index: 设置元素的堆叠顺序。
列表和表格
list-style-type: 设置列表项标记的样式。
list-style-image: 使用图片作为列表项标记。
list-style-position: 设置列表项标记的位置。
border-collapse: 设置表格边框是否合并为单一边框。
border-spacing: 设置相邻单元格边框之间的距离。
动画和过渡
transition: 设置元素样式变化的过渡效果。
animation: 设置动画效果。
transform: 用于元素的2D或3D转换。
其他常用属性
opacity: 设置元素的透明度。
cursor: 设置鼠标悬停在元素上时的光标样式。
pointer-events: 控制元素是否可以成为鼠标事件的目标。
box-shadow: 添加盒子阴影效果。
text-shadow: 添加文本阴影效果。
white-space: 控制元素内的空白符处理方式。
vertical-align: 设置元素的垂直对齐方式。
visibility: 设置元素是否可见。
文本和字体样式
css
p {
color: #333; /* 设置文本颜色为深灰色 */
font-family: 'Arial', sans-serif; /* 设置字体为Arial */
font-size: 16px; /* 设置字体大小为16像素 */
font-weight: bold; /* 设置字体加粗 */
font-style: italic; /* 设置字体为斜体 */
text-align: center; /* 设置文本居中对齐 */
text-decoration: underline; /* 设置文本下划线 */
line-height: 1.5; /* 设置行高为1.5 */
letter-spacing: 2px; /* 设置字符间距为2像素 */
word-spacing: 4px; /* 设置单词间距为4像素 */
text-transform: uppercase; /* 将文本转换为大写 */
text-indent: 50px; /* 设置首行缩进50像素 */
text-shadow: 2px 2px 2px #000; /* 设置文本阴影效果 */
}
盒模型
css
.box {
width: 200px; /* 设置宽度为200像素 */
height: 100px; /* 设置高度为100像素 */
margin: 10px; /* 设置外边距为10像素 */
padding: 20px; /* 设置内边距为20像素 */
border: 1px solid #000; /* 设置边框为1像素实线黑色 */
box-sizing: border-box; /* 设置盒模型为border-box */
}
背景和边框
css
.box {
background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
background-image: url('background.png'); /* 设置背景图片 */
background-repeat: no-repeat; /* 设置背景图片不重复 */
background-position: center; /* 设置背景图片居中 */
background-size: cover; /* 设置背景图片覆盖整个元素 */
background-attachment: fixed; /* 设置背景图片固定 */
border-color: #000; /* 设置边框颜色为黑色 */
border-width: 2px; /* 设置边框宽度为2像素 */
border-style: dashed; /* 设置边框样式为虚线 */
border-radius: 10px; /* 设置边框圆角为10像素 */
}
布局
css
.container {
display: flex; /* 设置容器为弹性布局 */
position: relative; /* 设置定位方式为相对定位 */
top: 50px; /* 设置元素顶部位置为50像素 */
left: 20px; /* 设置元素左侧位置为20像素 */
float: left; /* 设置元素浮动到左侧 */
clear: both; /* 清除两侧浮动 */
overflow: auto; /* 设置溢出内容自动显示滚动条 */
z-index: 1; /* 设置堆叠顺序为1 */
}
列表和表格
css
ul {
list-style-type: square; /* 设置列表项标记为方块 */
list-style-image: url('marker.png'); /* 设置列表项标记为图片 */
list-style-position: inside; /* 设置列表项标记在内容内部 */
}
table {
border-collapse: collapse; /* 设置表格边框合并为单一边框 */
border-spacing: 0; /* 设置相邻单元格边框之间的距离为0 */
}
动画和过渡
css
.box {
transition: background-color 0.5s; /* 设置背景颜色变化过渡效果为0.5秒 */
animation: myAnimation 3s infinite; /* 设置动画效果，持续3秒，无限次循环 */
}
@keyframes myAnimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
其他常用属性
css
.box {
opacity: 0.5; /* 设置元素透明度为50% */
cursor: pointer; /* 设置鼠标悬停时为指针样式 */
pointer-events: none; /* 设置元素不可成为鼠标事件的目标 */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 设置盒子阴影效果 */
text-shadow: 2px 2px 2px #000; /* 设置文本阴影效果 */
white-space: nowrap; /* 控制元素内的空白符处理方式，不换行 */
vertical-align: middle; /* 设置元素垂直对齐方式为中间 */
visibility: hidden; /* 设置元素不可见 */
}