Ya en otras entradas anterior vimos que son los:
Elementos span y div y
Diferencias entre Class e IDSi no lo vistes, es importante que lo hagas para entender un poco mas los estilos CSS de una página o blog.
Podemos modificar el diseño de nuestro blog, no solo desde el Diseñador de plantillas, también lo podemos hacer manualmente desde Edición de HTML.
Hay muchos casos en los que utilizamos plantillas antiguas o descargadas de otras páginas dedicadas a compartir templates para Blogger.
En esos casos con el Diseñador de plantillas no vamos a poder modificar nuestro diseño.
Lo primero que tenemos que tener en cuenta que el blog tiene una
estructura la cual se encuentra dentro de
<html> y
</html>Dentro de HTML hay dos partes importantes:
Head o Cabecera: que es el código comprendido entre las etiquetas
<head> y
</head>.
Body o Cuerpo: que es el código comprendido entre las etiquetas
<body> y
</body>.
Lo que esta dentro de BODY es lo que el visitante ve en la ventana de su navegador.
Y lo que esta dentro de HEAD no será visible en ningún momento por el visitante, en la ventana de su navegador.
Como verán todo tiene un principio y un final.
Las etiquetas empiezan en
< > y terminan en
</ >.
Principio
< > y final
</ >.
O apertura
< > y cierre
</ >.
Se darán cuenta que la diferencia se encuentra en el final que siempre tiene que tener
/ para cerrar la etiqueta.
No puede haber un principio sin un fin.
Hay algunos códigos que debemos meter en el encabezado y otros que solo funcionarán en el cuerpo.
La
estructura en si es así:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Dentro del cuerpo tenemos distintas etiquetas las cuales tienen que tener una
estructura a la que le tenemos que dar un diseño.
El diseño se lo damos mediante estilos CSS, que pueden ir dentro de la etiqueta o llamarlas desde la cabecera.
Ejemplo dentro de una etiqueta con el atributo style:
<div style="Propiedad:Valor;Propiedad:Valor;">Contenido</div>
Ejemplo llamando desde la cabecera mediante atributo clase o id:
<div clase o id="nombre de la clase o id">Contenido</div>
Dentro de la cabecera los estilo CSS van dentro de:
<style type="text/css">
ACÁ EL CONTENIDO CSS
</style>
O con un link externo:
<link href="http://URL DEL ARCHIVO .css" rel="stylesheet" type="text/css">
Y en Blogger vamos a encontrar los estilos dentro de:
<b:skin><![CDATA[
ACÁ EL CONTENIDO CSS
]]></b:skin>
Por eso siempre se recomienda que pongan el estilo CSS arriba de ]]></b:skin>
Cabecera es = a head.Una estructura es en si, un cuadrado o rectángulo y tiene que tener un estilo para que se vea.Introducción a CSS.
CSS, siglas de "Cascade Style Sheet", son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML.
Los atributos id y class:Los id's se referencian con el prefijo "#" y las clases con "."Un id debe ser único y una clase puede ser referenciada por muchos elementos, incluso un elemento puede tener 2 clases.
Primero indicamos la etiqueta a la que vamos a aplicar el estilo y después le indicamos el tipo de estilo que va a tomar.Empieza con un punto (
.) o un prefijo (
#) dependiendo de que sea una clase o una id.
Seguido del nombre de la etiqueta.
Por último van las propiedades con su valor, todo encerrado entre los signos
{ y
}.
.clase o #id {
Propiedad:Valor;
Propiedad:Valor;
}
Ejemplo:
.menu {
Propiedad:Valor;
Propiedad:Valor;
}
En este caso lo que estamos haciendo es aplicar el estilo sólo a las etiquetas que contengan la clase llamada "menu", no le dará estilo a ninguna otra etiqueta.
Si agregamos los estilos dentro de la etiqueta no es necesario que tengan una clase o id.Tener en cuenta que no solo le podemos dar estilos a una clase o a una id.Hay otras etiquetas ya establecidas que no son clases ni id`s. (
ver algunos ejemplos)
Las propiedades más utilizadas en una estructura son:Font, border, margin, padding, width, height, color y background.
Les recomiendo leer también:Guía de referencia CSSRegla del reloj:Tabla de equivalencias cssTabla de ColoresDiferencias entre border, margin y paddingNo se aprende diseño en unos minutos, pero con algo hay que empezar.
Siempre es recomendable saber lo que hacemos y que es lo que hace el código que ponemos y si es posible como esta hecho.
Caja 3 de 200px x 100px con imagen dentro
