oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso CSS - Lección 12: Modelo de caja (altura y anchura)
Bien pues en esta lección veremos como podemos definir la altura y también la anchura de los elementos de nuestra página web mediante nuestra hoja de estilos CSS.
Para realizar esto usaremos las 2 siguientes propiedades:
- width
- height
La propiedad width
Con la propiedad width podremos definir la anchura que queremos dar a un elemento.
Veamos un ejemplo de caja en la que podremos introducir texto y a la que daremos una anchura de 400px. El código a insertar en nuestra hoja de estilos CSS sería el siguiente:
.cajadetexto {
width: 400px;
border: 2px solid red;
background: #F5D0A9;
}
El resultado visualizandolo desde el navegador sería el siguiente:
La propiedad height
Si con la propiedad "width" establecíamos la anchura de caja del elemento ahora con la propiedad height establecerémos la altura de caja de dicho elemento.
Usaremos como ejemplo el anterior, pero esta vez insertaremos una altura de caja de 300px. Veamos como quedaria nuestro código CSS:
.cajadetexto {
width: 400px;
height: 300px;
border: 2px solid red;
background: #F5D0A9;
}
El resultado visualizandolo desde el navegador sería el siguiente:
Pues con esto acabamos ya las lecciones sobre el modelo de caja en CSS, si hasta ahora estabas usando las tablas para tus diseños web derías pensar en pasarte a las cajas para tus próximos diseños puesto que las cajas ofrecen un sin fin de posibilidades a la hora de crear una página web. Con las cajas se pueden lograr elegantes presentaciones con mucha más precisión.
Recuerda que puedes dejarnos tus dudas en el Foro OTW.
Quiero aprender más!!!
- Avanzar a Lección 13: Elementos flotantes
- Retroceder a Lección 11: Modelo de caja (bordes)
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®