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.
