以前有过《Css Reset(复位)整理》:http://www.css88.com/article.asp?id=500
Css Reset也就Reset Css ,就是重置一些标签样式,或者说默认的样式。前端开发工作中有一款好的、统一的Css Reset将提高开发效率,提高样式代码的重用,减少重复代码,减少维护成本。
现在分享一些老外的Css Reset,供大家参考;
1.Ateneu Popular 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, 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
- * {
- 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)
- 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
- 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
- :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
- 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
- * {
- 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
- 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
- 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
- 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:
- /*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的整理还是要从自身网站出发,合适自己的才是做好的。