CSS重置,常见元素的默认样式
应用CSS重置后,我想恢复html元素的"正常"行为,例如:p,h1..h6,strong,ul和li。
现在,当我说正常时,我的意思是p元素增加了间距或者回车符(如使用时的结果),或者h1标签的字体大小和粗体以及间距。
我意识到如何设置样式完全取决于我,但是我想恢复一些较常见元素的正常行为(至少作为我以后可以进行调整的起点)。
解决方案
意思是:
* { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address { margin-bottom: 1em; }
?
其实,很抱歉,我误读了问题,我们是在寻求更多类似Eric Meyer的重置@ @ http://meyerweb.com/eric/tools/css/reset/
YUI提供了一个基本的CSS文件,该文件将在所有" A级"浏览器中提供一致的样式。他们还提供了CSS重置文件,因此我们也可以使用它,但是我们表示已经重置了CSS。有关更多详细信息,请访问YUI网站。这就是我一直在使用的,而且效果很好。
应用CSS样式的规则之一是"最终获胜"。这意味着如果CSS重置样式将元素设置为margin:0;; padding:0
,然后可以通过为相同元素声明所需的值来覆盖这些规则。
我们可以在同一文件中执行此操作(我认为YUI提供了单线重置,所以有时我将其作为CSS文件的第一行包含在内),也可以在重置CSS<link />
标签后出现的单独文件中。
我认为按照正常行为,意思是"我最喜欢的浏览器的默认设置"。我们为这些元素建立CSS规则是重置练习的一部分。
现在,我们可能需要研究Blueprint CSS或者其他网格框架。这些网格框架几乎总是首先将样式重设置为空,然后为常用元素建立版式,等等。这可以节省时间和精力。
如果要查看firefox的css默认值,请在发行版中查找一个名为" html.css"的文件(同一目录中应该还有其他一些有用的css文件)。我们可以选择所需的规则,并在重置后应用它们。
另外,CSS2标准还有一个针对html 4的示例样式表。
"在应用CSS重置后,我想恢复html元素的'正常'行为..."
如果我们应用了重置,则必须为我们认为正常的行为添加规则。由于不同浏览器的正常行为各不相同,因此这个问题是毫无根据的。我喜欢@ da5id的答案,使用许多可用的重置之一,并对其进行调整以满足需求。
查看YUI(Yahoo的开源用户界面约定)。
他们有一个基本样式表,可以撤消自己的重置CSS。
他们不建议我们在生产中使用它,因为它会适得其反,但绝对值得检查文件以获取要"撤消"的内容的摘要。
我建议我们观看40分钟的谈话以加快速度。
这是他们的base.css文件的一小段:
ol li { /*giving OL's LIs generated numbers*/ list-style: decimal outside; } ul li { /*giving UL's LIs generated disc markers*/ list-style: disc outside; } dl dd { /*giving UL's LIs generated numbers*/ margin-left:1em; } th,td { /*borders and padding to make the table readable*/ border:1px solid #000; padding:.5em; } th { /*distinguishing table headers from data cells*/ font-weight:bold; text-align:center; }
下载下面的完整样式表或者阅读完整的文档。
Yahoo重设CSS | Yahoo Base(撤消)重置CSS
我个人是BlueprintCSS的忠实拥护者。它会在浏览器中重置样式,并提供一些非常方便的默认值(90%的时间就是我们想要的)。它还提供了一个布局网格,但是如果不需要它,则不必使用它。
WebKit h1的正常行为:
h1 { display: block; font-size: 2em; margin: .67__qem 0 .67em 0; font-weight: bold }
壁虎h1的正常行为:
h1 { display: block; font-size: 2em; font-weight: bold; margin: .67em 0; }
如果我们搜索文件,其余元素应该在那里。