Learn-HTML-CSS

Appearance

Return to top
On this page

HTML 元素默认样式和 reset

元素默认样式

默认样式

HTML 元素的默认样式是由浏览器提供的，它们在浏览器中被称为"用户代理样式表"（user agent stylesheet）。

User agent stylesheets

不同的浏览器提供的默认样式可能有所不同，但是通常包括以下内容：

  • 字体样式：默认字体大小、颜色、字体家族等
  • 边框样式：默认边框宽度、样式、颜色等
  • 行高和行距：默认行高和行距
  • 文本样式：默认文本对齐方式、缩进、间距等

默认样式的意义

  • 因为 HTML 是一个比较简单的文档型的，这样一种标记语言，所以它必然要带一些默认样式才让我们直接写完标记有表现。
  • HTML 默认样式的意义在于为网页提供一个基础的样式框架，使得页面中所有 HTML 元素在不同的浏览器和操作系统上都能够以一致的方式呈现。这样，用户可以更加便捷地访问和使用网页，给用户更加统一的使用体验。同时也可以帮助开发人员减少开发时间和成本。
  • HTML 默认样式的另一个作用是提供了一种默认的样式表，使得开发人员可以基于默认样式进行调整和定制，而不必从头开始编写样式。这可以节省开发时间和精力，同时也可以提高开发效率和一致性。

默认样式带来的问题

  • 由于不同的浏览器提供的默认样式可能存在差异，而且默认样式不一定符合每个开发人员的需求。
  • 因此，在实际开发中，为了确保页面的外观和行为一致，开发者需要编写 CSS 样式重置默认样式，以确保所有元素都以一致的方式显示，以满足具体的设计要求和需求。

CSS Reset

ts
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>default style</title>
</head>

<body>
    <div>DIV 元素</div>  
    <ul>
        <li>LI 元素</li>
        <li>LI 元素</li>
    </ul>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>default style</title>
</head>

<body>
    <div>DIV 元素</div>  
    <ul>
        <li>LI 元素</li>
        <li>LI 元素</li>
    </ul>
</body>

</html>

浏览器提供的默认样式也会带来一些问题：

  • 有一些样式是我们预期之外的
  • 各个浏览器的默认样式并不完全一样

那处理这个问题的解决方案呢？就是 CSS reset。

通用选择器

ts
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>default style</title>
    <style>  
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div>DIV 元素</div>  
    <ul>
        <li>LI 元素</li>
        <li>LI 元素</li>
    </ul>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>default style</title>
    <style>  
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div>DIV 元素</div>  
    <ul>
        <li>LI 元素</li>
        <li>LI 元素</li>
    </ul>
</body>

</html>

这种方式因为使用通用选择器，所以会带来性能的问题。

样式归零

把默认样式都干掉归零。

CSS Tools: Reset CSS
css
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
CSS Reset - YUI Library
html
<!-- Include Dependencies -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css" />

<!-- Using CSS Reset Contextually -->
<div>
  <div id="left-column" class="yui3-cssreset"><h1>Lorem Ipsum</h1></div>
  <div id="right-column"><h1>Lorem Ipsum</h1></div>
</div>

<!-- Include Dependencies -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css" />

<!-- Using CSS Reset Contextually -->
<div>
  <div id="left-column" class="yui3-cssreset"><h1>Lorem Ipsum</h1></div>
  <div id="right-column"><h1>Lorem Ipsum</h1></div>
</div>

样式调整

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Normalize.css 使用了一种不同的思路。它的基本策略是这样的，既然浏览器给了我们默认样式，那它就是有意义的，那我为什么要把这个默认样式干掉呢？我应该处理的是，如果这个默认样式不一致，我把它变得一致就好了，所以这就是 normalize 的出发点。

normalize 会保留一些元素的 margin 和 padding。同时它会去做一些修正，比如说输入框在各个浏览器下面的宽度，高度的定义是不统一的。那么它会尝试去做一些修正，让你的定义变得更统一。

html
<link rel="stylesheet" type="text/css" href="https://yarnpkg.com/en/package/normalize.css" />

<link rel="stylesheet" type="text/css" href="https://yarnpkg.com/en/package/normalize.css" />