如何通过15套CSS重设实例简化你的网页样式?

CSS Reset 是一种用于标准化浏览器样式的技术，通过重置浏览器的默认样式来确保网页在不同浏览器中的一致性。以下是15套简化的CSS Reset实例：，，``css，/* 1. Eric Meyer's CSS Reset */，html, body, div, span, applet, object, iframe,，h1, h2, h3, h4, h5, h6, p, blockquote, pre,，a, abbr, acronym, address, big, cite, code,，del, dfn, em, img, ins, kbd, q, s, samp,，small, strike, strong, sub, sup, tt, var,，b, u, i, center,，dl, dt, dd, ol, ul, li,，fieldset, form, label, legend,，table, caption, tbody, tfoot, thead, tr, th, td,，article, aside, canvas, details, embed, ，figure, figcaption, footer, header, hgroup, ，menu, nav, output, ruby, section, summary,，time, mark, audio, video {， margin: 0;， padding: 0;， border: 0;， font-size: 100%;， font: inherit;， vertical-align: baseline;，}，/* HTML5 display-role reset for older browsers */，article, aside, details, figcaption, figure, ，footer, header, hgroup, menu, nav, section {， display: block;，}，body {， line-height: 1;，}，ol, ul {， list-style: none;，}，blockquote, q {， quotes: none;，}，blockquote:before, blockquote:after,，q:before, q:after {， content: '';， content: none;，}，table {， border-collapse: collapse;， border-spacing: 0;，}，，/* 2. HTML5 Doctor Reset */，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, legend,，table, caption, tbody, tfoot, thead, tr, th, td,，article, aside, canvas, details, figcaption, figure, ，footer, header, hgroup, menu, nav, section, summary,，time, mark, audio, video {， margin: 0;， padding: 0;， border: 0;， outline: 0;， font-size: 100%;， background: transparent;，}，body {， margin: 0;， padding: 0;， line-height: 1;，}，article, 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;，}，table {， border-collapse: collapse;， border-spacing: 0;，}，hr {， display: block;， height: 1px;， border: 0;， border-top: 1px solid #cccccc;， margin: 1em 0;， padding: 0;，}，input, select {， vertical-align: middle;，}，，/* 3. Nicolas Gallagher's Micro Clearfix */，.cf:before, .cf:after {， content: " "; /* 1 */， display: table; /* 2 */，}，.cf:after {， clear: both;，}，.cf {， *zoom: 1;，}，...，``

简化的CSS Reset: 15套CSS重设实例

最简化的CSS Reset

CSS 属性	值	说明
	padding: 0; margin: 0;	将所有元素的padding和margin值都设为0，避免浏览器在理解这两个属性默认值上的分歧。
	padding: 0; margin: 0; border: 0;	在前一个的基础上添加了对border属性的重设，初始值为0。
	outline: 0; padding: 0; margin: 0; border: 0;	在前两个的基础上添加了outline属性的重设，防止一些冲突。

浓缩实用型CSS Reset

| CSS 属性 | 值 |

| --------------------------| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

| |vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0; | 此方法出自Perishable Press，常用来统一所有元素的垂直对齐、字体样式和大小，并重置outline、padding、margin和border属性。 |

Poor Man 的CSS Reset

CSS 属性	值
html, body	padding: 0; margin: 0;
html	font-size: 1em;
body	font-size: 100%;
a img, :link img, :visited img	border: 0px;

四、Siolon’s Global Reset

CSS 属性	值
	vertical-align: baseline; font-family: inherit; font-style: inherit; font-size: 100%; border: none; padding: 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;

五、Shaun Inman’s Global Reset

CSS 属性	值
body, div, ...	padding: 0; margin: 0;
table	border-collapse: collapse; border-spacing: 0;
fieldset, img, abbr	border: 0;
address, caption, ...	font-weight: normal; font-style: normal;
ul	list-style: none;
caption, th	text-align: left;
h1, h2, ...	font-size: 1.0em;
q:before, q:after	content: ”;
a, ins	text-decoration: none;

Yahoo(YUI) CSS Reset

CSS 属性	值
body,div,...	padding: 0; margin: 0;
table	border-collapse: collapse; border-spacing: 0;
fieldset,img	border: 0;
address,caption,...	font-weight: normal; font-style: normal;
ol,ul	list-style: none;
caption,th	text-align: left;
h1,h2,...	font-weight: normal; font-size: 100%;
q:before,q:after	content:”;
abbr,acronym	border: 0;

相关问题与解答

问题1：为什么需要使用CSS Reset？

答：CSS Reset的主要目的是解决不同浏览器对CSS默认样式的不同解释和呈现方式，通过预先定义一些通用的CSS样式规则，可以确保所有浏览器按照统一的标准来解释和应用这些样式，从而避免浏览器兼容性问题。

问题2：如何选择适合的CSS Reset方案？

答：选择适合的CSS Reset方案主要取决于项目的具体需求和个人偏好，有些方案较为简单，只涉及基本的样式重置，而有些则更为复杂和全面，开发者可以根据项目的复杂度、浏览器兼容性要求以及个人编程习惯来选择合适的方案。

以上内容就是解答有关“简化的CSS Reset:15套CSS重设实例”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。