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