PDF de programación - Tema 2.4 - Hojas de estilo en cascada CSS

Índice: Tema 2.4 (Parte 2)

2.4 Hojas de estilo en cascada CSS

2.4.1 El lenguaje XHTML
2.4.2 Hojas de estilo CSS
2.4.3 Reglas de estilo
2 4 4 El
2.4.4 El modelo de cajas
2.4.5 Propiedades de los elementos básicos

d l d

j

Índice: Tema 2.4 (Parte 2)

2.4 Hojas de estilo en cascada CSS

2.4.1 El lenguaje XHTML
2.4.2 Hojas de estilo CSS
2.4.3 Reglas de estilo
2 4 4 El
2.4.4 El modelo de cajas
2.4.5 Propiedades de los elementos básicos

d l d

j

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 El modelo de cajas

 El modelo de cajas o box model es seguramente la característica más importante 

del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las 
páginas web.

 El box model es la característica que hace que todos los elementos incluidos en 
una página HTML se representen mediante cajas rectangulares cuyo aspecto se 
puede controlar a través de CSS.
é d CSS

d

l

 El diseño de cualquier página XHTML está compuesto por cajas rectangulares. CSS 
permite definir la altura y anchura de cada caja, el margen existente entre cajas y 
el espacio de relleno interior que muestra cada caja.

i d fi

h

d

d

j

j

l

l

i

l

i

á

 Además, CSS permite controlar la forma en la que se visualizan las cajas: se 
d
pueden ocultar, desplazar respecto de su posición original y fijarlas en una 
posición específica dentro del documento.
posición específica dentro del documento.

f

l

l

l

l

l

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

3

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 Elementos del modelo de cajas

 Las cajas de una página se crean automáticamente. Cada vez que se inserta una 

etiqueta o elemento en la página, se crea una nueva caja rectangular que encierra 
los contenidos del elemento.

 El siguiente esquema muestra la creación automática de cajas:

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

4

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 Propiedades (1)

 A continuación se muestran las propiedades que controlan cada uno de los 

elementos de la caja relacionados con sus dimensiones:

• Anchura:
• Altura:
• Margen superior:
• Margen derecho:
• Margen inferior:
• Margen izquierdo:
i d
• Margen en general:

M

i

width: 200px
height: 60px
margin-top: 2em
margin-right: 2em
margin-bottom: 2em
margin-left: 2em
margin: sup der inf izq

i l ft

2

(notación {1,4})
 Tomando como referencia el margen (margin), se pueden definir propiedades 
similares para el relleno (padding), la anchura (border-*-width), el estilo 
(border-*-style) y el color (border-*-color) de los bordes
(border
color) de los bordes.

style) y el color (border

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

5

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 Propiedades (2)

 La anchura y altura de la caja de un elemento no solamente se calculan teniendo 

en cuenta sus propiedades width y height.

 El margen, el relleno y los bordes establecidos a un elemento determinan la 
anchura y altura final del elemento. En el siguiente ejemplo se muestran los 
estilos CSS de un elemento <p> cuya anchura de caja en pantalla sería de 480:
p {

width: 300px;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
margin-right: 30px;
border: 10px solid black;

}
}

<p>...</p>

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

6

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 Propiedades (3)

 El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza 
en el área ocupada por el contenido y su relleno (padding), ya que el color de los 
bordes se controla directamente desde los bordes y las zonas de los márgenes 
siempre son transparentes.
i

t

t

 CSS define cinco propiedades para establecer el fondo de cada elemento:

• Color de fondo:

•

g

Imagen de fondo (idf):
)

