Códigos reseteadores de CSS
In: css
21 ago 2009
Dos códigos de CSS para resetear los estilos de todos los elementos de los diferentes navegadores, para intentar obtener la máxima coherencia en el CSS posterior.
El primer es de Eric Meyer, un conocido diseñador web en internet. Este es su código Reset CSS en la versión de 15/01/2008:
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; }
Y el segundo código es Crucial Web Hosting, que añade una serie de clases como estándares (cada uno a su gusto):
/***** Global Settings *****/ html, body { border:0; margin:0; padding:0; } body { font:100%/1.25 Arial, Helvetica, sans-serif; } /***** Headings *****/ h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-weight:normal; } h1 { padding:30px 0 25px 0; letter-spacing:-1px; font-size:2em; } h2 { padding:20px 0; letter-spacing:-1px; font-size:1.5em; } h3 { font-size:1em; font-weight:bold; } /***** Common Formatting *****/ p, ul, ol { margin:0; padding:0 0 1.25em 0; } ul, ol { padding:0 0 1.25em 2.5em; } blockquote { margin:1.25em; padding:1.25em 1.25em 0 1.25em; } small { font-size:0.85em; } img { border:0; } sup { position:relative; bottom:0.3em; vertical-align:baseline; } sub { position:relative; bottom:-0.2em; vertical-align:baseline; } acronym, abbr { cursor:help; letter-spacing:1px; border-bottom:1px dashed; } /***** Links *****/ a, a:link, a:visited, a:hover { text-decoration:underline; } /***** Forms *****/ form { margin:0; padding:0; display:inline; } input, select, textarea { font:1em Arial, Helvetica, sans-serif; } textarea { width:100%; line-height:1.25; } label { cursor:pointer; } /***** Tables *****/ table { border:0; margin:0 0 1.25em 0; padding:0; } table tr td { padding:2px; } /***** Wrapper *****/ #wrap { width:960px; margin:0 auto; } /***** Global Classes *****/ .clear { clear:both; } .float-left { float:left; } .float-right { float:right; } .text-left { text-align:left; } .text-right { text-align:right; } .text-center { text-align:center; } .text-justify { text-align:justify; } .bold { font-weight:bold; } .italic { font-style:italic; } .underline { border-bottom:1px solid; } .highlight { background:#ffc; } .wrap { width:960px;margin:0 auto; } .img-left { float:left;margin:4px 10px 4px 0; } .img-right { float:right;margin:4px 0 4px 10px; } .nopadding { padding:0; } .noindent { margin-left:0;padding-left:0; } .nobullet { list-style:none;list-style-image:none; }
ACTUALIZACIÓN: Añado un link a una página con 10 técnicas para resetear CSS: Pinceladas da Web.
Entradas relacionadas:
- Tags: css, internet, navegadores
