标签默认样式及 CSS Reset-JavaScript中文网-JavaScript教程资源分享门户

在编写前端界面时，我们会使用 HTML 标记语言来定义页面结构，然后使用 CSS 来设置样式。而 HTML 标签本身也有一些默认的样式，这些默认样式可能会对我们的样式设置造成影响。为了避免这种影响，我们需要了解标签的默认样式，并根据需要进行重置。

标签的默认样式

每个 HTML 标签都有一些默认的样式，这些样式是浏览器在渲染页面时自动设置的。例如，<h1> 标签的默认样式是加粗、居中、有较大的字号。而 p 标签的默认样式是有一定的行间距、左对齐等等。

在大多数情况下，这些默认样式对我们的设计不会造成太大的影响，但有时候我们需要对标签的样式进行自定义设置。这时就需要清除默认样式。

CSS Reset

CSS Reset 是一种清除所有默认样式的方法。CSS Reset 会将所有元素的所有样式都设置为初始状态，然后我们可以在这个基础上进行自定义样式的设置。

以下是一份简单的 CSS Reset 代码：

// javascriptcn.com 代码示例
/* Reset all styles */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* Reset some tag's default styles */
body,
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

这份代码首先将所有元素的 margin、padding、border 等样式设置为 0，将字体大小设置为 100%。它还重置了一些标签的默认样式，如 body、button、input、optgroup、select、textarea 等。

使用 CSS Reset 可以帮助我们避免默认样式对我们的样式设置造成的影响，从而更方便地进行自定义样式的设置。

示例代码

以下是一个示例代码，它展示了如何使用 CSS Reset 进行样式设置。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS Reset Example</title>
    <style>
      /* Reset all styles */
      * {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
      }

      /* Reset some tag's default styles */
      body,
      button,
      input,
      optgroup,
      select,
      textarea {
        margin: 0;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
      }

      /* Custom styles */
      body {
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
        color: #333;
      }

      h1 {
        font-size: 2em;
        font-weight: bold;
        text-align: center;
        margin-bottom: 1em;
      }

      p {
        margin-bottom: 1em;
      }

      a {
        color: #007bff;
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h1>CSS Reset Example</h1>
    <p>This is an example of using CSS Reset to set custom styles.</p>
    <p><a href="#">Learn more about CSS Reset</a></p>
  </body>
</html>

在这个示例代码中，我们使用了 CSS Reset 来清除所有默认样式，然后设置了一些自定义样式，包括全局字体、一些标签的大小、间距等等。这个示例代码展示了如何使用 CSS Reset 来进行自定义样式的设置。

总结

本文介绍了标签的默认样式以及如何使用 CSS Reset 来清除默认样式。了解标签的默认样式可以帮助我们更好地进行样式设置，而使用 CSS Reset 可以帮助我们避免因默认样式造成的设计问题。希望本文对你有所帮助，谢谢阅读！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654bc26a7d4982a6eb5816c2