在前端开发中，样式的重置是非常重要的一步，它可以让网站在不同浏览器、平台下都能够得到一致的显示效果。重置样式是通过给网站的基础样式统一赋值，覆盖不同浏览器和平台默认的样式而实现的。本文将介绍在 LESS 中如何对样式进行重置，并给出相应的示例代码。
重置通用样式
浏览器默认样式的互不统一导致不同浏览器之间网页的样式表现不一致。我们需要针对不同的HTML元素重置基础样式，以达到互不影响的效果。以下是一些通用样式的重置代码：
- - ------- -- -------- -- ----------- ----------- - --------- - ---------- ----- -
以上代码中通配符 * 表示屏蔽所有 HTML 元素的默认样式，同时给所有元素的 margin 和 padding 赋值为 0，并将元素框模型改为 border-box。 这段代码还针对了 html 和 body 标签设置了字体大小为 14 像素。
重置表单样式
通过 Less 我们还可以方便地重置表单样式，以下是一个简单的实例代码：
------ --------- ------ - ------- -- ----- -------- ------ -------- ----------- ----- -
这段代码的意思是给所有的表单元素重置了 margin，将字体其它属性继承为原生状态，并将阴影效果去掉。这样就简单清爽多了。
重置按钮样式
按钮样式也是使用频率较高的展示元素之一。以下是一个重置按钮样式的代码片段：
------- --------------------- --------------------- ------------------- - ------- -- ------- ----- ----------------- ----- ------- -------- -
这段代码中给按钮元素和 input 标签分别绑定了 submit、button和 reset 三种 type 所对应的样式，同时，给样式定义了一些常用的特性，如边框为空、背景色为白色、鼠标变成手形等。
重置链接样式
所有的网站都有大量的链接元素，但浏览器链接的默认样式一般都不能让人完全满意。通过 Less，我们可以做到完全个性化定制。以下是一个重置链接样式的代码片段：
- -
---------------- -----
------ --------
------- --------
------- -
---------------- ----------
-
-代码片段中的 text-decoration 属性的值为 none 表示清除默认链接的下划线效果，其中 cursor 属性将鼠标变成一个指针形状表明它所指的是链接。同时，在鼠标覆盖到该链接的文本上时，边框会出现下划线效果。当然，这也可以通过hover伪类实现。
总结
以上就是在 LESS 中对样式进行重置的详细讲解。需要注意的是，样式的重置只是第一步，其后我们还需要慢慢地调整样式，以达到更好的界面效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6488f8cc48841e989474a394