54

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

现在，当我说正常时，我的意思是，例如 p 元素在使用时添加间距或类似结果的回车，或者 h1 标签的字体大小和粗度，以及间距。

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

4

11 回答 11

37

YUI 提供了一个基本的 CSS 文件，它将在所有“A 级”浏览器中提供一致的样式。他们还提供了一个 CSS 重置文件，所以你也可以使用它，但你说你已经重置了 CSS。有关详细信息，请访问YUI 网站。这是我一直在使用的，而且效果很好。

于 2008-09-19T04:43:33.370 回答
10

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

您可以在同一个文件中执行此操作（我认为 YUI 提供了单行重置，因此我有时将其作为我的 CSS 文件的第一行包含）或在重置 CSS<link/>标记之后出现的单独文件中执行此操作。

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

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

于 2008-09-19T04:46:27.997 回答
8

你的意思是：

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

于 2008-09-19T04:30:55.617 回答
6

与其使用完全的 CSS 重置，不如考虑使用Normalize之类的东西，它“保留有用的默认值”。

要了解您的浏览器默认设置的内容，请打开一个带有列表的纯HTML 文件，并使用诸如Firebug之类的 CSS 调试器查看列表，然后查看Computed选项卡下的内容。

于 2011-11-10T16:14:24.827 回答
5

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

他们有一个基本样式表，可以撤消他们自己的重置 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;
}

下载下面的完整样式表或阅读完整文档。

雅虎重置 CSS | 雅虎基地（撤消）重置CSS

于 2009-01-25T01:03:04.747 回答
3

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

于 2009-01-25T01:07:35.377 回答
2

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

此外，CSS2 标准有一个html 4 的示例样式表。

于 2008-09-20T18:37:11.667 回答
2

WebKit h1 的正常行为：

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

Gecko h1 的正常行为：

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

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

于 2009-12-23T23:13:08.327 回答
1

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

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

于 2008-10-17T16:16:26.480 回答
0

一旦你给一个元素的 CSS 属性赋值，就没有办法取回它的“正常”值，假设“正常”意味着“浏览器默认”，就像这里的意思一样。因此，让一个h1元素拥有浏览器默认值的唯一方法font-size是在 CSS 代码中根本不为其设置属性。

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

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

特别是，您可能会使用HTML5 CR 中的渲染部分。它描述了“预期渲染”——不是一个要求，尽管浏览器供应商可能会根据他们的意愿决定声明与它们的一致性，并且通常这可能会使实现在这方面保持相当相似。例如，对于h1预期的设置（这里收集到一个规则中——在 HTML5 CR 中它们分散在各处）：

h1 {
unicode-bidi: isolate;
display: block;
margin-top: 0.67em;
margin-bottom: 0.67em;
font-size: 2.00em;
font-weight: bold;
}

（还有额外的上下文规则。例如，嵌套h1在里面section预计会影响设置。）

于 2013-07-28T08:53:24.477 回答
-1

默认情况下，我不会重置所有元素，因为默认样式在某种程度上取决于浏览器，因此它们因浏览器而异。我没有使用类似的东西ul, ol { list-style: none; }，而是添加了一个类似的 CSS 类rorreset然后我指定如果这是一个ul有r类的，请重置它，否则请保持不变。

顺便说一句，您需要添加class="reset"（例如）所有这些元素，这是额外的工作和代码，但是作为回报，您最终会保留所有默认样式！

于 2012-12-21T07:47:41.113 回答