重置 CSS 和规范化 CSS 之间的区别？-css教程-PHP中文网

首页

web前端

css教程

重置 CSS 和规范化 CSS 之间的区别？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 19, 2023 pm 12:21 PM

Difference between resetting and normalizing CSS?

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

In this tutorial, we are going to have a look at how we can reset and normalize CSS and what is the difference between them.

Difference between normalizing and resetting?

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

在CSS中重置样式

To avoid cross-browser differences, in this technique, CSS authors null all the styles of the browser by using CSS reset. Different browsers will have their own different user agent stylesheet; to make the websites look more legible. For example, you might have seen hyperlinks in most of the browsers are blue, and visited hyperlinks appear purple in color.

An example of default styles can be −

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

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

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

Let’s look at the example where we set the weight and style of all the elements as same.

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

CSS developers find inconsistencies, as their websites look different in different browsers. The reset helps the default browser styles to be set to null and this eliminates the inconsistencies that might occur due to different browser styles.

注意 - Internet Explorer不支持inherit属性，这就是为什么继承的值不会被应用，且在Internet Explorer上会影响用户界面。在使用Internet Explorer时，重置将帮助我们解决这个问题。

示例

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

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

The link that we imported will reset the default styles of the browser. The reset styles load before other styles and this leads to the removal of the browser’s default styles.

The above output will look the same on every browser as we used the reset in the code. The difference in the output will be minimal after using the reset.

在CSS中进行标准化

To improve the cross browser compatibility, we use the normalizing to the HTML element and replaces the reset in HTML. Normalizing is done so that the useful defaults are preserved by the browsers instead of erasing them all. Let’s look at the usage of the normalizing.

It standardizes the styles for a lot of elements in HTML.
Removes the bugs from common browsers.
通过改进可用性，通过文档简要解释代码。

Example

以下是一个示例，用于理解规范化的概念。在这个示例中，我们导入了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 id="Hi-welcome-to-another-tutorial">Hi welcome to another tutorial</h1>
   <h1 id="How-is-your-day-going">How is your day going?</h1>
   <h2 id="We-Are-learning-how-to-Reset-CSS">We Are learning how to Reset CSS</h2>
   <h4 id="It-will-reset-the-default-CSS-by-the-browser">It will reset the default CSS by the browser</h4>
</body>
</html>

以上是在所有浏览器中都会显示相同的输出。

There is an ongoing debate among developers on which one to choose and which one is better for a smooth flow.

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

结论

There is no much difference between normalizing and resetting as the purpose of both is same which is to preserve the UI of a website and make it compatible to all browsers so the website looks the same in every browser. Both of them have a different approach and depends upon the user’s preference.

以上是重置 CSS 和规范化 CSS 之间的区别？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除