Esta vez posteo una librería css creada por Erik Meyer, su finalidad es resetear los tag y estandarizarlos a los diversos navegadores que hay en el mercado. Tarea no menor si pensamos que no son pocas las alternativas.
Para quien no ha sido un dolor de cabeza maquetar una plantilla con css-html y darnos cuentas que obtenemos diferentes resultados a medida que probamos en distintos navegadores, y es que no son pocos los navegadores que existen en el mercado, y se multiplican cuando pensamos en las diferentes versiones que existen de cada uno.
El objetivo de resetear una hoja de estilo es reducir la inconsistencia de los navegadores, por ejemplo altura de línea predeterminada, márgenes, tamaño de las fuentes etc.
En resumen lo que logramos es estandarizar los valores de interpretación por defecto de los diferentes navegadores.
/* v1.0 | 20080212 */
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;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: 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;
}
Arituculo Original: Eric Meyer
No hay articulos relacionados.
2 Comentarios
Entonces pongo esto en una hoja CSS principal, luego en cada pagina html que vaya creando, pongo las reglas CSS que sean necesarias para dichas páginas y vuelvo a darle reglas, como a body, h1, h2, p, etc, etc.
Es la forma correcta? gracias por clarificarme el procedimiento.
Saludos y muchas gracias por la información del blog, me ha sido muy útil
La idea de un reset de css es precisamente eso, dejar los valores mas conflictivos entre los navegadores en cero, luego para cada estilo que crees deberas comenzarlo desde cero.
es decir defines o llamas el css que hace el reset y luego comienzas a definir tus css, por ejemplo el body, tus contenedores, box, etc
Un ejemplo clasico seria:
@import url("estilos.css");
html
{
background:url(../img/bg.png) repeat-x top;
}
body
{
background:#fff url(../img/bg-footer.png) repeat-x bottom left;
color:#444;
font:62.5% /1.5 Arial,Helvetica,sans-serif;
line-height:1.5;
text-align:center;
margin-top:10px;
padding-bottom:10px;
}
#header
{
width:950px;
overflow: hidden;
margin:0 auto;
/*border:1px solid #00FF00;*/
}
... etc
</style>
saludos