(
• Repetición de la idf:
• Posición de la idf:
• Comportamiento de la idf:
• Fondo en general:

g

g

g /

background-color: blue
background-image: url(images/fondo.gif)
(
)
background-repeat: repeat (-x, -y, no-)
background-position: left,top,… ó {x% y%}
background-attachment: scroll ó fixed
background: blue url() repeat-x fixed

g

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

7

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

EJERCICIO  39

 Propiedades (4)

 Utilizar las propiedades básicas de las cajas para dar formato a la siguiente web:

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

8

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 Posicionamiento de las cajas (1)

 El estándar de CSS define cinco modelos diferentes para posicionar una caja 

mediante el atributo position:
• static: Este es el modo de posicionamiento normal (por defecto).
• relative: La caja se coloca con el posicionamiento normal, pero se desplaza según los 
atributos  left, right, top, bottom.
• absolute: La caja se coloca de manera absoluta con respecto a la caja que la contiene 
según los atributos left, right, top, bottom.
• fixed: Es un tipo de posicionamiento absoluto, pero que convierte la caja en un 
elemento inamovible.
• float:  Se trata del modelo más especial de posicionamiento, ya que desplaza las cajas 
todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

9

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 Posicionamiento de las cajas (2)

 El static o posicionamiento normal es el modelo que utilizan por defecto los 

navegadores para mostrar los elementos de las páginas.

• Las cajas de los elementos de bloque se muestran una tras otra verticalmente comenzando 

en la parte superior del bloque contenedor y siguiendo el orden en el que aparecen los 
elementos correspondientes en el documento. 

• Las cajas de los elementos de línea se muestran una detrás de otra de forma horizontal 

comenzando desde la posición más a la izquierda de su elemento contenedor.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

10

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 Posicionamiento de las cajas (3)

 El relative o posicionamiento relativo permite desplazar una caja respecto de 

su posición original establecida mediante el posicionamiento normal.
• Una vez establecido position: relative, la propiedad left desplaza la caja hacia su 
derecha de acuerdo al valor establecido, la propiedad right la desplaza hacia su 
izquierda, la posición top desplaza la caja de forma descendente y la propiedad bottom
desplaza la caja de forma ascendente. Además, los valores negativos tienen el efecto 
inverso, es decir left=-right y  top=-bottom.
• En el posicionamiento relativo, el resto de cajas no modifican su posición original.

p

j

,

g

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

11

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 Posicionamiento de las cajas (4)

 El absolute o posicionamiento absoluto se emplea para establecer de forma 

precisa la posición en la que se muestra la caja de un elemento. Tiene dos 
diferencias respecto al relativo:

• La caja se coloca de manera absoluta con respecto a la caja que la contiene. Por tanto los 

atributos para posicionarla dependen ahora de la posición de su elemento contenedor.

• Cuando se posiciona una caja de forma absoluta, el resto de elementos ignoran que esa 

caja exista. Por este motivo, en el siguiente ejemplo, la caja 3 deja su lugar original y pasa a 
ocupar el hueco dejado por la caja 2.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

12

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 Posicionamiento de las cajas (5)

 El estándar CSS considera que el fixed o posicionamiento fijo es un caso 
particular del posicionamiento absoluto, ya que sólo se diferencian en el 
comportamiento de las cajas posicionadas.

 La principal característica de una caja posicionada de forma fija es que su posición 

es inamovible dentro de la ventana del navegador. El posicionamiento fijo hace 
que las cajas no modifiquen su posición ni aunque el usuario suba o baje la página 
á i
en la ventana de su navegador.

i ió

difi

b j

b

j

l

i

l

i

l

i

li

á i

 Si la página se visualiza en un medio paginado (por ejemplo en una impresora) las 

Si l
cajas posicionadas de forma fija se repiten en todas las páginas. Así, esta 
característica puede ser útil para crear encabezados o pies de página en páginas
característica puede ser útil para crear encabezados o pies de página en páginas 
HTML preparadas para imprimir.

i d (

) l

di

j

l

i

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

13

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 Posicionamiento de las cajas (6)

 El float o posicionamiento flotante es el más difícil de comprender pero al 
mismo tiempo es el más utilizado. Como se verá más adelante, la mayoría de 
estructuras de las páginas web complejas están diseñadas con el posicionamiento 
fl t
flotante. Cuando una caja se posiciona como flotante:
• Se desplaza hasta la zona más a la izquierda (con float:left) o más a la derecha (con 
float:right) de la posición en la que originalmente se encontraba
float:right) de la posición en la que originalmente se encontraba.
• Deja de pertenecer al flujo normal de la página, lo que significa que el resto de cajas 

t C

fl t

i i

d

t

j

ocupan el lugar dejado por la caja flotante.

p

p

g

j

j

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

14

2.4 HOJAS DE ESTILO EN CASCADA CSS
2.4.4

EL MODELO DE CAJAS

 Posicionamiento de las cajas (7)

 Si existen otras cajas flotantes, al posicionar de forma flotante otra caja, se tiene 

en cuenta el sitio disponible. En el siguiente ejemplo se posicionan de forma 
flotante hacia la izquierda las tres cajas:

• Como la caja 1 ya estaba posiciona