重置和规范化CSS的区别

开发者希望HTML元素在每个浏览器上看起来相同，但这取决于每个浏览器的功能不同。当浏览器呈现HTML页面时，它会应用自己的默认样式。例如，不同浏览器上的标题标签具有不同的大小和字体。这意味着即使没有编写代码，标题也可能具有边距或额外的填充。

在本教程中，我们将看看如何重置和规范化CSS以及它们之间的区别。

规范化和重置的区别

使用CSS时，开发者可能会遇到一些与浏览器相关的问题，例如标题可能具有不同的字体和大小等。顶部和底部的边距可能不同，以及默认的填充。这就是规范化和重置发挥作用的地方，它们使默认CSS在所有浏览器中更加一致，但对于使用哪种方法仍然存在争议。让我们详细看看规范化和重置，以确定它们之间的区别。

CSS中的重置

为了避免跨浏览器的差异，这种技术中，CSS作者使用CSS重置将浏览器的所有样式设为null。不同的浏览器将有它们自己的用户代理样式表，以使网站看起来更加易读。例如，你可能已经看到大多数浏览器中的超链接是蓝色的，已访问的超链接显示为紫色。

默认样式的一个示例可能是-

font-weight: bold;
font-size: 10px;

这些默认样式适用于所有浏览器，尽管浏览器会选择应用哪种样式。有些浏览器可能会应用额外的填充，有些可能会改变边距，甚至有些可能会使用不同的字体样式。

CSS重置将强制浏览器将所有样式重置为null，从而避免由于浏览器默认样式而产生的差异。

让我们来看一个示例，我们将所有元素的字重和样式设置为相同。

font-weight: inherit;
font-style: inherit;
font-family: inherit;

CSS开发人员在不同的浏览器中，发现了不一致的问题，因为他们的网站在不同的浏览器中看起来不同。重置样式表帮助将默认浏览器样式设置为null，从而消除可能由于不同浏览器样式造成的不一致性。

注意 - 因为Internet Explorer不支持inherit属性，所以继承的值不会被应用，这会影响在Internet Explorer中的用户界面。在使用Internet Explorer时，重置样式表可以帮助我们解决这个问题。

示例

让我们看一个示例，演示如何重置默认浏览器样式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of resetting!!</title>
</head>
<body>
   <h1>Hi welcome to another tutorial</h1>
   <h3>How is your day going?</h3>
   <h2>We Are learning how to Reset CSS</h2>
   <h4>It will reset the default CSS by the browser</h4>
</body>
</html>

我们导入的链接将重置浏览器的默认样式。重置样式会在其他样式加载之前加载，从而删除浏览器的默认样式。

由于我们在代码中使用了重置样式，所以上述输出在所有浏览器上都看起来相同。使用重置样式后，输出的差异将很小。

在CSS中进行规范化

为了提高跨浏览器兼容性，我们对HTML元素进行规范化，并替换HTML中的重置样式。规范化是为了保留浏览器的有用默认值，而不是将它们全部擦除。让我们看一下规范化的用法。

它标准化了HTML中许多元素的样式。
消除了常见浏览器中的错误。
通过改进的可用性，通过文档简要解释了代码。

示例

以下是一个示例，以理解规范化的概念。在这个示例中，我们导入了normalize，它不会重置浏览器的样式，但在所有浏览器中输出相同，没有任何差异。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of normalizing CSS</title>
   <link rel="stylesheet" href= "https://necolas.github.io/normalize.css/7.0.0/normalize.css">
</head>
<body>
   <h1>Hi welcome to another tutorial</h1>
   <h1>How is your day going?</h1>
   <h2>We Are learning how to Reset CSS</h2>
   <h4>It will reset the default CSS by the browser</h4>
</body>
</html>

以上是在所有浏览器上显示一样的输出。

开发者之间存在关于选择哪一个以及哪个更适合实现顺畅体验的持续讨论。

归一化使有用的默认样式保留下来并删除无用的样式，而重置则删除浏览器的所有样式。在重置后，我们需要重新声明所有样式，而归一化将保留所需的样式并删除不需要的样式。归一化易于使用，是一种现代技术。