发表于:2009-03-21 17:18 分类:首页 > 网站重构 > CSS+XHTML > ,
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 : baseline baseline ;
- }
- :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 : baseline 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;
- }
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 : baseline baseline ;
- 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 ;
- bottom bottom : 0.3em;
- vertical-align : baseline baseline ;
- }
- sub {
- position : relative ;
- bottom bottom : -0.2em;
- vertical-align : baseline baseline ;
- }
- 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 - right right {
- float : right right ;
- }
- body {
- text-align : center ;
- }
- #wrappe r {
- 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 : baseline baseline
- }
- 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 : baseline baseline ;
- }
- :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的整理还是要从自身网站出发,合适自己的才是做好的。