El modelo de caja en CSS describe las cajas que se generan a partir de los elementos HTML. El modelo de caja también contiene opciones detalladas en lo referente al ajuste de márgenes, bordes, relleno (padding) y contenido de cada elemento. La siguiente imagen muestra cómo se construye el modelo de caja:
El modelo de caja en CSS
A primera vista, la imagen anterior puede parecer muy teórica, así que intentemos usar el modelo en un caso real con un encabezado y algo de texto.
El código HTML de nuestro ejemplo es el siguiente (extraído de la Declaración Universal de los Derechos Humanos):
<h1>Artículo 1:</h1>
<p>Todos los hombres nacen libres
e iguales en diginidad y derechos. Están
dotados de razonamiento y consciencia y
deberían de comportarse entre sí con
espíritu de hermandad.</p>
si añadimos algo de color e información sobre la fuente, el ejemplo se podría presentar así:
El ejemplo contiene dos elementos: el elemento
<h1> y el elemento <p>. El modelo de caja para los dos elementos se puede ilustrar como sigue:
Aunque puede parecer un poco complicado, la imagen muestra cómo cada elemento HTML está rodeado por cajas, cajas que se pueden ajustar usando CSS.
MARGEN Y RELLENO (PADDING)
En la lección anterior te presentamos el concepto de modelo de caja. En ésta, examinaremos cómo cambiar la presentación de los elementos estableciendo las propiedades
margin y padding.Establecer el márgen de un elemento
Todo elemento tiene cuatro lados: derecho, izquierdo, superior e inferior. La propiedad
margin hace referencia a la distancia desde cada lado respecto al elemento colindante (o respecto a los bordes del documento).
En un primer ejemplo, veremos cómo definir los márgenes del documento en sí, es decir, del elemento
<body>. La imagen siguiente muestra cómo queremos que sean los márgenes de nuestras páginas.
El código CSS necesario para esto es el siguiente:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
O podrías elegir usar la versión combinada de
margin, que queda como más elegante:
body {
margin: 100px 40px 10px 70px;
}
Se puede establecer los márgenes de casi todos los elementos del mismo modo. Por ejemplo, podemos elegir definir márgenes para todos los párrafos de texto marcados con el elemento
<p>:
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
Establecer el relleno de un elemento
La propiedad
padding puede entenderse como "relleno". Esto tiene sentido puesto que el relleno (padding) no afecta a la distancia de un elemento respecto a otros elementos, sino que sólo define la distancia interior entre el borde y el contenido del elemento.
El uso de la propiedad
padding se puede ilustrar viendo un sencillo ejemplo en el que todos los títulos tienen diferentes colores de fondo:
h1 {
background: yellow;
}
h2 {
background: orange;
}
Al deninir el
padding para los títulos, cambiamos la cantidad de "relleno" que habrá alrededor del texto en cada uno de ellos:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
BORDES
Los bordes se pueden usar para muchas cosas, por ejemplo, como elemento decorativo o para subrayar la separación entre dos cosas. CSS te ofrece opciones sin fin a la hora de usar bordes en tus páginas. En esta lección vamos a examinar las siguientes propiedades CSS:
Anchura del borde [border-width]
La anchura del borde se define por medio de la propiedad
border-width, que dispone de los valores thin, medium y thick, o de un valor numérico indicado en píxeles. La siguiente imagen ilustra cómo funciona el sistema:
Color del borde [border-color]
La propiedad
border-color define el color del borde. Los valores de esta propiedad son los valores de color normales, por ejemplo, "#123456" (en notación hexadecimal), "rgb(123,123,123)" (en notación RGB) o "yellow" (por nombre del color).Estilo de borde [border-style]
Se puede elegir entre diferentes estilos de borde. Más abajo se muestran 8 estilos de borde según los interpreta Internet Explorer 5.5. Todos los ejemplos se muestran con el valor del color a "oro" y el valor de la anchura a "thick", pero se pueden mostrar, por supuesto, en otros colores y grosores.
Si no queremos mostrar ningún borde, se puede usar los valores
none o hidden.
Ejemplos de definición de bordes
Las tres propiedades descritas anteriormente se pueden unir para cada elemento y así producir diferentes bordes. Para ilustrar esto, veremos un documento en el que definimos diferentes bordes para los elementos
<h1>, <h2>, <ul> y <p>. El resultado puede que no sea demasiado bonito pero ilustra gráficamente algunas de las muchas posibilidades:
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
También es posible declarar propiedades especiales para el borde superior (top), inferior (bottom), derecho (right) e izquierdo (left). En el siguiente ejemplo vemos cómo:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Combinación de propiedades [border]
Como ocurre con muchas otras propiedades, usando la propiedad
border se pueden combinar otras muchas propiedades en una sola. Veamos un ejemplo:
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
La declaración anterior se puede combinar así:
p {
border: 1px solid blue;
}
ALTURA Y ANCHURA
Hasta ahora, no hemos prestado demasiada atención a las dimensiones de los elementos con los que hemos estado trabajando. En esta lección examinaremos lo fácil que es definir la altura y anchura de un elemento. Para lo cual usaremos las propiedades:
Estableciendo la propiedad width
Con la propiedad
width se puede definir la anchura concreta de un elemento.
El sencillo ejemplo que sigue nos proporciona una caja en la que se puede introducir texto:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Estableciendo la propiedad height
Fíjate cómo en el ejemplo anterior la altura de la caja queda establecida por el contenido de la misma. Se puede influir en la altura de un elemento con la propiedad
height. Por ejemplo, probemos a fijar la altura de la caja en 500px:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
TOMADO DE:
http://es.html.net/tutorials/css/lesson9.php
http://es.html.net/tutorials/css/lesson10.php
http://es.html.net/tutorials/css/lesson11.php
http://es.html.net/tutorials/css/lesson12.php
No hay comentarios:
Publicar un comentario