在css中文本装饰text-decoration使用_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

在css中文本装饰text-decoration使用

2025-11-15

浏览次数：次

返回列表

text-decoration用于设置文本装饰，可控制下划线、删除线等样式，常用于去除链接下划线、标注失效价格及自定义下划线颜色与线型，推荐使用text-decoration-line、color、style子属性以获得更精确控制。

在css中文本装饰text-decoration使用

在CSS中，text-decoration 属性用于设置或删除文本的装饰效果。它是一个简写属性，可以同时控制下划线、上划线、删除线以及文本下的颜色和样式。这个属性常用于链接样式、强调文本或去除默认样式。

基本语法

text-decoration 可以设置一个或多个值，语法如下：text-decoration: || || ;

常见取值包括：

none：默认值，不显示任何文本装饰。
underline：在文本下方添加一条线。
overline：在文本上方添加一条线。
line-through：在文本中间画一条贯穿线（删除线）。
blink：让文本闪烁（大多数浏览器已弃用）。

常见使用场景

1. 去除链接的下划线超链接（a标签）默认带有下划线，可以通过以下方式去除：```css
a {
text-decoration: none;
}
```

2. 添加删除线表示已失效内容比如在价格对比中，原价加删除线：css .old-price { text-decoration: line-through; } 

3. 自定义下划线样式（CSS3扩展）CSS3 扩展了 text-decoration，支持颜色和线型：css p { text-decoration: underline red w*y; } 这会创建一条红色波浪形下划线。

好买卖商城

好买卖商城开源商城是基于Opencart网店系统,针对中文用户而改进的本地化分支,是真正的开源PHP中文网店系统，兼容Opencart的插件。该系统具有易于操作的可视化安装界面、完善的前台商品展示和户在线购物车功能、强大的后台管理和维护功能模块简单易用,灵活的插件机制，更易于扩展。另外，好买卖商城开源商城还集成集成了支付宝等支付和物流插件,更适合中文用户使用。好买卖商城2.0开源商城流程进行

0 查看详情好买卖商城

子属性（现代用法）

现在更推荐使用独立的子属性来获得更好的控制：

text-decoration-line：指定装饰线类型（如 underline, line-through）。
text-decoration-color：设置装饰线颜色。
text-decoration-style：设置线型，如 solid（实线）、double（双线）、dotted（点线）、dashed（虚线）、w*y（波浪线）。

示例：css h1 { text-decoration-line: underline; text-decoration-color: blue; text-decoration-style: w*y; } 