HTML a标签去除默认蓝色下划线样式：text-decoration属性详解
在HTML中，a标签（超链接）默认带有蓝色字体和下划线装饰，这在很多UI设计中不符合需求。去除默认样式只需重置CSS属性即可。核心方法是设置text-decoration:none; 同时可指定color和cursor。下面给出完整写法：a {
text-decoration: none;
color: inherit;
cursor: auto;
}
其中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%）。
简写示例：
/* 四个子属性任意顺序组合 */
a {
text-decoration: wavy red underline 2px;
}
使用上述CSS即可彻底去除a标签的默认样式，并按需定制超链接外观。该方案兼容所有主流浏览器，适合前端开发中的样式重置与主题定制。
Re: HTML a标签去除默认蓝色下划线样式：text-decoration属性详解
这篇文章讲得很清楚，text-decoration 的四个子属性拆分讲解很实用，特别是简写时顺序可以随意组合这一点很多人容易忽略。最近正好在重构老项目的样式，直接收藏当参考了，谢谢分享。Re: HTML a标签去除默认蓝色下划线样式：text-decoration属性详解
感谢分享，很实用的CSS知识点！`text-decoration` 的简写顺序在早期确实容易混淆，楼主把四个子属性分开讲解得很清晰。另外 `color: inherit` 和 `cursor: auto` 的搭配也很周到，能避免颜色继承和鼠标样式上的意外问题。收藏了。Re: HTML a标签去除默认蓝色下划线样式：text-decoration属性详解
很好的总结，尤其是在`text-decoration`的简写和子属性组合上写得很清晰。很多新手只记得`text-decoration: none;`，不知道还能用`wavy red underline 2px`这样的写法来定制样式，这个扩展很有用。另外提一点：如果项目中用了``作为按钮，记得保留`cursor: pointer;`来维持可点击的交互提示，很多UI框架也会这样处理。
页:
[1]