CSS Reset

CSS Reset es una técnica para inicializar todos los estilos que vienen por defecto con los navegadores (margenes, alineaciones, alto de las lineas, tamaños de letra, etc.). La técnica consiste en eliminar completamente los estilos predefinidos por el navegador para luego empezar a trabajar con una hoja de estilos en blanco.

Una vez inicializados o reseteados los estilos, podemos empezar a construir los estilos con la garantía que serán mucho mas consistentes. Hay muchas técnicas para realizar esta eliminación de estilos, desde los muy sencillos hasta los muy completos.

Reset Básico
Consiste en utilizar el selector universal para el padding y margin de todos los elementos html. Es la técnica mas usada por la mayoría de los desarrolladores.

[css]
* {
padding: 0;
margin: 0;
}
[/css]

Reset Universal Básico
Esta técnica consiste ademas de eliminar el padding y el margin, eliminar los estilos de las fuentes, los bordes y las alineaciones.
[css]
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
[/css]

Eric Meyer’s CSS Reset
Esa un tecnica desarrollada por Eric Meyer en Reset Reloaded y basado en YUI Reset CSS con algunas modificaciones. Esta técnicas es una de las mejor logradas y que resuelven la mayoría de problemas de estilos.

[css]
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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}
[/css]

Hay que notar que no se utiliza el selector universal y el su lugar se listan todos los elementos a los que deseamos se aplique el reset, además de ello se eliminan los estilos de las listas, entre otros. Lo recomendable es guardar estas reglas en una hoja de estilos llamada reset.css e incluirlos en nuestro web antes de incluir los estilos propios del web.

Mas Información

Comentarios Total 6 comentarios


Christian
Publicado: 18/08/2008 6:44 am

Interesante, Gracias!!!

antonio
Publicado: 18/08/2008 6:46 am

y como lo llamo desde mi plantilla de wordpress.
¿Desde el header?
¿y con que código?

unijimpe
Publicado: 18/08/2008 10:56 pm

Antonio, lo que debes hacer es editar el archivo header.php de tu template y agregarlo con un estilo mas, pero antes de los estilos ya existentes, por ejemplo si tu estilo es:

<link rel="stylesheet" type="text/css" href="/wp-content/themes/demo/style.css" />

Debes reemplazarlo por lo siguiente:

<link rel="stylesheet" type="text/css" href="/wp-content/themes/demo/reset.css" />
<link rel="stylesheet" type="text/css" href="/wp-content/themes/demo/style.css" />

Obviamente debes copiar el archivo reset.css al directorio de archivos del template que utilizas.

Hay que tener en cuenta que no es recomendable utilizarlo en páginas ya hechas pues habrán estilos que hay que modificar para que el diseño se siga manteniendo. Pero si estas empezando a implementar un nuevo diseño es lo ideal pues te asegurarás que el diseño se vea correctamente en los diferentes navegadores.

Tiago
Publicado: 19/08/2008 7:33 am

Hola, hace rato que visito tu blog.
Te felicito por los aportes que haces.
Tengo una duda, implementando esto.
El sitio que uno maquete se veria de igual manera en todos los navegadores?. Como seria el tema.

Desde ya muchas gracias.

Saludos

antonio
Publicado: 19/08/2008 7:39 am

Ok,,muchas gracias

Francisco
Publicado: 20/08/2012 12:53 am

No lo recomiendo para un framework, saludos.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)