什么是 CSS Reset ?
当我们在编写 CSS 的时候,我们经常遇到一些样式表的默认设置。不同的浏览器默认设置可能不同,这可能会导致我们的元素在不同浏览器中具有不一致的外观和布局。
因此,CSS Reset 是一种用于重置浏览器的默认样式表的技术,以让我们从一个更加明确的起点开始进行样式的编写。
CSS Reset 的常见问题
在使用 CSS Reset 时,我们也要注意到以下常见问题。
虽然重置了默认样式,但是会失去一些基础的样式结构
虽然 CSS Reset 所做的是重置浏览器的默认样式,但是这里的 “默认样式” 包括了很多重要的样式,如标题的正常的字号,表单元素的对齐方式以及列表的缩进等。如果你完全重置所有样式,你需要自己手动定义这些样式。
CSS Reset 并不一定适用于所有的项目
每个项目都需要不同的 CSS Reset 方案,如果你使用错误的方案,会添加一些无谓的 CSS 代码。因此,你需要考虑每个项目的需要。
有些 Reset 方案重置了用来增加样式的 HTML 元素
不同的 Reset 方案有不同的一些细节。一些方案去除了用来设计样式的HTML元素,而另一些则重新定义了它们的样式。这可能会影响到我们写的 HTML 代码。
Reset 方案自动生成的默认样式表可能会过于复杂
一些自动生成的 Reset 方案会为每个元素生成许多 CSS 属性,并使用通配符 (*) 来选择每个元素。如果你使用这个方式,你可能会发现你的样式表很大。这样的 Reset 方案可能会影响到页面的性能。
如何编写 CSS Reset ?
编写好的 Reset 应该是:minimium,comprehensive 和 personalizaed。
Minimum(最低限度)
在 CSS Reset 中,我们仅重置了必要的样式,并尽可能减少对样式的影响。
-- ------------ ------ - ------- -- ----- ----- ---- ----- ------- ------- ---------- --- --- --- --- --- -- ----------- ------ ----- -------- -------- ---- ----- --------- ---- --- ---- ---- ---- -- -- ----------- ------- ------- ---- ---- --- ------ -- -- ---------- --- --- --- --- ------------ ----- ------ ------------- -------- ------ ------ ------ --- --- ----------------------------------------------------------------------------------------------
Comprehensive(全面)
在 Reset 中,我们可以清除所有的默认样式,从而给自己更多的自由空间来进行样式的设置。
-- -------- -- -- ----------------------------------------- ---------- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----------------- -- ---- - ------------ -- ----------------- ----- ------ ----- ---------- ----- -
Personalized(个性化)
个性化 Reset 可以根据项目的需要,自行添加一些样式来覆盖下面示例中未提到的样式。
-- --------------- -- ------------------ - ------- --- ----- ----- -------------- ---- -------- ---- -
再次强调:适用于你的项目
通过以上示例,我们可以看出,所有的 Reset 方案都有自己的一些优缺点。因此,必须以项目的需求为前提来进行 CSS Reset 的编写。
结论
在使用 CSS Reset 时,需要考虑项目的需求。
编写好的 Reset 应该是: minimum,comprehensive 和 personalized。
如果你的项目需要对某些元素进行自定义操作,你可能需要编写自己的 CSS Reset 方案。这样一来,我们就可以从一个更加明确的起点开始进行样式的编写。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6721a0832e7021665e084359