CSS重置，常用元素的默认样式
应用 CSS 重置后，我想恢复 html 元素的“正常”行为，例如：p、h1..h6、strong、ul 和 li。
现在，当我说正常时，我的意思是，例如 p 元素在使用时添加间距或回车符，或者 h1 标签的字体大小和粗体以及间距。
我意识到这完全取决于我想要如何设置样式，但我想恢复一些更常见元素的正常行为（至少作为我稍后可以调整的起点）。
After applying a CSS reset, I want to get back to 'normal' behavior for html elements like: p, h1..h6, strong, ul and li.
Now when I say normal I mean e.g. the p element adds spacing or a carriage return like result when used, or the size of the font and boldness for a h1 tag, along with the spacing.
I realize it is totally up to me how I want to set the style, but I want to get back to normal behavior for some of the more common elements (at least as a starting point that I can tweak later on).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（11）
我不会默认重置所有元素，因为默认样式在某种程度上取决于浏览器，因此它们因浏览器而异。 不要使用 ul、ol { list-style: none; 之类的东西 }，我添加一个 CSS 类，例如
r或reset，然后我指定它是否是一个ulr类，重置它，否则请保持不变。顺便说一句，您需要将
class="reset"（例如）添加到所有这些元素，这是额外的工作和代码，但是最后您的所有默认样式都不会受到影响作为回报！I'm not resetting all the elements by default because the default styles are somehow browser depended, so they varies from browser to browser. Instead of using something like
ul, ol { list-style: none; }, I'm adding a CSS class likerorresetand then I specify that if that is aulwhich has arclass, reset it or otherwise please leave it to be untouched.By the way you need to add
class="reset"(for example) to all of those elements, which is extra work and code, however you'd have all of your default styles untouched at the end in return!一旦你为元素的 CSS 属性分配了一个值，就无法取回它的“正常”值，假设“正常”意味着“浏览器默认值”，就像这里的意思一样。 因此，让
h1元素具有浏览器默认font-size的唯一方法是根本不为其设置属性在你的 CSS 代码中。因此，要使某些属性和元素免于 CSS 重置，您需要使用更有限的 CSS 重置。 例如，您不得使用
* { font-size: 100% }，而应将*替换为选择器列表，例如input, textarea { font-size : 100% }（列表可能相当长，但例如浏览器默认的font-size仅对于少数元素与 100% 不同）。当然可以将属性设置为您期望浏览器默认值。 无法保证这会对当前和未来的所有浏览器产生预期的效果。 但对于某些属性和元素来说，这可能相对安全，因为默认值往往是相似的。
特别是，您可以使用 HTML5 CR 中的渲染部分。 它描述了“预期渲染”——不是一个要求，尽管浏览器供应商可能会决定声明与它们的一致性（如果他们愿意的话），并且通常这可能会使实现在这方面保持相当相似。 例如，对于
h1，预期设置为（此处收集到一条规则中 - 在 HTML5 CR 中，它们分散在各处）：（还有其他上下文规则。例如，嵌套
h1section内预计会影响设置。）Once you have assigned a value to a CSS property of an element, there is no way getting back the “normal” value for it, assuming “normal” means “browser default”, as it seems to mean here. So the only way to have, say, an
h1element have the browser defaultfont-sizeis to not set the property at all for it in your CSS code.Thus, to exempt some properties and elements from CSS reset, you need to use a more limited CSS reset. For example, you must not use
* { font-size: 100% }but replace*by a list of selectors, likeinput, textarea { font-size: 100% }(the list could be rather long, but e.g. browser defaults forfont-sizediffer from 100% for a few elements only).It is of course possible to set properties to values that you expect to be browser defaults. There is no guarantee that this will have the desired effect on all browsers, current and future. But for some properties and elements, this can be relatively safe, because the defaults tend to be similar.
In particular, you might use section Rendering in HTML5 CR. It describes “expected rendering” – not a requirement, though browser vendors may decide to claim conformance to them if they so wish, and generally this will probably keep implementations rather similar in this respect. For example, for
h1the expected settings are (collected here into one rule – in HTML5 CR they are scattered around):(There are additional contextual rules. E.g., nesting
h1insidesectionis expected to affect the settings.)“应用 CSS 重置后，我想恢复 html 元素的‘正常’行为...”
如果您应用了重置，则必须添加您认为正常的规则行为。。 由于正常行为因浏览器而异，所以这个问题是不合逻辑的。 我喜欢 @da5id 的答案 - 使用许多可用的重置之一并调整它以满足您的需求。
"After applying a CSS reset, I want to get back to 'normal' behavior for html elements..."
If you've applied a reset, you would then have to add the rules for what you believe to be normal behavior. Since normal behavior varies from browser to browser this question is something of a non sequitur. I like @da5id's answer - use one of the many available resets and tweak it to suit your needs.
WebKit h1 的正常行为：
Gecko h1 的正常行为：
其余元素应该如果您搜索文件，请在那里。
Normal behaviour for WebKit h1:
Normal behaviour for Gecko h1:
The rest of the elements should be there if you search the files.
如果您想查看 Firefox 的 css 默认值，请在发行版中查找名为“html.css”的文件（同一目录中应该还有一些其他有用的 css 文件）。 您可以选择所需的规则，并在重置后应用它们。
此外，CSS2 标准还有一个 html 4 的示例样式表。
If you want to see the css defaults for firefox, look for a file called 'html.css' in the distribution (there should be some other useful css files in the same directory). You could pick out the rules that you want, and apply them after a reset.
Also, the CSS2 standard has a sample stylesheet for html 4.
查看 YUI（雅虎的开源用户界面约定）。
他们有一个基本样式表，可以撤消自己的重置 CSS。
他们实际上并不建议您在生产中使用它 - 因为它会适得其反，但绝对值得检查该文件以获取您想要“撤消”的内容的相关片段。
我建议您观看 40 分钟的演讲以加快速度。
这是他们的 base.css 文件的一小段：
下载下面的完整样式表或阅读完整文档。
雅虎重置 CSS | Yahoo Base（撤消）重置 CSS
Check out YUI (Yahoo's open source user interface conventions).
They have a base stylesheet that undoes their own reset css.
They dont actaully recommend you use it in production - since its counter productive but definitely might be worth checking out the file to get relevant snippets for what you want to 'undo'.
I recommend you watch the 40 minute talk to get up to speed.
Heres a short snippet of their base.css file :
Download the full stylesheets below or read full documentation.
Yahoo reset css | Yahoo base (undo) reset css
不要使用完全的 CSS 重置，而是考虑使用类似 Normalize 的东西，它“保留有用的默认值” ”。
要了解您浏览器的默认设置，请打开一个包含列表的纯文本 HTML 文件，然后使用 CSS 调试器（例如 Firebug，然后在
Compated选项卡下查看。Rather than using a total CSS reset, think about using something like Normalize, which "preserves useful defaults".
To find out what your browser thinks of as default, open a plain HTML file with lists and view the lists with a CSS debugger like Firebug, and look under the
Computedtab.你的意思是：
？
实际上，抱歉我误读了你的问题，你追求的东西更像是 Eric Meyer 的完全重置 @ http://meyerweb.com/eric/tools/css/reset/
You mean like:
?
Actually, sorry I mis-read your question, you're after something more like Eric Meyer's total reset @ http://meyerweb.com/eric/tools/css/reset/
我个人是 BlueprintCSS 的忠实粉丝。 它会跨浏览器重置样式并提供一些非常方便的默认值（90% 的情况下都是您想要的）。 它还提供了布局网格，但如果不需要，则不必使用它。
I'm personally a big fan of BlueprintCSS. It resets styles across browsers and provides some really convenient defaults (that are what you want 90% of the time). It also provides a layout grid, but you don't have to use that if you don't need it.
应用 CSS 样式的规则之一是“最后获胜”。 这意味着如果您的 CSS 重置样式将元素设置为
margin:0; padding:0然后，您可以通过声明相同元素所需的值来覆盖这些规则。您可以在同一个文件中执行此操作（我认为 YUI 提供了单行重置，因此我有时将其作为 CSS 文件中的第一行）或在重置 CSS 之后出现的单独文件中执行此操作
标签。我认为正常行为你的意思是“我最喜欢的浏览器的默认设置”。 为这些元素构建 CSS 规则是重置练习的一部分。
现在您可能想研究 Blueprint CSS 或其他网格框架。 这些网格框架几乎总是首先将样式重置为空，然后为常见元素构建排版等。这可以节省您一些时间和精力。
One of the rules in applying CSS styles is "last in wins." This means if your CSS reset styles set elements to
margin:0; padding:0you can then override these rules by declaring your desired values for the same elements afterwards.You can do this in the same file (YUI offers a one-liner reset I think so I sometimes include it as the first line in my CSS file) or in a separate file that appears after the reset CSS
<link/>tag.I think by normal behavior you mean "the defaults for my favorite browser." Your building up CSS rules for these elements is a part of the reset exercise.
Now you might want to look into Blueprint CSS or other grid frameworks. These grid frameworks almost always first reset styles to nothing, then build up the typography for common elements, etc. This could save you some time and effort.
YUI 提供了一个基本 CSS 文件，该文件将在所有 'A 级' 浏览器。 他们还提供了 CSS 重置文件，因此您也可以使用它，但您说您已经重置了 CSS。 有关更多详细信息，请访问 YUI 网站。 这就是我一直在使用的并且效果非常好。
YUI provides a base CSS file that will give consistent styles across all 'A-grade' browsers. They also provide a CSS reset file, so you could use that as well, but you say you've already reset the CSS. For further details go to the YUI website. This is what I've been using and it works really well.