Como se trata de páginas web, TODO va en alguna clase etiqueta.
En Blogger, hay una sección en todas las plantillas que es el lugar por defecto donde se incluyen las definiciones de estilo:
En Blogger, hay una sección en todas las plantillas que es el lugar por defecto donde se incluyen las definiciones de estilo:
<b:skin><![CDATA[
... aquí van las definiciones ...
]]></b:skin>
Esa no es una etiqueta HTML, <b:skin> </b:skin> es una etiqueta propia de Blogger mismo y no puede ser eliminada ni duplicada, siempre debe haber una (aunque esté vacía) y no puede haber otra.
En la practica, al mostrarse nuestro sitio, esa etiqueta se transforma en una etiquetea <style> </style>
Usar ese par es otra forma de agregar estilos y por lo general, lo colocamos antes de </head>:
En la practica, al mostrarse nuestro sitio, esa etiqueta se transforma en una etiquetea <style> </style>
Usar ese par es otra forma de agregar estilos y por lo general, lo colocamos antes de </head>:
<style type='text/css'>
... aquí van las definiciones ...
</style>
Si bien eso es lo "normal", no existen restricciones que impidan colocar esa etiqueta en cualquier otra parte, ya sea dentro de un elemento HTML, luego del <body> o incluso en una entrada pero, en este último caso debemos tener en cuenta que si está habilitada la opción de crear saltos de línea automáticos (es lo que ocurre por defecto), deberemos escribir todo en una sola línea:
<style type='text/css'> #algo { ... } #otro { ... } p.mascosas { ... } </style>Hay que tener en cuenta que los estilos se ejecutan en el mismo orden que se leen, de arriba hacia abajo y de derecha a izquierda. No entender esto, es algo que siempre provocará problemas:
<style>
/* aquí, el margen izquierdo será de 20 pixeles porque primero le decimos que todo sea cero y luego le decimos que sea veinte */
#algo {
margin: 0;
...
margin-left: 20px;
}
</style>
Es un detalle importante, no sólo para editar errores sino para "sobrescribir" propiedades que agregan servicios externos o el mismo Blogger; en este caso siempre conviene sobrescribirlos agregando nuestro propios estilos después de <body> y no antes.
Otra forma de agregar estilos es cargándolos desde un archivo externo; para eso, en la plantilla usamos la etiqueta link:
Otra forma de agregar estilos es cargándolos desde un archivo externo; para eso, en la plantilla usamos la etiqueta link:
<link rel="stylesheet" type="text/css" href="URL_archivo.css" />Mucho cuidado con eso. Verifiquen siempre que la dirección URL sea correcta y accesible. En Blogger no podemos alojar hojas de estilo así que usamos servicios externos pero, es bastante común que muchos de esos servicios sólo sean accesibles si estamos logueado en ellos porque tienen la opción de ser archivos públicos o privados. Es fácil verificarlo, salgan de sus cuentas y coloquen la URL en al barra de direcciones del navegador, luego, abran la URL. Si lo que se muestra es el contenido del archivo, todo está bien. Si se abre una advertencia o una página web, la URL es errónea así que no funcionará.
También es posible incluir hojas de estilo externas en una entrada pero allí, en lugar de usar la etiqueta link, conviene importarlas así:
<style type="text/css">@import url('URL_archivo.css');</style>Por último hay una forma adicional de agregar estilos que es lo que se conoce como inline, es decir, en una etiqueta en particular y para eso, usamos un atributo que también se llama style:
<div style=" ... aqui ponemos las propiedades ... "> ... </div>¿Detalles a tener en cuenta y errores comunes?
Todas las propiedades deben terminar con un punto y coma:
p {color: #FFF; text-align: center; }
Si una propiedad tiene varios valores o palabras claves, estos deben ser separados por un espacio:
background: transparent url() no-repeat left top;
Dentro de una etiqueta style o b:skin jamás deben usarse otras etiquetas así que si queremos poner comentarios, no se debe usar la sintaxis HTML. Esto es un error:
Todas las propiedades deben terminar con un punto y coma:
p {color: #FFF; text-align: center; }
Si una propiedad tiene varios valores o palabras claves, estos deben ser separados por un espacio:
background: transparent url() no-repeat left top;
Dentro de una etiqueta style o b:skin jamás deben usarse otras etiquetas así que si queremos poner comentarios, no se debe usar la sintaxis HTML. Esto es un error:
<style>
body {color: red;}
<!-- este es un comentario -->
div {float: left;}
</style>
Los comentarios simples dentro de las etiquetas style se escriben así:
<style>
body {color: red;}
/* este es un comentario */
div {float: left;}
</style>
En Blogger, es común que se malinterpreten las instrucciones de tal o cual truco y veo que muchos hacen cosas así:
<b:skin><![CDATA[
.......
<style>
... las propiedades de un truco ...
</style>
.......
]]></b:skin>
Es un error. SImplemente, eliminen las etiquetas en rojo y todo volverá a funcionar.
8 comentarios:
Muy bien 10 Felicitado :P
Hu! Muy weno. Justo para un principiante como yo. Agradecimientos.
Graciela: Yuppie yupiie yupiiee :D
Espero que sea útil, Horacio.
Son detalles muy útiles que nos encontramos todos los días, me ha ocurrido muchas veces que al modificar los estilos no dejaba el espacio entre alguno de ellos. El error digamos más repetido es que dentro de la hoja de estilos se añade mucho las etiquetas style.
Muy buena entrada si señor, básica y muy buena :)
Si, es uno de los errores mas comunes y suele causar estragos :D
Thanks a lot!
J.Miur... ¿por qué no publicaste esto hace tres años? ;)
........ y bueno, más vale tarde que nunca :D
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...