CSS

Introducción al Desarrollo Web Full-Stack

Unidad I
Contenidos de la clase 4
- Propiedades Básicas
- Box Model
- Flexbox

Proxima clase 5
- Maquetación de un sitio web básico
Repasemos lo visto

Repaso de la clase anterior.

CSS Box Model 📦

Clase 4
CSS Box Model (modelo de cajas)
En HTML, los elementos pueden considerarse cajas.
En CSS, el “Box model” nos permite controlar el diseño y la diagramación (layout) de
las cajas de los elementos HTML.

En conclusión, el CSS box model controla la caja de cada elemento HTML por medio
del ancho (width), alto (height), márgenes (margin), bordes(border), espacio interior
(padding) y el contenido en si mismo.

Tambien podemos controlar cómo se visualizan las cajas: se pueden ocultar,

desplazar respecto de su posición original y fijarlas en una posición especifica dentro
del documento.
CSS Box Model
Jerarquía CSS Box Model
Partes de una caja
Las partes de una caja del box model son:
- Contenido
- Espacio interior
- Borde
- Imagen del fondo
- Color del fondo
- Margen
- Ancho y alto
Zonas de una caja
 Zonas de una caja
En CSS podemos modificar de manera independiente cada parte de un elemento:

- top: la parte superior del elemento

- right: la parte derecha del elemento
- bottom: la parte inferior del elemento
- Ieft: la parte izquierda el elemento
- center: en algunos casos se puede especificar el valor center(posición central)

El orden en el que se deben definir las zonas es siempre: top, right, bottom, left.
Partes de una caja: contenido
Es el contenido HTML del elemento: las palabras de un párrafo, una
imagen, el texto de una lista de elementos, etc.

Para modificar el contenido podemos usar las propiedades CSS que se

correspondan con ese elemento. Por ejemplo, para un texto podemos usar
la propiedad font-size.
Partes de una caja: borde
El borde (border) es linea que encierra completamente el contenido y el padding. Se pueden
definir el borde de las cuatro zonas de la caja. Para cada borde podemos definir ancho, color y
estilo.

Ancho del borde: border-width

border-top-width / border-right-width / border-bottom-width / border-left-width

Color del borde: border-color

border-top-color / border-right-color / border-bottom-color / border-left-color
 Partes de una caja: imagen de fondo
La imagen de fondo se muestra por detrás del contenido y del padding, pero por
delante del color de fondo.

Se define con la propiedad: background-image

Se puede modificar con las propiedades:

background-repeat
background-attachment
background-position
Partes de una caja: color de fondo
El color de fondo se muestra por detrás del contenido y del padding; y
también por detrás de la imagen de fondo. Los bordes tiene su propio color y
los márgenes son transparentes.

Se define con la propiedad: background-color

Se puede definir todas las opciones con la propiedad: background

Partes de una caja: márgenes
Los márgenes determinan el espacio libre entre una caja y las posibles cajas
que se encuentran alrededor. Se debe determinar un valor numérico, con su
respectiva unidad de medida.

Podemos definir el margen de las cuatro zonas de una caja:

margin-top. margin-right

margin-bottom margin-left

Podemos definir los cuatro al mismo tiempo con la propiedad: margin

Tamaño de una caja: ancho y alto
Las medidas de ancho y alto que ocupa un elemento se calculan teniendo en cuenta sus propiedades
width y height y se les debe sumar las medidas del margen, del padding y de los bordes.

Por ejemplo, calculamos el ancho del <div> según ese estilo:

width 300px
padding +10px (izq) + 10px (der)
border + 5px (izq). + 5px (der)
margin. +0
330px total.
Propiedad box-sizing
La propiedad box-sizing permite controlar cómo se calcula el ancho y alto de
una caja.

El valor por defecto es box-sizing: content-box; y funciona como el ejemplo

que ya vimos: se suma width o height + padding + border + margin.

Pero podemos cambiar el valor y usar box-sizing: border-box; y el tamaño

total va a ser el que esté definido en width y height, incluidos padding y
border; margin se sigue sumando.
Tamaño de una caja: ancho y alto
Si no definimos el tamaño de ancho (width) y alto (height) de una caja, el valor
por defecto de ambas propiedades es auto y la caja va a asumir el tamaño que
sea necesario para mostrar todo su contenido.

