文本样式
文本样式控制字体的外观：字体族、大小、粗细、行高、对齐等。
核心文本属性
font-family：字体族，多个值逗号分隔作为备选；font-size：字号，常用 px、em、rem；font-weight：字重，normal（400）/ bold（700）；line-height：行高，建议 1.5-1.8 提升阅读体验；text-align：对齐，left/center/right/justify；text-decoration：下划线、删除线；letter-spacing：字间距。
rem 单位相对于根元素字号（默认 16px），1rem = 16px，用 rem 设置字号便于整体缩放。
代码示例
<style>
body {
font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
font-size: 16px;
line-height: 1.7;
}
h1 {
font-size: 2rem; /* 32px */
font-weight: 700;
text-align: center;
letter-spacing: 2px;
}
p { text-indent: 2em; }
a { text-decoration: none; color: #3b5bdb; }
a:hover { text-decoration: underline; }
</style>
<h1>文本样式示例</h1>
<p>这是一段设置了行高和首行缩进的正文，阅读更舒适。</p>
<p><a href="#">这是一个链接</a></p>📚 CSS 属性速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
| 写法 / 语法 | 作用 |
|---|---|
color: #333; | 文字颜色 |
background: #fff; | 背景色 / 背景图 |
font-size: 16px; | 字号 |
font-family: Arial; | 字体 |
font-weight: bold; | 字重（加粗） |
margin: 10px; | 外边距（上右下左） |
padding: 10px; | 内边距 |
border: 1px solid #ccc; | 边框：粗细 样式 颜色 |
border-radius: 8px; | 圆角 |
width: 100%; | 宽度 |
height: 200px; | 高度 |
display: flex; | 弹性布局（现代布局主力） |
display: none; | 隐藏元素 |
position: relative / absolute / fixed; | 定位方式 |
top / left / right / bottom | 定位偏移 |
text-align: center; | 文字水平对齐 |
line-height: 1.6; | 行高 |
overflow: hidden; | 内容溢出处理 |
box-shadow: 0 2px 8px rgba(0,0,0,.1); | 阴影 |
transition: all .3s; | 过渡动画 |
cursor: pointer; | 鼠标手型 |
z-index: 10; | 层叠顺序 |
max-width: 1200px; margin: 0 auto; | 容器居中（经典写法） |
@media (max-width: 768px) {} | 响应式断点 |
:hover | 鼠标悬停状态 |