fabian | 16 Juliol, 2007 19:14
Hace unos meses cambié la presentación de esta bitácora sin guardar la anterior. Hoy he intentado recordarla con la finalidad de tener dos presentaciones que pueda alternarlas a voluntad sin tener que perder muchas horas en ello.
La presentación se realiza mediante un archivo llamado CSS en el que van los códigos relacionados con los aspectos visuales y de organización espacial en la página. Yo apenas sé algo de toda esta temática y no puedo hablar apenas sobre cómo se hace. El archivo CSS de esta página se llama "style.css" y yo lo abro con el bloc de notas.
Torre del Hostal Cuba, edificio modernista actualmente en restauración (tag: torres)
Durante un tiempo observaba con atención las páginas y, cuando encontraba algún elemento interesante - tal como la línea alrededor de las fotografías o el fondo colorido de los "blockquotes" - guardaba la página y, en la carpeta de sus archivos, encontraba el CSS. Entonces estudiaba el elemento que me interesaba y lo copiaba.
Para entender el CSS conviene conocer los códigos básicos del HTML, que son muy sencillos. Así, para poner una línea alrededor de una imagen, hay que buscar en el CSS el código IMG y, tras él, entre llaves {}, van las indicaciones referidas a la presentación de la imagen.
Es importante en los CSS el tema de los contenedores. Así, por ejemplo, el contenedor más amplio es el de toda la página: "body" en HTML. En él, siempre entre llaves, se indica el tipo de letra, su color, el color del fondo, etc. Dentro del contenedor de la página puede haber otros contenedores menores que se señalan en HTML con el código "div class='nombre'". Así, en esta bitácora, a la derecha está el contenedor "div class='menu'" y a la izquierda el contenedor "div class='contenido'". En los CSS los contenedores o divisores tipo class se señalan con el punto (.). Así, aparece .menu seguido con las llaves ({}) y, en su interior, las indicaciones que ha de cumplir el contenedor menú.
No es excesivamente difícil entender los CSS. Lo más complejo es llegar a conocer los contenedores que una página utiliza y sus nombres.
En algunos artículos yo utilizo un contenedor de color amarillo para indicar las páginas relacionadas. Le llamo "anuncio". En el HTML, al escribir el artículo, pongo: "div class='anuncio'" (los códigos HTML se ponen entre los signos menor que y mayor que, que yo he sustituído por dobles comillas). Luego pongo lo que quiero escribir, por ejemplo: "p"Este es un contenedor llamado anuncio."/p" (un párrafo con sus códigos inicial y final). Siempre hay que cerrar los contenedores: "/div".
Pues el contenedor anuncio lleva en el CSS lo siguiente:
.anuncio {
DISPLAY: block; (indica que es un bloque contenedor)
LEFT: 100px; (Indica el punto superior izquierda del bloque, que estará a la distancia de 100 px del borde izquierdo de la página)
WIDTH: 350px; (indica la anchura del contenedor)
POSITION: relative; TOP: auto; HEIGHT: auto; (Indican la posición en vertical del contenedor y su altura; todos estos datos no son fijos)
BACKGROUND-COLOR: #ffffcc; (el color de fondo del contenedor)
FONT-FAMILY: "Comic Sans MS"; (el tipo de letra)
TEXT-ALIGN: center; (la alineación de la letra)
FONT-SIZE: 14px; (el tamaño de la letra)
COLOR: #333333; (color de la letra)
BORDER-RIGHT: #444 1px solid; (los bordes del contenedor: su color y tamaño)
BORDER-TOP: #ff8 1px solid;
BORDER-LEFT: #ff8 1px solid;
BORDER-BOTTOM: #444 1px solid;
PADDING-RIGHT: 5px; (el padding es la distancia vacía que debe bordear el interior del contenedor)
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
}
Las indicaciones sobre la presentación sólo se ponen una vez en el CSS y sirven para siempre, ya que en el escrito conviene sólo poner los códigos HTML básicos, pero no sus atributos de apariencia, que los toma del CSS.
El contenedor llamado "anuncio", aparece así:
Este es un contenedor llamado anuncio.
« | Març 2024 | » | ||||
---|---|---|---|---|---|---|
Dl | Dm | Dc | Dj | Dv | Ds | Dg |
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Muy trabajado
Kokon | 16/07/2007, 22:35
Ya me parecía que tu blog estaba muy cuidado, pero no conocía la complejidad que hay detrás. Enhorabuena.
P.D.¿No hay paseos buscando la sombra de los árboles?