本指南介绍了由世界各地的web开发人员和设计师创建的各种各样的CSS重置。
虽然几乎所有这些CSS重置通常都是免费提供给公众使用的(许多通过创作共用许可)，但在将它们用于您的项目之前，您有责任检查使用条款。
以下是本指南第1部分，其中CSS重置的历史讨论了;建议您在阅读本指南之前先阅读该指南。
这是关于CSS重置主题的三篇系列文章的第2部分。
在整理这份指南的过程中2007年的集合重置Jeff Starr——他在Six Revisions网站上发表过文章——被作为出发点。
“硬”重置
如在第1部分在这个系列中，“硬”重置的最初版本是由网页设计师Andrew Krespanis设计的:
*{填充:0;保证金:0;}
没过多久，人们就加了进来边界:0;和大纲:0;的属性列表，给我们:
*{填充:0;保证金:0;边界:0;大纲:0;｝
由于通用选择器(＊)，这条简洁的风格规则对任何使用它的网页都有强大的改变作用。
不幸的是，由于这种无所不包的选择器的不良影响，许多设计师已经放弃了这种方法，转而采用更可控的方法。
Tantek Çelik的undohtml.css(2010版本)
Tantek Çelik，被认为在2004年开始使用CSS重置，今年更新了他的重置。以下是更新的版本undohtml.css：
/* undohtml.css */ /* (c) 2004-2010 Tantek Çelik。保留部分版权。http://tantek.com */ /*此样式表采用创作共用许可协议。*/ /* http://creativecommons.org/licenses/by/2.0 */ /*目的:撤销一些常见浏览器的默认样式*/ /*链接下划线往往使超文本的可读性降低，因为下划线掩盖了单词*/的下半部分的形状:link，:visited,ins {text-decoration:none}导航列表没有列表标记，默认标记适用于项目列表*/Nav ul, Nav ol {list style:none}/*避免浏览器默认不一致的标题字体大小*/ /*和pre/code/kbd too */H1,h2,h3,h4,h5,h6,pre,code,kbd {font-size:1em;｝/*删除(浏览器之间)不一致的默认的ul,ol填充或空白*/ /*标题上的默认间距与正常的行间间距根本不匹配，所以让我们去掉它。*/ /*清除pre, form, body, html, p, blockquote周围的空格*/ /*表单元素是奇怪的不一致的，不太CSS可模拟。*/ /*尽管如此还是去掉了空白和填充*/Dl,ul,ol,li, h1,h2,h3,h4,h5,h6, html,body,pre,p,blockquote, form,fieldset,input,label {margin:0;填充:0}/*谁认为蓝色链接的图像边框是一个好主意?没有缩写*/缩写，img, object, a img，:link img，:visited img, a object，:link object，:visited object {border:0}/*去斜体地址，缩写*/地址，缩写{font-style:normal}/*去除本地wifi连接插入的广告帧，例如AnchorFree */Iframe:not(.auto-link) {display:none !重要;可见性:隐藏!重要;左距:-10000px !重要}/*更多的清漆剥离根据需要…* /
样式表中的注释解释了更新背后的思想，但重申一下，这里是更新文件的分解:
- 删除下划线(
文字修饰:没有)从链接 - 从有序/无序列表中删除样式属性
- 调整标题元素的大小(
<标题>通过<编辑>)以及精准医疗，代码,kbd元素 - 从大多数HTML元素中删除空白和填充
- 删除链接图像周围的边框。
<一> < img / > < / >） - 的斜体
地址而且简写的元素 - 呈现
iframes隐形，主要是为了防止“本地wifi连接插入的广告帧”出现
穷人的重置
“可怜人的重置”设置保证金，填充，字体大小,边界的超文本标记语言而且身体元素而不是所有元素。这不仅消除了对通用选择器的依赖，而且在重置元素和CSS属性方面也更加保守。
Html，体{padding: 0;} HTML {font-size: 1em;} body {font-size: 100%;} a img，:link img，:visited img {border: 0;}
Siolon重置
在2008年,克里斯Poteet开发了一种混合重置，结合了一些CSS属性的通用选择器重置，以及个别元素的一些选定(和特殊)重置值，如表格而且李：
* {vertical-align:基线;字体类型:继承;字体样式:继承;字体大小:100%;边界:没有;填充:0;Margin: 0;} body {padding: 5px;} h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {Margin: 20px 0;} li, dd, blockquote {Margin -left: 40px;} table {border-collapse: collapse;border-spacing: 0;}
Poteet说，“你的想法是拦截默认的浏览器样式表(在级联中首先使用)，重置，然后应用泛型样式，包括边距/填充。”
曼重置
设计/开发人员肖恩·曼使用以下方法有针对性的全局重置在他的个人网站上:
Body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {padding: 0;}表{border-collapse:崩溃;}地址，标题，引用，代码，dfn, em, h1, h2, h3, h4, h5, h6, strong, th, var {font-weight: normal;} ul {list-style: none} caption, th {text-align: left;} h1, h2, h3, h4, h5, h6 {font-size: 1.0em;} q:before, q:after {content: ";} a, ins {text-decoration: none;}
英曼重置让人想起了精简版的Eric Meyer的重置CSS．
的黎波里重置
其中最深远的重置埃里克迈耶的重置CSS是的黎波里重置由大卫海尔辛。它的目的是与基本样式表一起工作，在重置后重新构建CSS。
* {margin: 0;填充:0;文字修饰:没有;字体大小:1 em;}代码，kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp，明文{font:继承;字体大小:1 em;} dfn, i, cite, var, address, em {font-style: normal;} th, b, strong, h1, h2, h3, h4, h5, h6 {font-weight: normal;} a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table {border: none;} table {border-collapse: collapse;}标题，th, td, center {text-align: left;} body {line-height: 1;背景:白色; color: black;} q {quotes: "" "";} ul, ol, dir, menu {list-style: none;} sub, sup {vertical-align: baseline;} a {color: inherit;} hr {display: none;}/*我们不需要一个视觉hr在布局*/Font {color: inherit !important;Font:宋体;颜色:inherit !important;}/*禁用标准浏览器中的一些讨厌的字体属性*/选框{溢出:继承!-moz-binding: none;} blink{文本装饰:none;} nobr{空白:normal;}
Hellsing的重置处理了许多被弃用的HTML元素——通常是通过禁用它们——比如<眨眼>而且<选框>元素，这对于由多个具有不同HTML知识水平的人使用的项目来说很方便。
一些开发者喜欢的黎波里重置，另一些开发者则认为这是一种过度杀戮。
丹·舒尔茨的《重置》
2008年8月，Dan Schulz，一个非常有才华的网页设计师，已经去世了，发布了他的“全局”重置的独特版本(他在他发布的SitePoint线程中详细记录了它):
/* CSS重置规则*/Html，正文，a，缩写，首字母缩写，地址，区域，b, bdo，大，blockquote，按钮，标题，引用，代码，col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img, h3, h4, h5, h6, hr, i, img, ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {margin: 0;填充:0;vertical-align:基线;}体{背景:#FFF;颜色:# 000;字体:85%/1.5 verdana, arial, helvetica, sans-serif;}代码，pre{空格:pre;} del {text-decoration:行穿过;/*它被删除的文本-显示为这样*/} DFN {font-style:斜体;粗细:大胆的;} em {font-style:斜体;}字段集{边界:0;显示:内联;} h1, h2, h3, h4, h5, h6{字体:粗体1em/1.5 georgia, garamond， "times new roman"， times, serif;} img{边界:0;vertical-align:底部;} ins {text-decoration: none;} strong {font-weight:粗体; } tt { display: block; margin: 0.5em 0; padding: 0.5em 1em; } .skip { position: absolute; left: -999em; }
Schulz解释说，他不想使用通用选择器，但他确实想清空大多数元素的空白和填充。因为他总是在Strict文档类型下编写代码，所以他不会费心重新设置已弃用的HTML元素。Schulz设置了基本字体系列，并详细介绍了字体大小。
他使用了Meyer在Reset CSS上的一些工作，添加了一些“bug压缩”的内容。
Thierry Koblentz的base。css
2010年3月，开发人员/设计师Thierry Koblentz决定改变“全局重置”的想法，创建了一个基本样式表，可以重置许多浏览器的默认值，不一定是0，而是他想要开始设计的值。
Koblentz的base.css很大，但很大程度上与大量的注释文档有关:
Thierry Koblentz * *此样式表的目的是为常用浏览器设置默认样式并解决常见问题(缺少滚动条，IE中的扩展按钮，图像下方的空白，等)* *参见:* *此版本的变化:* -输入，按钮，文本区，选择，optgroup，选项{行高:1.4 !important;}(覆盖FF的默认样式)* -样式 inside (merci Goulven) */ /*在html和body上使用height:100%允许对容器进行100%高度的样式*溢出声明是为了确保在所有浏览器中无论内容都有一个用于滚动条的gutter *注意在此规则中没有设置字体大小声明。如果你想包含一个，你应该使用字体大小:100.01%，以防止IE和Opera */中的错误
HTML{高度:100%;overflow-y:滚动;｝/*并非所有浏览器都将白色设置为默认背景色*设置颜色是为了与背景色产生不太大的对比*行高是为了确保文本足够清晰(即上下行之间有足够的空间)*/身体{身高:100%;背景:# fff;颜色:# 444;行高:1.4;｝/*这种字体族的选择是为了在不同平台上呈现相同的文本*字母间距使字体更容易阅读*/{font-family: "Palatino Linotype"， Freeserif, serif;字母间距:.05em;} h1, h2, h3, h4, h5, h6 {font-family: Georgia， "DejaVu Serif"， Serif;字母间距:.1em;} pre, tt, code, kbd, samp, var {font-family: "Courier New"， Courier, monospace;｝这些应该是不言自明的*/} h4 {font-size: 1.2em;} h5 {font-size: 1.1em;} h6 {font-size: 1em;} H1, h2, h3, h4, h5 {font-size: 1em;} font-weight: normal;}/ *样式的链接,访问过的链接以及链接在徘徊,专注和活动状态*一定要记住这些规则,秩序,:活跃在去年*文字修饰:没有一个是让联系更清晰而在徘徊,专注或活动状态*:专注和:键盘焦点是用来帮助用户,你可能改变他们的样式,但一定要给用户一个元素的视觉线索的状态。* outline:none用于伪类:hover是为了避免用户点击链接时出现大纲*注意，最后这些规则在IE中没有任何作用，因为该浏览器不支持“大纲”*/A:链接{颜色:#000;}A:已访问{文字装饰:无;}A:悬停{文字装饰:无;}A:焦点{文字装饰:无;}A:焦点，:焦点{轮廓:1px点#000;}A:悬停，A:活动{轮廓:无;}/* *这个被注释掉了，因为它可能会过度使用(同时使用鼠标和键盘的用户会失去键盘焦点)*此外，这可能会造成性能问题* html:悬停{outline: none;} */ /*为所有这些元素重置空白和填充值*你可以删除你的文档中没有使用的元素，但我认为不值得*/Body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td {margin: 0;填充:0;｝/*这是为了防止边框在字段集和图像(即锚点中的图像)周围显示*/字段集，img{边界:0;｝/*以防止在某些浏览器中显示下方图像时出现空白*/Img{垂直对齐:底部;}这个样式表包含了一个应用于列表的类，用于重置列表类型和LIs */上的空白Ol li, ul Ol li {list-style-type: decimal;} ul li {list-style-type: disc;} ul ul li {list-style-type: circle;} ul ul ul li {list-style-type: square;} Ol Ol li {list-style-type: lower-alpha;} Ol Ol Ol li {list-style-type: lower-roman;}/*这些应该是不言自明的*我相信*大多数* UAs风格的sub和sup默认是这样的，所以我不确定是否有价值包括这些规则在这里*/子{vertical-align:子;字体大小:小;} sup {vertical-align: super;字体大小:小;｝/* color是为了突出该元素(参见color set via body) *使用填充，这样Internet Explorer不会截断字母中的降序，如p, g等)*/图例{颜色:#000;padding-bottom: .5em;｝根据Eric Meyer的重置:表仍然需要'cellspacing="0"'在标记*/表{border-collapse:崩溃;border-spacing: 0;｝/*标题和摘要对于表格数据非常重要，但由于标题几乎不可能跨浏览器设置样式，许多作者不使用它或使用display:没有人“隐藏”它(这几乎等同于不使用它)。*所以为了防止这样的变通，我把这个元素定位在屏幕外*/标题{位置:绝对;左:-999 em;｝/*所有的th应该居中，除非它们在tbody(表体)*/Th {text-align: left;} tbody Th {text-align: left;}/*参见Eric Meyer关于固定单空间大小的文章* http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ */} code, pre {font-family: "Courier New"， monospace, serif;字体大小:1 em;}这应该是不言自明的*/Blockquote, q, em, cite, dfn, i, cite, var, address {font-style:斜体;｝/*防止某些浏览器在"q"和"p" ("p"在块引号中)上插入引号*/Blockquote p:before, Blockquote p:after, q:before, q:after {content: ";}这些应该是不言自明的*/Th, strong, dt, b {font-weight:粗体;} ins {text-decoration: none;Border-bottom: 3px double #333;} del {text-decoration: line-through;} abbr，缩写{border-bottom: 1px dot #333;字体参数:正常;｝/ *创建空白(垂直排水沟)通过填充*大多数作者不设置左/右填充或保证金在这些元素,他们,而使用一个额外的包装或风格与填充容器创建左右差距/地沟他们需要*我发现后者创造了更健壮的布局,因为它使作者混合填充的宽度与破碎的盒子模型创建问题(IE5和IE6怪异模式)*所以恕我直言,设置这个样式使用子选择符(例如,div > h1)应该是最好的方法，但不幸的是IE 6不支持这样的语法，所以我不得不使用下面的+一个重置(见下一条规则)*/H1, h2, h3, h4, h5, h6, p, pre, ul, ol, dl，字段集，地址{padding:0 30px;}/*这是重置嵌套元素*/上/下的左/右间隔(由previous和next规则创建)Dd p, Dd pre, Dd ul, Dd ol, Dd dl, li p, li pre, li ul, li ol, li dl, fieldset p, fieldset ul, fieldset ol {padding-right: 0;padding-left: 0;｝这些应该是不言自明的*/Dd {padding-left: 20px;margin-top: .5em;} li {margin-left:30px;}/*我们不能在表上使用填充来创建左右空白(就像处理上面的元素一样)，而是使用margin */表{margin-right: 30px;margin-left: 30 px;｝我们对hr使用margin的原因与表*/相同Hr {margin-right: 30px;margin-left: 30 px;边框样式:插图;边框宽度:1 px;｝/*顶部空白解决方案*/ /*这是我在元素之间创建空白的方法，你不必坚持它*而不是样式这些元素的顶部和底部空白，或简单的底部空白，我只使用顶部空白*/H1, h2, h3, h4, h5, h6, p, pre, dt, li, hr，图例，输入，按钮，文本区，选择，地址，表{margin-top: 1.2em;}/ *顶部填充方案* / / *这是一个不同的方法对于新手可能不太令人沮丧,因为它避免了陷入崩溃的边缘,并允许清除浮动,同时保留空间元素*如果你决定给这一个尝试,然后注释掉上面的规则,取消两个未来的* / / * h1, h2, h3, h4, h5,类推,p, pre, dt, dd,李,传说,地址{padding-top: 1.2 em;}人力资源输入、按钮、文本区域、选择、表{margin-top: 1.2 em;} * /*这应该不会影响标签的布局，除非你在样式上应用了边距*如果我在这里包含这个，主要是因为当标签使用float和clear样式时，顶部边距会在标签之间产生间隙(底部边距会，但顶部边距不会)*/标签{padding-top: 1.2em;}/*行高有助于设置单选按钮和复选框的垂直对齐(记住在字段集中对它们进行分组)*/字段集{行高:1;}/*复选框的垂直对齐(为IE 7提供不同的值)*/输入[type="checkbox"] {vertical-align: bottom;* vertical-align:基线;｝/*单选按钮垂直对齐*/输入[type="radio"] {vertical-align: text-bottom;}/*输入字段垂直对齐IE 6 */输入{_vertical-align: text-bottom;}/*为这些元素设置了特定的字体大小*行高覆盖FF的默认样式*/输入，按钮，文本区，选择，optgroup，选项{font-size: .9em;行高:1.4 !｝*重要:因为ie6不理解下面的第一个选择器，你需要应用类"inputButton"到所有类型="button"的输入在你的文档*第一个声明是针对ie6和7，第二个声明仅针对ie6，第三个声明适用于所有浏览器。* /button, input[type="submit"]， input[type="reset"]， input[type="button"]， .inputButton {*overflow: visible;_width: 0;衬垫:.2em .4em;｝使用我们在标题、段落、列表等上设置的默认填充和边距来样式元素。例如，这个类可以用于块引号中的DIV或FORM中的DIV，等等.block {padding: 0 30px;margin-top: 1.2 em;｝例如，这个类可以用于底部边框为*/的标题.padding2margin {margin-right: 30px;margin-left: 30 px;padding-right: 0;padding-left: 0;｝/*列表项默认带有标记(disc等)和左空白*，如果你将类"noMarker"应用到列表中，它的项不会显示标记，也不会有左空白*/. nomark li {list style: none;margin-left: 0;｝
Koblentz的base.css做了一些其他重置不做的事情，包括:
- 为垂直滚动条强制设置槽
- 合并IE按钮修复
- 防止他所谓的"图像下方的神秘空隙"
- 停止下降者里面有些字母被剪掉了
<传奇>IE中的元素 - 将复选框和单选按钮与其标签垂直对齐
- 为文档设置默认的背景颜色
- 默认情况下样式化列表
- 创建水平和垂直的空白
像其他重置一样，Koblentz警告说base.css包括阻止样式表验证的IE“hack”。
简单的复位
2010年4月，拉斯·威克利给了我们一个更有针对性、更有限的重置，他称之为简单的复位．
/* ---------------------------- 简单的复位 ---------------------------- */Html, body, ul, ol, li, form, fieldset, legend {margin: 0;填充:0;} h1, h2, h3, h4, h5, h6, p {margin-top: 0;} fieldset,img {border: 0;}传说{颜色:#000;} li {list样式:none;} sup {vertical-align: text-top;} sub {vertical-align: text-bottom;}表{border-collapse:崩溃;border-spacing: 0; } caption, th, td { text-align: left; vertical-align: top; font-weight: normal; } input, textarea, select { font-size: 110%; line-height: 1.1; } abbr, acronym { border-bottom: .1em dotted; cursor: help; }
在他对Simple Reset的解释中，他注意到它只从选定的元素中删除空白和填充，而不是依赖于通用选择器的重置所做的大规模删除。
Simple Reset做的其他事情:
- 删除段落和标题的顶部空白
- 从字段集和图像中删除边界
- 设置表的边框和间距
- 为许多与表相关的元素设置值(例如
< th >而且< td >） - 适用于
字体大小而且行高来形式元素 - 删除列表项项目符号
- 为很少设置样式的对象提供属性
<方法>而且<缩略词>元素 - 的垂直对齐值
<一口>而且子> <要避免的元素行高问题
Weakley提醒CSS重置用户:“与任何重置一样，你应该做你觉得舒服的事情!”
他和Eric Meyer一样，提醒Reset CSS的用户，这些样式规则不是“自包含的无触碰的黑盒子”，而是根据项目需要使用、调整和修改的工具。
CSS Mini Reset
设计师弗拉基米尔·卡雷尔结合了威克利和迈耶的重置元素，创造了他所谓的CSS Mini Reset：
/* CSS Mini Reset */Html、正文、div、表单、字段集、图例、标签{margin: 0;填充:0;}表{border-collapse:崩溃;border-spacing: 0;} th, td {text-align: left;vertical-align:最高;} h1, h2, h3, h4, h5, h6, th, td，标题{font-weight:normal;} img{边界:0;｝
它没有威克利或迈耶的努力那么全面，主要集中在重新设置空白和填充，去掉默认值表格元素，将标题重置为正常的字体权重，并从页边空白中删除边框。
Carrer说CSS Mini Reset是最好的使用“当你真的不想重置所有东西。”
他的重置是基于Azbuka他在2009年创建了一个基于排版的重置和基本样式表，这是一个更早、更复杂的尝试。
软复位
大约在凯瑞发布他的重置的同时，网页设计师马克·阿特雷特贡献了他的软重置。Aplet解释说，他的重置“试图只重置真正需要重置的属性，而把一些样式留给浏览器。”
/*软复位*/Body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin:0;填充:0;}表{border-collapse:崩溃;border-spacing: 0;} fieldset, img {border:0;} h1, h2, h3, h4, h5, h6，地址，标题{font-style:正常;字体大小:100%;粗细:正常;}标题，th {text-align:left;} ol。李streset, .listreset ol, ul.listreset, .listreset ul, .listreset li { margin:0; padding:0; list-style:none; }
Aplet的.listreset课程的灵感来自尼科尔·沙利文的课程面向对象的CSS， (OO CSS)声明可重用类是“性能免费赠品”。他说，在大型网站上，抽象CSS“可以极大地提高应用程序的性能”并“节省数百行代码”。
少即是多重置
2007年6月，Web开发人员Ed Eliot提供了一个更精简的重置;他称之为“少即是多”重置:
正文{填充:0;保证金:0;字体:13px Arial, Helvetica, Garuda, sans-serif;*字体大小:小;*字体:x-small;} h1, h2, h3, h4, h5, h6, ul, li, em, strong, pre, code {padding: 0;保证金:0;行高:1 em;字体大小:100%;粗细:正常;字体样式:正常;}表{font-size:继承;字体:100%;} ul {list style: none;} img{边界:0; } p { margin: 1em 0; }
“少即是多，”艾略特解释道，“只影响那些我经常需要重置的元素。”
样式表中有处理IE问题的技巧(上面强调的);不幸的是，当根据W3C标准进行检查时，它们会使CSS无效。
对于那些坚持验证的人，Eliot建议将它们移到一个单独的文件中，并使用条件注释。
可见性:继承重置
2009年8月，网页设计师Eric Watson制作了自己的作品基本样式表可用。它包括一个小而强大的重置，如下图所示:
/* -------------------- 重置 --------------------- */Body, form, fieldset, ol, ul, li, h1, h2, h3, h4, h5, h6, p {margin:0;填充:0;} img{边界:0;当img放在链接*/内时，/*杀死Gecko bugvertical-align:底部;/*设置IE */的垂直对齐到底部｝
自制的CSS重置
Nettuts+的Jeffrey Way分享了一个创建自己的重置文件的方法。他包括了在家自制咖啡的步骤reset.css是:
- 删除许多元素的空白和填充
- 控制字体大小
- 为将在所有设计中使用的元素创建“默认”类
Way分享了他自己的自制啤酒reset.css在他的讨论结束时(如下所示):
Body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {margin: 0;填充:0;边界:0;大纲:没有;}体{行高:1;字体大小:88%/*你自己决定是否要包含这个。* /;} h1, h2, h3, h4, h5, h6 {font-size: 100%;填充:.6em 0;Margin: 0 15px;} ul, ol {list style: none;} a{颜色:黑色;文字修饰:没有;} a:悬停{text-decoration:下划线;} .floatLeft{浮动:左;填充:.5em .5em .5em 0;} .floatRight{浮动:右; padding: .5em 0 .5em .5em; }
HTML5重置
许多职场人士都渴望与这个可爱的新孩子共舞:HTML5．下面是一些在HTML5中处理CSS重置的项目。
HTML5Reset
里奇·克拉克和他的同事们HTML5Reset给了我们一个为HTML5精心设计的扩展重置。
该项目有多种形式;这是梗概版本:
/* html5doctor.com重置样式表v1.6.1最后更新:2010-09-17作者:Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */Html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label，图例，table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup，菜单，nav, section, summary, time, mark，音频，视频{margin:0;填充:0;边界:0;大纲:0;字体大小:100%;vertical-align:基线;背景:透明;}体{行高:1;}文章，aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display:block;} nav ul {list style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }/*根据需要改变颜色*/{background-color:#ff9;颜色:# 000;文字修饰:没有;｝/*根据需要改变颜色*/标记{background-color:#ff9;颜色:# 000;字体样式:斜体;粗细:大胆的;} del {text-decoration:行穿过;} abbr[title]， dfn[title] {border-bottom:1px dot;光标:帮助;}表{border-collapse:崩溃;border-spacing: 0;｝/*根据需要改变边框颜色*/Hr{显示:块;身高:1 px;边界:0;Border-top:1px solid #cccccc;保证金:1 em 0;填充:0;}输入，选择{vertical-align:middle;｝
CSS重置是基于Eric Meyer的重置CSS。正如Clark所解释的，它比一般的全局重置样式表走得更远。它从HTML5规范中删除了已弃用的元素，添加了新的HTML5元素来删除默认的填充、边距和边框，并纠正了频繁重复的“非样式化”:专注伪类。
Clark指出，HTML5重置中包含的一些代码更多是出于个人喜好(游戏邦注:这是所有可用重置的基本事实)。
HTML5Reset的创建者表示，尽管重置不是“万能的”解决方案，但他们认为“这是一个相当好的起点，任何人都可以使用并创建自己的方法。”
Clark解释了他重置HTML5背后的一些想法:
当我决定为HTML5创建一个重置样式表时，这主要是为了我正在从事的一个项目，我想我不妨发布它以供整个社区使用、修改和改进。与Eric的样式表的主要区别是…
删除HTML5中不存在的元素，包括新元素，并将其声明为块级元素(稍后将构建到浏览器样式表中，可以从重置中删除)。还包括一些基准样式的标记元素和其他一些位，我倾向于在每个项目中使用，所以对我来说包括他们是有意义的。我还决定从Eric的样式表中删除默认的锚样式，以便大纲不会在链接上被抑制。
在Eric的原文中有一个注释，但作者似乎很少修改它。这突出了CSS重置的一个最大问题——你必须为你自己和特定的项目设计自己的重置。对一个网站有效的重置不太可能完全适用于下一个网站。
我总是建议使用重置作为起点，然后根据自己的需要修改它。
CSS重置-刷新
网页设计师Jeffrey King为HTML5更新了Meyer的原始重置;他的修订叫做CSS重置-刷新:
/* v1.2 | 20100218 */ /* Eric Meyer的原始CSS重置在http://meyerweb.com/eric/tools/css/reset/ */ /*这个版本的永久链接是*/html、身体、div、span, applet,对象,iframe, h1, h2, h3, h4, h5,编辑,p,引用,pre, a,简写的,缩写,地址,大,引用,代码,德尔,dfn, em,字体,img, ins, kbd, q,年代,桑普,小,罢工,强,子,吃晚饭,tt, var, b, u,我中心,dl, dt, dd, ol, ul,李自定义字段,形式,标签,传说,桌子,标题,身体,tfoot, thead, tr, th, td,部分,文章,放在一边,hgroup,页眉、页脚、导航,对话框,图中,菜单,视频,音频,马克,时间,画布,细节{保证金:0;填充:0;边界:0;大纲:0;字体大小:100%;vertical-align:基线;背景:透明;} section, article, aside, hgroup, header, footer, nav, dialog, figure, figcaption {display: block;}体{行高:1;} ol, ul {list style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus {/*记得定义焦点样式!* /大纲:0;} in {/*记得以某种方式突出显示插入!* /文字修饰:没有;} del {text-decoration:行穿过;}表{'cellspacing="0"的标记表*/border-collapse:崩溃;border-spacing: 0;｝
HTML5样板
让我们以一个我们很多人经常谈论的广受欢迎的项目结束本指南:Paul Irish和Divya Manian的项目HTML5样板，一个完全开发的“框架”——创建者说它不是一个框架——包括一个健壮的，html5友好的重置。
HTML5样板中的CSS重置是HTML5Reset和Eric Meyer的reset Reloaded + HTML5基线的结合。
html5doctor.com重置样式表(Eric Meyer’s Reset Reloaded + HTML5基线)v1.4 2009-07-27 |作者:Eric Meyer & Richard Clark html5doctor.com/html-5-reset-stylesheet/ */Html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label，图例，table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup，菜单，nav, section, summary, time, mark，音频，视频{margin:0;填充:0;边界:0;大纲:0;字体大小:100%;vertical-align:基线;背景:透明;}文章，aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} nav ul {list style:none;} blockquote, q {quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }/*表在标记*/中仍然需要cellspacing="0"表{border-collapse:崩溃;border-spacing: 0;} hr{显示:块;身高:1 px;边界:0;边框:1px实心#ccc;保证金:1 em 0;填充:0;}输入，选择{vertical-align:middle;｝/* end reset CSS */
Clark (HTML5Reset的创建者之一)表示，HTML5样板版“真正突出了网络社区在共享和开放公共使用方面的优势。”
结论
有许多选项可以将CSS设置为基线默认值，如上所示。需要注意的是，您应该使用最适合您和手头项目的方法。您可以使用一个已经存在的重置样式表，将它们拼接在一起，或者从头构建自己的重置样式表;选择权在你。
本系列的第三部分也是最后一部分讨论了关于是否应该在网站构建中重置CSS的争论。
这是关于CSS重置主题的三篇系列文章的第2部分。
