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