正在加载...

CSS 文本

你已经设定了盒子尺寸并控制了 overflow。现在来塑造里面的文字。CSS 文本属性负责对齐、下划线、大小写、字距和行高 — 暂时还不改字体族（下一课才讲）。

日常文本工具

📊 常见文本属性

属性 日常作用
text-align 在行内对齐文本：left、right、center、justify
text-decoration 添加或取消下划线、上划线或删除线
text-transform 改变字母大小写：uppercase、lowercase、capitalize
line-height 设置每行高度 — 段落可读性的关键
letter-spacing 调整字母间距

对齐文本

text-align 把文本放在包含块的水平轴上。

居中标题

css
CSS Code 
.hero-title {
text-align: center;
color: #0f172a;
}

装饰 — 下划线与同伴

text-decoration 在文本上画线。链接常常自带下划线；用 none 去掉，或在设计需要时加 underline / line-through。

装饰示例

css
CSS Code 
.link-quiet {
text-decoration: none;
color: #2563eb;
}

.sale {
text-decoration: line-through;
color: #64748b;
}

.note {
text-decoration: underline;
}

转换大小写

text-transform 改变字母外观，无需改写 HTML 文本。

大小写转换

css
CSS Code 
.label {
text-transform: uppercase;
letter-spacing: 0.06em;
}

.city {
text-transform: capitalize;
}

用行高提升段落可读性

line-height 控制行的垂直节奏。像 1.5 这样的无单位值会随字号缩放，是正文的稳妥选择。

舒适的行高

css
CSS Code 
.article p {
line-height: 1.6;
color: #334155;
}

字距 — 轻触即可

一点点 letter-spacing 可以拉开短标题。正文段落多数保持自然，除非设计真的需要。

带轻微字距的标题

css
CSS Code 
.section-title {
text-align: left;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}

自己动手

  1. 用 text-align: center 居中一个 h1。
  2. 用 text-decoration: none 去掉链接下划线；如需可在 hover 时加回。
  3. 用 text-transform: uppercase 把小标签变成大写。
  4. 把段落 line-height 设为 1.6，并与 1.2 对比。
  5. 给标题一点小的 letter-spacing — 再检查是否仍易读。

常见错误

  • 指望 text-align: center 居中整个块级布局（那是布局任务，不只是文本）
  • 设计想要安静链接时仍给所有链接留着下划线 — 或去掉下划线却没有其他提示
  • 把 font-family、font-size 的工作放在这里（属于 Fonts 课）
  • 在长段落上用巨大的 letter-spacing（难读）
  • 把文本溢出省略号工具和这些基础搞混（稍后）

小结

  • text-align 把文本左对齐、右对齐、居中或两端对齐
  • text-decoration 添加或去掉下划线等线条
  • text-transform 不改 HTML 就改变大小写
  • line-height 塑造段落可读性
  • 轻微的 letter-spacing 可以润色短标题
  • 字体下一课再讲；本课专注文本如何落位与阅读

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 26 的 35
Css 教程