HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

重置 CSS 和规范化 CSS 的区别?

cssweb developmentfront end technology更新于 2024/10/31 19:56:17

开发人员希望 HTML 元素在每个浏览器上看起来都一样，但这因浏览器功能而异。浏览器渲染 HTML 页面时，会应用其自身的默认样式。例如，标题标签的样式会根据浏览器类型而具有不同的大小和字体。这意味着标题可以有外边距或额外的填充，甚至无需您编写代码。

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

规范化和重置 CSS 的区别?

在使用 CSS 时，开发人员可能会遇到一些浏览器问题，例如标题的字体和大小可能不同等等。顶部和底部的外边距以及默认填充可能会有所不同。重置和规范化 CSS 可以发挥作用，因为它们可以使默认 CSS 在所有浏览器中更加一致，但关于使用哪种方法的争论仍然存在。让我们详细了解一下规范化和重置，以便确定它们之间的区别。

CSS 中的重置

为了避免跨浏览器差异，在这种技术中，CSS 作者使用 CSS 重置来清除浏览器的所有样式。不同的浏览器会拥有各自不同的用户代理样式表，以使网站看起来更清晰易读。例如，您可能已经看到大多数浏览器中的超链接都是蓝色的，而访问过的超链接则显示为紫色。

默认样式的一个例子可以是 -

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

所有浏览器都会应用此类默认样式，但具体应用哪种样式取决于浏览器。有些元素可能会应用额外的内边距，有些元素可能会改变边距，有些甚至可能会使用不同的字体样式。

CSS 重置会强制浏览器将所有重置后的样式应用为 null，从而避免由于浏览器默认样式而导致的差异。

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

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

CSS 开发者会发现不一致的情况，因为他们的网站在不同的浏览器中看起来会有所不同。重置有助于将默认浏览器样式设置为 null，从而消除由于浏览器样式不同而可能出现的不一致。

注意 − Internet Explorer 不支持继承属性，因此继承的值不会应用，并且 UI 会受到影响。重置可以帮助我们在使用 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>

以上输出在所有浏览器中看起来都一样。

开发者之间一直在争论应该选择哪种方式，以及哪种方式更有利于实现流畅的体验。

规范化会保留有用的默认样式，并删除不必要的样式，而重置则会删除浏览器的所有样式。重置时，我们必须在重置浏览器后重新声明所有样式，而规范化会保留所需的样式，只删除不需要的样式。规范化易于使用，并且是一项现代技术。

结论

规范化和重置之间没有太大区别，因为两者的目的相同，即保留网站的 UI 并使其与所有浏览器兼容，从而使网站在每个浏览器中看起来都一样。两者采用不同的方法，并取决于用户的偏好。

相关文章

有用资源

打印 下一节:使用 CSS 为图片添加蒙版 ❯❮ 上一节:使用 CSS 创建高级加载屏幕