Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
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 modelo de cajas es el comportamiento de CSS que hace que todos los elementos de
las páginas se representen mediante cajas rectangulares. “Se puede decir que en HTML
todas las etiquetas son cajas”.
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta
HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas
HTML que incluye la página:
Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran
ningún color de fondo ni ningún borde.
Los navegadores crean y colocan las cajas de forma automática, pero CSS permite
modificar todas sus características. Cada una de las cajas está formada por seis partes,
tal y como muestra la siguiente imagen:
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 1
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Las partes que componen cada caja y su orden de visualización desde el punto de vista
del usuario son las siguientes:
✓ Contenido (content): se trata del contenido HTML del elemento (las palabras
de un párrafo, una imagen, el texto de una lista de elementos, etc.)
✓ Relleno (padding): espacio libre opcional existente entre el contenido y el
borde “Bordea el contenido por dentro de la caja”.
✓ Borde (border): línea que encierra completamente el contenido y su relleno.
✓ Imagen de fondo (background image): imagen que se muestra por detrás del
contenido y el espacio de relleno.
✓ Color de fondo (background color): color que se muestra por detrás del
contenido y el espacio de relleno.
✓ Margen (margin): separación opcional existente entre la caja y el resto de cajas
adyacentes, anchura y altura. “Bordea el contenido por dentro de la caja”.
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 2
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Taller 1
1. Cree una carpeta para desarrollar la presente guía, dentro de esta un archivo [Link]
y adicional una carpeta CSS con un archivo [Link]
Código Inicial de [Link]
Código inicial de [Link]
Observe la visualización de la Pagina.
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 3
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
2. Sobre el navegador de Google Chrome, clic derecho inspeccionar.
Al hacer sobre la etiqueta <body> y colocar el mouse sobre esta ->1<- Observe que resalta
el inspector ->2<- esta área corresponde a el Margin ->3<-.
El recuadro naranja que resalta corresponde al margen (margin) del body con respecto a
los elementos dentro de el.
En la pestaña Styles del inspector se observa que tiene un margin de 8 px ->4<-
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 4
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Observe que resalta el inspector cuando hace clic sobre la etiqueta <h1> coloca el mouse
sobre esta ->1<-,
El recuadro naranja que resalta corresponde al margin de la etiqueta h1 observe que
existen unos valores predeterminados en la parte inferior del inspector.
3. Agregue al archivo de [Link] la propiedad margin con 20 pixeles para la etiqueta
<h1>
Observe el cambio en el inspector, el margen de la etiqueta h1 se ajusto a 20 pixeles en sus 4
lados.
Sin Margin Con Margin 20px
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 5
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
4. Agregue al archivo de [Link] la propiedad Padding (Relleno) con 8 pixeles.
Observe el cambio en el navegador y en el inspector.
Al agregar el Padding se genera una separación adicional de 8 pixeles entre el contenido y
el margin, para comprender mejor el concepto observe las siguientes imágenes.
Sin Padding Con Padding 8px
El Padding se representa con el cuadro verde entre el contenido y el margin
5. Agregue al archivo de [Link] la propiedad Border con Solid black.
Observe el cambio en el inspector, la caja de la etiqueta h1 se ajustó manteniendo el
Margin (naranja) de 20 pixeles y mantuvo la separación Padding (verde) de 8 pixeles y
adicional agrego un borde border negro.
Nota: Observe que el borde se creo ente el margin y el padding
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 6
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Ancho Width
La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.
La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de
la anchura de su elemento padre. El valor inherit indica que la anchura del elemento se hereda de
su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un
valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura del
elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.
CSS
Altura Height
La propiedad CSS que controla la altura de los elementos se denomina height.
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 explícitamente, 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 explícita un valor a esta propiedad, indica que el
navegador debe calcular automáticamente la altura del elemento, teniendo en cuenta sus
contenidos y el sitio disponible en la página.
CSS
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 7
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Taller 2 Bordes
Profundizando lo Aprendido
Bordes
CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un elemento.
Para cada borde se puede establecer su anchura o grosor, su color y su estilo, por lo que en
total CSS define 20 propiedades relacionadas con los bordes.
Anchura
La anchura de los bordes se controla con las cuatro propiedades siguientes:
La anchura de los bordes se indica mediante una medida (en cualquier unidad de
medida absoluta o relativa) o mediante las palabras clave thin (borde delgado), medium
(borde normal) y thick (borde ancho).
La unidad de medida más habitual para establecer el grosor de los bordes es el píxel, ya
que es la que permite un control más preciso sobre el grosor. Las palabras clave apenas
se utilizan, ya que el estándar CSS no indica explícitamente el grosor al que equivale
cada palabra clave, por lo que pueden producirse diferencias visuales entre
navegadores. Así por ejemplo, el grosor medium equivale a 4px en algunas versiones
de Internet Explorer y a 3px en el resto de navegadores.
El siguiente ejemplo muestra un elemento con cuatro anchuras diferentes de borde:
Si se quiere establecer de forma simultánea la anchura de todos los bordes de una caja,
es necesario utilizar una propiedad "shorthand" llamada border-width:
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 8
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
La propiedad border-width (tamaño del borde) permite indicar entre uno y cuatro
valores. El significado de cada caso es el habitual de las propiedades "shorthand"
Si se indica un solo valor, se aplica a los cuatro bordes.
Si se indican dos valores, el primero se aplica al borde superior e inferior y el segundo
valor se aplica al borde izquierdo y derecho.
Si se indican tres valores, el primero se aplica al borde superior, el segundo se aplica al
borde izquierdo y derecho y el tercer valor se aplica al borde inferior.
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 9
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Si se indican los cuatro valores, el orden de aplicación es superior, derecho, inferior e
izquierdo.
Color
El color de los bordes se controla con las cuatro propiedades siguientes:
El ejemplo anterior se puede modificar para mostrar cada uno de los bordes de un color
diferente:
Estilo
Por último, CSS permite establecer el estilo (border-style “Estilo del borde” se
encuentra entre margin y padding) de cada uno de los bordes mediante las siguientes
propiedades:
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 10
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
El estilo de los bordes sólo se puede indicar mediante alguna de las palabras reservadas
definidas por CSS. Como el valor por defecto de esta propiedad es none, los elementos no
muestran ningún borde visible a menos que se establezca explícitamente un estilo de borde.
Siguiendo el ejemplo anterior, se puede modificar el estilo de cada uno de los bordes:
Investigue Border-Radius… Que hace, como se usa…
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 11
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Taller 3 Margen
Profundizando lo Aprendido
Margin “Margen”
CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y
verticales de un elemento.
Cada una de las propiedades establece la separación entre el borde lateral de la caja y
el resto de cajas adyacentes:
Las unidades más utilizadas para indicar los márgenes de un elemento son los píxeles
(cuando se requiere una precisión total), los em (para hacer diseños que mantengan las
proporciones) y los porcentajes (para hacer diseños líquidos o fluidos).
El siguiente ejemplo añade un margen izquierdo al segundo párrafo:
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 12
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Algunos diseñadores web utilizan la etiqueta <blockquote> para tabular los contenidos
de los párrafos. Se trata de un error grave porque HTML no debe utilizarse para
controlar el aspecto de los elementos. CSS es el único responsable de establecer el estilo
de los elementos, por lo que en vez de utilizar la etiqueta <blockquote> de HTML,
debería utilizarse la propiedad margin-left de CSS.
Los márgenes verticales (margin-top y margin-bottom) sólo se pueden aplicar a los
elementos de bloque y las imágenes, mientras que los márgenes laterales (margin-left
y margin-right) se pueden aplicar a cualquier elemento, tal y como muestra la siguiente
imagen:
La imagen anterior muestra el resultado de aplicar los mismos márgenes a varios
enlaces (elementos en línea) y varios párrafos (elementos de bloque). En los elementos
en línea los márgenes verticales no tienen ningún efecto, por lo que los enlaces no
muestran ninguna separación vertical, al contrario de lo que sucede con los párrafos.
Sin embargo, los márgenes laterales funcionan sobre cualquier tipo de elemento, por lo
que los enlaces se muestran separados entre sí y los párrafos aumentan su separación
con los bordes laterales de su elemento contenedor.
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 13
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Además de las cuatro propiedades que controlan cada uno de los márgenes del
elemento, CSS define una propiedad especial que permite establecer los cuatro
márgenes de forma simultánea. Estas propiedades especiales se denominan
"propiedades shorthand" y CSS define varias propiedades de este tipo, como se verá
más adelante.
La propiedad que permite definir de forma simultánea los cuatro márgenes se
denomina margin.
La notación {1, 4} de la definición anterior significa que la propiedad margin admite
entre uno y cuatro valores, con el siguiente significado:
• Si solo se indica un valor, todos los márgenes tienen ese valor.
• Si se indican dos valores, el primero se asigna al margen superior e inferior y el
segundo se asigna a los márgenes izquierdo y derecho.
• Si se indican tres valores, el primero se asigna al margen superior, el tercero se
asigna al margen inferior y el segundo valor se asigna los márgenes izquierdo y
derecho.
• Si se indican los cuatro valores, el orden de asignación es: margen superior,
margen derecho, margen inferior y margen izquierdo.
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 14
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Padding “Relleno”
CSS define cuatro propiedades para controlar cada uno de los espacios de relleno
horizontales y verticales de un elemento.
Cada una de estas propiedades establece la separación entre el contenido y los bordes
laterales de la caja del elemento:
Como sucede con los márgenes, CSS también define una propiedad de tipo "shorthand"
llamada padding para establecer los cuatro rellenos de un elemento de forma
simultánea.
La notación {1, 4} de la definición anterior significa que la propiedad padding admite
entre uno y cuatro valores, con el mismo significado que el de la propiedad margin.
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 15
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Desbordamiento
Al utilizar un elemento de bloque, como una capa, un párrafo, el “body”, etc... el tamaño
depende del contenido. Pero al definir un tamaño fijo nos puede surgir un problema: ¿qué
pasa si el contenido del elemento (texto, imágenes, etc...) no cabe? Entonces se produce un
desbordamiento, que podemos controlar desde el estilo con la propiedad overflow.
Podemos darle estos valores:
• Visible. Es la opción por omisión. El contenido sale de elemento, y puede que se
solape con los elementos que haya a continuación.
• Hidden. Lo que no quepa en el elemento, queda oculto.
• Auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.
• Scroll. Siempre muestra las barras de desplazamiento.
Archivo Html Archivo css
Resultado
Observe como el bloque <div> no es capaz de contener el texto de este y se rebosa el
contenedor. Pruebe con las siguientes opciones y observe el comportamiento del
contenedor:
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 16
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Posicionamiento
El posicionamiento es el lugar donde el navegador coloca un elemento HTML para
visualizarlo.
Por defecto, los elementos se posicionan uno a continuación de otro. Si se trata de
elementos de bloque, como capas, párrafos, listas, etc, se irán colocando uno debajo del
otro. A este posicionamiento se le denomina estático.
Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de
los elementos. Existen cuatro tipos de posicionamiento:
• Static. Es el normal.
• Relative. El posicionamiento relativo coloca el elemento en su posición normal. A
partir de ahí, podemos desplazar el elemento, permaneciendo el hueco de su
posición original.
• Absolute. Con el posicionamiento absoluto, especificamos la posición del elemento
con respecto al elemento que lo contiene.
• Fixed. Se establece la posición del elemento de forma parecida al absoluto, pero el
elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento.
Archivo Html Archivo css
Resultado
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 17
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Observe que Padre contiene a Hijo1 por eso el cuadro naranja contiene al cuadro rojo.
Observe tambien que el cuadro rojo se posiciono en la esquina superior izquierda del padre
y por defecto usa posicionamiento static.
Agregue ahora un Top de 30Px al hijo1…
paso algo…
Cuando el Position es static ninguna coordenada será aplicada.
• Relative: Permite que se indique la coordenada donde se ubicara el elemento con
respecto al padre. Cambie en la línea 12 del código anterior a position a relative y
observe el cambio.
• Absolute: Permite que otros se posicionen al inicio del objeto padre ocupando su
lugar.
Archivo Html Archivo css
Resultado
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 18
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Asigne ahora position Absolute a la clase Hijo1 y observe el cambio.
• Fixed: Permite el Posicionamiento con respecto al body, la ubicación del elemento
con respecto a su padre abuelo etc no sera tenida en cuenta.
Mueva la barra de desplazamiento y observe el comportamiento del cuadro rojo.
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 19
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Posicionamiento Flotante
El posicionamiento flotante es un poco distinto al resto. Para empezar, no se define con la
propiedad position, si no con la propiedad float. Puede tomar estos valores:
• Left: flotante a la izquierda (float: left;).
• Right: flotante a la derecha (float: right;).
• None: sin flotante.
Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la
dirección indicada, hasta encontrar el límite del elemento contenedor, u otro elemento
también flotante. Además hace que todos los elementos fluyan alrededor de él.
Es muy común utilizarlo en imágenes, para que el texto fluya alrededor de ellas.
Observe la diferencia en la aplicación de Float: Left y Right
Left:
Right:
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 20
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
La propiedad clear, rompe el flotamiento, esta puede tomar tres valores:
• Left: impide el flotamiento a la izquierda.
• Right: impide el flotamiento a la derecha.
• Both: impide el flotamiento por ambos lados.
Genere y cambie la propiedad float de la imagen a Left o Right y observe los cambios.
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 21
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Posicionamiento con múltiples elementos
Trabajemos ahora con un elemento que contiene otros elementos y analicemos el
comportamiento float.
Aplique el float hacia la derecha a la imagen del sol.
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 22
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Aplique float hacia la izquierda a todos los elementos
Observe como el rectángulo del Div ya no contiene a los elementos (Img, P y H2)
Para solucionar esto de usa el metodo Clear invocándolo con un salto de linea Br.
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 23
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 24
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Para finalizar Agregue al Div un Width de 300, esto limitara que lo que este dentro de este
contenedor no puede sobrepasar ese tamaño, ahora en la P agregue la propiedad Width y
cambie los valores a 100, 150 y 300 observe como cambia la posición del bloque de párrafo.
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 25
Desarrollo Orientado a Plataformas
Unidad I – Diseño y Desarrollo Web
Guía 06 – CSS
Taller 1
Cree las siguientes Banderas
Edgar Alexis Albornoz E email: albornoz79@[Link] pág. 26
