Estructura CSS sencilla y sus partes
Este mini-manual da por sentado que tu sabes sobre HTML, la estructura de cada declaración en CSS, selectores y unidades de medida. Si no conoces sobre estos temas te comiendo que dejes esta guía para después y busques una que explique HTML (en mi sitio hay una: www.kilometro6.es.tl), los selectores y las unidades de medida.
- BODY
el body es el cuerpo del documento y mediante este selector podemos definir el fondo de la pagina de esta menra:
Código: #body {
background-color: #D3DBDF;
}
- MODELO DE CAJAS
El modelo de cajas nos permite diseñar nuestras páginas, sin él no es posible ya que el CSS aplica los estilo que nosotros queremos a estas cajas.
Quizas estés pensando en que es todo un tema hacer eso pero en realidad no lo es. Las cajas se crean cada vez que insertamos una etiqueta HTML y (como dije antes) el CSS modifica esta caja con las características, estilos que ponemos en el CSS.
Lo primero a definir en las cajas es su altura y anchura.
Así que crearemos el contenedor donde ira el menú, el header, el contenido, el footer, etc:
Código: #contenedor {
width: 1045px;
}
Al no definir la altura esta se adapta al contenido que hay dentro del contenedor que es lo más conveniente así crearemos un diseño más fluido.
Luego se pueden elegir los márgenes (margin) y el relleno (padding):
Código: #contenedor {
width: 1045px;
margin: 0 auto;
}
Ahora que tenemos el contenedor podemos comenzar con las demás partes del diseño:
- El espacio donde ira el contenido:
Código: #contenido {
background-color: #D0E6F1;
width: 700px;
margin: 0px 5px 5px 0px;
padding: 10px;
}
- La columna derecha donde podremos poner contenido variado:
Código: #right {
width: 300px;
background-color: #D0E6F1;
margin: 0px 0px 5px 0px;
padding: 10px;
}
- Los box de la columna derecha. (Serían sub divisiones de esta columna para poder distribuir el contenido más fácilmente)
Código: .box {
height: 150px;
}
Ahora podrán saber si tienen ojo para el CSS... Yo deje algunas cuestiones sin aclarar en los códigos que acabo de mostrar y son 3. Las describo abajo.
1. Hay una propiedad nueva: "background". Esta propiedas puede tener 2 valores: color | url
Mediante el valor "color" le asignaremos un color RGB a la caja a que se aplica el selector y mediante "url" asignamos un fondo. En este último caso debe especificarse la url del fondo entre (paréntesis) de esta forma:
background: url(url de la imagen de fondo);
2. Hay algunas partes del diseño de las que no pusimos sus códigos, se los explico más adelante.
3. Nos falto posicionar las partes del desing y es a lo que vamos ahora.
- POSICIONAMIENTO
Mediante el posicionamiento podemos ubicar en cualquier parte de nuestra web las cajas, partes o elementos del desing para así lograr diferentes estructuras CSS. En este caso crearemos una estructura simple y lo más interesante es que no definiremos la altura o anchura de los elementos.
Existen 5 tipos de posicionamiento que nos permiten ubicar las cajas en nuestro desing y en este caso utilizaremos el posicionamiento flotante ya que, desde mi punto de vista, es el más sencillo de hacer pero no de entender.
- POSICIONAMIENTO FLOTANTE
Lo más importante a saber antes de empezar a trabajar es que las cajas posicionadas mediante este posicionamiento son "especiales". ¿Por qué? Porque salen del flujo normal de la página por lo que las demás cajas ocuparan su lugar y la caja con float ocupa el lugar de las cajas sin float.
Para definir el posicionamiento flotante se utilizan los valores left | right y la propiedad clear.
Si uno utiliza los valores left y right el comportamiento de la caja será el siguiente:
left: la caja se desplazara hasta la zona más izquierda del documento
right: la caja se desplazara hasta la zona más derecha del documento
- Propiedad clear
Si se utiliza la propiedad clear se pueden utilizar los siguientes valores: left | right | both
El comportamiento de esta propiedad en realidad es muy sencillo. Al utilizarla uno posicionará la caja que tenga la propiedad clear justo debajo de cualquier caja flotante.
Si se utiliza el valor left la caja de desplazara hacia abajo hasta que pueda colocarse en una línea en la que no haya ninguna caja flotante en el lado izquierdo.
Si se utiliza el valor right la caja de desplazara hacia abajo hasta que pueda colocarse en una línea en la que no haya ninguna caja flotante en el lado derecho.
El valor both despeja los lados izquierdo y derecho del elemento, ya que desplaza el elemento de forma descendente hasta que el borde superior se encuentre por debajo del borde inferior de cualquier elemento flotante hacia la izquierda o hacia la derecha.
Ahora que ya explique la propiedad float podremos posicionar los demás elementos del diseño de la siguiente manera:
Código: #body {
background-color: #D3DBDF;
}
#contenedor {
width: 1045px;
margin: 0 auto;
}
#contenido {
float: left;
background-color: #D0E6F1;
width: 700px;
margin: 0px 5px 5px 0px;
padding: 10px;
}
#right {
float: right;
width: 300px;
background-color: #D0E6F1;
margin: 0px 0px 5px 0px;
padding: 10px;
}
.box {
height: 150px;
}
#header {
clear: both;
background-color: #D0E6F1;
}
#menu {
float: left;
list-style: none;
margin: 5px 0px 5px 0px;
padding: 0;
width: 100%;
background-color: #D0E6F1;
}
#menu li {
float: left;
margin: 1px 0px 1px 0px;
padding: 0;
border-right: 1px dashed;
}
#menu a {
display: block;
float: left;
margin: 0;
padding: 5px 9px;
text-decoration: none;
}
#menu a:hover {
padding-bottom: 8px;
color: #ffffff;
background-color: #141BF3;
}
#footer {
clear:both;
background-color: #D0E6F1;
padding: 10px;
}
Nuevamente en el código anterior deje cuestiones sin aclarar. Veamos si las encontraron...
1. Puse unas nuevas declaraciones: menu | menu li | manu a
Son las partes del menú horizontal pero en esta guía no las explicare
2. Antes dije que faltaban códigos de elementos del desing, era porque los posicionaríamos mediante clear: both y no es necesario mencionar ancho y alto porque se ajustan al espacio del contenido y desing.
3. La etiqueta box no tiene mencionado el posicionamiento, es porque no lo necesita ya que los navegadores aplican el posicionamiento estático por defecto y lo posiciona automáticamente.
Ahora sólo nos falta llamar los estilos mencionados en el CSS mediante etiquetas HTML que serán el texto por encima y por debajo de la página pero este código no esta dividido en las 2 partes así que tendremos que hacerlo.
Código: <div id="contenedor">
<div id="header">
contenido
</div>
<ul id="menu">
<li><a href='http://tuweb.es.tl'>Link</a></li>
<li><a href='http://tuweb.es.tl'>Link</a></li>
<li><a href='http://tuweb.es.tl'>Link</a></li>
</ul>
<div id="contenido">
contenido
</div>
<div id="right">
<div class="box">
contenido
</div>
</div>
<div id="footer">
contenido
</div>
</div>
Los que saben adaptar plantillas CSS normales a PWG teoricamente deben saber como separar el código pero si sos este caso y no sabes cómo sos un papafrita...
El código debe dividirse al comenzar el contenido, osea cuando empieza el div que abre el espacio reservado para el contenido. Acuérdense que el div con el que empieza el contenido debe incluirse. Este sería el texto por encima de la página.
El texto por debajo de la página comienza con el div que cierra el espacio reservado para el contenido, el cual debe incluirse.
Entonces, si comprendiste lo que acabo de explicar, debes haberte dado cuente que lo que esta entre medio de los div que comienzan y cierran el espacio reservado para el contenido no debe ir y en su lugar PWG pone el contenido de nuestras webs.
Quedaría de esta forma:
Texto por encima de la página:
Código: <div id="contenedor">
<div id="header">
contenido
</div>
<ul id="menu">
<li><a href='http://tuweb.es.tl'>Link</a></li>
<li><a href='http://tuweb.es.tl'>Link</a></li>
<li><a href='http://tuweb.es.tl'>Link</a></li>
</ul>
<div id="contenido">
Texto por debajo de la página:
Código: </div>
<div id="right">
<div class="box">
contenido
</div>
</div>
<div id="footer">
contenido
</div>
</div>
Con esto termina este mini-manual CSS. ¿Por qué se llama mini-manual? Porque esto no se compara a lo que es una guía completa de CSS. Ni se hacerca a las 1/10 partes entonces te recomiendo que si sos vago abandones ahora el aprender CSS y para los que no lo son los veo en el próximo mini-manual, manual o tutorial.
Saludos!
© 2011 Kilometro6 - Manual creado a pedido de lautiito por Kilometro6 - Prohibida su reproducción total o parcial para cualquier fin o causa - Sólo Kilometro6 puede permitir la reproducción de esta obra ______________ 
Ultima edición por kilometro6 el Dom Mar 13, 2011 3:08 pm; editado 1 vez
|
