Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Modelo de cajas
Es la caracterstica ms importante de CSS, cualquier elemento de una pgina web
est contenido en una "caja" rectangular. Las cajas de una pgina se crean
automticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva
caja rectangular que encierra los contenidos de ese elemento, estas no son visibles a
1
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
Las partes que componen cada caja y su orden de visualizacin desde el punto de
vista del usuario son las siguientes:
Contenido (content): se trata del contenido HTML del elemento (las palabras de
un prrafo, una imagen, el texto de una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el contenido y el
borde.
Borde (border): lnea que encierra completamente el contenido y su relleno.
Imagen de fondo (background image): imagen que se muestra por detrs del
contenido y el espacio de relleno.
Color de fondo (background color): color que se muestra por detrs del
contenido y el espacio de relleno.
Margen (margin): separacin opcional existente entre la caja y el resto de cajas
adyacentes.
2
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
Al igual que sucede con width, la propiedad height no admite valores negativos. Si se
indica un porcentaje, se toma como referencia la altura del elemento padre. Si el
elemento padre no tiene una altura definida explcitamente, se asigna el valor auto a la
altura.
El valor inherit indica que la altura del elemento se hereda de su elemento padre. El
valor auto, que es el que se utiliza si no se establece de forma explcita un valor a esta
propiedad, indica que el navegador debe calcular automticamente la altura del
elemento, teniendo en cuenta sus contenidos y el sitio disponible en la pgina.
Si se establece la anchura y altura de un elemento, el contenido del elemento puede
no caber en el tamao asignado. La propiedad overflow establece el comportamiento
en esto casos.
Imgenes
Las propiedades width y height tambin se pueden aplicar a imgenes (esos valores
tienen prioridad sobre los establecidos en los atributos width y height de la etiqueta
<img>).
3
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
Desbordamiento: overflow
4
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
Si est definido el tamao del elemento y overflow tiene el valor visible, el contenido
desborda el elemento y se superpone a los siguientes elementos.
Margen
CSS define cuatro propiedades para controlar cada uno de los mrgenes horizontales
y verticales. Cada una de las propiedades establece la separacin entre el borde
lateral de la caja y el resto de cajas adyacentes:
5
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
Las unidades ms utilizadas para indicar los mrgenes de un elemento son los pxeles
(cuando se requiere una precisin total), los em (para hacer diseos que mantengan
las proporciones) y los porcentajes (para hacer diseos lquidos o fluidos).
Alternativa directa:
div img {
margin: .5em .5em .5m 1em;
}
Otra alternativa:
6
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
div img {
margin: .5em;
margin-left: 1em;
}
7
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
Bordes
Cualquier elemento de una pgina web puede tener un borde (en ingls,
border).
p {
border: red 5px Esto es un prrafo con borde de estilo solid.
solid;
}
Estilos de bordes
Los estilos de bordes definidos en CSS 2 son none, hidden, dotted, dashed,
solid, double, groove, ridge, inset y outset.
9
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
10
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
11
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
12
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
13
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
En general, para que el navegador muestre un borde, se tienen que definir las
tres propiedades (color, grosor y estilo), aunque normalmente los navegadores
asignan el color negro como color prederminado, por lo que si no se establece
el color del borde suele mostrarse de color negro
Las etiquetas <html> y <body> tambin pueden tener bordes, como muestra la
siguiente hoja de estilo.
html {
background-color: pink;
border: red 10px solid;
margin: 50px;
padding: 50px;
}
body {
background-color: lightblue;
border: blue 10px solid;
font-family: sans-serif;
margin: 50px;
padding: 50px;
}
h1 {
text-align: center;
}
La pgina sera:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8>
<title>Ejemplo border en html y body </title>
14
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
<body>
CSS ofrece nuevas propiedades y estilos para los bordes, lo veremos en un anexo
Posicionamiento
Posicionamiento flotante: float y clear
15
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
Se puede crear una letra capital aplicando la propiedad float a la primera letra
de un prrafo. En el ejemplo siguiente se utiliza la pseudo-clase :first-letter, por
lo que no hace falta aplicar la propiedad clear.
Las imgenes son elementos en lnea, es decir, que se insertan como si fueran
caracteres, formando parte del prrafo o del elemento de bloque en el que se
insertan. La altura de la lnea en la que est insertado el elemento aumenta lo
necesario para poder alojar la imagen, como muestra el siguiente ejemplo, en
el que la hoja de estilo no contiene ninguna propiedad relacionada con la
imagen.
img {
}
Este prrafo tiene insertada una
imagen al principio del prrafo. Se trata del logotipo
de GNU. GNU es un acrnimo recursivo que
significa "GNU is Not Unix" (GNU No es Unix). GNU
es un proyecto de software libre iniciado por Richard
Stallman en 1984. La imagen forma parte del
16
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
Para que las imgenes salgan correctamente alineadas con el texto, la imagen
debe insertarse al principio del texto, independientemente de la posicin final
que vaya a tener la imagen. Los siguientes ejemplos muestran las diferencias
17
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
La propiedad clear
18
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
Una primera solucin podra ser dar la propiedad clear: both al segundo prrafo.
Una segunda solucin podra ser insertar un tercer prrafo vaco con la
propiedad clear: both (y no ponersela al segundo prrafo). En la primera
solucin, el segundo prrafo ya no fluye a la derecha de la imagen, mientras
que en la segunda s lo hace.
19
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
Una tercera solucin sera dar una altura mnima a la divisin mayor con la
propiedad min-height. La altura debe ser mayor que la altura de la imagen.
Lneas Horizontales
Tamao: width y height
20
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
hr {
background-color: red;
height: 10px;
margin-left: 0%;
margin-right: 50%
}
hr {
background-color: red;
height: 10px;
margin-left: 50%;
margin-right: 0%
}
hr {
background-color: red;
height: 10px;
margin-left: 50%;
margin-right: 25%
}
21
Lenguaje de Marcas
Unidad 4. Modelo de Cajas
margin-left: 50%;
width: 25%;
}
22