CSS 重置，常用元素的默认样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/99643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Reset, default styles for common elements
提问by public static
After applying a CSS reset, I want to get back to 'normal' behavior for html elements like: p, h1..h6, strong, ul and li.
应用 CSS 重置后，我想恢复 html 元素的“正常”行为，例如：p、h1..h6、strong、ul 和 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.
现在，当我说正常时，我的意思是例如 p 元素在使用时添加间距或回车之类的结果，或者 h1 标签的字体大小和粗体，以及间距。
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).
我意识到如何设置样式完全取决于我，但我想为一些更常见的元素恢复正常行为（至少作为我以后可以调整的起点）。
回答by Steven Oxley
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.
YUI 提供了一个基本的 CSS 文件，它将在所有“A 级”浏览器中提供一致的样式。他们还提供了一个 CSS 重置文件，因此您也可以使用它，但是您说您已经重置了 CSS。有关更多详细信息，请访问YUI 网站。这是我一直在使用的，而且效果很好。
回答by Carl Camera
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.
应用 CSS 样式的规则之一是“最后胜利”。这意味着如果您的 CSS 重置样式将元素设置为margin:0; padding:0您可以通过在之后声明相同元素的所需值来覆盖这些规则。
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.
您可以在同一个文件中执行此操作（我认为 YUI 提供了一个单行重置，因此我有时会将其作为我的 CSS 文件中的第一行）或出现在重置 CSS<link/>标记之后的单独文件中。
I think by normal behavioryou mean "the defaults for my favorite browser." Your building up CSS rules for these elements is a part of the reset exercise.
我认为正常行为的意思是“我最喜欢的浏览器的默认设置”。为这些元素构建 CSS 规则是重置练习的一部分。
Now you might want to look into Blueprint CSSor 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.
现在您可能想要研究Blueprint CSS或其他网格框架。这些网格框架几乎总是首先将样式重置为空，然后为常见元素构建排版等。这可以为您节省一些时间和精力。
回答by da5id
You mean like:
你的意思是：
* {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address {
margin-bottom: 1em;
}
?
?
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/
实际上，对不起，我误读了您的问题，您所追求的更像是 Eric Meyer 的完全重置 @ http://meyerweb.com/eric/tools/css/reset/
回答by Jake Rayson
Rather than using a total CSS reset, think about using something like Normalize, which "preserves useful defaults".
与其使用完全的 CSS 重置，不如考虑使用Normalize 之类的东西，它“保留有用的默认值”。
To find out what yourbrowser thinks of as default, open a plainHTML file with lists and view the lists with a CSS debugger like Firebug, and look under the Computedtab.
要了解您的浏览器将什么视为默认值，请打开一个带有列表的纯HTML 文件，并使用诸如Firebug 之类的 CSS 调试器查看列表，然后查看Computed选项卡下的内容。
回答by Simon_Weaver
Check out YUI (Yahoo's open source user interface conventions).
查看 YUI（雅虎的开源用户界面约定）。
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'.
他们有一个基本样式表，可以撤消他们自己的重置 css。他们实际上并不建议您在生产中使用它 - 因为它会适得其反，但绝对值得检查该文件以获取您想要“撤消”的相关片段。
I recommend you watch the 40 minute talkto get up to speed.
我建议您观看 40 分钟的演讲以加快速度。
Heres a short snippet of their base.css file :
这是他们的 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;
}
Download the full stylesheets below or read full documentation.
下载下面的完整样式表或阅读完整文档。
回答by zenazn
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.
我个人是BlueprintCSS 的忠实粉丝。它可以跨浏览器重置样式并提供一些非常方便的默认值（90% 的情况下都是您想要的）。它还提供了一个布局网格，但如果您不需要它，则不必使用它。
回答by robertc
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;
}
The rest of the elements should be there if you search the files.
如果您搜索文件，其余元素应该在那里。
回答by Daniel James
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.
如果您想查看 firefox 的 css 默认值，请在发行版中查找名为“html.css”的文件（在同一目录中应该还有其他一些有用的 css 文件）。您可以选择所需的规则，并在重置后应用它们。
Also, the CSS2 standard has a sample stylesheet for html 4.
回答by Traingamer
"After applying a CSS reset, I want to get back to 'normal' behavior for html elements..."
“应用 CSS 重置后，我想恢复 html 元素的‘正常’行为......”
If you've applied a reset, you would then have to add the rules for what you believe to be normal behavior. Since normal behaviorvaries 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.
如果您应用了重置，则必须为您认为正常的行为添加规则。由于正常行为因浏览器而异，所以这个问题是不合理的。我喜欢@da5id 的回答 - 使用许多可用的重置之一并对其进行调整以满足您的需求。
回答by Jukka K. Korpela
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 default font-sizeis to not set the property at all for itin your CSS code.
一旦你为一个元素的 CSS 属性赋值，就没有办法恢复它的“正常”值，假设“正常”意味着“浏览器默认”，就像这里的意思。所以让一个h1元素拥有浏览器默认值的唯一方法font-size是在你的 CSS 代码中根本不设置它的属性。
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, like input, textarea { font-size: 100% }(the list could be rather long, but e.g. browser defaults for font-sizediffer from 100% for a few elements only).
因此，要从 CSS 重置中免除某些属性和元素，您需要使用更有限的 CSS 重置。例如，您不能使用选择器列表* { font-size: 100% }而是替换*为选择器列表，例如input, textarea { font-size: 100% }（列表可能很长，但例如浏览器默认值font-size仅针对少数元素与 100% 不同）。
It is of course possible to set properties to values that you expectto 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 Renderingin 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):
特别是，您可能会使用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;
}
(There are additional contextual rules. E.g., nesting h1inside sectionis expected to affect the settings.)
（还有其他上下文规则。例如，嵌套h1在内部section预计会影响设置。）
