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>
以上是将在所有浏览器中看起来相同的输出。
开发者之间正在就选择哪一个以及哪一个更适合流畅流程进行持续讨论。
规范化保留了有用的默认样式并删除了那些无用的样式,而重置则删除了浏览器的所有样式。在重置中,我们将不得不重新声明所有样式才能重置浏览器,而规范化将保留所需的样式并仅删除不需要的样式。规范化易于使用,是一种现代技术。
结论
规范化和重置之间没有太大区别,因为两者的目的相同,都是为了保留网站的 UI 并使其与所有浏览器兼容,以便网站在每个浏览器中看起来都相同。它们都采用了不同的方法,具体取决于用户的偏好。