Resetear la CSS

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Para evitar problemas a la hora de maquetar una web, es bastante interesante hacer un reset dentro de la CSS, de forma que ningún elemento HTML de la web venga con parametros predefinidos por el navegador. Si no reseteamos la web puede ocurrirnos que el mismo elemento se vea diferente de unos navegadores a otros porque ese elemento tiene unos estilos predefinidos diferentes en cada navegador. Para resetear la CSS lo que hacemos es meter al principio de nuestra CSS una serie de  estilos que borran los estilos predefenidos del navegador. Desde CSSlab nos ofrecen estos completisimos estilos para resetear la CSS.

/* —
CSS Reseter
CSSLab © 2010 by Jorge Epuñan
http://www.csslab.cl/2010/06/01/css-reseter-v2/
— */

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, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, header, footer, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
}

article, aside, nav, section, dialog, figure, header, footer, hgroup {
display:block;
}

legend {
display:none;
}

:focus {
outline: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

caption, th, td {
text-align: left;
font-weight: normal;
}

a img, iframe {
border: none;
}

ul {
list-style: none;
}

input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}

input, select {
vertical-align:middle;
}

select {
margin: inherit;
}

button {
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
}

/* Fixes incorrect placement of numbers in ol’s in IE6/7 */
ol { margin-left:2em; }

/* ========================================= clearfix == */
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}
.clearfix {display: block;}

El fichero original podeís descargarlo desde http://www.csslab.cl/downloads/CSS+Reseter+v2.

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.