Friday, July 15, 2011

Errores comunes al poner los c?digos CSS

Sin importar qu� tanto tiempo tengamos con los blogs nada nos exenta de cometer errores al intentar hacer un cambio en la plantilla. As? que de repente ponemos un c?digo por aqu?, otro por all?, damos Vista Previa y nada... o todo se ve igual o no se ve como deber?a verse. Las razones pueden ser muchas, pero hoy nos centraremos en los problemas habituales que cometemos al poner estilos CSS en la plantilla del blog.

Los estilos, cuando van antes de ]]></b:skin> debemos asegurarnos de nunca eliminar nada alrededor de donde lo pongamos.
Algo bastante (pero bastante) com?n, es que al ponerlo se elimina la llave de cierre del c?digo anterior. Por ejemplo aqu?:
.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}


Hola, yo soy un contenedor con la clase .negro
Hola, yo soy un contenedor con la clase .azul



Ah? sin querer hemos eliminado la llave de cierre de la clase .negro, eso har? que aunque los estilos de .negro sigan funcionando, los estilos de .azul no tendr?n efecto alguno.
Pero si lo pones bien, sin eliminar la llave de cierre no habr? problema alguno.
.negro {
background:#000;
color:#fff;
}
.azul {
background:#58ACFA;
color:#000;
}



Hola, yo soy un contenedor con la clase .negro
Hola, yo soy un contenedor con la clase .azul



Un simple y llano caracter puede hacer la diferencia entre que algo funcione o no, ya sea la llave de cierre, el punto y coma al final de cada declaraci?n de estilo, el punto antes de la clase, etc.
Es por eso que siempre debemos asegurarnos de no eliminar nada al momento de poner un c?digo.


Otro error menos com?n pero que tambi�n sucede es al momento de poner anotaciones o comentarios en los estilos CSS. Cuando ponemos un comentario para identificar un c?digo debe ser de esta manera:
/* Estilos de ejemplo */
.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}
Pero nunca deber? ser de esta manera:
<!-- Comentario -->
.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}
O de esta otra:
// Comentario
.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}

Esas dos ?ltimas formas err?neas s?lo se usan y son aceptables en c?digos que van dentro del <body> incluso dentro del <head> pero nunca antes de ]]></b:skin>

Algunas veces te encontrar?s con estilos que est?n encerrados entre <style type="text/css"> y </style>
En esos casos los estilos van antes de </head> o despu�s de <head> pero no antes de
]]></b:skin> de lo contrario los estilos no podr?n funcionar y se generar? un espacio arriba de la plantilla e incluso se mostrar?n estos caracteres: -->

As? que, si ponemos los c?digos sin eliminar nada, si ponemos las anotaciones bien, y si todo lo colocamos en el lugar correcto no deber?n surgir estos problemas de que las cosas no se ven como se deber?an ver, al menos no referente al CSS.

No comments:

Post a Comment