Podemos también definir propiedades para establecer el tamaño máximo y

mínimo: max-width / min-width / max-height / min-height

Se recomienda no definir el alto en cajas que tengan contenido de texto y así

permitir que las mismas asuman el alto que necesitan para mostrar todo el
texto
Tamaño de una caja: ancho y alto
Cuando nuestra caja tiene más contenido que el que entra en el tamaño definido,
este contenido se desborda. Para controlar cómo se muestra este contenido
desbordado usamos la propiedad overflow.

Posibles valores de overflow:

visible: el contenido no se corta y se muestra sobresaliendo (por defecto)


hidden: el contenido sobrante se oculta 


scroll: solamente se muestra el contenido dentro de la zona, pero con scroll 


auto: si hace falta, se muestra el contenido con scroll



¿Qué hacemos con las cajas? 📦
Layout en CSS
ContenidoComo ya sabemos, los elementos HTML pueden ser
elementos de bloque o elementos en línea. Cuando se diagrama la
página (layout), HTML acomoda los elementos en línea uno al lado
del otro y a los elementos de bloque uno abajo del otro.

En CSS podemos controlar y modificar el layout con varias

propiedades: display, position, float, flexbox, grid.

IMPORTANTE: estas propiedades NO se usan todas juntas, hay que

elegir la que queremos usar y saber cuáles se pueden combinar.
Propiedad dysplay
La propiedad display nos permite modificar la forma en la que se
visualiza un elemento.

Si usamos display: block; muestra un elemento como si fuera un

elemento de bloque, aunque originalmente sea elemento en línea.

Si usamos display: inline; muestra un elemento en forma de elemento

en línea, aunque originalmente sea elemento de bloque.

Si usamos display: inline-block; muestra un elemento en forma de

elemento en línea, pero se le pueden aplicar height y width.
 Propiedad dysplay y visibility
Las propiedades display y visibility permiten ocultar cualquier elemento de la
página.

Si definimos visibility:hidden; el elemento se hace invisible, lo que significa que el

navegador crea la caja del elemento, pero no la muestra, el resto de los
elementos de la página no modifican su posición, ya que aunque la caja no se ve,
sigue ocupando espacio.

Si definimos display: none; ocultamos completamente un elemento haciendo que

desaparezca de la página, el resto de elementos de la página se mueven para
ocupar el lugar disponible.
Posicionamiento 📍
 Posicionamiento
Como ya sabemos, los elementos en línea se acomodan uno al lado del
otro de izquierda a derecha y los elementos de bloque se acomodan uno
abajo del otro de arriba hacia abajo.

Esta manera de acomodar elemento es lo que se llama posicionamiento

estático.

Existen otras opciones de posicionamiento que se definen con la propiedad

position.
 Posicionamiento position
Posicionamiento estático (position: static;): es el posicionamiento utilizado por defecto.
Posicionamiento relativo (position: relative;): consiste en posicionar una caja según el
posicionamiento normal (estático) y después moverla respecto de su posición original.

Posicionamiento absoluto (position: absolute;): la posición se establece de forma

absoluta respecto del elemento contenedor y el resto de elementos de la página
ignoran la nueva posición del elemento.

Posicionamiento fijo (position: fixed;): convierte una caja en un elemento inamovible,

su posición en la pantalla siempre es la misma independientemente del resto de
elementos.
Desplazamiento
Cuando se posiciona una caja utilizando absolute, fixed o relative
podemos modificar la posición del elemento utilizando estas
propiedades de desplazamiento:

top : empuja el elemento desde la parte de arriba hacia abajo


right : empuja el elemento desde la parte derecha hacia la izquierda
bottom : empuja el elemento desde la parte de abajo hacia arriba
left : empuja el elemento desde la parte izquierda hacia la derecha
Desplazamiento
Si definimos position:relative; en un elemento, el desplazamiento se
hace desde la posición original de ese elemento.

Si definimos position:absolute; en un elemento, el desplazamiento se

hace desde la posición del primer elemento padre posicionado (no
estático). Si no hay elemento padre posicionado, se hace desde el
body
Consultas 🤚
Pausa ⏳
Elementos lotantes ⛴
f
Propiedad oat
La propiedad float sirve para cambiar el flujo en el que se ordenan
los elementos. Podemos hacer que un elemento “flote”, o sea, que
se mueva todo lo posible hacia la izquierda o hacia la derecha en la
línea en la que se encuentra.

