以前有过《Css Reset(复位)整理》:https://www.html.cn/archives/541
Css Reset也就Reset Css ,就是重置一些标签样式,或者说默认的样式。前端开发工作中有一款好的、统一的Css Reset将提高开发效率,提高样式代码的重用,减少重复代码,减少维护成本。
现在分享一些老外的Css Reset,供大家参考;
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
查看: Yahoo(YUI)
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
查看:Eric Meyer
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
查看: Tantek Celik
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,:visited?img?{?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
查看:Rudeworks
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,?“Lucida?Console”,?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
查看: Andrés Nieto
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
查看:CSSLab
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?incorrect?placement?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-tricks站的调查Eric Meyer Reset CSS(也就是上面的第4个)使用人数最多,点击查看http://css-tricks.com/poll-results-what-css-reset-do-you-use/。
再来看看国内一个前端开发工程师自己整理的 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;} ??
- ul?li{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:‘lucida?grande’,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;} ??
个人认为Css Reset的整理还是要从自身网站出发,合适自己的才是做好的。
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