重設 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 web have their ownsifferent user agent stylesheet; to make the webk. 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 bue that mighters d

注意 - 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 themook defaults are preserved by the browsers instead of erasing themook the Lstead. 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 bame in browsers so the website looks the bame in browser different approach and depends upon the user's preference.

以上是重設 CSS 和規範化 CSS 之間的差異？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除