CSS 文本：text-align、text-decoration、line-height
网页排版的核心在于文字的可读性与视觉美感。text-align、text-decoration 和 line-height 是控制文本水平对齐、装饰线条与垂直间距的三个最基础属性。
1. 设置文本水平对齐
text-align 属性用于指定文本在容器内的水平排列方式。它仅作用于块级元素（如 div、p、h1），控制其内部的行内内容（文字、图片等）。
- 打开你的代码编辑器，创建一个
index.html文件。 - 输入以下基础 HTML 结构，搭建一个测试容器：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 文本属性测试</title>
<style>
.box {
border: 1px solid #000; /* 添加边框以便观察对齐效果 */
padding: 10px;
margin-bottom: 20px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="box">
这是一段测试文本，用于观察 text-align 的对齐效果。
</div>
</body>
</html>- 定位到
<style>标签内的.box类选择器。 - 输入
text-align:属性，并使用以下常用值之一：
| 属性值 | 描述 | 适用场景 |
|---|---|---|
left |
左对齐（默认值） | 大正文、常规段落 |
center |
居中对齐 | 标题、按钮文本 |
right |
右对齐 | 签名、日期、数据末尾 |
justify |
两端对齐 | 报纸风格的印刷排版 |
- 修改 CSS 代码为
.box { text-align: center; }，保存文件并在浏览器中打开，观察文本是否居中。
2. 添加或移除文本装饰
text-decoration 属性用于设置文本上的线条装饰，如下划线、删除线等。它是 text-decoration-line、text-decoration-color 和 text-decoration-style 的简写属性。
- 继续在上述 HTML 文件中添加一个新的段落，用于测试链接和删除线：
<a href="#" class="link">这是一个默认带下划线的链接</a>
<p class="price">原价：999元 <span class="del">现价：599元</span></p>- 在
<style>标签中写入以下样式来移除链接下划线：
.link {
text-decoration: none; /* 移除所有装饰 */
color: blue;
}- 使用简写形式同时定义线条、颜色和样式。编写如下代码来设置红色的波浪线删除线：
.del {
/* 线条类型: 删除线 | 颜色: 红色 | 样式: 波浪线 */
text-decoration: line-through red wavy;
}- 保存并刷新浏览器，确认链接下划线已消失，且价格文字上出现了红色波浪删除线。
3. 调整行高
line-height 属性控制两行文字之间的垂直间距。合理的行高能显著提升长文本的阅读体验，同时是单行文字垂直居中的常用技巧。
- 创建一段较长的多行文本内容：
<div class="content">
<h3>行高测试段落</h3>
<p>这里是一段较长的文本。行高的大小直接决定了阅读的舒适度。如果行高太小，文字会显得拥挤；如果行高太大，页面会显得松散。通常我们将行高设置为字体大小的 1.4 到 1.6 倍。</p>
</div>- 设置
line-height属性。该属性支持三种类型的值：无单位数字（推荐）、em/px单位、百分比。 - 输入以下 CSS 代码，体验最佳实践：
.content p {
font-size: 16px;
/* 推荐写法：无单位数字 1.5，表示行高是字体大小的 1.5 倍 */
line-height: 1.5;
}- 实现单行文字垂直居中。添加一个按钮样式代码：
.btn {
width: 200px;
height: 50px; /* 容器固定高度 */
background-color: #333;
color: #fff;
/* 行高 = 容器高度，实现文字垂直居中 */
line-height: 50px;
text-align: center; /* 配合水平居中 */
text-decoration: none; /* 移除链接下划线 */
display: block; /* 将 a 标签转换为块级元素以应用宽高 */
}- 将 HTML 中的
<a>标签修改为<a href="#" class="btn">点击按钮</a>。 - 保存文件，验证按钮内的文字是否在容器中完全垂直且水平居中。
暂无评论，快来抢沙发吧！