主题
CSS 长度单位和颜色设置与CSS 基本选择器（Day5 4/4）
本页对应 Day05_CSS，共 5 段视频，约 42 分钟。
学习目标
- 能使用
letter-spacing与word-spacing分别设置字间距和词间距，并通过示例说明word-spacing对中文通常无效、零值可省略单位、负值会产生紧凑或重叠效果。 - 能使用
text-decoration设置underline、overline、line-through、none，并能去除a、ins、del等元素的默认修饰线。 - 能使用
text-indent设置段落首行缩进，正确使用长度、em或百分比值，并说明该属性只影响首行。 - 能使用
text-align设置left、right、center，并说明它影响元素内文本内容的水平对齐，而不是元素自身位置。 - 能说明
vertical-align不能设置普通块级元素内文本的纵向对齐，并能用它设置行内元素或行内块元素与同行文本按baseline、top、middle、bottom或长度值对齐。 - 能使用
vertical-align的sub、super实现下标和上标效果，并说明在表格td、th中可设置内容纵向对齐，而普通元素不适用。
知识点
字词间距：letter-spacing 与 word-spacing
为什么需要：排版时，字与字、词与词之间默认挨得较近；有时需要拉开或收紧距离。怎么想：先分清“字”和“词”。letter-spacing 管字与字，word-spacing 管词与词。怎么做：给段落加类名后写长度值。示例：
css
.book01 { letter-spacing: 10px; }
.book02 { word-spacing: 30px; }调试时把 letter-spacing 从 10px 改成 0、负值，能看到字距收紧甚至叠在一起；0 可省略单位。word-spacing 对英文按空格判断词，所以中文通常无效果。易错点：letter-spacing 可用像素、em 等长度，百分比规则不必死记，实际用时试；word-spacing 不要误以为能处理中文分词。
文本修饰线：text-decoration
为什么需要：下划线、上划线、删除线是常见文本语义提示。怎么想：把线加在文字上，而不是给元素加边框。怎么做：
css
.item01 { text-decoration: underline; }
.item02 { text-decoration: overline; }
.item03 { text-decoration: line-through; }
a, ins, del { text-decoration: none; }转写稿中通过 span 对比看到下划线、上划线、删除线；线的颜色默认跟文字 color 一致。超链接、ins、del 自带修饰线，可用 text-decoration: none 去掉。易错点：删除线值是 line-through，不是 underline 或 overline；none 对多数元素是默认值，但对自带线的元素很有用。
首行缩进：text-indent
为什么需要：中文段落常需要首行空两格。怎么想：只影响首行，不影响其他行。怎么做：给段落设宽度便于换行，再设 text-indent：
css
p { width: 600px; }
.book01 { text-indent: 2em; }转写稿先设 20px 看到首行右移，又试 -20px 和 50%。百分比参照元素或一行宽度，但不必背规则。易错点：text-indent 只管首行；中文段落最自然的单位常是 em，2em 接近两个字宽。
文本水平对齐：text-align
为什么需要：控制段落内文字靠左、靠右或居中。怎么想：它设置的是元素里的文字内容，不是元素本身。怎么做：
css
p {
width: 600px;
height: 200px;
background: #ccc;
text-align: center;
}值有 left、right、center。调试时给 p 设宽高和背景，能明显看到文字位置变化。易错点：给 p 设 text-align 不会把 p 盒子本身移动；多行文字要有左右活动空间，否则靠右或居中不明显。
vertical-align：不是文本纵向居中
为什么需要：图片、行内块与同行文字常出现高低不齐，需要控制纵向对齐。怎么想：vertical-align 不是给块元素做文字纵向居中；它主要设置行内元素或行内块元素与同行文本如何对齐。怎么做：默认值是 baseline，图片底部默认与文字基线对齐。可改为 top、middle、bottom，也可写长度：
css
img { vertical-align: middle; }转写稿强调：要给图片本身设，不能给父元素设后指望继承。长度表示元素底部与基线的距离，可为负值；百分比参照文字大小，类似 em，用时试即可。它还能配合 font-size 做上下标：
css
span.sub { font-size: 12px; vertical-align: sub; }
span.sup { font-size: 12px; vertical-align: super; }另外，表格单元格 td、th 可用 vertical-align: top/middle/bottom 做内容纵向对齐，其他元素不能这样用。易错点：vertical-align: middle 不会让块内文字纵向居中；sub、super 不要写反；Chrome 等浏览器有最小字号限制，文字小于 12px 常仍按 12px 显示。
作业范围与使用方式
本节笔记只有两项：课堂案例、google 字体设置。转写稿实际讲的是“文本样式”课堂案例：字间距、词间距、文本修饰线、首行缩进、水平对齐、vertical-align。其中“google 字体设置”在转写稿里没有对应讲解，不能凭空补步骤；作业时先保留该任务项，等课堂材料补充。本节笔记未附图片，转写稿提到的示意图不在文本中，因此不虚构图片。下面按转写稿可验证内容整理，代码保留关键写法。
字间距与词间距
为什么需要：排版时有时要让字母更松或更紧，也要控制英文单词之间的距离。
怎么想：字间距管“字和字”，词间距管“词和词”；英文靠空格分词，中文分词复杂，所以 word-spacing 对中文通常无效果。
怎么做：
css
.book01 { letter-spacing: 10px; }
.book02 { word-spacing: 30px; }letter-spacing 可写 px、em，也可为负值；0 可不写单位。word-spacing 也写长度，转写稿演示 30px 后英文单词间距变大，中文无明显变化。
易错点：letter-spacing 负值过大会叠字；转写稿明确说字间距写百分比无效。词间距不要误以为能解决中文分词。
文本修饰线
为什么需要：下划线、上划线、删除线是常见文本强调方式，也要能去掉链接、ins、del 的默认线。
怎么想：统一用 text-decoration，值有 underline、overline、line-through、none。线色默认跟随文字 color。
怎么做：
css
.item01 { text-decoration: underline; }
.item02 { text-decoration: overline; }
.item03 { text-decoration: line-through; }
a, ins, del { text-decoration: none; }转写稿调试时先写三个 span，分别加上下划线、上划线、删除线；再用选择器选中 a、ins、del 去掉默认线。
易错点：删除线值是 line-through，不是 underline 或 overline；none 对大多数元素是默认值，但超链接、ins、del 常自带线，需要显式去掉。
首行缩进
为什么需要：中文段落常需要“首行空两字”，比手动敲空格更稳定。
怎么想：只缩进第一行，用 text-indent；最自然单位是 em，2em 约等于两个汉字宽度。
怎么做：
css
p { width: 600px; }
.book01 { text-indent: 2em; }转写稿先给段落设 600px 宽，让文字换行，再给第二段加 text-indent: 2em，观察只有首行右移。
易错点：它只管首行，不是整段缩进；负值虽能生效但不推荐；百分比可生效但参照规则不必死记，转写稿建议用到时现场试。
文本水平对齐
为什么需要：控制段落内容靠左、靠右或居中。
怎么想：用 text-align，默认 left，还有 right、center。它影响的是元素里的文字内容，不是元素盒子本身。
怎么做：
css
p {
width: 600px;
height: 200px;
background: #ccc;
text-align: center;
}转写稿给 p 设宽高和背景，方便观察区域；改成 right 靠右，改成 center 居中。
易错点：不要以为 text-align 能把 p 盒子移动；多行文字时，前面行可能因占满宽度看不出效果，最后一行更容易观察。手册里还有新标准值，本阶段先掌握这三个。
vertical-align 的三类用途
为什么需要：图片、行内块和同行文字常出现“对不齐”；上下标也需要微调。
怎么想：vertical-align 不是给普通块元素设置“文字纵向居中”的。它主要管行内元素/行内块与同行文本的纵向对齐；对 td、th 是特例，可设单元格内容纵向对齐。
怎么做：
css
img { vertical-align: middle; }
td { vertical-align: bottom; }
.sub { font-size: 12px; vertical-align: sub; }
.sup { font-size: 12px; vertical-align: super; }常见关键字：baseline 基线对齐（默认）、top 顶线、middle 中线、bottom 底线；也可写长度，表示元素底部与基线的距离，负值向下。转写稿用图片演示：默认图片底部贴文字基线，改 middle 后图片中线对齐文本中线，改 bottom 后图片底部对齐文本底线。上下标可用 sub、super 配合较小字号实现，不必只用 sub/sup 标签。
易错点：给 div、p 设 vertical-align: middle 不能让内部文字纵向居中；长度和百分比规则不要死记，转写稿建议现场试。Chrome 等浏览器有最小字号限制，转写稿演示小于 12px 仍按约 12px 显示，所以不要设无意义的超小字号。
课堂画面
代码示例
代码一：字词间距 / 首行缩进 / 文本修饰线 / 水平对齐
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本样式：字词间距、缩进、修饰线、水平对齐</title>
<style>
body { font-size: 16px; }
/* 参照段落：不设样式 */
p { width: 600px; background: #ccc; margin: 10px 0; }
/* 1. 字间距：字与字（字母与字母）之间的距离，值是一个长度 */
.book01 { letter-spacing: 10px; }
.book01b { letter-spacing: -2px; } /* 负值会挤在一起 */
/* 2. 词间距：浏览器靠空格判断“词”，所以只对英文有效 */
.book02 { word-spacing: 30px; }
/* 3. 首行缩进：只缩第一行，2em 正好两个汉字宽，最像中文段落 */
.indent01 { text-indent: 2em; }
/* 4. 文本修饰线 */
.u { text-decoration: underline; } /* 下划线 */
.o { text-decoration: overline; } /* 上划线 */
.lt { text-decoration: line-through; } /* 删除线 */
/* a、ins、del 自带修饰线，用 none 去掉 */
a, ins, del { text-decoration: none; }
/* 5. 水平对齐：只影响元素内部的文字，不改变元素自身位置 */
.box { width: 600px; height: 200px; background: #ccc; }
.al-left { text-align: left; } /* 默认值 */
.al-right { text-align: right; }
.al-center { text-align: center; }
</style>
</head>
<body>
<p>Hello world 这是参照段落，Hello world 这是参照段落，Hello world 这是参照段落。</p>
<p class="book01">Hello world 字间距 10px，Hello world 字间距 10px，Hello world。</p>
<p class="book01b">Hello world 字间距 -2px，负值会叠到一起。</p>
<p class="book02">Hello world 词间距 30px，中文之间没有效果，中文之间没有效果。</p>
<p class="indent01">首行缩进 2em，正好是两个汉字的宽度，最接近中文段落排版。注意只有第一行缩进，第二行、第三行都不会缩进，这是 text-indent 和 padding 最大的区别。</p>
<p>
<span class="u">下划线 underline</span>
<span class="o">上划线 overline</span>
<span class="lt">删除线 line-through</span>
</p>
<p>
<a href="#">超链接（自带下划线已被去掉）</a>
<ins>ins 增加的内容</ins>
<del>del 删除的内容</del>
</p>
<p class="box al-left">left 左对齐（默认）</p>
<p class="box al-right">right 右对齐</p>
<p class="box al-center">center 居中对齐</p>
</body>
</html>要点解释 / 易错点
letter-spacing（字间距）和word-spacing（词间距）的值都是长度：px、em 都可以。letter-spacing写0时可以不写单位，写负值字会重叠。letter-spacing写百分比无效（没有参照物）；word-spacing写百分比同样不用死记规则，用时现场试。word-spacing对中文无效：浏览器只是机械地按“空格”判断英文单词，中文没法分词，所以这个属性基本只对英文页面有意义。text-indent只作用于块级元素的第一行，值可以是长度、负数、百分比（百分比参照元素宽度）。日常排版首选2em，正好两个汉字。text-decoration的删除线是line-through，不是middle-line；去掉修饰线是none，不是no。a、ins、del自带修饰线，用选择器选中它们设置text-decoration: none;即可去掉；多个选择器可以用逗号合并写。text-align只让元素里的文字靠左/右/居中，元素本身的位置不会变；另外多行文字里最后一行的居中效果才明显，左右被挤满的行看不出区别。
代码二：vertical-align 让行内块与同行文字纵向对齐
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>vertical-align：行内块与同行文本的纵向对齐</title>
<style>
.box { font-size: 20px; background: #eee; padding: 10px; margin: 10px 0; }
/* 行内块元素：真实项目里通常就是 img，img 本身就是行内块 */
.pic {
display: inline-block;
width: 100px;
height: 80px;
background: #4a90d9;
}
/* vertical-align 必须写在“行内元素 / 行内块元素”自己身上 */
.v-baseline { vertical-align: baseline; } /* 默认值：基线对齐 */
.v-bottom { vertical-align: bottom; } /* 底线对齐 */
.v-middle { vertical-align: middle; } /* 中线对齐 */
.v-top { vertical-align: top; } /* 顶线对齐 */
.v-length { vertical-align: 10px; } /* 元素底部离基线 10px，往上走 */
.v-negative { vertical-align: -10px; } /* 负值往下走 */
/* 行内元素没有宽高，看不出对齐效果，这里只做对比 */
.tag { background: #900; color: #fff; }
</style>
</head>
<body>
<div class="box">这是一行文字 <span class="tag">我是 span</span> 文字后边还有字</div>
<div class="box">文字 <span class="pic v-baseline"></span> baseline 基线对齐（默认，方块底部贴文字基线）</div>
<div class="box">文字 <span class="pic v-bottom"></span> bottom 底线对齐</div>
<div class="box">文字 <span class="pic v-middle"></span> middle 中线对齐（最常用，图文混排最自然）</div>
<div class="box">文字 <span class="pic v-top"></span> top 顶线对齐</div>
<div class="box">文字 <span class="pic v-length"></span> 长度值 10px，相对基线往上抬</div>
<div class="box">文字 <span class="pic v-negative"></span> 负值 -10px，相对基线往下沉</div>
</body>
</html>要点解释 / 易错点
- 四条参考线：基线 baseline（大写字母和 n、l 的底部）、底线 bottom（g、p、q 的尾巴）、顶线 top、中线 middle。
vertical-align就是让行内块选择自己哪条线去对文字的那条线。 vertical-align不是text-align的纵向版本！给p、div设置它完全不会让里面的文字垂直居中——那是line-height、flex 或表格才能干的事。- 必须用选择器直接选中那个行内块元素（如
img或本例的.pic）来设置；写在父元素上不会继承下去，这是最常见的踩坑点。 - 行内元素（
span、a等）不能设宽高，本身被内容撑开，所以给它们设vertical-align基本看不出效果；真正受益的是行内块元素（img、input、display:inline-block的盒子）。 - 除了关键字，还可以写长度：正值往上、负值往下，参照的是元素底部与基线的距离；写
em和写百分比参照的都是文字大小。
代码三：vertical-align 做上标下标 + 表格单元格纵向对齐
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>vertical-align：上标下标 与 表格单元格纵向对齐</title>
<style>
body { font-size: 20px; }
/* 上标 / 下标：小字号 + vertical-align 关键字，任意元素都能做 */
.sub { font-size: 12px; vertical-align: sub; } /* 下标，注意不带 e */
.sup { font-size: 12px; vertical-align: super; } /* 上标 */
/* 表格：给 table 加 border 只有外框，要给 td 加才有格子线 */
table { width: 600px; height: 400px; border-collapse: collapse; }
td {
border: 1px solid #333;
text-align: center; /* 横向对齐，任何元素都能用 */
}
/* 纵向对齐：只有表格单元格 td / th 才吃得下 */
.c-top { vertical-align: top; }
.c-middle { vertical-align: middle; }
.c-bottom { vertical-align: bottom; }
</style>
</head>
<body>
<div>H<span class="sub">2</span>O —— 用 span 也能做出下标效果</div>
<div>2<span class="sup">10</span> = 1024 —— 用 span 也能做出上标效果</div>
<table>
<tbody>
<tr>
<td class="c-top">top<br>顶部对齐</td>
<td class="c-middle">middle<br>垂直居中</td>
<td class="c-bottom">bottom<br>底部对齐</td>
<td>默认 baseline</td>
<td>高考</td>
</tr>
</tbody>
</table>
</body>
</html>要点解释 / 易错点
sub/super这两个关键字只有 super 带 e，写错就不生效；再配合font-size调小字号，就能用span做出sup、sub元素的效果——CSS 的规则就是任何元素都能改成任何样式。- Chrome 及现在主流浏览器限制字号最小 12px，把
font-size写成 1px、5px 刷新后没变化是正常的，浏览器会按 12px 渲染，所以别指望靠极小字号做效果。 - 表格里
vertical-align只认top、middle、bottom、baseline这几个值，sub、super在这里不生效。 - 这个“纵向对齐”的能力仅限
td、th，给普通p、div设置想让它里面文字垂直居中，是没有任何效果的。 - 用 CSS 给
table加border只会出现一个外框，想让每个单元格都有线，必须把边框加到td上（本例配合border-collapse: collapse合并双线）。
常见错误
给中文段落设
word-spacing毫无变化 现象：加了 30px，中文文字纹丝不动，英文才有反应。 原因：word-spacing靠"空格"识别词边界，中文没有空格，浏览器不做分词。 修法：调字符间距一律用letter-spacing；word-spacing只用于英文排版。letter-spacing: 10%写了没效果 现象：换百分比值刷新后间距不变。 原因：该属性需要长度，百分比无参照物，浏览器直接丢弃该声明。 修法：用px/em，需要负值收紧也用长度；百分比规则各属性不同，用时现测，不要套记。给外层
div写vertical-align想让里面的图片对齐 现象：图片位置一点没变。 原因：vertical-align不继承，且只对行内元素、行内块元素、表格单元格生效。 修法：选择器直接命中img/span/td本身；父容器写了等于白写。想用
text-align: center让盒子本身居中 现象：文字居中了，但整个div还是贴在左边。 原因：text-align只影响元素内部的行内内容，动不了元素自己的盒子。 修法：块级盒子水平居中用margin: 0 auto（需有宽度）；文字居中才用text-align。给
p设vertical-align: middle想让文字在 200px 高的盒子里垂直居中 现象：完全无效，文字仍贴着基线。 原因：该属性不是"元素内文本的纵向对齐"，与text-align不是一对。 修法：单行文本用line-height等于高度；多行或复杂布局用 flex/grid。text-indent设了 20px，结果只有第一行缩进，以为写错了 现象：段落其余行顶格。 原因：属性语义就是"首行"缩进，不是整段缩进。 修法：整段留白用padding-left；首行缩进用text-indent: 2em（两个汉字宽度）。去掉链接下划线时把
text-decoration: none写在父容器上 现象：a的下划线还在。 原因：text-decoration不属于可继承的常规文本属性，且a、ins、del自带默认线。 修法：选择器直接命中a（或a, ins, del并集选择器）再设none。字号设成 8px 想模拟下标，结果没变小 现象：改到 12px 以下数值无效。 原因：浏览器有最小字号限制（Chrome 及现代浏览器为 12px）。 修法：需要更小视觉尺寸时用
transform: scale()，不要指望font-size。
练习
中英混排间距对照：写三个段落，内容中英混排。第一段作参照；第二段加
letter-spacing（分别试 10px、0、-2px、10%）；第三段加word-spacing: 30px。记录每种设置的实际表现，并解释哪个值被浏览器忽略了、为什么。装饰线组合实验：用 3 个
span分别做下划线、上划线、删除线；再加一个链接和一段ins/del文本，用一条并集选择器一次性去掉它们的默认线。最后尝试在一个元素上同时叠加两条线，看是否成立。首行缩进三连：给同一段文字分别设置
text-indent: 20px、-20px、50%，观察差异；再把20px换成2em，说明为什么em才是段落缩进最合适的单位。对齐边界测试：一个 600×200、带背景色的
p，文字分别设left/right/center；然后把文字量加到需要换行，观察多行时"靠右/居中"的视觉感受为何被削弱。再回答：如果想让这个p盒子本身在页面居中，该写什么？vertical-align综合题：一段文字中插入一张图片，用关键字分别让图片与文字基线、中线、顶线、底线对齐；再用数值（0、10px、-10px、1em）微调并观察方向。最后用span+font-size+vertical-align: sub/super手写出 H₂O 和 2¹⁰，并在表格td里试top/middle/bottom，说明哪些元素上这个属性才真正管用。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 字词间距 | 05:24 |
| 2 | 文本修饰线 | 04:55 |
| 3 | 首行缩进 | 02:38 |
| 4 | 文本水平对齐方式 | 03:24 |
| 5 | vertical-align | 25:53 |
小结
- 这一组属性的共同陷阱是"属性作用对象错位"：
text-align管内部行内内容，vertical-align管行内/行内块在行中的位置，都不是管盒子自己。 vertical-align是本次最复杂的属性，三条主线要分清：行内块与同行文本对齐、上下标、表格单元格内容纵向对齐；不继承是排查时的第一检查点。- 凡是关键字值，按规范语义理解而非字面直觉——
top是顶线不是"顶部"，baseline是基线不是"底部"。 - 涉及百分比的长度属性，参照物各不相同，不要统一记忆；写出小案例实测一次比背规则更可靠。
- 浏览器默认样式（
a/ins/del的线、td的垂直居中）会掩盖你的设置效果，调试时先确认"到底是我的样式没生效，还是默认样式本来就这样"。 - 平台限制要记牢：最小字号 12px 是硬性下限，小于它的值等于没写。
- 排查"设了没反应"的固定顺序：该属性对当前
display类型是否生效 → 是否可继承 → 值单位/关键字是否合法 → 是否被默认样式或优先级覆盖。 - 这些属性单看零碎，但在图文混排、表格、导航去下划线等场景里是高频刚需；
vertical-align尤其值得吃透，后面对齐类布局疑难多半靠它兜底。