Despertando dormiluna. Cargando datos.

domingo, 15 de marzo de 2009

Dormiluna

Mini ayuda CSS

+/- Leer entrada


Cuando queremos personalizar nuestro blog, nos dirigimos a blogs que muestran diferentes códigos, con los cuales podemos personalizar nuestro sitio.
Muchos de estos blogs, explican un poco por encima el código para así evitar que cuando lo aplicamos en nuestra página, no nos encontremos con sorpresas desagradables.
Los blogs están estructurados por cuadros, como podemos ver gráficamente cuando abrimos la página de diseño (de Blogger).
La primera parte de un blog es donde se define el tipo de documento. Nos está indicando, cómo se llama el elemento raíz del documento y que versión HTML se utiliza.

La segunda parte de un blog es el head. Aquí encontraremos una pequeña introducción que no se muestra en la ventana de navegación, que contiene datos sobre el propio documento. Es en esta parte donde daremos estilo a nuestro blog y donde modificaremos el código, para que posteriormente se muestre por ejemplo, el tipo de letra y el tamaño. Por decirlo de alguna manera estamos creando los andamios del blog (el encabezado, la parte central y el pie) que serian los cuadros nombrados anteriormente.
La tercera parte y ultima es el body, que es realmente lo que se mostrara en la ventana del navegador.
Me voy a centrar en la segunda parte del blog; que realmente es la más interesante.
Antes de nada, cuando hagamos una modificación en el código, lo mejor es dejarlo indicado con un comentario, porque así sabremos donde lo hemos realizado. Los comentarios no ocupan muchos bytes y no hacen que la página se descargue más despacio (el usuario ni lo nota). El navegador ignora todo lo que se incluya entre /**/.

Modificaciones más frecuentes:
1. Whidth y height: Tanto el texto cómo las imágenes se les puede asignar un ancho whidth y una altura height. Yo lo que hago es ir probando hasta que se ajusta al tamaño que yo quiero (cuando te acostumbras acabas tomando la medida de los px)
2. Margen exterior: La manera de definir los lados de los cuadros (o andamios) son:
-Margin-top para el margen superior.
-Margin-right para el margen derecho.
-Margin-left para el margen izquierdo.
-Margin-bottom para el margen inferior.

3. Margen interior: Es la parte interior del cuadro y se define:
-Padding-top para el margen superior.
-Padding-right para el margen derecho.
-Padding-left para el margen izquierdo
-Padding-bottom para el margen inferior.
Si ponemos una imagen ocupara toda la parte interior del cuadro (ejemplo la imagen interior que tengo puesta en todas las entradas)
4. Los bordes: El borde es muy polifacético, se adapta a todo, puedes modificar el ancho “whidth”, el color y el estilo (style). Se define:
Border-top, border-right, border-left, border-bottom.
5. El tipo y el tamaño de la fuente:
-Font-family: es el tipo de fuente, cómo no sabemos que tipo de fuente nos vamos a encontrar, lo aconsejable es poner varias fuentes.
-Font-size: definimos el tamaño de la fuente.

6. Y por último el fondo:
- Background-color para el color de fondo
- Background-image para colocar una imagen
Compartir

1 comentario:

☼El Rincón del Relax☼ *Beatriz* dijo...

Tomando nota, que siempre viene bien.

Gracias por compartir.

Te dejo un abrazo y un relajante abrazo

Beatriz

Arte e Historia con YouTube.

Curiosa página de Internet en la cual puedes encontrar videos relacionados con la Historia de España, el Arte Universal e Historia Universal.

A parte de los videos tiene otros contenidos que son:

-Destacados -Actualidad -Secciones

La página esta abalada por la Junta de Castilla y León.Arte e Historia.

YouTube. Canal de Arte e Historia
ShinChan
Yoshito Usui 1958-2009
Juegos
Se ha producido un error en este gadget.

TRES EN RAYA



WebBlog con Historia

Ell@s comentan

Dormiluno
Blog
¿Muy interesante?
 
Subir