CSS: Reset html5

Jorge Maiden — Thu, 04 Nov 2010 22:01:14 +0000

Hace un tiempo mostre un método de resetear el css, hoy os pongo una hoja de estilos que podemos utilizar para resetear todos los valores CSS de un archivo html5:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{ margin: 0; padding: 0; }
section, article, header, hgroup, footer, nav, aside{ display: block; }
table{ border-collapse: collapse; border-spacing: 0; }
td{ border: 0; }
input, texarea{ outline: none; }
fieldset, img, abbr{ border: 0; }
address, caption, cite, code, dfn, em, strong, th, var{ font-style: normal; font-weight: normal; }
ol, ul{ list-style: none; text-indent: 0; }
q:before, q:after{ content: ''; }

Resetear archivo CSS

Jorge Maiden — Sun, 09 Aug 2009 23:53:34 +0000

Crear un archivo css para resetear inicialmente todos los valores css de un documento se hace imprescindible para evitar que nuestra página web se vea diferente en internet explorer que en firefox, safari, etc…

Una de las prácticas más habituales es la de creat al inicio de nuestro archivo css la propiedad: * { margin:0; padding:0; }

Pero la propiedad anterior no es suficiente cuando trabajamos con más objetos que no dependen exclusivamente del margin y padding.

A continuación un archivo (reset.css) más elaborado para inicializar los estilos:

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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* En el código HTML es necesario añadir cellspacing="0" a la tabla */
table {
border-collapse: collapse;
border-spacing: 0;
}

Bufa Webmaster » reset

CSS: Reset html5

Resetear archivo CSS