Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Consejo Rápido: Cree Su Propio Archivo Simple Reset.css

by
Read Time:3 minsLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Demasiados diseñadores CSS novatos no se dan cuenta de la importancia de crear un archivo "reset.css".  Cuando usted tiene un entorno en el que cada navegador tiene su propio estilo "predeterminado", a menudo se encontrará dando golpecitos a su cráneo mientras se pregunta, "¿Por qué hay un espacio aquí?"  Para ahorrarle algunos de los dolores de cabeza que usted sin duda experimentará, tendrá que crear su propio archivo simple de restablecimiento. El problema con el uso de uno de los muchos frameworks existentes actualmente es que no están diseñados específicamente para usted. Por ejemplo, yo nunca utilizo el elemento obsoleto "center" en mis proyectos. Consecuentemente no necesito ponerlo en mis estilos predeterminados. Sin embargo, otros pueden necesitar hacerlo - a pesar de merecer por ello en la muñeca ... o en las nalgas si usted está tan propenso.

Paso 1: Ponga en Cero sus Márgenes Y el Relleno

De forma predeterminada, los navegadores agregarán márgenes a muchos elementos. Por ejemplo, normalmente hay unos seis píxeles de margen en el elemento body. ¡Como el diseñador, usted debe ser el que especifica estas figuras! (Excepto quizás cuando se trata de tamaño de fuente - que es un tema de todo otro que se debatirá a fondo.) ¡Así que vamos poner en cero a un montón de estos elementos!

Paso 2: Tome el Control De Sus Elementos

Es posible que haya notado que sus elementos varían de tamaño entre diferentes navegadores. Usted puede cambiar esto estableciendo el tamaño de fuente predeterminado en 100%.

A continuación, necesitaremos definir los márgenes y el relleno de nuestros elementos de encabezado. También voy a eliminar el estilo de tipo de lista de mis elementos de lista. Por último, estableceré un tamaño de fuente básico para el elemento body.

Paso 3: Amplíe

Normalmente me gusta incluir algunas clases comunes que uso en todos mis proyectos. Usted puede o no puede elegir usar estas para sí mismo.

Aquí Está Nuestro Archivo Simple Final Reset.css.

Por lo menos para mí, esto es todo lo que necesito para empezar con un nuevo sitio web. Para sus propios proyectos, usted debe ampliar sobre lo que tengo aquí de tal manera que se adecúe mejor a sus necesidades. Probablemente debería especificar los márgenes de los elementos de uso común, como la etiqueta de párrafo.

Si desea tener un archivo de reinicio completo al 100%, le recomiendo referirse al popular archivo "Reset CSS" de Eric Meyer. Alternativamente, puede consultar el Reset CSS de YUI.  ¡Nos vemos el lunes!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.