css reset
最近偶然发现了一篇总结css reset 的文章，拿出来给大家一起分享。
最近看到一个词叫css reset。什么叫做css reset呢？我理解为重置css，也就是重置默认样式。我在HTML下的默认样式中讲到，一些标签元素在HTML下有一个默认属性值，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式（cssreset）。
CssReset也就Reset Css ,就是重置一些标签样式，或者说默认的样式。前端开发工作中有一款好的、统一的CssReset将提高开发效率，提高样式代码的重用，减少重复代码，减少维护成本。
1.Ateneu Popular CSS Reset
CSS代码
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, font, img, ins,
kbd, q, s, samp, small,strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul,li, fieldset, form, label, legend,
table, caption, tbody,tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight:inherit;
font-style: inherit;
font-size: 100%;
font-family:inherit;
vertical-align:baselinebaseline;
}
:focus { outline:0;}
a, a:link, a:visited,a:hover, a:active{text-decoration:none}
table { border-collapse:separate;border-spacing: 0;}
th, td {text-align: left;font-weight: normal;}
img, iframe {border:none; text-decoration:none;}
ol, ul {list-style:none;}
input, textarea, select,button {font-size: 100%;font-family: inherit;}
select {margin:inherit;}
hr {margin: 0;padding:0;border: 0;color: #000;background-color: #000;height: 1px}
-----------------------------------------------------------------------------------
2.Chris Poteet’s Reset CSS
CSS代码
* {
vertical-align: baselinebaseline;
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;
}
----------------------------------------------------------------------------------
3.Yahoo’s（YUI） CSS Reset
CSS代码
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td{
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var{
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
----------------------------------------------------------------------------------
4.Eric Meyer Reset CSS
CSS代码
html, body, div, span,applet, object, iframe, table, caption,
tbody, tfoot, thead, tr,th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small,strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6,p, blockquote, pre, a, abbr,
acronym, address, big,cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label,legend {
vertical-align: baselinebaseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before,blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=----------------------------------
5.Tantek Celik Reset CSS
CSS代码
:link,:visited {text-decoration:none }
ul,ol { list-style:none}
h1,h2,h3,h4,h5,h6,pre,code{ font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0}
a img,:link img,:visitedimg { border:none }
address {font-style:normal }
-----------------------------------------------------------------------------------
6.Christian Montoya Reset CSS
CSS代码
html, body, form,fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica,sans-serif;
}
h1, h2, h3, h4, h5, h6,p, pre,
blockquote, ul, ol, dl,address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea{
font-size: 100%;
font-family: inherit;
}
-----------------------------------------------------------------------------------
7.Rudeworks Reset CSS
CSS代码
* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% "Lucida Grande",Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6,p, pre,
blockquote, ul, ol, dl,address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottombottom: 0.3em;
vertical-align: baselinebaseline;
}
sub {
position: relative;
bottombottom: -0.2em;
vertical-align: baselinebaseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt,var, input[type=‘text’], textarea {
font-size: 100%;
font-family: monaco, "LucidaConsole", courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited,a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus,select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-rightright {
float: rightright;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}
---------------------------------------------------------------------------------
8.Anieto2K Reset CSS
CSS代码
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,font, img,
ins, kbd, q, s, samp,small, strike,
strong, sub, sup, tt,var, dl, dt, dd, ol, ul, li,
fieldset, form, label,legend,
table, caption, tbody,tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baselinebaseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before,blockquote:after, q:before, q:after {
content: ""
}
blockquote, q {
quotes: "" ""
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}
--------------------------------------------------------------------------------
9.CSSLab CSS Reset
CSS代码
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, font, img, ins, kbd, q, s, samp,
small, strike, strong,sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label,legend, table, caption, tbody, tfoot,
thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baselinebaseline;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select,button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrectplacement of numbers in ol's in IE6/7 */
ol { margin-left:2em;}
/* == clearfix == */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height:1%;}
.clearfix {display:block;}
----------------------------------------------------------------------------------
10.Condensed Meyer Reset
CSS代码
body, div, dl, dt, dd,ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset,input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
fieldset, img {
border: 0;
}
table {
border-collapse:collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
address, caption, cite,code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6{
font-weight: normal;
font-size: 100%;
}
q:before, q:after {
content: ”;
}
abbr, acronym {
border: 0;
}
----------------------------------------------------------------------------------
国内一个前端开发工程师自己整理的CSS Reset:
CSS代码
/*reset 全局定义 注释可去掉*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code
,form,fieldset,legend,input,textarea,p,blockquote,th,td
{margin:0;padding:0;}
fieldset,img{border:0;}
ulli{list-style:none;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
/* body标记样式定义全局的字体颜色、背景色和文本对齐设置 */
body{color: #000;background: #fff; text-align: left; font-size:75.00%; font-
family:'lucidagrande',taho,verdana,'trebuchet ms',sans-serif;}
/* hx系列 */
h1, h2, h3, h4, h5, h6{font-weight: bold; }
h1{ font-size: 200%;}
h2{ font-size: 166.67%;}
h3{ font-size: 150%;}
h4{ font-size: 133.33%;}
h5{ font-size: 116.67%;}
h6{font-size: 116.67%;font-style: italic;}
/* 着重标记 */
cite, blackquote, em, i{font-style: italic; }
strong, b{ font-weight:bold; }
/* 预格式标记 */
pre, code{font-family:monospace; font-size: 1.1em;}
/* 缩写标记 */
acronym,abbr{border-bottom: 0.1em dashed #c00;cursor: help;letter-spacing: .07em;}
/* 定义默认的链接样式 */
a:link,a:visited{color:#0065FF; text-decoration: none;}
a:hover{text-decoration:underline;}
/* 清除溢出，浮动 */
.clearing, .HackBox{border-top:1px solid transparent !important; clear:both;
visibility: hidden;}
/* 不需要额外增加元素的清理浮动的类使用:after伪类来实现浮动清理 */
.wrapfix:after{ content:"."; display: block; height: 0; clear: both;visibility:
hidden;}
/* IE7 hack */
.wrapfix {display: inline-block;}
/* IE-mac, IE5, IE6*/
* html .wrapfix {height:1%;}
.wrapfix {display:block;}
/*隐藏元素*/
.invisible{visibility:hidden;}
/* 从页面布局上隐藏元素*/
.hidden{display:none;}
/* 通用容器 */
.wrapper{clear: both;overflow: hidden;}
/*--框架--*/
#main{width:950px;margin:0 auto; overflow:hidden;}
--------------------------------------------------------------------------------------------------
淘宝 （www.taobao.com ）：
html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td{
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:"";
}
-------------------------------------------------------------------------------------------------
百度有啊 (www.youa.com )：（架构基本上是模仿YUI来做的）
body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input,textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}
-------------------------------------------------------------------------------------------------
在《超越css》 一书中建议我们做网站开始重置所有默认样式：
/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{ margin:0;padding:0}
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}
/* Removes list-style from lists */
ol,ul { list-style:none }
/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal;font-weight:normal }
/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }
/* Removes border from fieldset and img */
fieldset,img { border:0 }
/* Left-aligns text in caption and th */
caption,th { text-align:left }
/* Removes quotation marks from q */
q:before,q:after { content:''}
那我们实际写代码的时候该怎么来css reset呢？
我个人推荐使用（Eric Meyer 和YUI ）的 css reset
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步