Todos los elementos HTML tienen por defecto unos atributos CSS predeterminados. A veces estos atributos causan problemas comunes a la hora de crear el sitio pensando en cross-browser (que se visualize correctamente en todos los navegadores). Por eso la única solución a veces es resetear tus estilos. Ya os mostramos anteriormente una técnica para resetear estilos, pero esta vez os mostramos 10 más (incluyendo la citada anteriormente). Puede ser interesante y útil resetear nuestros estilos de vez en cuando:
1. Reseteo CSS genérico
* { padding: 0; margin: 0; border: 0; }
2. CSS Reset popular de Ateneu
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; } :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}
3. Chris Poteet’s 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; }
4. Yahoo’s CSS 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; } 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; }
5. Eric Meyer Reset 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: 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: "" ""; }
6. Tantek Celik Reset 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 }
7. 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; }
8. Rudeworks Reset 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; bottom: 0.3em; vertical-align: baseline; } sub { position: relative; bottom: -0.2em; vertical-align: 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 { float: right; } body { text-align: center; } #wrapper { margin: 0 auto; text-align: left; }
9. Anieto2K Reset CSS
La técnica que ya os mostramos anteriormente.
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 } 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 }
10. CSSLab 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; } :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;}
Desde los comentarios Objetivo Creativo nos manda la suya:
Reset CSS v1.1 de Objetivo Creativo
/* Reset CSS v1.1/03/2009 By Objetivo Creativo http://www.objetivocreativo.com/ */ * { margin: 0; padding: 0; border: none; outline: none; background: transparent; font: 1em/1.2 Helvetica, Arial, sans-serif; text-transform: none; word-spacing: normal; letter-spacing: normal; direction: ltr; text-align: left; text-decoration: none; text-indent: 0; unicode-bidi: normal; position: static; top: auto; right: auto; bottom: auto; left: auto; clear: none; clip: auto; display: inline; overflow: scroll; visibility: visible; white-space: normal; z-index: auto; cursor: auto; vertical-align: baseline; } html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block; } li { display: list-item;} head { display: none;} table { display: table;} tr { display: table-row;} thead { display: table-header-group;} tbody { display: table-row-group;} tfoot { display: table-footer-group;} col { display: table-column;} colgroup { display: table-column-group;} td, th { display: table-cell;} caption { display: table-caption;} html, body { background: white; color: black;} a { color: blue;} th { font-weight: bolder; text-align: center;} caption { text-align: center;} body { margin: 0.5em; line-height: 1.12;} h1 { font-size: 2em; margin: .67em 0;} h2 { font-size: 1.5em; margin: .75em 0;} h3 { font-size: 1.17em; margin: .83em 0;} h4, p, blockquote, ul, fieldset, form, ol, dl, dir, cite, q, address, menu, pre { margin: 1.12em 0;} h5 { font-size: .83em; margin: 1.5em 0;} h6 { font-size: .75em; margin: 1.67em 0;} h1, h2, h3, h4, h5, h6, b, em, dt, strong { font-weight: bolder;} blockquote { margin-left: 2.5em; margin-right: 2.5em;} dd, blockquote, cite, q { text-indent: 1em;} i, cite, em, var, address { font-style: italic;} pre, tt, code, kbd, samp { font-family: "Courier New", Courier, monospace;} pre { white-space: pre;} button, textarea, input, object, select { display: inline-block;} big { font-size: 1.17em;} small, sub, sup { font-size: .83em;} sub { vertical-align: sub;} sup { vertical-align: super;} table { border-collapse: collapse; border-spacing: 0.13em; caption-side: top; empty-cells: show; table-layout: auto;} thead, tbody, tfoot { vertical-align: middle;} td, th { vertical-align: inherit;} s, strike, del { text-decoration: line-through;} hr { border: 0.06em inset;} ol, ul, dir, menu, dd { margin-left: 2.5em;} ul, ol { list-style-position: outside;} ol { list-style-type: decimal;} ul { list-style-type: disc;} ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0;} u, ins { text-decoration: underline;} br:before { content: "\A";} :before, :after { white-space: pre-line;} center { text-align: center;} abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em;} :link, :visited { text-decoration: underline;} a img, :link img, :visited img { border: none;} :focus { border: none; outline: thin dotted invert;} blockquote, cite, q { quotes: "\00AB" "\00BB" "\0022" "\0022"; } blockquote:lang(en), cite:lang(en), q:lang(en) { quotes: "\0022" "\0022" "\0027" "\0027";} blockquote:lang(es), cite:lang(es), q:lang(es) { quotes: "\00AB" "\00BB" "\0022" "\0022";} blockquote:before, cite:before, q:before { content: open-quote;} blockquote:after, cite:after, q:after { content: close-quote;} BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override;} BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override;} *[DIR="ltr"] { direction: ltr; unicode-bidi: embed;} *[DIR="rtl"] { direction: rtl; unicode-bidi: embed;} @media print { * { font-family: "Times New Roman", Times, serif; orphans: 2; widows: 2; page-break-before: auto; page-break-after: auto; page-break-inside: auto; } a { color: black;} h1 { page-break-before: always;} h1, h2, h3, h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; page-break-after: avoid;} ul, ol, dl { page-break-before: avoid;} } @media aural { * { volume: medium; speech-rate: medium; voice-family: female; pause: 0ms; pitch: medium; pitch-range: 50; stress: 50; richness: 50; speak-punctuation: none; speak-numeral: continuous; speak-header: once; } h1, h2, h3, h4, h5, h6 { voice-family: paul, male; stress: 20; richness: 90;} h1 { pitch: x-low; pitch-range: 90;} h2 { pitch: x-low; pitch-range: 89 } h3 { pitch: low; pitch-range: 70;} h4 { pitch: medium; pitch-range: 60;} h5 { pitch: medium; pitch-range: 50;} h6 { pitch: medium; pitch-range: 40;} li, dt, dd { pitch: medium; richness: 60;} dt { stress: 8 } pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80;} em { pitch: medium; pitch-range: 60; stress: 60; richness: 50;} strong { pitch: medium; pitch-range: 60; stress: 90; richness: 90;} dfn { pitch: high; pitch-range: 60; stress: 60;} s, strike { richness: 0;} i { pitch: medium; pitch-range: 60; stress: 60; richness: 50;} b { pitch: medium; pitch-range: 60; stress: 90; richness: 90;} u { richness: 0;} a:link { voice-family: harry, male;} a:visited { voice-family: betty, female;} a:active { voice-family: betty, female; pitch-range: 80; pitch: x-high;} } @media braille { h1, h2, h3, h4, h5, h6 { text-align: right; background: white; color: black;} }
Si sabéis alguna técnica más podéis dejarla en los comentarios.