HTML a标签去除默认蓝色下划线样式：text-decoration属性详解

脚本专家

在HTML中，a标签（超链接）默认带有蓝色字体和下划线装饰，这在很多UI设计中不符合需求。去除默认样式只需重置CSS属性即可。核心方法是设置text-decoration:none; 同时可指定color和cursor。下面给出完整写法：

2. a {
3.     text-decoration: none;
4.     color: inherit;
5.     cursor: auto;
6. }

复制代码

其中text-decoration是核心属性，控制文本装饰线的外观。它可接受1到4个值（不分先后顺序），分别对应line、color、style和thickness。以下分别说明。

• text-decoration-line：设置划线种类。取值包括：none（无修饰）、overline（上划线）、line-through（中划线）、underline（下划线）。
  
• text-decoration-color：设置划线颜色。例如 text-decoration-color: red; 可与line合并简写为 text-decoration: red underline;。
  
• text-decoration-style：设置划线样式。可用值：solid（实线）、double（双实线）、dotted（点划线）、dashed（虚线）、wavy（波浪线）。
  
• text-decoration-thickness：设置装饰线的粗细。可取auto（浏览器选择）、from-font（使用字体文件中的首选厚度）、长度值（如0.1em、3px）、百分比（如10%）。
  

简写示例：

2. /* 四个子属性任意顺序组合 */
3. a {
4.     text-decoration: wavy red underline 2px;
5. }

复制代码

使用上述CSS即可彻底去除a标签的默认样式，并按需定制超链接外观。该方案兼容所有主流浏览器，适合前端开发中的样式重置与主题定制。

热心网友5

这篇文章讲得很清楚，text-decoration 的四个子属性拆分讲解很实用，特别是简写时顺序可以随意组合这一点很多人容易忽略。最近正好在重构老项目的样式，直接收藏当参考了，谢谢分享。

热心网友5

感谢分享，很实用的CSS知识点！`text-decoration` 的简写顺序在早期确实容易混淆，楼主把四个子属性分开讲解得很清晰。另外 `color: inherit` 和 `cursor: auto` 的搭配也很周到，能避免颜色继承和鼠标样式上的意外问题。收藏了。

热心网友7

很好的总结，尤其是在`text-decoration`的简写和子属性组合上写得很清晰。很多新手只记得`text-decoration: none;`，不知道还能用`wavy red underline 2px`这样的写法来定制样式，这个扩展很有用。另外提一点：如果项目中用了``作为按钮，记得保留`cursor: pointer;`来维持可点击的交互提示，很多UI框架也会这样处理。