这是讨论特定CSS最佳实践或技巧的系列文章的第一部分。我将讨论一些主题，包括CSS最佳实践、性能优化以及改进工作流程的技巧和技巧。CSS是网页的支柱，所以确保它为SEO优化是很重要的。
你可以检查网站的SEO友好度在这里．今天我们将讨论如何重置你的样式。
重置你的样式，通常被称为CSS重置或CSS重置重置的过程(或更准确的- ?设置)将所有元素的样式设置为基线值，以避免由于内置默认样式设置而导致的跨浏览器差异。
通过重新设置样式，可以避免默认使用浏览器的内置样式，因为不同浏览器的内置样式是不同的。
CSS重置避免浏览器不一致
例如，假设您使用一个锚标记<一><一>标签红色的而且粗体的．
如果你总是为你的<一>元素，那么你可以保证它总是相同的，不管UltraBrowser怎么想<一>元素应该是这样的。CSS控制所有东西的样式H1标签每个段落，所以针对不同的浏览器进行优化是很重要的。
一个简单的例子
示例1:默认情况下段落标签如何呈现。在例1中，我放置了三个无样式的段落< p >容器内部< div >(我为容器div设置了蓝色背景和橙色边框以突出区别)。
默认情况下,在火狐，你会看到在第一段的顶部和容器div的顶部之间有一个空格，在最后一段的底部和容器div的底部之间也有一个空格。
默认情况下这些空间不存在在Internet Explorer．那么火狐和IE，哪个浏览器是正确的呢?没关系．
什么很重要如果不为段落的边距和填充设置样式，那么段落和其他元素之间的间距看起来会不一样。当然，这是一个相当简单的例子。在实践中，CSS重置对于删除不一致的页边距、填充、行高和其他可能导致网页在不同浏览器上看起来不同的属性非常重要。
这就是重设样式的基本理论也就是说你为所有元素设置样式规则，以避免使用浏览器为了你自己。接下来，我们将在实践中讨论它，但首先要介绍一下CSS重置如何成为现代web开发人员的标准实践的历史。
重置到一切开始的地方…
CSS重置的概念最早是在恐龙还在互联网上漫游的时候(确切地说是2004年)由Andrew Krespanis正式讨论的。在他的文章中，他建议在CSS文件的开头使用通用选择器(*)来选择所有元素，并为它们的边距和填充设置0值，如下所示:
* {margin: 0;填充:0;｝
通用选择器的作用类似于通配符搜索，类似于正则表达式编程中的匹配。
因为在这种情况下，*之前没有另一个选择器，所有元素(理论上- .一些浏览器不完全支持它)是一个匹配，因此所有元素的所有边距和填充都被移除(因此我们避免了例1中所示的间距差异)。将通用选择器margin/padding重置到前面的例子中，我们现在删除了所有浏览器之间所有不一致的间距(换句话说，我们不让浏览器为我们思考，我们告诉他们谁是老大)。示例2:应用通用选择器边距/填充重置但现在我们没有任何段落之间的间距，所以在通用选择器重置下面的某个地方，我们会声明方式我们希望我们的段落看起来像。
你可以用很多方法来做，你可以在段落的开头或顶部使用页边距(或填充物)，或者两者都使用。您可以使用ems作为单位、像素或百分比。重要的是我们选择浏览器渲染它的方式。
在我们的例子中，我选择在段落的顶部和底部添加边距(而不是填充)——但这是我的选择，你可能想用不同的方式来做。以下是我使用的方法:
* {margin:0;填充:0;} p {margin:5px 0 10px 0;｝
示例3:在通用选择器之后声明一个样式规则。
注意:我用来讨论的例子是一个简化的例子。如果你只使用段落对于你的网页而不是其他元素，你不会想要使用通用选择器将你的页边距重置为0，只是为了在你的段落后面声明一个样式规则。
我们将在后面的页面中更全面地讨论这一点以及其他最佳实践。
不久之后- CSS大师埃里克·迈耶进一步建立在重置边缘和填充的概念上。
在埃里克·迈耶的探索他讨论道Tanek的工作是撤销默认的HTML样式(他称之为undohtml.css),不仅重置页边距和填充，也重置其他属性，如行高、字体样式和列表样式(一些浏览器对无序列表项使用不同的项目符号)。经过多次迭代和改进，我们得到了一个美妙的解决方案CSS重置重新加载CSS重置，这不仅使这种CSS重置方法比通用选择器方法更准确，因为它通过命名所有可能的HTML标记使用了更高的特异性(因为通用选择器无法将重置应用于所有HTML标记)，而且还为一些麻烦的元素设置了默认值，如表(其中border-collapse属性在不同浏览器中呈现不一致)。当然，还有其他方法可以重置你的CSS(比如Yahoo!我目前在Six Revisions网站上使用的YUI Reset CSS)，你也可以根据自己的喜好和项目需求制作自己的CSS。
现在让我们通过一些技巧和最佳实践应用CSS重置解决方案到你自己的项目。
应用CSS重置:技巧和最佳实践
1.从决定开始完全你将如何重置你的风格
上面，我已经向你展示了CSS重置的两个极端。从使用通用选择器的甜美而简单的方法(我不建议你使用)到使用Eric Meyer的更复杂的方法CSS重置重新加载(编辑:或最新版本，重置CSS)．我还简要地提到了YUI Reset CSS，你可以直接使用YDN，这样你就不必为它服务，当你的网页被请求时，为你节省一些服务器资源。
你也可以自己卷，根据你的具体需要定制。没有预先定义的一步一步的方法来确定重置你的风格的正确方法;重要的是，它能够补充您自己的开发风格和原则。为了帮助你做出选择，这里有一些很好的资源可以帮助你开始:
- 一个杀手收集全局CSS重置样式
- 少即是多——我选择的Reset CSS (by Ed Elliot)
2.你的CSS重置必须是浏览器看到的第一件事(废话)。
在为元素声明了样式规则之后重新设置样式会把你搞得一团糟。你会挠头想为什么你宣称支持的保证金.some-class不是工作。
因此，浏览器看到的第一件事是你的CSS重置是至关重要的。现在笑吧，但它是常见错误在生疏的老兵和初学者中。
注意:为了防止你落入“people-prone-to-this-common- error”的范畴，下面是为什么它必须在你的CSS文档顶部的原因:CSS以自顶向下的层次结构工作，如果有冲突/冗余的样式规则声明，则CSS文档下面的规则优先．
为了继续白费口舌，让我们看一个例子。
我用的是埃里克·梅耶的CSS重置重新加载逐字在这个例子中后的页边距声明样式规则< p >元素。示例4我在示例的HTML文档中有样式规则(为了方便)，这样你就可以查看源代码，看看我的意思。本质上，你看到的是，即使我宣布了边际< p >
3.有一个单独的CSS文档为您的CSS重置
我不得不提到这个技巧，因为这是常见的做法，也是许多人提倡的做法。我在一个大CSS文件(当然，具体情况会有所不同)，因为页面性能的原因(我将把这个讨论留到另一天，也许是在另一篇CSS技巧文章中)，但一个常见的做法是一个单独的CSS文档(命名为reset.css)，您可以在整个项目中重用。这可以帮助你保持你的样式规则的组织性和模块化，但更重要的是，它使它更容易改变和调整你的CSS重置，而不必回到你的旧项目和更新它。
4.避免使用通用选择器重置
通用选择器重置是重置你的样式的第一个真正的概念(至少我知道，所以如果我错了请纠正我)，但它有许多缺点和浏览器不一致(这是什么我们试图摆脱首先)，这是一个糟糕的选择。我已经提到IE并没有像预期的那样应用和支持它;它不能覆盖你所有的基础，你应该只在简单、简短、静态和可预测的网页上使用它(如果你真的必须使用它)。当你发布一个“一刀切”的解决方案时，这个技巧尤其适用，比如内容管理系统主题，它会以不可预知的方式被使用和攻击。
使用一个坚实的基础在一开始-一个广泛的CSS重置方法-确保你真正重置你的样式，它值得在你的CSS文档中增加字节。
5.避免CSS Reset和后续样式声明的冗余
我不喜欢为我的CSS重置使用单独的样式表的另一个原因是，它可能会导致与之后的其他样式规则冗余。不重复你的风格是一个很好的练习，尽管有时它无法避免(因为你很懒)像我这样的)，你应该努力去尝试。回到Eric Meyer的CSS Reset Reloaded规则集，他给出了的默认值行高，颜色,背景body元素的:
正文{line-height: 1;颜色:黑色;背景:白色;｝
如果你已经知道body style属性将是(例如):
- background - color: # cccccc
- 颜色:# 996633
- 你想水平平铺背景图像
在文档后面为body元素声明另一个CSS选择器是没有意义的-你应该将你的CSS重置的部分替换为以下内容:
正文{line-height: 1;Color:# 996633 background:#ccc url(your- tiles -image.gif) repeat-x左上角;｝
不要害怕使用你自己的判断．调整、重组、删除和添加你认为合适的东西，因为它属于你的特定情况。CSS因不同的业务和行业而不同，因为目标不同。
服装店的CSS是不同的电工因为每个网站的独特性和主题。CSS从来不是一个尺寸适合所有的代码，这就是为什么它是重要的调整你的CSS基于你的判断和你的网站的知识。Eric Meyer在他关于CSS Reset Reloaded的讨论中用以下语句回应了这一点:
[…]这是这里的重点:这不是一个“每个人都必须以某种方式使用这些风格而不作改变”的情况。
进一步的阅读
这里有一些关于重新设置样式的优秀资源，我推荐你阅读。
[WSG]零默认填充/空白
可能是Web标准组邮件列表中讨论通用选择器重置的第一个线程之一。
通用选择器
Eric Meyer讨论了通用选择器的工作原理。
无CSS复位
乔纳森·斯努克(Johnathan Snook)讨论了他为什么不重新设定自己的风格;来自最受尊敬的web开发人员/设计师的有力反驳。
为什么我喜欢(和使用)重置CSS
一个关于为什么重置CSS是一个好主意的简短而甜蜜的讨论。
Tripoli - HTML渲染的CSS标准
Tripoli是另一个流行的CSS重置选项，它有几个版本，所以你可以使用最适合你的项目。
关于CSS技巧系列
的CSS技巧系列是一组文章，专注于一个特定的CSS技巧或最佳实践。在每篇文章中，我将解构一个特定的技巧/标准/最佳实践，并提供它们的上下文、优点和缺点。我相信两者都要学会理论而且实践以及在严格、不妥协的标准之间取得平衡而且实用，这样你就有机会学习就像人们通常做的那样，以及原因你不必盲目地追随他们．
我将尽可能全面地介绍每个CSS技巧，但我取决于你如果我说错了，请纠正我，详细说明我略读过的内容，澄清可能让我们的初级开发人员感到困惑的内容，并提供您自己对这个主题的输入-所以我强烈鼓励你在评论中发表意见．要查看到目前为止所有的CSS技巧文章，您可以转到CSS类别。
