字体属性
属性 | 说明 | 示例 | 备注 |
|---|
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（固定列宽，更快渲染）
|
