CSS3
Indice:
El modelo de
1 Focus
caja
Contenido
2 Queries 5
desbordado
Dimensionar
3 Ejercicios 6
elementos en CSS
El modelo de caja
Cajas en bloque y en línea
Si una caja se define como un bloque, se comportará de las maneras
siguientes:
❑ La caja fuerza un salto de línea al llegar al final de la línea.
❑ La caja se extenderá en la dirección de la línea para llenar todo el
espacio disponible que haya en su contenedor. En la mayoría de los
casos, esto significa que la caja será tan ancha como su contenedor,
y llenará el 100% del espacio disponible.
❑ Se respetan las propiedades width y height.
❑ El relleno, el margen y el borde mantienen a los otros elementos
alejados de la caja.
El modelo de caja
Cajas en bloque y en línea
Si una caja tiene una visualización externa de tipo inline, entonces:
❑ La caja no fuerza ningún salto de línea al llegar al final de la línea.
❑ Las propiedades width y height no se aplican.
❑ Se aplican relleno, margen y bordes verticales, pero no mantienen
alejadas otras cajas en línea.
❑ Se aplican relleno, margen y bordes horizontales, y mantienen
alejadas otras cajas en línea.
El modelo de caja
Cajas en bloque y en línea
El modelo de caja
¿Qué es el modelo de cajas CSS?
El modelo de cajas CSS completo se aplica a cajas que presentan
comportamiento en bloque; las cajas con comportamiento en línea
solo usan una parte del comportamiento definido en el modelo de
cajas.
El modelo define cómo funcionan juntas las diferentes partes de una
caja (margen, borde, relleno y contenido) para crear una caja que
puedas ver en tu página.
El modelo de caja
Partes de una caja
❑ El contenido de la caja (o content box): El área donde se muestra el
contenido, cuyo tamaño puede cambiarse utilizando propiedades como
width y height.
❑ El relleno de la caja (o padding box): El relleno es espacio en blanco
alrededor del contenido; es posible controlar su tamaño usando la
propiedad padding y otras propiedades relacionadas.
❑ El borde de la caja (o border box): El borde de la caja envuelve el
contenido y el de relleno. Es posible controlar su tamaño y estilo
utilizando la propiedad border y otras propiedades relacionadas.
❑ El margen de la caja (o margin box): El margen es la capa más externa.
Envuelve el contenido, el relleno y el borde como espacio en blanco
entre la caja y otros elementos. Es posible controlar su tamaño usando la
propiedad margin y otras propiedades relacionadas.
El diagrama siguiente muestra estas capas:
El modelo de caja
El modelo de cajas CSS estándar
❑ En el modelo de cajas
estándar, cuando
estableces los atributos
width y height para una
caja, defines el ancho y
el alto del contenido de
la caja.
❑ Cualquier área de
relleno y borde se añade
a ese ancho y alto para
obtener el tamaño total
que ocupa la caja.
El modelo de caja
El modelo de cajas CSS alternativo
❑ Con este modelo,
cualquier ancho es el
ancho de la caja visible
en la página, por lo
tanto, el ancho del área
de contenido es ese
ancho menos el ancho
para el relleno y el
borde.
.box {
box-sizing: border-box;
}
El modelo de caja
Margen
❑ El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de
elementos de la caja. Los márgenes pueden tener valores positivos o
negativos.
❑ Podemos controlar todos los márgenes de un elemento a la vez usando la
propiedad margin, o cada lado individualmente usando las propiedades
equivalentes sin abreviar:
● margin-top
● margin-right
● margin-bottom
● margin-left
El modelo de caja
Relleno
❑ El relleno se encuentra entre el borde y el área de contenido. A diferencia de
los márgenes, el relleno no puede tomar valores negativos, por lo que el valor
debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará
detrás del área de relleno y, generalmente, se usa para mantener el contenido
alejado del borde.
❑ padding-top
❑ padding-right
❑ padding-bottom
❑ padding-left
Ejercicio:
Realizar un menú interactivo como se muestra en la imagen:
Para ello debe tener en cuenta lo siguiente:
1. Todo debe estar incluido en la etiqueta nav.
2. La etiqueta ul debe tener una clase llamada link-list.
3. La etiqueta ul debe contener el atributo inline-flex con lista de estrilo none.
4. La clase link-list debe tener color de fondo oscuro cualquiera, color de texto blanco no
debe estar decorado con margen 1px y con relleno de 10px con 20px
5. Al pasar el mouse por el menú esta debe cambiar a color negro con bordes redondeadas
de 5px y con relleno de 15px con 25px
Contenido desbordado
Contenido desbordado
Ya sabemos que todo en CSS está dentro de una caja, y que podemos
restringir el tamaño de estas cajas asignándoles los valores width y
height (o inline-size y block-size).
El desbordamiento es lo que sucede cuando hay demasiado contenido
en una caja, y no cabe cómodamente en ella. El CSS te proporciona
varias herramientas para administrar este desbordamiento, y además
es un concepto que resulta útil de conocer desde las primeras etapas.
Contenido desbordado
El CSS trata de evitar «la pérdida de datos»
Vamos a comenzar con dos ejemplos que demuestran cómo se comporta el CSS
por defecto cuando ocurre un desbordamiento.
❑ Primer caso:
Contenido desbordado
El CSS trata de evitar «la pérdida de datos»
Vamos a comenzar con dos ejemplos que demuestran cómo se comporta el CSS
por defecto cuando ocurre un desbordamiento.
❑ Segundo caso:
Contenido desbordado
La propiedad overflow
❑ La propiedad overflow es el modo como tomas el control del desbordamiento
de un elemento y le dices al navegador cómo desea que se comporte. El valor
predeterminado para la propiedad overflow es visible, por lo que, de forma
predeterminada vamos a poder ver cuándo se desborda nuestro contenido.
❑ Si deseas cortar el contenido cuando se desborda, puedes establecer el valor
overflow: hidden en tu caja, que hace exactamente lo que dice: ocultar el
desbordamiento.
❑ Esto puede hacer que las cosas desaparezcan, por lo que solo debes utilizar
esta opción si ocultar contenido no te va a causar ningún problema.
❑ Si usas overflow: scroll, tu navegador siempre mostrará barras de
desplazamiento, incluso cuando no haya suficiente contenido
Contenido desbordado
La propiedad overflow
❑ Puedes especificar un desplazamiento en x y en y
utilizando la propiedad overflow y pasando dos
valores.
❑ Si especificas dos palabras clave, la primera se aplica a
overflow-x y la segunda a overflow-y.
❑ De lo contrario, tanto overflow-x como overflow-y se
fijan en el mismo valor.
❑ Por ejemplo, overflow: scroll hidden establece
overflow-x en scroll y overflow-y en hidden.
Dimensionar
Dimensionar elementos en CSS
❑ Es importante que comprendas qué tamaños van a
tener los diferentes elementos de tu diseño, y en este
artículo vamos a resumir las diversas formas en que
puedes asignar tamaños a los elementos con CSS y
definir algunos términos relativos al dimensionado que
te ayudarán en el futuro.
Dimensionar
El tamaño natural o intrínseco de las
cosas
❑ Una imagen tiene un ancho y una altura que están
definidos en el archivo de imagen que está incrustando
en la página. Este tamaño se describe como el tamaño
intrínseco, que proviene de la imagen misma.
Dimensionar
Configurar un tamaño específico
❑ podemos dar a los elementos de nuestro diseño un
tamaño específico. Cuando asignas un tamaño a un
elemento (al cual deberá ajustarse el contenido del
elemento) nos referimos a este como tamaño
extrínseco.
❑ Toma nuestro elemento <div> del ejemplo anterior:
podemos darle valores específicos como width y
height, y así tendrá ese tamaño sea cual sea su
contenido.
Dimensionar
Configurar un tamaño específico
Si tienes una caja que puede
contener una cantidad
variable de contenido y
deseas que tenga siempre al
menos una altura
determinada, puedes
establecer la propiedad min-
height.
La caja siempre tendrá al
menos esta altura, pero
crecerá si hay más contenido
del que la caja puede
contener.
Dimensionar
Configurar un tamaño específico
Un uso común de max-width es para reducir el tamaño de las imágenes
si no hay suficiente espacio para mostrarlas en su ancho intrínseco, al
asegurarte de que no serán mayores que ese ancho.
Dimensionar
Focus en CSS
El efecto :focus en CSS te permite controlar la apariencia de un
elemento cuando recibe el foco, ya sea por clic del mouse o por
tabulación. Esto te permite crear interfaces más intuitivas y accesibles
para los usuarios.
La pseudo-clase :focus se utiliza en conjunto con un selector CSS para
aplicar estilos específicos a un elemento cuando este tiene el foco. La
sintaxis básica es la siguiente:
selector:focus {
propiedad1: valor1;
propiedad2: valor2;
...
}
Dimensionar
CSS Container Queries
Si estás creando un diseño responsivo, a menudo usas media queries
para cambiar la disposición de la página con referencia al viewport.
Es bastante común agrupar elementos HTML dentro de componentes
reutilizables que tienen una determinada disposición dependiendo del
espacio disponible en la página.
Es posible que el espacio disponible no solo dependa del tamaño del
viewport, pues también puede depender del contexto donde el
componente se muestra.
Dimensionar
Utilizando container queries
Para usar container queries, necesitas declarar un containment context
en un elemento, de esta manera el navegador sabrá que estás interesado
en consultar las dimensiones del contenedor. Para hacer esto, usa la
propiedad container-type con los valores de size, inline-size, o normal.
Estos valores tienen los siguientes efectos:
size: La consulta toma como referencia las dimensiones de bloque y en
línea del contenedor. Aplica contención de disposición, estilo y tamaño
al contenedor.
inline-size: La consulta se basa únicamente en la dimensión en línea del
contenedor. Aplica contención de disposición, estilo y tamaño en línea
al contenedor.
normal: El elemento no es un query container para consultas de tamaño,
pero se sigue comportando como un query container para consultas de
estilos de contenedor (container style queries).
Sintaxis
@media (max-width: 768px) { @media (max-width: 480px) {
h1 { h1 {
font-size: 1.8em; font-size: 1.5em;
} }
.galeria { .galeria {
grid-template-columns: repeat(2, 1fr); grid-template-columns: 1fr;
} }
} }
Ejercicio:
Trabajar de manera que sea responsivo el archivo (imágenes.html) que
se desarrollo en la clase anterior, para ello se debe tener en cuenta lo
siguiente:
1. Debe ser responsivo para dos tamaños de dispositivos los cuales
tiene de ancho 768px y 480px.
2. Cuando el ancho sea de 768px, las imágenes deben de mostrarse en
2 filas.
3. Cuando el ancho sea de 480 px, las imágenes deben mostrarse de 1
fila uno debajo del otro.
