Question

应用CSS重置后，我希望恢复html元素的“正常”行为，例如：p，h1..h6，strong，ul和li。

现在，当我说正常时我指的是p元素在使用时添加间距或回车状态，或者h1标签的字体和粗体大小以及间距。

我意识到完全取决于我如何设置样式，但我想恢复一些更常见元素的正常行为（至少作为我稍后可以调整的起点）。

Answer 1

YUI提供了一个基本CSS文件，可以在所有'A-grade'个浏览器中提供一致的样式。它们还提供了CSS重置文件，因此你也可以使用它，但是你说你已经重置了CSS。有关详细信息，请转到YUI website。这就是我一直在使用它并且效果非常好。

Answer 2

应用CSS样式的一个规则是“最后胜利”。这意味着如果CSS重置样式将元素设置为margin:0; padding:0，则可以通过在之后声明相同元素的所需值来覆盖这些规则。

你可以在同一个文件中执行此操作（YUI提供单行重置，我认为我有时将其包含在我的CSS文件的第一行）或重置CSS {{1}后出现的单独文件中} tag。

我认为正常行为是指“我最喜欢的浏览器的默认值”。您为这些元素构建CSS规则是重置练习的一部分。

现在您可能想要查看Blueprint CSS或其他网格框架。这些网格框架几乎总是首先将样式重置为空，然后为常见元素构建排版等。这可以节省您一些时间和精力。

Answer 3

你的意思是：

* {
    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/

Answer 4

不要使用全部CSS重置，而是考虑使用Normalize之类的内容，“保留有用的默认值”。

要找出您的浏览器默认的内容，请打开包含列表的普通 HTML文件，并使用CSS调试器查看列表，如Firebug，并查看Computed标签下的内容。

Answer 5

查看YUI（雅虎的开源用户界面约定）。

他们有一个基本样式表来撤消他们自己的重置css。他们不建议你在生产中使用它 - 因为它反效果，但绝对值得检查文件以获得你想要'撤消'的相关片段。

我建议您观看40分钟talk以加快速度。

下面是他们的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;
}

下载完整的样式表或read full documentation.

Yahoo reset css | Yahoo base (undo) reset css

Answer 6

我个人是BlueprintCSS的粉丝。它可以跨浏览器重置样式，并提供一些非常方便的默认值（这是你想要的90％的时间）。它还提供了一个布局网格，但如果您不需要它，则不必使用它。

Answer 7

如果你想查看firefox的css默认值，请在发行版中查找名为“html.css”的文件（在同一目录中应该有一些其他有用的css文件）。您可以选择所需的规则，并在重置后应用它们。

此外，CSS2标准有sample stylesheet for html 4。

Answer 8

Normal behaviour for WebKit h1：

h1 {
    display: block;
    font-size: 2em;
    margin: .67__qem 0 .67em 0;
    font-weight: bold
}

Normal behaviour for Gecko h1：

h1 {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin: .67em 0;
}

如果您搜索文件，其他元素应该在那里。

Answer 9

“应用CSS重置后，我想恢复html元素的'正常'行为......”

如果您已应用重置，则必须为您认为正常行为的内容添加规则。由于正常行为因浏览器而异，因此这个问题不合适。我喜欢@ da5id的答案 - 使用众多可用的重置之一并进行调整以满足您的需求。

Answer 10

一旦你为一个元素的CSS属性赋值，就没有办法得到它的“正常”值，假设“正常”意味着“浏览器默认”，这似乎意味着这里。因此，拥有浏览器默认h1的{{1}}元素的唯一方法是在CSS代码中根本不为其设置。

因此，要从CSS重置中免除某些属性和元素，您需要使用更有限的CSS重置。例如，您不能使用font-size，而是将* { font-size: 100% }替换为选择器列表，例如*（列表可能相当长，但例如input, textarea { font-size: 100% }的浏览器默认值不同仅从少数元素的100％开始。）

当然可以将属性设置为您期望为浏览器默认值的值。无法保证这会对所有浏览器，当前和未来产生预期效果。但对于某些属性和元素，这可能相对安全，因为默认值往往相似。

特别是，您可以在HTML5 CR中使用部分Rendering。它描述了“预期呈现” - 这不是一个要求，尽管浏览器供应商可能会决定声称他们是否符合要求，并且通常这可能会使这些实现在这方面保持相似。例如，对于font-size，预期的设置是（在此处收集到一个规则中 - 在HTML5 CR中它们分散在各处）：

h1

（还有其他上下文规则。例如，在h1 { unicode-bidi: isolate; display: block; margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }内嵌套h1预计会影响设置。）

Answer 11

默认情况下，我没有重置所有元素，因为默认样式在某种程度上取决于浏览器，因此它们因浏览器而异。我没有使用ul, ol { list-style: none; }这样的内容，而是添加了r或reset这样的CSS类，然后指定如果ul为r类，重置它或其他请保持不受影响。

顺便说一下，你需要将class="reset"（例如）添加到所有这些元素中，这是额外的工作和代码，但是你必须在结束时保持所有默认样式不被触及！ / p>

CSS重置，常见元素的默认样式

11 个答案: