这段文字超过两行：CSS 课堂演示项目是网站开发课程的配套教学资源，覆盖语法、选择器、盒模型、布局与动效九个章节，全部真实渲染可复制代码，作为课堂演示与课后练习使用。
-webkit-line-clamp: 2 → 第2行末尾出「…」
5.1font-family：字体栈，一个不顶用还有备胎
从左往右逐个尝试，全都没有才落到最后的通用族（sans-serif 等）。
无衬线栈：PingFang SC → 微软雅黑 → sans-serif（本站正文用的）
衬线栈：Georgia → 宋体 → serif（报纸、文艺风）
等宽栈：Courier New → monospace（代码框专用）
/* 带空格的字体名要加引号；
每个备选后必写一个通用族兜底 */
.f1 { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.f2 { font-family: Georgia, "STSong", "SimSun", serif; }
.f3 { font-family: "Courier New", monospace; }
/* 通用族只有 5 个：
serif / sans-serif / monospace /
cursive / fantasy */Windows 没有 PingFang，Mac 没有雅黑——所以必须写栈，让两系统各自命中自己的字体。
5.2font-size / weight / style 三件套
字号推荐 rem；字重 100-900；斜体 italic。别用 b/i 标签硬凑。
font-size: .85rem · 小注释
font-size: 1rem · 正文基准
1.4rem · font-weight: 600 小标题
1.8rem · 800 · italic 大标题
p { font-size: 1rem; } /* 16px */
h3 { font-size: 1.4rem; font-weight: 600; }
h1 { font-size: 1.8rem; font-weight: 800;
font-style: italic; }
/* 字重常用档位：
400 = normal，700 = bold
中文字体大多只有 400/700 两档，
其余数字会被就近合并 */font-weight 报 900 却没变化？多半是字体文件本身没有 900 字重，浏览器就近取了 700。
5.3text-align 四种对齐
left / center / right / justify——两端对齐在中文长段落里最常见。
text-align: left —— 默认，从左起排
text-align: center —— 居中，标题常用
text-align: right —— 右对齐，落款、日期
text-align: justify —— 两端对齐：把这一行文字拉伸到左右边界都对齐，报纸排版的标准做法，中文多行正文推荐。
.a-l { text-align: left; }
.a-c { text-align: center; }
.a-r { text-align: right; }
.a-j { text-align: justify; }
/* 注意：text-align 管「行内内容的
对齐」，不管盒子自己——
盒子的居中是第 8 章的事 */常见误区：给 块级盒子加 text-align:center 想让它居中——结果只是里面的字居中了。盒子居中用 margin: auto。
5.4line-height：行高直接决定阅读体验
同样的段落，行高 1.1 和 1.8 的观感天差地别。中文正文推荐 1.7-1.8。
line-height: 1 —— 行与行挤在一起，密不透风，读两句就想关页面。
line-height: 1.15 —— 稍好一点，但还是偏挤，适合 UI 按钮，不适合正文。
line-height: 1.8 —— 行间留出呼吸感，中文正文的标准行高，阅读舒适度最好。
/* 无单位写法 = 字号的倍数（推荐） */
.lh1 { line-height: 1; }
.lh15 { line-height: 1.15; }
.lh18 { line-height: 1.8; }
/* 无单位会随继承放大，
1.5 这种写法子元素按
「自己的字号 × 1.5」算 */单行文本垂直居中的土办法：让 height 与 line-height 相等，按钮文字居中就是这么干的。
5.5text-decoration 与 text-transform
下划线、删除线、顶线；英文大小写转换。链接去下划线是必修课。
text-decoration: underline（陶土红下划线）
text-decoration: line-through（划掉旧价格 ¥399）
text-decoration: overline（顶线，少用）
text-transform: uppercase —— hello css
capitalize —— hello css world
.d-u { text-decoration: underline;
text-decoration-color: #B04A2C; }
.d-t { text-decoration: line-through; }
.d-none a { text-decoration: none; }
.tt-up { text-transform: uppercase; } /* 全大写 */
.tt-cap { text-transform: capitalize; } /* 首字母大写 */
/* uppercase 改的是「显示」，
HTML 源码里的原文不变 */删线 + 弱化色 = 电商改价标配；去链接下划线时记得保住可点击感（换色或加边线）。
5.6text-shadow 与 letter-spacing
文字阴影三要素：x 偏移 y 偏移 模糊半径；字距拉大是标题排版的高级感来源。
柔和阴影（推荐 · 微微浮起）
硬阴影（复古贴纸感 · 少用）
发光效果（深底才好看）
宽 字 距 · 逐 渐 高 级
正常字距的一句话做对比。
.soft { text-shadow: 0 1px 3px rgba(43,37,32,.28); }
.hard { text-shadow: 3px 3px 1px rgba(176,74,44,.85); }
.glow { text-shadow: 0 0 10px rgba(63,110,106,.65); }
/* 字距：标题拉大、正文归零 */
.wide { letter-spacing: .4em; }
.norm { letter-spacing: 0; }
/* 中文标题常用组合：
letter-spacing + font-weight:600 */阴影偏移量为 (0,1px) 小模糊 = 自然的「浮起感」；(3,3px) 硬阴影容易显脏，投影尽量小而淡。
5.7多行文字截断（-webkit-line-clamp）
新闻列表「超出两行显示省略号」，纯 CSS 三行搞定。
这段没加截断样式：CSS 课堂演示项目是网站开发课程的配套教学资源，覆盖语法、选择器、盒模型、布局与动效九个章节，全部真实渲染可复制代码。
对比：自然换行，不截断
.multi {
display: -webkit-box;
-webkit-line-clamp: 2; /* 最多两行 */
-webkit-box-orient: vertical;
overflow: hidden; /* 必须配合 */
}
/* 单行省略号是另一套：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */四个属性缺一不可，漏了 overflow:hidden 就不裁——新闻卡片、商品标题的最常用套路。