CURSO de CSS 2021 Rapido y Facil # 7 | 💻 EL CONTENEDOR
Summary
TLDREn este curso de CSS, se explora el concepto de contenedores en la estructura de una página web. Se comienza eliminando todo en el index.html excepto el título y se introducen contenedores con h2 y párrafos de texto ficticio. Se enfatiza la importancia de los contenedores, que actúan como recipientes para bloques de contenido. Se trabaja con CSS para aplicar estilos a estos contenedores, como colores de fondo y texto, y se ajusta el tamaño del texto. Además, se explica cómo adaptar el diseño para diferentes dispositivos usando porcentajes y márgenes, asegurando que el contenido se muestre correctamente en cualquier pantalla.
Takeaways
- 🌟 Los contenedores son elementos utilizados para organizar y almacenar diferentes bloques dentro de una página web.
- 📄 Se trabaja con HTML para estructurar y nombrar los contenedores, utilizando etiquetas como `<div>` y atributos de clase.
- 🎨 En CSS, se pueden aplicar estilos a los contenedores para dar formato a los bloques que contienen, como cambiar el color de fondo y el tamaño de la fuente.
- 🔲 Se utiliza la clase `.caja` en CSS para dar estilos específicos a los bloques individuales dentro de un contenedor.
- 🖌️ Se pueden establecer propiedades de fuente, tamaño y color en los elementos de texto para mejorar la visualización y legibilidad.
- 📐 Los contenedores pueden tener un ancho definido en píxeles o porcentajes para adaptarse al diseño deseado.
- 🔄 Es importante que los contenedores se adapten a diferentes tamaños de pantalla, utilizando medidas relativas como porcentajes.
- 💬 Se menciona la importancia de centrar los contenedores en la página y mantener un margen adecuado para una mejor experiencia de usuario.
- 🌎 Se destaca la necesidad de que los diseños web sean responsivos, adaptándose a diferentes dispositivos como tablets y celulares.
- 🔗 Se anticipa que en futuras lecciones se profundizará en temas avanzados de diseño web utilizando contenedores y CSS.
Q & A
¿Qué tema se aborda en el curso de CSS de Alayón?
-El tema abordado en el curso es el de los contenedores en CSS.
¿Cuál es la estructura inicial que se muestra en el ejemplo del curso?
-La estructura inicial incluye un elemento h1, y luego se eliminan otros elementos, quedando solo con el título.
¿Cómo se nombra el primer bloque que se crea en el ejemplo?
-El primer bloque se nombra 'bloque 1' y se le da un título dentro de un elemento h2.
¿Qué elementos se utilizan para introducir texto dentro de los bloques?
-Se utilizan etiquetas de párrafo para introducir varios textos falsos dentro de los bloques.
¿Qué se hace con la etiqueta div en el ejemplo del curso?
-La etiqueta div se utiliza para agrupar los bloques y se le asigna una clase llamada 'caja'.
¿Qué propiedades CSS se eliminan al principio del ejemplo, y cuál se mantiene?
-Se eliminan todas las propiedades CSS excepto la del body, que se mantiene.
¿Cómo se nombra la clase CSS que se le da al primer contenedor en el ejemplo?
-El primer contenedor se le da la clase 'caja1'.
¿Qué propiedades se le asignan a la clase 'caja1' en CSS?
-A la clase 'caja1' se le asigna un fondo de color turquesa, el texto se pone de color blanco y el tamaño de la fuente a 25 píxeles.
¿Cómo se centra el contenedor en la página web?
-Para centrar el contenedor se utiliza el margen automático (margin: auto;) y se le asigna un ancho del 90% para que se adapte a diferentes tamaños de pantalla.
¿Qué se entiende por 'contenedor' en el contexto del curso de CSS?
-Un contenedor es un elemento que almacena diferentes bloques o cajas, y se utiliza para organizar y estructurar el contenido de una página web.
¿Cómo se puede evitar que el texto se pierda al cambiar el tamaño de la ventana del navegador?
-Se puede evitar que el texto se pierda utilizando porcentajes para el ancho del contenedor y el margen, lo que permite que el diseño se adapte a diferentes tamaños de pantalla.
Outlines
😀 Introducción a los Contenedores en CSS
El vídeo comienza con una introducción al curso de CSS por Alayón, enfocándose en el tema de los contenedores. Se describe el proceso de dirigirse a la página HTML y la eliminación de elementos innecesarios, dejando solo el título. Se trabaja con contenedores dentro de un 'div', donde se agregan títulos y textos falsos. Se menciona la creación de un 'div' que actúa como un acordeón, mostrando el contenido al interactuar con él. Se da un vistazo a la estructura HTML y se explica cómo se aplican las clases CSS para dar estilo a los elementos, como el color de fondo y el texto.
🎨 Estilizando Contenedores y Texto
En este segmento, se continúa con el tema de los contenedores, explicando cómo se aplican estilos CSS para mejorar la apariencia visual. Se muestra cómo se trabaja con clases CSS para establecer propiedades como el fondo y el color del texto. Se detalla el proceso de copiar y pegar contenido HTML para crear múltiples bloques y cómo se asignan nombres y clases a estos bloques. Se enfatiza la importancia de actualizar la página para ver los cambios y se ofrece una visión general de cómo se aplican las propiedades CSS para dar estilo a los contenedores.
🖥️ Diseño de Páginas Web con Contenedores
El vídeo finaliza con una discusión sobre cómo los contenedores pueden modelar la página web según el diseño deseado. Se explora la idea de centrar el contenido y cómo se pueden usar márgenes y anchos en porcentajes para adaptar la página a diferentes tamaños de pantalla. Se menciona la importancia de que la página web se adapte a diferentes dispositivos y se proporciona una explicación sobre cómo se pueden aplicar estilos CSS para lograr esto. Se concluye con una anticipación de lo que se aprenderá en el episodio número 8 del curso de CSS.
Mindmap
Keywords
💡Contenedor
💡CSS
💡HTML
💡Clases
💡Estilo visual
💡Ancho
💡Margen
💡Porcentajes
💡Diseño responsivo
💡Propiedades CSS
Highlights
Inicio del curso de CSS con un enfoque en los contenedores.
Eliminación de la estructura actual en el index HTML, manteniendo solo el título con un h1.
Introducción de contenedores con h2 y títulos específicos como 'bloque 1'.
Inclusión de textos falsos para ilustrar el uso de párrafos dentro de los contenedores.
Explicación de cómo los contenedores actúan como acordeones, mostrando su contenido al interactuar.
Eliminación de propiedades CSS excepto 'body' para mantener la estructura básica.
Copia y pegado de contenido para crear múltiples bloques con la estructura de contenedores.
Asignación de clases a los contenedores para facilitar la manipulación con CSS.
Creación de estilos para la clase 'caja 1' con fondo turquesa y texto blanco.
Ajuste del tamaño del texto a 25 píxeles para mejorar la visualización.
Repetición de estilos para la clase 'caja 2' con fondo marrón y texto blanco.
Importancia de los contenedores para almacenar diferentes bloques y su representación en HTML.
Selección y manipulación del contenido del contenedor con la etiqueta 'div'.
Asignación de una clase al contenedor para aplicar estilos globales.
Estilización del contenedor con ancho, margen y centrado para mejorar la presentación.
Adaptación del diseño para diferentes dispositivos usando porcentajes en lugar de píxeles.
Conclusión del tema de contenedores y su impacto en la estructura de una página web.
Transcripts
[Música]
qué tal amigos estamos de regreso con
nuestro curso de ss soy alayón y hoy
vamos a hablar sobre el contenedor
[Música]
y yo de retorno vamos a complementar la
parte donde nos habíamos quedado hoy con
un tema muy importante que sería el tema
de los contenedores ok bien lo que vamos
a hacer ahora es dirigirnos básicamente
a nuestra página del index html y por el
momento teníamos esta estructura lo cual
para mi ejemplo yo lo voy a borrar
prácticamente todo exceptuando el h1
ok nos vamos a quedar simplemente con el
h1 controles y tú deberías tener
simplemente el título ok de la misma
manera ahora vamos a trabajar con
contenedores dentro de un dip que íbamos
a tener que los padres son h 2 y dentro
de este h 2 vamos a darle un título el
título que yo veo conveniente es bloque
en este caso 16 de esta manera bloqueo 1
bien ahora lo que vamos a hacer es traer
la etiqueta del párrafo y vamos a
introducir varios textos falsos ok vamos
a poner más texto falsos laurent
controles me parece bien un poquito más
rigor en ir solo muy bien controles y me
parece perfecto
ok bien
y básicamente estamos trabajando con
algo que vamos a conocer con el nombre
del bloque y este bloque obviamente
tiene un párrafo ok y todo eso lo
tenemos dentro de dif ok y recuerda que
en este punto yo tengo una especie de
guiño lo cual hace el trabajo como de un
acordeón todo lo que lo contiene dentro
del dip
lo vamos a recoger miren ok ocultándolo
cuando yo quiero saber qué contiene este
tipo entonces me vengo a este punto y
automáticamente me muestra ok y bien
siguiendo esa ideología de la misma
manera ahora acá en css vamos a borrar
todas estas propiedades exceptuando el
body
porque lo vamos a mantener controles y
automáticamente tú deberías tener este
aspecto recuerda controles y actualiza
es la página
ok y bueno ya volviendo a html acá para
hacer este ejemplo yo voy a copiar todo
esto básicamente todo lo que contiene el
libro lo voy a copiar
y lo voy a pegar más abajo y aquí vamos
a pegarlo
perfecto control ese y deberías tener
bloqueo 1 y bloque 2 y ese nombre lo
vamos a cambiar acá por el valor de 2
controles ahí lo tienes perfecto
entonces mira tengo un contenedor de
nombre bloque uno y otro contenedor de
nombre bloque dos bien ahora sí vamos a
hacer algunas propiedades qué te parece
dentro de css
de hecho el título lo vamos a dejar tal
como está no lo vamos a tocar ya que
tiene una clase y de la misma manera
para trabajar con el dif necesito darle
también una clase entonces volvemos a
html ahora lo que yo voy a hacer acá es
darle un atributo precisamente al
contenedor no a laxe 2 ni mucho menos al
párrafo sino directamente al contenedor
que el nombre que yo voy a dar es caja
ok
número 1 de esta manera control s
no pasa nada visualmente y de la misma
manera me voy a venir al otro día al
otro contenedor y voy a poner el
atributo clase en el cual voy a darle el
nombre esta vez de caja 2 muy bien
controles ahora si volvemos
automáticamente a csc y lo primero que
vamos a hacer es trabajar con la caja 1
entonces recuerda que para trabajar con
clases necesito traer el punto y el
nombre del atributo en este caso caja o
no abrimos llaves y en este caso vamos a
hacer algunas propiedades que nos van a
servir bastante qué te parece si
trabajamos primeramente con el fondo
con el background en este caso el
background lo voy a hacer de color
turquesa punto y coma controles y vamos
a traer esto más acá para que lo podamos
ver mejor ok y ahí está ok vamos a
cambiar el color del texto que te pone
sea blanco white o lo mantenemos
vamos a hacer a ver
no lo podemos mantener a ver controles
si me parece muy chillón vamos a dejarlo
simplemente black controles
ok muy bien ahora qué te parece si
trabajamos la parte del tamaño del texto
con un font size y en este caso yo voy a
otorgar el valor de 25 píxeles punto y
coma
controles no olvides actualizar su
contenido y ahí lo tienes ya tengo un
bloque algo más visual y en este caso lo
mismo vamos a trabajar para él la caja 2
key caja en este caso 2
muy bien de la misma manera vamos a
comenzar con el fondo el fondo que estoy
buscando qué te parece que sea brown
okay controles y si quieres ver los
cambios ahí está en este caso creo que
es necesario cambiar el color del texto
por white punto y coma controles y
también vamos a manejar el font sites
para el tamaño de la misma propiedad 25
píxeles control s
ahí está bien no hasta este punto nada
difícil nada complicado o algo nuevo que
hayamos visto que entonces estamos
repasando a todo lo que acabamos de dar
de echo miren si yo lo pongo mi página
web a un tamaño considerable se mantiene
algunas propiedades bien hoy el tema de
hoy recuerda que es el contenedor y
básicamente al usar las herramientas
como bus trouble fundation que son
herramientas que nos sirven bastante
para construir una página web mediante
css se puede aplicar este tipo de modelo
que vale la pena recalcar que esto
necesita reglas pero por el momento es
bueno conocer cómo trabaja esto del
contenedor
bien como su mismo nombre indica el
contenedor es un contenedor donde vamos
a almacenar diferentes bloques en este
caso diferentes cajas bien para que
entiendas mejor este punto me voy a
volver a html
y dentro de html en este caso lo que yo
voy a hacer es recoger todo lo que
contiene la caja 1 y también la caja 2
ok ahora el contenedor es un elemento
donde voy a almacenar tanto caja 1 y
caja 2 por tanto yo lo voy a hacer en
ese lugar también lo voy a seleccionar
esto de esta manera
y para que no te es la diferencia no es
necesario que te lo hagas simplemente yo
lo estoy haciendo de esta manera para
que puedas verlo mejor el h1 lo vamos a
aislar ok para que veas que simplemente
todo lo que contiene el contenedor va a
poder usarse con ese nombre y el
contenedor también tiene que tener la
propiedad del dip esta etiqueta de hecho
lo vamos a escribir la dip y acá vamos a
darle de nombre ok pero no lo puedo
hacer en esta parte si no es lo que yo
necesito es trabajarlo con la propiedad
de una clase precisamente en este punto
vamos a darle el nombre del contenedor
ok
esta parte lo vamos a cortar la parte
donde se cierra la etiqueta y yo lo voy
a depositar en este punto acá
ok control s no vamos a sufrir un cambio
visual pero en la parte de html mira si
yo recojo este punto automáticamente el
dif clase contenedor ya ha recogido todo
lo que se almacena que se almacena
primeramente caja 1 y caja 2 y dentro de
caja 1 precisamente acá yo tengo todo
esto y encajados también tengo todo esto
muy importante ese punto entonces todo
lo que contiene el contenedor es
básicamente lo que va a afectar
ok bien ya explicando este punto vamos a
guardar los cambios vamos a volver acá
precisamente a nuestros estilos css para
añadirlo yo lo voy a hacer en este punto
acá
nuevamente llamamos esta vez al
contenedor
[Música]
muy bien que vamos a depositar dentro
del contenedor lo primero que podemos
hacer es darle un mejor estilo o mejor
aspecto a nuestro modo de diseño miren
en este instante yo lo tengo de esta
manera y por defecto siempre está pegado
a la parte izquierda aunque si no lo
entiendes mira acá vamos a depositar
algo que se conoce con el ancho que
sería la palabra wheat ok acá vamos a
usar diferentes porcentajes como este
primer ejemplo voy a usarlo simplemente
como píxeles ok para que note es la
diferencia yo voy a poner un valor alto
600 píxeles punto y coma control ese y
automáticamente el ancho de mi
contenedor donde yo tengo caja 1 y caja
2 sufre ese cambio
ok miren tiene un ancho de 600 píxeles
si yo lo depósito como una página en
todo su tamaño por defecto siempre va a
estar pegado a la izquierda
ese es un detalle que vamos a modificar
dicho acá yo puedo trabajar con algo que
se llama margen
margin que a este margen llegue a
depositar el valor de 100 píxeles punto
y coma controles y ahí está miren hay un
margen de 100 píxeles y miren yo voy a
tratar de recoger la página y se
mantiene esos 100 píxeles
ok muy importante ese punto pero
actualmente recuerda que una página web
tiene que adaptarse al tamaño de
cualquier monitor de cualquier tablet de
cualquier celular por tanto miren si
tengo un tamaño considerable se va
perdiendo el texto este lado al lado
derecho aquí entonces y eso es lo que
tenemos que evitar como lo podemos hacer
prácticamente con algunas condiciones en
primer lugar qué te parece si
modificamos la parte del web
generalmente una página web debería
tener un ancho de 1000 píxeles como por
ejemplo controlar y automáticamente
miren mi página ya tiene ese ancho de
1000 píxeles ok pero aún así no los
tengo centrado y acá se puede usar
algunas propiedades miren para este caso
acá al lado del margen
yo podría cambiarlo por algo que se
conoce out o sea que el margen se adapte
control s
y automáticamente si yo lo desplazó ya
lo tengo centrado pero a la vez si trato
de trabajar desde este modo
vemos que se va acoplando a diferentes
tipos de monitor pero aún hay un detalle
muy importante que sería miren el borde
en esta parte tiene ese ancho y
posteriormente se va achicando y se
mantiene en un determinado punto pero al
lado derecho se pierda totalmente
entonces para corregir este tipo de
error
básicamente acá no podemos trabajar si
no es con pixeles si no es básicamente
yo lo podría cambiar por porcentaje para
que me entiendas mejor digamos que todo
este diseño para una página normal tiene
un valor del 100% y yo quiero que todo
mi texto ocupe el 90%
dividiendo entonces la página en 90% 55
por ciento el total de 100 por ciento y
miren cómo lo voy a implementar acá
simplemente en el with yo voy a poner el
valor del 90 por ciento
ok simplemente así de esta manera
controle se actualizó el contenido si tú
quieres y miren voy a agrandarlo
y automáticamente mira está ocupando el
90% 5 y 5% de una página web lo tengo
libre ok
como margen y esto funciona bastante
automáticamente se respeta el diámetro
porque estamos trabajando en porcentajes
si mi pantalla es de este tamaño
entonces se respetan 90 55 al 100%
si fuese como de un celular posiblemente
podemos decir que sea de este bloque
entonces miren el 90% de la página web
está ocupado por texto y el sobrante 5%
están básicamente para los márgenes ok
entonces el contenedor básicamente va a
poder moldear nuestra página web al
estilo que vamos a implementar
básicamente se maneja siempre web y
margin en este caso hemos debido ver que
el margen yo lo tengo en automático y
además el wiki yo tengo el 90 por ciento
para que se acople a cualquier tipo de
monitor o pantalla que estemos
disponible es abrir esta página web
ok bien vamos a dejarlo hasta este punto
era una parte introductoria del tema que
se va a venir en el episodio número 8
como antecedente o previa a lo que vamos
a aprender acá en tu curso de css
تصفح المزيد من مقاطع الفيديو ذات الصلة
CURSO de CSS 2021 Rapido y Facil #12 | 💻 CAJAS FLOTANTES
✅ Crear MEGA MENÚ con Elementor Pro (3.12) | Sin plugins extra
CURSO de CSS 2021 Rapido y Facil # 9 | 💻 TIPOS DE ELEMENTOS
CURSO de CSS 2021 Rapido y Facil # 11 | 💻 ENLACES
CURSO de CSS 2021 Rapido y Facil # 4 | 💻 EL COLOR
▶️ #14 QUE ES MEDIA QUERY??? 💻 Curso CSS
5.0 / 5 (0 votes)