css 屏蔽元素自带的样式

CSS是实现网页美化的重要工具，但有时候我们需要屏蔽元素自带的样式，这时候就需要使用一些技巧。

/* 屏蔽链接默认样式 */a {
      color: inherit;
      text-decoration: none;
}

上面代码中，我们使用了color: inherit，将链接文字颜色继承了父级元素的颜色，text-decoration: none则去掉了下划线。

/* 屏蔽列表默认样式 */ul, ol {
      list-style: none;
      padding: 0;
      margin: 0;
}

列表默认样式会使得我们的网页失去统一感，因此我们需要使用list-style: none去掉前面的小圆点或数字，再将内外边距都设为0，消除不必要的空白。

/* 屏蔽input默认样式 */input {
      appearance: none;
      border-radius: 0;
      border: none;
      outline: none;
      box-shadow: none;
}

输入框默认样式会使得我们的表单显得过于单调，因此我们可以使用appearance: none去掉默认外观，border-radius: 0去掉圆角边框，border: none去掉边框，outline: none去掉轮廓线，box-shadow: none去掉阴影。

/* 屏蔽表格默认样式 */table {
      border-collapse: collapse;
}
td, th {
      padding: 0;
      border: 1px solid #ccc;
}
    

表格默认样式过于杂乱，我们可以使用border-collapse: collapse合并边框，padding: 0去掉内边距，border: 1px solid #ccc统一边框样式。

通过以上的技巧，我们可以有效地屏蔽元素自带的样式，使得我们的网页更加美观与整洁。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！