css属性使用手册

字体属性

属性	说明	示例	备注
font-family	设置字体类型	font-family: Arial, sans-serif;	建议提供备用字体
font-size	设置字体大小	font-size: 16px;最小12px	常用单位：px, em, rem, %
font-weight	设置字体粗细	font-weight: bold;	常用值：normal, bold, 400, 700
font-style	设置字体样式	font-style: italic;	normal（正常）、italic（斜体）
font-variant	设置小型大写字母	font-variant: small-caps;	将小写字母显示为小型大写
line-height	设置行高（行间距）	line-height: 1.5;	无单位数字或 px/em 等
font	​​字体简写属性​​（复合属性）	font: italic bold 16px Arial;	有顺序要求，见下方

---

font------ ​​字体简写属性（复合属性）​​

可以将多个字体相关的属性合并为一个声明，​​但必须按照正确的顺序书写​​。

​​语法顺序（重要！）：​​

font: font-style font-variant font-weight font-size/line-height font-family;

⚠️ font-size和 font-family是​​必填项​ ​，且 font-family必须放在最后！

---

背景属性

属性	说明	示例
background-color	设置元素的背景颜色	background-color: #fff;
background-image	设置背景图片	background-image: url("image.jpg");
background-repeat	设置背景图片是否及如何重复	repeat, no-repeat, repeat-x, repeat-y
background-position	设置背景图片的位置	center, top left, 50% 50%, x y
background-size	设置背景图片的尺寸	cover, contain, 100px 200px, 50%
background-attachment	设置背景图片是否固定（滚动时是否滚动）	scroll（默认）, fixed
background	​​背景复合属性（简写）​​	background: #fff url(img.png) no-repeat center center / cover;

✅ 推荐使用 ​​background简写属性​​，可以一次性设置多个背景相关样式，代码更简洁。

文本属性

属性	说明	示例
color	设置文本颜色	color: #333;
text-align	设置文本的水平对齐方式	left, center, right, justify
text-decoration	设置文本的装饰线（如下划线）	none, underline, line-through, overline
text-transform	控制文本的大小写	none, uppercase, lowercase, capitalize
text-indent	设置首行文本缩进	2em
letter-spacing	设置字符间距	1px, 0.5em
word-spacing	设置单词间距	2px
line-height	设置行高（行间距）	1.5, 24px
white-space	控制空白符与换行的处理方式	normal, nowrap, pre
text-shadow	设置文本阴影	2px 2px 4px gray
direction	设置文本方向	ltr（默认）, rtl
text-overflow	设置文本溢出时的显示方式	ellipsis（配合 overflow和 white-space）

---

表格属性：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

对应的标签说明：

标签	说明
<table>	表格整体容器
<tr>	表格的一行（table row）
<td>	表格的一个单元格（table data / 普通单元格）
<th>	表头单元格（table header / 通常加粗居中）
<thead>	表格头部（语义化，可选）
<tbody>	表格主体（语义化，可选）
<tfoot>	表格底部（语义化，可选）

css常用表格属性：

属性	说明	示例/常用值
border	设置表格或单元格的边框	border: 1px solid #ccc;
border-collapse	设置边框是否合并（关键！）	collapse（合并边框）、separate（分开）
border-spacing	单元格之间的间距（仅当 border-collapse: separate时生效）	border-spacing: 10px;
width/ height	表格的宽度与高度	width: 100%;
text-align	单元格内容的水平对齐	left, center, right
vertical-align	单元格内容的垂直对齐	top, middle, bottom
caption-side	表格标题（<caption>）的位置	top（默认）、bottom
empty-cells	是否显示空单元格的边框和背景	show, hide
table-layout	表格布局算法	auto（默认，根据内容调整）、fixed（固定列宽，更快渲染）