CSS Reset
Uno de los últimos trucos que aprendí en el diseño con CSS es resetear todo los estilos y empezar dede cero ¿pero para qué hacer esto?.
Porque los navegadores ya tiene predifinido estilos que son diferentes entre ellos y al estar diseñando te queda diferente en cada navegador y dices: ¡Ese navegador tiene fallos!, cuando ¡el fallo es humano!.
Entonces es imprescindible hacer tu CSS base antes de todos tus hojas de estilo para ahorrarte muchos problemas futuros. ¡OJO! si tu web está ya hecha no es recomendable porque sin darnos cuenta usamos esos estilos predifinidos hablados antes y se puede arruinar el diseño, pero de ahora en adelante te aconsejo que la uses.
Como no soy ningún experto en el tema les pongo texto traducido de Eric Meyer
…Yo recomiendo usar un grupo de estilos de “reseteo” o “de base”, pero no uno basado en el selector universal. Más bien que los estilos deberían listar todos los elementos a ser reseteados y exactamente cómo deberían serlo. …Alguien me preguntó si yo podía crear esta hoja de estilos para compartirla con el mundo, a lo cual accedí.
…Alguien más me recordó que el grupo Yahoo! UI ya lo había hecho así que no me tocaría hacerlo. Maravilloso!… Excepto que encontré que su CSS va más lejos de lo que debería en algunas áreas y se queda corto en otras. Así que presenté mi propia versión de Reset CSS, basada en los estilos de Yahoo…
EXPLICADO POR EL EXPERTO
…¿Por qué?!? ¿Por qué todo esto?
La razón principal es que todos los navegadores tienen presentaciones preestablecidas y todas ellas diferentes. (Ok, esto no aplica para las familias de navegadores—la mayoría de los navegadores basados en Gecko tienen los mismos valores por defecto). Por ejemplo, algunos navegadores sangran las listas con un margen izquierdo, mientras otros usan el padding…
Pero hay todo tipo de inconsistencias, unas más sutiles que otras. Los títulos tienen márgenes superiores e inferiores ligeramente diferentes, las distancias de sangría son diferentes, y así sucesivamente. Aún algo tan básico como la altura de las líneas varía de un navegador a otro—lo cual puede tener efectos en la altura de los elementos, las alineaciones verticales y en general todo el aspecto.
Esto no es algo que consideremos muy a menudo. Pensamos en nuestro CSS para modificar el aspecto por defecto de un documento —pero con una hoja de estilos “reset”, podemos hacer este aspecto más consistente entre los diferentes navegadores, y así disponer menos tiempo peleando con estas diferencias…
Hay otra razón por la que quiero resetear muchos estilos en muchos elementos. No sólo reiniciar las márgenes y el padding. También quiero que todos los elementos tengan un tamaño de fuente, un peso, un estilo y una familia consistentes. Si, quiero remover la negrilla de los títulos y los elementos strong; quiero quitarle la itálica a los elementos em y cite.
Quiero todo esto porque no quiero dar por hecho los efectos de los estilos… Lo cual me hará pensar un poco más a cerca de la semántica de mi documento. Con el reseteo montado, no podré escoger el elemento strong si el diseño necesita una negrilla. En lugar de ello, me tocará escoger el elemento adecuado—ya sea si es un strong o un em o un b o un h3 o lo que sea—y luego le doy el estilo que necesito…”
HE AQUI EL CODIGO
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;
}/* remember to define focus styles! */
:focus {
outline: 0;
}/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Espero les sea de su ayuda ..