Consejo rápido crea tu propio archivo Reset.css simple

Demasiados diseñadores de CSS novatos no se dan cuenta de la importancia de crear un archivo "reset.css". Cuando tiene un entorno donde cada navegador tiene su propio estilo "predeterminado", a menudo se encontrará golpeando su cráneo mientras se pregunta: "¿Por qué hay un espacio aquí?" Para ahorrarse algunos de los dolores de cabeza que sin duda experimentará, deberá crear su propio archivo de reinicio simple. El problema con el uso de uno de los muchos marcos existentes actualmente es que no están diseñados específicamente para usted. Por ejemplo, nunca uso el elemento "centro" en desuso en mis proyectos. En consecuencia, no necesito ponerlo en mi estilo predeterminado. Sin embargo, otros pueden necesitar hacerlo, aunque merecerían una bofetada en la muñeca ... o las nalgas si lo desea..

Paso 1: Cero fuera de sus márgenes y relleno

De forma predeterminada, los navegadores agregarán márgenes a muchos elementos. Por ejemplo, normalmente hay alrededor de seis píxeles de márgenes en el elemento del cuerpo. Como diseñador, ¡tú debes ser el que especifique estas figuras! (Excepto tal vez cuando se trata del tamaño de fuente, que es un tema completamente diferente para ser debatido extensamente). Así que vamos a poner a cero un montón de estos elementos!

 cuerpo, html, div, blockquote, img, etiqueta, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, forma, a, fieldset, entrada, th, td margen: 0; relleno: 0; borde: 0; esquema: ninguno; 

Paso 2: Toma el control de tus elementos

Es posible que haya notado que sus elementos varían en tamaño de un navegador a otro. Puede cambiar esto configurando el tamaño de fuente predeterminado en 100%.

 h1, h2, h3, h4, h5, h6 tamaño de fuente: 100%; 

A continuación, deberemos definir los márgenes y el relleno para nuestros elementos de encabezado. También voy a eliminar el tipo de estilo de lista de los elementos de mi lista. Por último, estableceré un tamaño de fuente base para el elemento del cuerpo.

 body line-height: 1; tamaño de letra: 88%;  h1, h2, h3, h4, h5, h6 tamaño de fuente: 100%; relleno: .6em 0; margen: 0 15px;  ul, ol estilo de lista: ninguno;  img border: 0; 

Paso 3: Expandir

Por lo general, me gusta incluir algunas clases comunes que uso en todos mis proyectos. Usted puede o no elegir usar estos mismos.

 .floatLeft float: left; relleno: .5em .5em .5em 0;  .floatRight float: derecha; relleno: .5em 0 .5em .5em; 

Aquí está nuestro archivo final simple reset.css.

 cuerpo, html, div, blockquote, img, etiqueta, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, forma, a, fieldset, entrada, th, td margen: 0; relleno: 0; borde: 0; esquema: ninguno;  body line-height: 1; tamaño de fuente: 88% / * Decida usted mismo si desea incluir esto. * /;  h1, h2, h3, h4, h5, h6 tamaño de fuente: 100%; relleno: .6em 0; margen: 0 15px;  ul, ol estilo de lista: ninguno;  a color: negro; texto-decoración: ninguno;  a: hover text-decoration: underline;  .floatLeft float: left; relleno: .5em .5em .5em 0;  .floatRight float: derecha; relleno: .5em 0 .5em .5em; 

Al menos para mí, esto es todo lo que necesito para comenzar con un nuevo sitio web. Para sus propios proyectos, debe ampliar lo que tengo aquí para que se adapte mejor a usted. Probablemente debería especificar los márgenes en más de sus elementos de uso común, como la etiqueta de párrafo.

Si desea tener un archivo de restablecimiento del 100%, le recomiendo que consulte el popular archivo "Reset CSS" de Eric Meyer. Alternativamente, puedes revisar el YUI Reset CSS. Nos vemos el lunes!