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: " 0AB" " 0BB" " 022" " 022"; }
blockquote:lang(en), cite:lang(en), q:lang(en) { quotes: " 022" " 022" " 027" " 027";}
blockquote:lang(es), cite:lang(es), q:lang(es) { quotes: " 0AB" " 0BB" " 022" " 022";}
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.
Sigue la onda...
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
28 tutoriales de poderosos efectos de luz con Photoshop »
40 plantillas CSS y XHTML gratis y de alta calidad »
100 bonitas y variadas texturas gratis »
104 tipografías gratis para diseñar sitios y logotipos »
Pack de +100.000 tipografías gratis »
Hoja de ayuda sobre la especificidad CSS »
Los 50 mejores iconos del 2008 »
Varios logotipos interesantes creados con CSS »
Speaky (4)
drakkar (3)
Erik (3)
Gustavo (3)
Marco (3)
@chifliiiii (2)
Angel (2)
beastieux (2)
Boda (2)
dovercame (2)
Por ahora hay 8 comentarios ¿Quieres opinar?
buena entrada,quiero preguntar si sabes de algun software,que me permita “practicar” mientras aprendo.que me permita completar plantillas de css o plantear ejercicios a ser resueltos.¿me explico?
¿existe esta herramienta?
te recomiendo la lista de distribucion Ovillo:http://lists.ovillo.org/mailman/listinfo/ovillo no se si la conoces.me ha ayudado mucho.
gracias por tu trabajo.
@jose existen muchas herramientas para poder hacer cosas automáticas con CSS, pero si deseas practicar, la mejor herramienta es leer un libro sobre CSS o este blog
Una herramienta que puede ayudarte a ver como se estructura un sitio y poder realizarle ajustes es CSS Evolve: http://www.cssblog.es/observa-la-estructura-css-de-un-sitio-web-con-css-evolve/
Si deseas puedes darle un repaso a esta lista de herramientas para CSS: http://www.cssblog.es/tags/herramientas-css/
Un saludo José.
¡Genial entrada! Me la guardo en mis marcadores para recurrir a ella siempre que me haga falta
Buenas, acabo de crear un Reset CSS que puedes añadir a tu lista si te apetece, es un poquito especial ya que ocupa casi 200 líneas de código. Pero bueno, eso sí, te garantizo que es no le queda nada por reinicializar con él… xD Échale un vistazo, ando buscando opiniones
Enlace a nuestro Reset CSS:
http://blog.objetivocreativo.com/version-final-reset-css-v11/
@Objetivo Creativo ya ha sido añadida.
Un saludo.
[...] seguir leyendo en cssblog [...]
les kiero compartir un reset … espero les sirva
/*————– Reseting —————- */
html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, a, abbr, acronym,
img, s, small, strike, sup, sub,
dl, dt, dd, ol, ul, li, form, fieldset, 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;
background: transparent }
:focus, :active { outline: 0 }
html { height: 100%; font-size: 100.01% }
body { height: 100%; font-size: 62.5%; color: #000 }
/*————– Common —————- */
h1, h2, h3, h4, h5, h6
{ font-weight: normal; color: #46627e }
h1 { font-size: 36px; line-height: 36px; margin-bottom: 18px; letter-spacing: 1px }
h2 { font-size: 20px; line-height: 20px; margin-bottom: 8px; letter-spacing: 1px }
h3 { font-size: 14px; line-height: 18px; margin-bottom: 9px; letter-spacing: 1px }
h4, h5, h6 { font-size: 12px; line-height: 18px; margin-bottom: 18px; font-weight: bold}
p, pre, code, label, th, td, dd, dt, select, li
{ font-size: 12px; line-height: 14px; margin-bottom: 12px }
ul, ol { margin-bottom: 0px }
ul { list-style:disc }
ol { list-style: decimal }
li { margin-left: 36px; color: #201313; }
li p { color: #201313 }
legend { display: none }
small { font-size: 9px }
sup { position:relative; bottom: 3px; vertical-align: baseline }
sub { position:relative; bottom: -2px; vertical-align: baseline }
acronym, abbr { cursor: help; letter-spacing: 1px; border-bottom: #999 1px dashed }
label { color:#484848;}
/*—————- Links —————–*/
a:link, a:visited, a:hover, a:active
{ font-weight: normal; text-decoration: underline; color:#817818;}
a:hover { text-decoration: none;}
a img { border: none }
/*———– Global Classes ————-*/
.clear { clear: both }
.floatLeft { float: left }
.floatRight { float: right }
.textLeft { text-align: left }
.textRight { text-align: right }
.textCenter { text-align: center }
.textJustify { text-align: justify }
.bold { font-weight: bold !important }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.highlight { background: #ffc }
.noBG { background: none !important}
.noPadding { padding: 0 !important}
.noMargin { margin: 0 !important }
.noIndent { margin-left: 0; padding-left: 0 }
.noBullet { list-style: none; list-style-image: none }
.noBorder { border: none !important }
Social comments and analytics for this post…
This post was mentioned on Twitter by wgerez: Para agendarlo, como resetear tus CSS http://bit.ly/EXbRY...