CSS 文本装饰
CSS 允许我们通过多种方式自定义文本，其中之一就是添加装饰线。
这些线条可以出现在文本下方、上方，甚至穿过文本，用于指示链接、标记已完成项目或过时信息等多种目的。
1. 理解 text-decoration 属性
text-decoration 属性用于向文本添加各种装饰线。它是一个简写属性，可以组合多个值，但我们目前的重点是它最常见的用途：定义装饰线的类型。
1.1 下划线 (underline)
underline 值在文本正下方绘制一条线。这可能是最熟悉的文本装饰，主要用于指示超链接（由 HTML <a> 标签创建的元素）。默认情况下，Web 浏览器会对链接应用下划线，以表示它们是可点击的。
语法：
selector {
text-decoration: underline;
}实战应用与移除：
虽然 underline 对链接很有用，但有时你可能希望移除链接的默认下划线以实现特定的设计美感（例如替换为悬停效果）。要移除下划线，你可以将 text-decoration 设置为 none。
示例：应用和移除下划线
/* 默认情况下，链接有下划线。让我们移除它，然后通过自定义类加回来。 */
a {
text-decoration: none; /* 移除所有链接的默认下划线 */
color: #007bff; /* 设置蓝色以提高可见性 */
}
a:hover {
text-decoration: underline; /* 悬停时添加下划线，提供交互反馈 */
}
/* 使用类选择器将下划线应用于特定段落 */
.special-feature {
text-decoration: underline; /* 显式应用下划线 */
color: #333;
}在这个例子中，我们首先移除了所有 <a> 标签的默认下划线。然后，仅当用户将鼠标悬停在链接上时才重新引入它，这是一种常见且现代的设计模式。
1.2 上划线 (overline)
overline 值在文本正上方绘制一条线。这种装饰在典型的网页设计中不如 underline 或 line-through 常见，但它可用于独特的风格效果，或用于引起对特定标题或内容块的注意。
语法：
selector {
text-decoration: overline;
}示例：为标题设置上划线
<header>
<h2 class="section-title">最新新闻</h2>
</header>/* 为特定标题应用上划线 */
.section-title {
text-decoration: overline; /* 在标题文本上方添加一条线 */
font-family: 'Arial', sans-serif;
color: #4CAF50; /* 绿色标题 */
padding-top: 10px; /* 在文本上方添加一些空间给上划线 */
}在这里，“最新新闻”标题上方将出现一条绿线，提供独特的视觉风格。
1.3 删除线 (line-through)
line-through 值直接穿过文本中心绘制一条线。这种装饰非常有效地传达含义，例如标记项目已删除、不可用，或在促销活动中指示原价。
语法：
selector {
text-decoration: line-through;
}1.4 示例：标示特价和已完成任务
让我们用一个列表来展示任务，并用一段文字来描述产品：
<div class="task-list">
<h3>My To-Do List</h3>
<ul>
<li class="completed">Finish CSS lesson content</li>
<li>Review module structure</li>
<li class="pending">Plan next week's tasks</li>
</ul>
</div>
<div class="product-offer">
<h3>Special Offer!</h3>
<p>Original Price: <span class="old-price">$59.99</span></p>
<p>New Price: <span class="new-price">$39.99</span></p>
</div>CSS 代码：
/* 已完成任务的样式 */
.completed {
text-decoration: line-through; /* 在已完成任务上画一条贯穿线（删除线） */
color: #999; /* 让文字颜色稍微变淡 */
}
/* 特价活动中原价的样式 */
.old-price {
text-decoration: line-through; /* 在原价上画一条贯穿线 */
color: #d9534f; /* 使用红色调表示移除/作废 */
}
/* 新价格的样式 */
.new-price {
color: #5cb85c; /* 新价格使用绿色 */
font-weight: bold; /* 让新价格更醒目（来自模块 4，第 1 课） */
font-size: 1.1em; /* 新价格文字稍大（来自模块 4，第 1 课） */
}效果解析：
- 任务列表 (task-list)： 带有
completed类的项目在视觉上会有删除线，清晰地表明其已完成的状态。 - 产品优惠 (product-offer)：
.old-price使用line-through来表明原价已失效，并与加粗的新价格形成鲜明对比。 - 总结： 这种方式无需额外的文字说明，就能高效地向用户传达信息。
2. 组合 text-decoration 值
虽然单独使用 underline、overline 和 line-through 很常见，但如果需要，你也可以在单个元素上组合这些值，只需在 text-decoration 属性中列出它们即可。
2.1 语法
selector {
text-decoration: underline overline; /* 同时应用下划线和上划线 */
}2.2 示例：组合装饰
<p class="highlighted-text">
重要公告！ 请仔细阅读。
</p>.highlighted-text {
text-decoration: underline overline; /* 创建上下两条线 */
font-weight: bold;
color: #8A2BE2; /* 蓝紫色 */
}这将导致文本上方和下方都有一条线，使其非常显眼。
3. 实战综合示例：博客文章预览
让我们将所有这些概念放入一个连贯的示例中，模拟一个小型的博客文章或文章预览。
HTML:
<article>
<h2 class="article-title">探索 CSS 文本样式 (草稿)</h2>
<p>
本文涵盖 <a href="#fonts">字体属性</a>、<span class="current-topic">文本装饰</span> 等内容。
</p>
<div class="product-ad">
<h3>限时优惠！</h3>
<p>原价: <span class="old-price">$29.99</span></p>
<p>现价: <span class="new-price">$19.99</span></p>
</div>
<ul class="task-list">
<li class="done">研究 text-decoration 技术</li>
<li>复习内容</li>
</ul>
</article>CSS:
/* 移除所有链接的默认下划线 */
a {
text-decoration: none;
color: #007bff;
font-weight: bold;
}
/* 悬停时添加下划线 */
a:hover {
text-decoration: underline;
}
/* 使用上划线标记草稿标题 */
.article-title {
text-decoration: overline;
padding-bottom: 5px;
}
/* 显式下划线强调当前主题 */
.current-topic {
text-decoration: underline;
font-style: italic;
color: #28a745;
}
/* 价格和任务状态的删除线 */
.old-price, .done {
text-decoration: line-through;
color: #6c757d;
}在这个综合示例中，我们利用 text-decoration 实现了多个目的：
- 移除链接的默认下划线并在悬停时添加，以获得更简洁的设计。
- 对草稿文章标题应用
overline以引起注意。 - 显式
underline短语“文本装饰”以突出当前课程的主题。 - 对旧产品价格和已完成的任务项使用 line-through，清楚地传达它们的状态。