css颜色与文本装饰text-decoration结合

颜色与文本装饰结合可提升文本视觉效果，如链接样式和重点突出；2. 使用color设置文字颜色，text-decoration控制下划线等样式，可同时应用于同一选择器；3. 超链接常去除默认下划线并自定义颜色，通过:hover添加悬停下划线以增强交互；4. text-decoration支持line-through、overline、wavy underline等，配合不同颜色表达删除、错误等语义；5. 建议分开书写text-decoration-line、style和color以提高可维护性；6. 合理搭配颜色与装饰能提升信息清晰度与页面美观。

在CSS中，颜色（color）和文本装饰（text-decoration）可以结合使用，来增强文本的视觉效果。比如链接样式、重点文字突出等场景，通过设置颜色和下划线、删除线等装饰，能有效提升用户体验。

设置文本颜色与基本装饰

使用 color 属性定义文字颜色，text-decoration 控制装饰线样式。两者可同时写在同一个选择器中：

a {
  color: blue;
  text-decoration: underline;
}

这段代码让链接显示为蓝色，并带有下划线。

去除默认下划线并自定义颜色

超链接默认有下划线和蓝色，常需去除或修改：

立即学习“前端免费学习笔记（深入）”；

a {
  color: #007bff;
  text-decoration: none; /* 去除下划线 */
}
<p>a:hover {
text-decoration: underline; /<em> 鼠标悬停时显示下划线 </em>/
}</p>

这样可以让链接更美观，同时通过悬停反馈提升交互性。

Text Mark

处理文本内容的AI助手

49

查看详情

组合多种装饰与颜色搭配

text-decoration 还支持更多样式，如删除线、波浪线等，配合颜色可用于不同语义：

• text-decoration: line-through; 配灰色颜色表示已删除内容
• text-decoration: overline; 较少见，但可搭配深色使用强调
• text-decoration: wavy underline; 波浪下划线常用于拼写错误提示，配红色更醒目

.deleted {
  color: gray;
  text-decoration: line-through;
}
<p>.error {
color: red;
text-decoration: wavy underline;
}</p>

兼容性与书写建议

现代浏览器都支持 text-decoration 的复合写法（如颜色、线型、位置一起设置），但为清晰起见，建议分开写：

.highlight {
  color: #d32f2f;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: orange;
}

这样更易维护，也避免覆盖其他装饰属性。

基本上就这些。合理搭配颜色与文本装饰，能让页面信息更清晰，又不失美观。

以上就是css颜色与文本装饰text-decoration结合的详细内容，更多请关注php中文网其它相关文章！