Incluir el código CSS dentro de un post de Blogger

Hace unas semanas explicábamos como de manera fácil podíamos poner código CSS en un post  Blogger para poder mostrarlo dentro de un post.

Bien, enseñábamos como las hojas de estilo las poníamos de una forma muy fácil dentro de Blogger y ademas las podíamos usar de forma global dentro del blog.

Pero puede que no queramos esto, sino que las hojas de estilo vayan declaradas dentro del propio post, lo cual nos puede ayudar un poco a tener cierta limpieza en el blog y que estas hojas de estilo no se estén cargando constantemente, sino solo en el post que vamos a mostrar, ademas posiblemente solo las vayamos a mostrar en un post.

Pues bien, esto es todavía más fácil que si cabe.

Vamos a mostrar una tabla de una forma muy visual usando hojas de estilo CSS:

Campo 1	Campo 2	Campo 3	Comentarios
Dato A	55	100	Cualquier comentario
Dato B	67	25	data
Dato C	90	20	data
Dato D	80	20	Prueba BZD
Dato E	70	30	Etiquetas
Dato F	78,4	21,6%	T abla de ejemplo
-	-%	- %	-
-	-%	-%	-
-	-%	-%	-

 

Bien, las hojas de estilo de esta tabla están dentro del código HTML del propio post:

<style type="text/javascript">
 .datagrid table
{ border-collapse: collapse; text-align: left; width: 100%; }
</style>

Como veis, entre las etiquetas style, hemos definido una clase CSS llamada datagrip a la que hemos asignado unos atributos.

Posteriormente hemos utilizado una etiqueta denomina datagrip donde hemos puesto dentro el código HTML de la tabla, también podemos utilizar estas etiquetas como explicábamos en el anterior post como atributos del código html :

<div class="datagrid">
<table>
Código de la tabla
</table>
</div>

Otro ejemplo, definimos la clase bix dentro del código html del post

<style type="text/javascript">
.bix {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(rgb(240, 240, 240)), to(rgb(252, 252, 252)));
background-position: initial initial;
background-repeat: initial initial;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-color: rgb(224, 224, 224);
border-style: solid;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-width: 1px 1px 2px;
color: #303030;
padding: 1px 5px;
white-space: nowrap;
margin: 0px 4px 0px 4px;
font-style: italic;
}
</style>

Y con la etiqueta bix, y con la etiqueta anchor de html, creamos estas cajitas tan monas.

Y con la etiqueta <a class="bix">bix</a>, y con la etiqueta <a class="bix">anchor</a> de html, creamos estas <a class="bix">cajitas</a> tan monas.

Creo que es muy fácil de esta forma agregar cualquier hoja de estilo CSS a nuestros post, podéis definir de esta forma cualquier etiqueta CSS y luego aplicarla al código HTML.

Por cierto os dejo un regalito, un generador de tablas con CSS, que es como hemos obtenido el código CSS y HTML para realizar la tabla anterior.

Ademas hay muchos generadores de hojas de estilo CSS en la web, que os ayudaran a dar un mejor aspecto a vuestros post sin tener que saber código CSS explícitamente.

Y como explicaba en el anterior post, podemos con Firefox, copiar los estilos CSS que nos gusten de cualquier página web, con el inspector de elementos.