1. 引言
在web开发中，经常需要对文本进行特殊样式的设置，比如添加删除线。删除线是一种常见的文本效果，可以在文字上方添加一条横线来表示删除。本文将介绍如何使用CSS设置删除线，以及一些常见的应用场景。
2. 设置删除线
2.1 text-decoration属性
要设置文本删除线，可以使用CSS的text-decoration属性。该属性可以取以下值：
none: 默认值，没有任何文本修饰线。
underline: 添加下划线。
overline: 添加上划线。
line-through: 添加删除线。
2.2 单独设置删除线
要单独设置删除线，可以使用text-decoration-line属性。该属性可以取以下值：
none: 默认值，没有任何文本修饰线。
underline: 添加下划线。
overline: 添加上划线。
line-through: 添加删除线。
2.3 示例代码
span {
text-decoration: line-through; /* 添加删除线 */
text-decoration-color: red; /* 设置删除线颜色 */
text-decoration-style: solid; /* 设置删除线样式 */
text-decoration-line: line-through; /* 单独设置删除线 */
}
3. 应用场景
3.1 标记划掉的价格
在电商网站中，常常需要标记商品的原价以及折扣价。使用删除线可以清晰地表示商品原价，并突出折扣价。
.original-price {
text-decoration: line-through; /* 添加删除线 */
}
在HTML中可以这样使用：
<span class="original-price">$100</span>
3.2 表示已删除的内容
在博客或论坛中，如果修改了原始文章或回复，可以使用删除线标记已删除的内容，以便读者可以清楚地看到修改前后的差异。
<p><del>这是修改前的内容</del></p>
<p>这是修改后的内容</p>
4. 总结
通过设置text-decoration属性，我们可以很方便地为文本添加删除线。这种效果可以在电商网站中标记折扣价，或者在文章中表示已删除的内容。希望本文能帮助你学习如何使用CSS设置删除线，并且在实际项目中灵活运用。