颜色与文本装饰结合可提升文本视觉效果，如链接样式和重点突出；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; /* 去除下划线 */
}
a:hover {
text-decoration: underline; / 鼠标悬停时显示下划线 /
}
这样可以让链接更美观，同时通过悬停反馈提升交互性。
组合多种装饰与颜色搭配
text-decoration 还支持更多样式，如删除线、波浪线等，配合颜色可用于不同语义：
- text-decoration: line-through; 配灰色颜色表示已删除内容
- text-decoration: overline; 较少见，但可搭配深色使用强调
- text-decoration: wavy underline; 波浪下划线常用于拼写错误提示，配红色更醒目
.deleted {
color: gray;
text-decoration: line-through;
}
.error {
color: red;
text-decoration: wavy underline;
}
兼容性与书写建议
现代浏览器都支持 text-decoration 的复合写法（如颜色、线型、位置一起设置），但为清晰起见，建议分开写：
.highlight {
color: #d32f2f;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: orange;
}
这样更易维护，也避免覆盖其他装饰属性。
基本上就这些。合理搭配颜色与文本装饰，能让页面信息更清晰，又不失美观。
