12 enero 2009

Reset CSS

El CSS de nuestros blogs nos permite darle estilo a los elementos del mismo, pero hay una opción que la mayoría no usa que es resetear el CSS. Es recomendable hacer un reset de CSS en nuestra hoja de estilo por que nos evitara problemas de visión en los diferentes navegadores. Muchos de ellos viene con propiedades css predefinidas, el reset de css nos permite eliminar los estilos predefinidos de los navegadores y asegurarnos que nuestro blog se vera como hemos diseñado.

Actualmente uno de los reset mas utilizados es el creado por Eric Mayer

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: "" "";
}

El que yo uso es el siguiente

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;
}


Para implementarlo debemos pegar el código justo después de <b:skin>

13 comentaron:

No termino de comprenderlo. Resetear CSS, por ejemplo, ¿afecta en algo a los códigos y widgets de la plantilla?

Saludos.

Homo Insanus

Homo Insanus con esto lo que te aseguras es que se va a ver como lo has programado, no afecta para nada...☺☺☺

Pizcos

Pero el primer código lo lleva nuestra plantilla?....

paqui

ohhh PIZCOS si esto es para principiantes...cómo se diría antes de princ!!!, no entiendo nada

Graciela

Yo tampoco entiendo nada es como si hablaras en chino... seguro que es poara principìantes?
Pizcos, quisiera cambiar cositas del diseño y creo que primero me voy a preparar un boceto de como lo quiero y después iré buscando en vuestros posts a ver si me aclaro.

marisabel

Lo etiqueto para principiantes porque solo hay que copiar el codigo y ponerlo donde os digo, ya explcio en la entrada para que sirve...ahora mi duda es si acabais de entender para que sirve el css de nuestras plantillas...

Pizcos

marisabel muy bien y si necesitas algo...ya sabes...☺☺☺

Pizcos

mmmmmmmm a ver un reset es poner algo a 0, eso es lo que hacemos con esto...ponemos tod a 0 para que se cargue lo que queremos...

Pizcos

Hola Pizcos! quería saber cómo se hace para quitar o disimular los puntitos blancos que rodean a una imagen después que se le hace el fondo transparente. Yo lo hago con Gimp pero después queda feo.
Disculpame que te lo pida en este post pero no sabía dónde preguntar.
Qué es el error que me da aquí de roundpic.com? varias veces me sale la ventanita de error.
Saludos!!!

Graciela Ventimiglia

sí Pizcos entiendo lo del CSS...pero me hás descolocado con la entrada...veremos cómo no explicas...chauuuuuuuuu

Graciela

Graciela Ventimiglia, me gustaria ver esa imagen original y la cambiada para ver como queda y despues te digo??? porque hay veces que hay que usar la goma de borrar, no hay mas remedio... ☺☺☺

Pizcos

Graciela no entiendo lo de no explicas, es que creo que le dais otro significado al reset, simplemento ponemos todo a antes de que cargue nuestro blog...solo eso...

Pizcos

Hola! justamente usé la goma de borrar porque primero selecciono la imagen por color, pero si la imagen tiene algo de blanco también lo selecciona. Si le doy a cortar se va el blanco de la imagen también, así que uso la goma para borrar el fondo únicamente.
Después cuando pongo la imagen sobre un fondo oscuro aparecen los puntitos blancos rodeándola. En todas las imágenes que necesito transparencias en el fondo me hace eso. Quizá no sea la forma correcta la que aprendí a usar...
Si querés te envío la imagen por mail.
Gracias y saludos!

Graciela Ventimiglia

Publicar un comentario en la entrada

"No dudes en preguntar, intentaré ayudarte. Tus comentarios son importantes y si te gustó esta entrada, no olvides suscribirte a mi feed."

Ultimos Twitts

Ultimas entradas

leelos, se lo merecen...