前言
在进行前端网页的开发时，我们时常会遇到一些 “古老” 的现象，如：a 标签下划线。在需要去掉 a 标签下划线时，我们通常会选择给 a 标签添加 text-decoration: none; 的 CSS 样式。但是这样做却有一个问题：对于一些浏览器(如 IE10) 或者部分手机浏览器而言，这并不一定有效。
因此，我们可以考虑通过重置 CSS 样式来解决这个问题，这也是众多前端开发者常用的实现方式。其中一个常用的 CSS Reset 方案是 reset.css。
reset.css 简介
reset.css 不同于普通的 CSS 样式文件，而是一种可以重置浏览器默认样式，确保各个页面在不同浏览器上显示的效果相同的基础 CSS 样式文件。
reset.css 主要是通过给 HTML 元素设置样式，让它们的默认样式基本上都相同，然后再针对各种元素进行调整。这样可以保证在不同的浏览器或者各种操作系统上，网页显示的效果是一致的，同时也避免了默认样式造成对布局的影响，更加方便我们进行页面的定制。
reset.css 的实现
reset.css 的实现相对比较简单，只需要定义一些基本的样式即可。
我们可以通过如下代码实现去掉 a 标签下划线效果：
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}上面的代码是最基本的实现方式，但要想真正做到兼容各种浏览器，我们还需要添加一些必要的通用样式。以下是我们通常添加到 reset.css 文件中的样式：
-- -------------------- ---- ------- -- -- ---- -- -- ---- - ---------- ----- ------------------------- ----- --------------------- ----- ---------------------------- ------------ - -- -- ---- -- -- ---- - ------- -- ---------- ----- ------------ ---- ----------------------- ------------ ------------------------ ---------- - -- -- - ----- -- - - ---------------- ----- ------ -------- ------- -------- - -- -- ------- ----- -- ------- - ---------------- ----- - -- ------ -- ------------------------- ----------------------- - -------- -- ------- -- - ------- ------ ------- -------- - ---------- -------- ------- -- ------- -- ------ -------- ------------ -------- ------------ -------- - -- ------ -- --- -- - ----------- ----- ------- -- -------- -- - -- ----- -- --- --- --- --- --- --- -- ----------- ---- --- --- --- ------ - ------- -- -------- -- - -- ---- -- --- - --------------- ------- -
在上述的样式中，我们不仅去掉了 a 标签下划线，还包含了针对不同 HTML 元素的都通用样式。
总结
在使用 reset.css 去掉 a 标签下划线效果时，我们应该学会规范书写 CSS 样式的写法，避免出现错误。同时，我们也应该尽可能地添加一些通用的重置样式，以保证页面的兼容性和一致性。
通过这篇文章，希望读者能够深刻理解 reset.css 的实现原理，以及如何在其中去掉 a 标签下划线效果，从而更加熟练地运用 CSS 布局技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bdfb348841e98948a201d