Resumen del Contenido
¿Qué es Reset CSS?
CSS Reset es un conjunto de reglas CSS cuyo objetivo es restablecer, o mejor tal vez decir, establecer todos los elementos de valor de referencia.
¿Qué conseguimos con ello?
Bueno, este es un intento de garantizar que el sitio web se ve más o menos idénticos en distintos navegadores.
¿Por qué haremos esto?
Debido a que los principales navegadores (Firefox, Internet Explorer, Opera, Chrome, Safari, etc) tienen sus propias reglas generalizadas CSS, y estas reglas son totalmente diferentes entre ellos. Buscamos que en todos los navegadores se vea practicamnte igual nuestra web. Esto es más fácil de conseguir cuando partimos del mismo punto de referencia
Hay un montón de diferentes métodos de reajustes, mencionaré una par de ellos como ejemplo
Además yo no te diré si debes o no debe utilizar este reajuste de CSS, porque no hay solución definitiva. Sólo estoy tratando de darte algunas ideas al respecto.
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;
}
Otro posible archivo para resetear la hoja de estilos puede ser el siguiente:
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Son muchas las posibilidades, puedes optar por cualquiera de ellas. Para incluir esta hoja de estilos en tu web solamente tienes que crear el fichero, por ejemplo reset.css y llamarlo desde tu página, en la cabecera de la página incluir esta linea:
<link rel="stylesheet" type="text/css" href="reset.css"/>