El valor por defecto es float: none; que significa que el elemento no

está flotado. Si queremos flotar al elemento podemos usar float: left;
o float: right;
fl
¿Qué pasa cuando se usa oat?
Cuando se posiciona una caja de forma flotante la caja deja de pertenecer al
flujo normal de la página, y el resto de cajas ocupan el lugar dejado por ésta.

Si existen varias cajas flotantes, cada una tiene en cuenta el espacio

disponible y no se superpone con las otras.

Si no existe espacio en la línea actual, la nueva caja flotante baja de línea.

Cuando usamos la propiedad float en un elemento, la caja queda posicionada

de forma flotante y el elemento se muestra como elemento de bloque.

fl
Propiedad clear
Se usa para controlar a las cajas flotantes, porque se encarga de
impedir que haya elementos flotantes a la izquierda de un elemento
(clear: left;), a la derecha de un elemento (clear: right;) o a ambos
lados de un elemento (clear: both;)
¿Cuándo usar oat?
IMPORTANTE: las propiedades float y position NO se pueden usar
al mismo tiempo en el mismo elemento.

A veces, los elementos flotantes pueden comportarse raro... por eso,

se recomienda usar float sólo para algunos elementos específicos y
usar métodos más actuales para armar el layout de una página,
como flexbox.
fl
Flexbox Layout Module 🪄
Flexbox
Flexbox es un sistema de elementos flexibles para armar con CSS el layout
de una página en la que los elementos HTML se adaptan y colocan
automáticamente y es más fácil personalizar los diseños.

Para utilizar el modelo flexbox es necesario tener un contenedor (padre) y

elementos (hijos).

La idea es que el contenedor modifica a los elementos que contiene para

acomodarlos en el espacio disponible.
Flexbox: elementos del modelo
Elementos del modelo flexbox
Contenedor: es el elemento padre que contiene los ítems flexibles y
adaptables.
Ítem: cada uno de los elementos hijos.

Eje principal: los contenedores flexibles tendrán una orientación

principal, por defecto es en horizontal (fila).

Eje secundario: los contenedores flexibles tendrán una orientación

secundaria, perpendicular a la principal. Si la principal es en
horizontal, la secundaria será en vertical, y viceversa.
Fexbox
Para activar el modo flexbox hay definir la propiedad display en el elemento
contenedor (padre).

Puede ser display: flex; si queremos que el contenedor se comporte como

elemento de bloque.

Puede ser display: inline-flex; si queremos que el contenedor se comporte

como elemento en línea.

Automáticamente los elementos hijos se acomodan en una misma línea

dentro del contenedor.
Fexbox
Podemos establecer más propiedades para el elemento padre:

flex-direction / flex-wrap / flex-flow / justify-content / align-items /
align-content

También podemos establecer propiedades para los elementos hijos:

order / flex-grow / flex-shrink / flex-basis / flex / align-self
Menúes 🍔
Menú de navegación
Todo sitio web tiene un menú de navegación. El menú de navegación se
identifica en HTML con la etiqueta <nav>.

Un menú de navegación es, en definitiva, una lista de links. Entonces

usamos una lista <ul> o una lista <ol>. Y los elementos se identifican
con <li>. Y, como son links, también necesitamos la etiqueta <a>.

Entonces, para armar un menú, en HTML utilizamos las etiquetas <nav>

, <ul> , <li> y <a>. En CSS vamos a crear estilos para cada una de ellas.
 Menú de navegación
Un menú de navegación puede ser vertical u horizontal. El CSS nos
permite hacer que los elementos de una lista se vean de manera
horizontal. Para eso usamos:

display: inline-block; 


display: inline;
display: flex; 




Actividad 4: 😎
Segundo Sitio Web

 Actividad 4:
Para esta práctica usar como temática de interés propio. El sitio web debe
cumplir las siguientes condiciones:
1.  Se deberán desarrollar como mínimo cuatro páginas.
2. La página principal (index.html) deberá contener información general.
Las otras páginas deberán contener información relacionada.
3.  Todas las páginas deberán ser codi icadas correctamente en HTML5 y
se deberá utilizar CSS para aplicarles estilos.

f





Consultas 🤚
Fin de la clase. 👋