我必须构建一些遗留代码,这让我感觉the cons of global CSS reset。
我有以
开头的旧foo.css
* {margin:0; padding:0;}
我以前将其复制到另一个文件bar.css
,也调整了我的需求( out with CSS reset ),并使用它仅替换foo.css
在代码我写的。我这样做并不担心与网站旧版部分的向后兼容性。
现在这非常麻烦:对于全局变更,我必须记住要修改这两个文件。现在我的bar.css
正在扩展foo.css
,从:
@import url("style.css");
问题是现在我还继承了CSS重置。
有没有办法(†)带来margin
&某些元素(标题,列表等)的padding
属性恢复为默认值 - 应用重置之前的属性?
(†)除了手动将每个属性设置回其初始值之外,如CSS规范中所定义。
答案 0 :(得分:6)
建议的值initial用于将属性设置为其初始值,而不查找显式值。但它仍处于草案阶段,很难在任何浏览器中实现。
而且,这甚至可能不是你想要达到的目标。如果我理解正确,你会想要设置,例如h2元素的顶部和底部边距为浏览器默认值。我认为在CSS中甚至没有任何提议的方法。规范未定义浏览器默认值。例如,margin属性的初始值为0.默认情况下,标题具有顶部和底部边距的原因是浏览器至少在概念上应用了浏览器样式表。 CSS规范建议一个默认的浏览器样式表,但不要求一个,浏览器可能(实际上)偏离建议。
在实践中,在给定情况下的最佳镜头是检查CSS 2.1规范的Appendix D并使用其中给出的值。对于像边距这样的东西,这通常会产生使用浏览器默认值的效果。
答案 1 :(得分:1)
不是希望你能恢复到浏览器默认值,为什么不设置自己的?
您需要做的就是在全局CSS重置下添加声明:
* { margin: 0; }
h1 { margin: 10px 0; }
h1
优先于全局选择器*
。
这有助于normalize your CSS。
答案 2 :(得分:0)
我认为* {margin: auto}
会重置边距(或h1 {margin: auto}
,如果只重置该元素。),但这不适用于填充。从技术上讲,规范是用于填充已经为零,但是,如果浏览器实现它,否则我认为没有办法重置它。