Aprende a hacer cola CSS - Parte 1

1. Vista previa de las clases: Hola y bienvenidos a esta clase. Y esta clase, te guiaremos rápidamente para convertirte en un diseñador de interfaz de usuario de viento de cola. Este curso está financiado, esta clase es amigable para hacer eso. No sabes nada de J1 CSS. A medida que comenzamos enseñando los conceptos básicos y elementos fijas, primero explicaremos a fondo los temas y conceptos esenciales y creceremos a través de la necesaria documentación CSS de viento de cola el fin de enseñarte los fundamentos para esta clase. lo que este curso va a ser principalmente el lado teórico de los rostros infantiles. Y después de este curso tenemos glucosa es baja. Las otras clases van a ser el lado práctico de Tilman CSS donde realmente nos sumergimos en proyectos e implementa algunos lindos sitios web usando hasta uno CSS. 2. 1 grupo de clase de fondo: De acuerdo, entonces antes de hacer los proyectos en este curso, queremos pasar por las diferentes secciones para digamos, un CSS. Entonces en este video vamos a estar discutiendo las secciones de fondo para las clases y dice que quiero CSS. Entonces sigamos adelante y empecemos con la sección de color de fondo. Ahora, hay muchos colores diferentes que puedes usar. Entonces para usar la clase de fondo, solo tienes que escribir bg y luego seguido del color que quieras. Por ejemplo, el bloque BGO nos dará el color negro. Seré julio, agosto, el color blanco. Y también si quieres tener un tono de ese color, puedes usar el tablero 5000100, el y puedes hacer transparencia BG o para hacerlo transparente. Por lo que de nuevo, es muy fácil usar los colores con el fondo. Todo lo que tienes que hacer es solo BG para indicar que es un color de fondo. Y luego el color que quieres, y luego el tono es todo si quieres. Por lo que cuanto mayor sea el número, más oscura será la sombra. De acuerdo, así que ahora pasemos a usar el cual, como se puede ver aquí, tenemos verde. Podemos cambiarlo a azul, por ejemplo, y luego lo haremos en un botón azul. Ahora bajemos y hablemos de la opacidad. Por lo que es inicio de sesión muy sencillo. Solo tienes que usar bg obesidad. Y cuanto mayor sea la obesidad, más oscuro es básicamente más oscuro. Y cuanto menor sea la oportunidad, más transparencias. Es muy autoexplicativo. Y bajemos ahora. Tenemos la responsabilidad de Tailwind. Todo lo que tenemos que hacer es utilizar los diferentes hechos. Por ejemplo, si queremos usar un color específico para dispositivos medianos con solo su MD. Y luego escribimos el color que queremos para dispositivos grandes, LG para dispositivos pequeños , SM, etc. Ahora tenemos el efecto hover. Para usar el hover, sólo tengo que tener un hover frente del auto que queremos. Y luego cuando pasemos por encima de él y el color cambiará a lo que quiere. Por ejemplo, por aquí estamos usando varios cientos, por lo que el, el tono de rojo será más alto, por lo que será más oscuro. Y vamos a centrarnos ahora. Por lo que cuando hacemos click en esto, se volverá blanco. Como se puede ver, el color de fondo es gris con un tono de 200. Y cuando hacemos clic en él, se volverá blanco. La obesidad de fondo también es muy simple. Acabas de poner el VG, que es de fondo, y luego le das vuelta la opacidad y luego el número de la obesidad, cuanto mayor es, más Piketty y menos es, más transparente se explica por sí mismo. Ahora, pasemos al origen de fondo. Entonces para tener este bonito efecto, igual que, al igual que un sello postal, tiene ese efecto fresco a su alrededor para darle ese origen y esa autenticidad. Puedes usar borde de origen de fondo, y luego podemos usar relleno de origen de fondo. Por lo que para darle es más relleno como se puede ver en el número 2. Y si quieres darle algo, si quieres convertirlo en un contenido de fusible, entonces aparecerá. El holgura es igual que muestra un número tres. Y además, bajemos a lo específico no vamos a reutilizar que sólo vale la pena cubrirlo. Ahora posición de fondo. Entonces es muy sencillo. Es decir, esto es muy de sentido común. Como puedes ver si vas abajo en la sección de uso, podemos ver si haces BG LefTop it, quien pegará el fondo a la izquierda y a la parte superior. Si solo haces la parte superior, esto era para llegar a la cuenta superior tu tema o saltar a la esquina superior derecha. Entonces, así sucesivamente. Entonces ahora vamos al fondo repite. Por lo que con las repeticiones de fondo, puedes tener un fondo que básicamente sigue repitiendo hasta que llena toda la pantalla. O no puedes tener repeticiones, lo que básicamente solo lo hace una vez. Simplemente elige los de fondo. Como se puede ver por aquí. Se puede tener repetición horizontalmente también es que se distribuye horizontalmente. Otra vez es cosas muy simples. Solo puedes querer querer documentación y cualquier cosa que quieras, quieres entrar en detalle. Solo puedes ir a verlo por aquí. Tienes repeticiones verticalmente otra vez, solo se repite vesícula. Entonces solo serías GIPHY y vi a Peter verticalmente. De acuerdo, Ahora pasemos a tu tamaño de fondo. Entonces, ¿qué tamaño de fondo? De acuerdo, así que los tamaños de fondo son bastante autoexplicativos como 0, 0, 2 lo hace. Básicamente te muestra automáticamente a su tamaño predeterminado. Por lo que sobre los tamaños de imagen se va a mostrar tal como está. Tenemos cubierto. Ahora si utilizas bg cover, ¿Fue lo hará, básicamente cubrirá toda la zona, toda la escena. Entonces eso es básicamente no hay espacios en blanco. Si bajamos ahora, hemos contenido, contenido básicamente hará que la imagen sea como, tan grande como pueda ser sin, sin modificar la relación de aspecto y también sin recortarla. Nosotros también tenemos responsive. Tan responsable básicamente lo hacen sensible. Y así ahora se ha ido imagen de fondo. Imagen de fondo. Podemos usar BGN on para hacer que la imagen de fondo sea ninguna. Entonces no hay imagen de fondo y podemos usar las diferentes clases como puedes ver por aquí, podemos tener. Gradientes, tan básicos. Por lo que es implementa los gradientes de abajo a arriba. Tenemos dos de arriba a la derecha. Entonces básicamente hace un gradiente hacia arriba a la derecha, de abajo hacia arriba a la derecha y así sucesivamente y así sucesivamente. Al igual que lo afirma ahí dentro, tenemos gradientes lineales. Y así le da un fondo de elemento e ingrediente. Para que puedas usar como la dirección en la que quieres ir, tal y como te expliqué. Y luego puedes en los colores que quieras. Entonces por ejemplo, de 400 a VI, lee, 500 para mostrar básicamente te pones en la universidad y luego haremos el gradiente por ti. Entonces tenemos paradas de color gradiente. Entonces, así otra vez, igual que expliqué, pero el color se detiene. Entonces básicamente puedes tener un color de partida y va de básicamente un color de inicio al blanco al blanco. Y podemos tener de un color a un color. Entonces a partir de una cultura inicial y en color. Y también podemos tener tres colores. Entonces de un color a otro color a otro color. Por lo que básicamente apoya de uno a tres colores. Básicamente resume las clases de fondo para este video. De nuevo, podría haberme saltado algunas clases porque algunas de ellas eran innecesarias y realmente no las usas solo en circunstancias específicas. Por lo que eso debería darte una buena comprensión de los colores de fondo que estaremos utilizando en nuestros proyectos. Muy bien, chicos, así que ahora que hemos discutido el grupo de cláusulas de fondo, Vamos a seguir adelante y en realidad implementar algunas de estas clases para ver cómo se ven en acción. De acuerdo, antes que nada, hagamos un nuevo div y le demos un color de fondo. Entonces dale un fondo color azul con una hoja de 300. Y hagamos la altura de la misma a la altura de la pantalla. Como puedes ver, tenemos este color de fondo. Ahora vamos a aumentar la hoja para hacerla más oscura. Como se puede ver, se ha vuelto más oscuro. Si queremos que sea un cierto color para, por ejemplo, dispositivos grandes, podemos hacerlo usando LG y luego punto y coma, básicamente con lo que queremos, sin punto y coma, colon. Y entonces podemos colorear que queramos. Por ejemplo, estás en 600. Entonces ahora si el ancho se convierte en dispositivo permite, entonces el color de fondo cambia a él. Ahora hagamos también la obesidad. Entonces, por ejemplo, no haría lo contrario aquí para dispositivos grandes. Entonces podemos tener, cuando el dispositivo es grande, podemos hacer obesidad BG 50. Y entonces eso básicamente debería hacerlo más transparente. Como se puede ver, el rojo ahora es más transparente. Y ahora hablemos del efecto flotando. Si queremos pasar por encima de esto, podemos hacerlo como un color Zola por ejemplo, pasar el rato sobre Vg, verde y voy a hacer como un 100. Entonces ahora cada vez que paso el rato, el div es se vuelve verde. Ahora vamos a cubrir también la imagen de fondo. Hace otra cosa importante que vamos a estar usando en nuestros proyectos. De nuevo, oye, estoy tratando de cubrir las cosas más importantes porque hay miles de suavizar cierto CSS y hay muchas cosas innecesarias. Por lo que principalmente voy a cubrir las cosas de la fundación. Si quieres entrar en los detalles, siempre puedes entrar y decir uno sitios web CSS y básicamente puedes encontrar lo que quieras. Las sonatas tienen un nuevo div. Y esto le da una imagen de fondo usando estilo por ejemplo. Entonces haremos imagen de fondo. Se encuentra la URL, así que está bien. Tan solo un logo de viento de cola y aún me imagino. De acuerdo, tomemos este por ejemplo. Y ahora vamos a darle estilo. Por lo que algunas clases, usaremos altura mínima de la pantalla. En realidad, no, vamos a quitar eso. Por ahora. Usaremos bg. No se repiten, top VEGF. Por lo que ahora déjame parar para que la imagen se repita. Y VEGF derrumbó básicamente alinearlo todo el camino hacia la parte superior izquierda. Y también como dan esta altura, pero esto nos da la altura de la pantalla. Por lo que será básicamente todo ocupará la altura completa de la pantalla. Y como puedes ver tu cabeza, si la hacemos más grande, si hacemos este panel más grande. Para que veas que las acciones con la parte superior izquierda de lo cambiamos a arriba. Así que especie de LefTop. Vamos a sólo BG, que top, básicamente centrar y hacer que las acciones de arriba en la parte superior de ella, tú y Watson. Watson, Watson básicamente va a entrar en esa posición. También se habla del tamaño de fondo. Entonces hay algunas clases de dimensionamiento, dimensionamiento que podemos usar para cambiar la imagen de fondo, el tamaño de la misma. En primer lugar, cambiemos la imagen porque queremos algo que te pueda gustar, algo con un fondo en nuestro próximo perfecto, porque tiene un buen fondo para que podamos ver cuánto básicamente está cubriendo en el div. Entonces cambiemos esta imagen. Y ahora si nosotros, si usamos el Vigenere repite BG, por ejemplo, cubierta de BG discontinua básicamente cubrió toda la pantalla con la imagen. Por lo que Vg cubre, como se puede ver ahora, toda la imagen. Todo el div está cubierto con la imagen. Si lo hacemos, sí contenemos, entonces básicamente no recortaría la imagen. Entonces es básicamente que intentas obtener toda la imagen dentro de este div. Y si hacemos BGO dos, entonces en realidad obtendría las dimensiones reales de la imagen y se mostrará dentro del div. ¿ De acuerdo? Entonces como pueden ver, la razón por la que quería llegar a ser, se hizo tan grande porque hay unas dimensiones de esta imagen. Entonces para los colores de gradiente, En realidad hay tres tipos de cruces que podemos usar. Por lo que se puede tener sólo un color inicial que eventualmente se vuelve transparente. Entonces sigamos adelante y hagamos eso. Vamos a tener un div, y vamos a darle un color. Entonces vamos, vamos a darle en realidad un gradiente de gradientes de playa a R. Así que va a la derecha. Y usaremos todo detenido el gradiente de, por ejemplo, azul con la sombra de 500. Y sólo vamos a dejarlo, como pueden ver, se convierte de YouTube, que se debe transparentar. Y así ahora vamos a hacer el otro donde se puede tener de color a otro color. Entonces podemos tener otro color básicamente que son dos, por ejemplo, morado. O simplemente cambiemos el color. Hagamos de, de duelo, un 100, dos 600 azules. Y tenemos 100 a 600. Como puedes ver ahora tenemos un gradiente usando dos colores, tres colores. También puedes hacer eso usando un color medio. Por lo que también podemos ponerlos dentro de ella, que es en este caso va a ser azul. Y podemos hacer, podemos hacer vía gracia, como pueden ver ahora tenemos el rojo. Entonces ahora tienes gradientes verdes, azules y rojos, copias oficiales que básicamente cubren nuestros gradientes. Entonces si queremos cambiar la dirección del gradiente, podemos hacerlo desde la clase. Por lo que tenemos gradiente de BG a nuestro en este caso va básicamente a la derecha. Entonces de izquierda a derecha, hacemos 22 cr. Entonces de arriba a la derecha, eso va a hacer la dirección desde básicamente la dirección será hacia la parte superior derecha de lo que hacemos por ejemplo, GB va a ser, lo siento, ¿ serías nuestra parte inferior derecha? Entonces depende de la dirección que quieras. Básicamente puedes elegir la dirección del gradiente y básicamente implementará esta dirección para ti. Por lo que eso cubre más o menos este aspecto práctico de las clases grupales de fondo. Es decir, no cubrí todo lo que hemos hecho en la teoría. Principalmente, creo que sólo me perdí el origen de fondo porque básicamente sólo estamos tratando de cubrir las cosas más importantes que realmente vamos a estar usando y las cosas que en realidad son prácticas. Entonces si quieres entrar en detalle, siempre puedes pasar hasta un CSS y puedes probar estas clases primero. 3. 2 clase de la familia de la familia de la frontera: Entonces ahora vamos a cubrir los grupos de radio fronterizo. Este grupo de clases van a ser proyectos bastante importantes que vamos a estar implementando. Entonces vamos a cubrirlos. Entonces no hemos redondeado ninguno. Esto básicamente no tiene ningún radio fronterizo para las aguas del elemento que estamos usando. Tenemos SM redondeado. Esto básicamente te da un pequeño radio fronterizo de 0.125 REM. Y tenemos redondeado, que básicamente te da un radio más fronterizo de 0.25 RAM, RAM. Y a medida que bajamos, el radio fronterizo se vuelve más parecido, más efectivo. Y se vuelve, te da un radio fronterizo más alto básicamente. Y si queremos tener como por ejemplo, también podemos especificar la madera real es a la que queremos apuntar. Entonces si queremos hacer completo, quería, por ejemplo, hacer solo el radio de frontera superior, podrías hacer eso, puedes t Así que básicamente podemos especificar las palabras exactas que quiero usar de querer a la correcta podríamos hacer somos queríamos en la parte inferior, podrías hacer B, y también podemos especificar el tamaño de la misma. Entonces sí, es muy fácil de usar. Entonces ahora si nos desplazamos hacia abajo, básicamente podemos mirar estos ejemplos. Entonces como puedes ver, tienes redondeada, alisa el agua, es muy mínima. Y si tienes como los hemos redondeado, ten MD y algas. Algas como se puede ver, tiene el radio fronterizo más alto. Entonces tenemos píldoras y círculos también. Para que podamos correr esto lleno para darnos un círculo. Y se puede tener, así como se puede ver, el agua es realmente fuerte con el alrededor por ahora. Y también tenemos el no-yo redondeado. Ya tenemos un radio fronterizo para una cláusula específica. Podemos quitar esa elección redondeada no como se puede ver que la cabecera, el agua se ha ido. Y también podemos especificar un específico un delimitador-radio específico de los elementos seleccionar superior o derecha o inferior frontera-radio y podemos básicamente un controlarlos. Y la persona poniendo las alfarerías exactas, quiero el ancho. Como se puede ver, es muy fácil, autoexplicativo. ¿ No acabas de poner en la frontera y después pones el número? Cuanto mayor sea el número, más ancho tendrá el modelo. Y si quieres apuntar a un tono específico, puedes hacerlo usando pizarra negra para que ella, cuáles son nuestro top G54 son 48 L para izquierda, así sucesivamente y así sucesivamente. Y como se puede ver por aquí, tenemos la frontera diferente, anchura, altura, anchura, más elite cree que deberíamos, como se puede ver. Tan mismo con los sonidos individuales, igual que explicamos. Básicamente dirigido usando el sitio específico. Por lo que T para top o fluoruros antes compraron algunos alfa izquierda. Como puedes ver, en realidad podemos hablar, hay agua tendría un div y menos básicamente le daría algún radio de frontera usando, por ejemplo, SM redondeado. Entonces vamos a darle una altura de 12, 10, 12, y hacer rojo. Y luego estos dos redondearon SM. Como puedes ver, tenemos unos radios realmente pequeños. Aumentemos ese LG redondeado sin usar. Y como pueden ver, tenemos un radio fronterizo mucho más fuerte. Ahora, usemos también redondeado buscado para hacer un círculo completo. Como se puede ver ahora círculo. Y ahora después de esta ronda y la comida se hace redondeado ninguno para que sea para quitar su propio radio. Como se puede ver, eso funciona. Y ahora vamos a apuntar a la parte superior del agua que es. Vamos a darle un registro, ejecutar el CI, y haremos tres excel. Entonces como puedes ver, el radio fronterizo superior es realmente fuerte y no hay frontera está en la parte inferior. Entonces ahora, OK, entonces ahora vamos a darle algo de ancho de borde, que es que tienes que hacer como bordes, tu billetera, tú, por ejemplo, eso te da lo que el ancho, como puedes ver. Ahora como la frontera, el lado derecho, queremos darle sólo para que podamos hacer frontera lado derecho 8. Y eso básicamente debería darnos sólo el agua del lado derecho. Y ahora hagamos por ejemplo, frontera índigo 600. Y eso debería darte un colorismo. Por lo que el lado derecho ahora está coloreado con el color índigo y un tono de 600. Para que básicamente, básicamente se puede cambiar eso usando, por ejemplo, borde, arriba, izquierda, abajo. Puedes apuntar al agua específica que quieras. Y eso básicamente abarca todo lo que es importante en lo que respecta a las fronteras. 4. 3 de clase de Flexbox y la cuadrícula: Ahora vamos a estar cubriendo el flexbox y los glucoses de rejilla. Esto es muy importante porque usamos mucho esto en otros proyectos. Y esta es una de las clases fundamentales, una de las clases grupales fundamentales que siempre estarás usando cuando tú, cuando estés trabajando con Telemachus nosotros. Entonces, en primer lugar, empecemos con dirección flex. Como se puede ver aquí, tenemos cuatro clases, conferencia, que básicamente es como los elementos. Dentro de los elementos que desea agregar dentro de un div, una fila. Y si vas a revertir o básicamente voltearlo y básicamente lo pones de derecha a izquierda en lugar de restaurantes. Y flex Coase que básicamente en los elementos dentro de una columna div, agregará su de manera vertical. Y núcleo de flujo invertirá básicamente, básicamente revertirá los elementos. Entonces empezando de abajo hacia arriba en lugar de de arriba a abajo. Por aquí tenemos la fila. Al igual que te expliqué, cuando usas flexor, cuando tienes estos tres artículos por aquí, cuando tienes div quería 23. Ahora, los agregados de manera horizontal, por lo que se suman a la derecha de cada uno. Y cuando tú, cuando aplicas reversa flexible, básicamente aplicará el 0, los agregará todo el camino a la derecha y al átomo izquierdo, básicamente uno por uno a la izquierda. Y cuando estás usando carbón de flujo para añadirlos de manera vertical, como puedes ver ahí mismo. Y cuando estés usando flex, flex column reverse, eso los agregará de abajo a arriba para que responda. Nuevamente, al igual que explicamos, el otro grupo cruza, sólo tenemos que especificar la pantalla del dispositivo. Y entonces básicamente puedes agregar las clases que quieres una orden para vender eso si de manera responsable. Envoltura flex. Esto es muy importante también para los proyectos que lo usamos mucho. Entonces lo que esto hace es que a medida que avanza desde aquí, tenemos tres tipos. Tienes flex wrap, flex wrap reverse y flex Europe. Por lo que no queremos tu app, entonces puedes aplicar Flexner arriba. Y lo que esto hará es que incluso cuando tengamos un suave que es más pequeño que nuestro contenido, el último elemento era estar ahí básicamente no estaría envuelto y la incertidumbre en la siguiente línea. Básicamente permanecerá en la misma línea. Y cuando estás usando flex wrap, como puedes ver donde hemos usado flex wrap, tenemos tres elementos dentro de este div principal, que es, que usa el extra. Ahora, el tercer elemento básicamente se anexa en la segunda línea en lugar de continuar en la misma línea porque el ancho lo, porque no puede caber en uno y confiado básicamente se insertará en la siguiente línea. Y cuando hemos invertido rápidamente, lo que esto hace es básicamente sumar los elementos de abajo a arriba o de izquierda a derecha, básicamente en este caso. Y de nuevo, para que sea sensible, solo especificamos el nombre específico del dispositivo y podemos poner en las clases de flex wrap específicas. Entonces empecemos con flex uno. Por lo que esto permite que un elemento flex crezca y se encoja según sea necesario e ignora el mismo lado inicial. Entonces básicamente si tenemos, digamos que tenemos un elemento, un desarrollo que utiliza flex, tres elementos que tiene flex uno. Entonces vamos a ver, tenemos tres elementos. Cada elemento básicamente ocupará la mitad del espacio de ese desarrollo es flujo. Entonces si tenemos tres, entonces Israel tomaría ACE2, tal y como explicamos antes con el, con especificar un peso específico, como por ejemplo con la tercera mitad. En este caso, hay que hacer eso. Podemos simplemente decir flex uno y es automáticamente pondría ahí con para nosotros. Por decirlo así, en este caso nos hemos dado cuenta de este ejemplo. Por aquí. Tenemos tres elementos, es decir flex uno, y comparten un tercio de los elementos padre. Por lo que comparten un tercio del plan de estudios y dos, porque eran difíciles para ellos, cada uno tomaría CO2, así que automáticamente, solo, así que vamos y parece que ninguna longitud de onda, también lo hace, nos permite en integral y beber tomando en cuenta no es talla de zapato. Por lo que básicamente verá cuánto contenido hay para ese ítem. Y ajustará el tamaño de x en consecuencia al lado del contenido. Tamaño, que es básicamente tamaño inicial. Para flex one. Si hay un flex, entonces básicamente lo eliminará. Ya ves que tienes usando el negro por ejemplo. Tienes muchas clases. Yo solo quiero quitar el Flexner, sobre todo tú muy a mano cuando quieras hacer eso. Por ejemplo, depurar algo o como, asegúrese de que funcione. Puedes hacerlo fácilmente usando flexible ya que no tendrás que quitar el otro proceso para volver a hacer un responsive, igual que te expliqué antes con el otro proceso de grupo, solo puedes especificar el ancho de pantalla específico. Entonces MD, SM, LG, y luego poniendo las clases flex que quieras, esa manera será sensible. Y eso resume más o menos el flex. Por lo que ahora pasemos a flex crew. Por lo que tenemos flex drew euro y flex group. Entonces si los usamos porque evitará que el artículo realmente crezca con el ancho de pantalla. Por lo que tenemos piernas crecieron entonces básicamente ocupará mayor cantidad de especies que pueda disponible básicamente. No crezcas tan bien. De nuevo tú, igual que te expliqué, tenemos este ejemplo. Ver los elementos que tiene un candado, el elemento medio. Este está usando accesorios tú, como puedes ver en el código. Y ahora si lo hacemos más grande o más pequeño, las llamas crecen, siempre estarás bloqueado y no crecería. Y otros elementos utiliza fijo crecer en. Por lo que en realidad crecerá y crecerá y crecerá. Y en realidad se incrementará básicamente y todos ocuparán cualquier, cualquier tamaño disponible y se estará ejecutando. Básicamente se incrementa, establece en consecuencia. Ahora, y tenemos dos cláusulas, lavando 0 y arreglando encoges, encoge, no deja que el artículo se encoja. Y encoger, permite que se encoja. Eso es más o menos. A menos que cubra apenas sobre el contenido. Estos van a ser un grupo importante de clases. Por lo que justifica enseñado, es todo básicamente. Entonces una vez que tengamos un elemento que utilice, justo si empiezo, los elementos dentro, se aplicará de izquierda a derecha. Entonces si tenemos, por ejemplo, una columna, entonces será de arriba a abajo. Y si tenemos básicamente una fila, entonces se aplicará de izquierda a derecha. Justificar fin básicamente actuará igual que si tenemos una fila inversa. Entonces si tenemos una fila y estamos usando el reverso de fila para justificar y básicamente lo haremos. Entonces agregará los ítems para usar una fila. Después para agregar los ítems de derecha a izquierda y la columna dos otros de abajo a arriba. Justificar centro básicamente centrará para tener una columna centrada en el medio de la pantalla como vertical, vertical Santa Anna, para usar el crecimiento básicamente lo hará centro horizontal, justificar entre ella básicamente lo hará dar un espacio entre los elementos en consecuencia a cuánto espacio disponible hay alrededor también. Nuevamente, estos especialmente entre árboles alrededor y sobre todo vellosidades. Por lo que estos son muy similares en funcionalidad. Por lo que las diferencias entre sólo da igual espacio entre los elementos. Sólo los elementos giran alrededor, en realidad se preocupa por el alrededor de los artículos, no entre los artículos. Entonces digamos que tenemos elementos dentro de un div. Sólo el primero y el último que estaremos básicamente tienen una cantidad igual de espacio, así que entre uno y el div real. Por lo que en el lado izquierdo del uno, tendrá igual espacio entre igual como tres y el lado derecho del mismo. Por lo que estos 21 y el lado izquierdo tendrán márgenes iguales, sería justo como tres y el lado derecho, eso se basa en los que se encuentran entre los lados. Entonces básicamente da igual espacio entre los elementos y los elementos circundantes. Entonces básicamente el padre también es, el contenedor padre tendrá también el margen entre el elemento y el contenedor será el mismo que el margen entre los elementos y los elementos. Entonces sí, es bastante confuso. Te recomiendo básicamente comprobarlo en la documentación y jugar con ella para que básicamente puedas entender, pero básicamente cambiar entre es principalmente lo que vamos a estar usando salvajemente va a estar usando el habla alrededor de un específico listo, vamos a estar usando eso. De acuerdo, entonces ahora vamos a repasar los ejemplos que aquí se muestran. Por lo que tenemos justificado inicio. Básicamente lo suma de izquierda a derecha. Justificar centro. En el centro se sumarán los elementos. Sólo tenemos que terminar, esto se sumará al lado derecho. Creo que cometí el error de ella antes porque dije que sugerí por n va a ser lo mismo que usar flexor invertido, pero en realidad no es porque flexible, reversible ado, básicamente uno sobre el primer elemento se va a agregar como uno, y luego se sumará el segundo. Por lo que es un poco diferente, básicamente justificar y alinear los ítems a la derecha. tanto que el flujo, flujo a través de reversa básicamente voltearlos como también será 1, 2, 3 será 321. Yo sólo quería aclarar eso antes de continuar. Entonces el espacio entre así lo que esto hace, se preocupa por el espaciado entre los elementos y fijará su igual, igualmente entre ellos. Por lo que 123 tendrá entre ellos, el espaciado entre ellos sería igual. tanto que el espacio alrededor, realmente no nos importa lo específico, bueno, nos importa el espaciado entre los elementos, pero las cantidades iguales serán entre uno y el contenedor y tres en el continuo. Entonces el espaciado entre uno y el lado izquierdo, que es el espaciado entre el contenedor y uno, va a ser el mismo que el espaciado entre tres y el contenedor del lado derecho. Para que el espaciado, el espaciado alrededor de estos elementos vayan a ser iguales. Y por favor uniformemente, Es básicamente da igual espaciado entre, entre todo, así que entre los elementos y entre los, entre los elementos también. Por lo que eso cubre los contenidos justificados. Ahora, pasemos a justificar artículos. De acuerdo, Así que ahora vamos a cubrir justificamos artículos que en realidad no necesitamos cubrir esto porque es más o menos como justificar. Al igual que justificar el contenido. La única diferencia es que esto se usa con rejillas. Entonces me refiero a lo único que es realmente, realmente estirar tu clase, sugestiva cláusula stretch item. Eso es diferente. O sea, eso le da su va a ser igual el grupo flex era permitir que el ítem retome tanto específico a la justificación. Justificar el contenido es que justificar los elementos no utiliza el espacio uniformemente el espacio alrededor y el espacio entre. No tiene discursos y depende de bienes. Entonces sí, eso es más o menos. Por lo que ahora podemos seguir adelante y pasar a la siguiente sección. Por lo tanto alinear los contenidos. No voy a cubrir esto y va a cubrir esto brevemente. Las principales diferencias entre el contenido de justificar y justificar elementos es muy simple. El diferencia es, es que proporciona utilidades para controlar cómo se posicionan las filas en contenedores flex y grid multianuales. Por lo que tienes estos cursos a medida que consumes contenido, centras el pensamiento consciente, igual que cubrimos, y ellos justifican el justify-content y justifican los ítems. Por lo que contesta y mezcla los contenidos. Centrarlo y arranques básicamente lo hará arrancar de izquierda a derecha y alinearlo hasta el final. Cosas específicas que queremos y son diferencias es que controla cómo ROS oxígeno y maduran flex contenedores enfurecidos. Grupo de clases son alinear ítems. Por lo que alineamos artículos proporciona utilidades para controlar cómo se posicionan los artículos Flex y cuadrícula a lo largo de un eje transversal continuo. Por lo que básicamente te permite posicionar los artículos virtualmente. Por lo que tenemos artículos pensamientos. Empecemos con los artículos pensamientos. Como puedes ver, todos los artículos son básicamente detenidos el stock a la parte superior. Y nosotros hemos enviado si realmente están alineados en el medio. Y tenemos final con una. Así que básicamente están pegados al fondo. Y tenemos línea de base. La línea de base es básicamente cuando lo están, cuando el contenido de las mismas está centrado. Entonces ahora cubramos también a la sociedad. También tenemos estiramiento, que no cubrimos. Estirar básicamente estira la altura debe estar coincidiendo con el contenedor. Por lo que se estira. Por lo que eso cubre más o menos los artículos de alineación ahora. Por lo que esto resume nuestro grupo de clases flex y grid. Como se puede ver por todas las secciones que hemos cubierto. Espero que eso sea básicamente si necesitas algo y básicamente quieras aprender sobre esto más en detalle, solo tienes que seguir y decir cuando la documentación lo recomiendo mucho porque explica todo en detalle, pero básicamente cubre todo el modelo flex box y el sistema de rejilla. 5. 4 clase de diseño: Potente grupo de clases son las clases de contenedor. Y entonces va a ser una clase básicamente. Esta es otra tarea importante que utilizamos en nuestros proyectos y estarás usando mucho en tu futuro. Tones utiliza proyectos. Por lo que tenemos uno cruzado con su contenedor y podemos usarlo para básicamente podemos tener como MMD LG para los puntos de ruptura. Por lo que básicamente permite, básicamente contiene artículos y contenidos. Por lo que básicamente pones tus artículos en un contenedor y luego da con él, automáticamente ajustará el ancho máximo para que a medida que tu pantalla me consiga dos dispositivos diferentes tendrán diferente ancho. Entonces básicamente comprueba el ancho y tendrá un ancho máximo para ese dispositivo actual. Entonces, solo te mostremos un ejemplo. Por lo que se convierte en nuclear. Entonces como puedes compartirlo ahora, tenemos, ancho de nuestro dispositivo es de 446. Si tuviéramos que aumentar eso, básicamente se incrementará con él y hasta que te consiga 640. Entonces volvamos a la documentación es para explicar. Entonces tenemos dispositivos SM no es dispositivos. Por lo que el contenedor no tendría, si tenemos una pantalla de más de 640 píxeles, básicamente tendrá un ancho máximo de 640 píxeles. Entonces ahora estamos en 640. Como se puede ver, el ancho máximo es de 10. Por lo que ahora el ancho máximo es de dos o 640, pesar de que nuestro dispositivo es de 744 píxeles. ¿ Por qué? Porque volvamos a la conmutación. Como se puede ver, el siguiente es MD. Md requiere que la pantalla esté por encima de 768 píxeles. Uno está por encima de esto, entonces establecerá el ancho máximo al 768. Por lo que quería básicamente llegar a eso en cuanto recibamos cientos supera los aumentos máximos de ancho. Por lo que tenemos estos puntos de ruptura. Por lo que un contenedor ajustará automáticamente el ancho máximo para que el contenido no salga por la borda. Y no se ve a menos que te guste una clase específica que te permita desbordar tus contenidos. Y entonces no le gustaría que usara flex wrap none, entonces permitiría que el contenido permanezca en la pantalla. Pero de lo contrario básicamente te permitirá mantener los contenidos dentro de la pantalla y el usuario no tendría que desplazarse. Entonces sé que la cosa es la primera, el primer punto de ruptura. Vayamos a la documentación. El primer punto de ruptura tiene un ancho máximo de un 100. Y eso se aplicaría cuando sus dispositivos de pantalla por debajo de seiscientos seiscientos cuarenta píxeles. Entonces eso resume el contenedor y cómo básicamente mantiene tu contiene los artículos y cómo lo mantiene, cómo lo mantiene sensible. Ahora vamos a cubrir el posicionamiento, el grupo de posiciones de clases. Estos son muy importantes a la hora de posicionar tus elementos, cuando los estás usando en tu pie. Entonces lo que principalmente vamos a cubrir el posicionamiento absoluto o relativo porque estos son los que vamos a utilizar a lo largo del proyecto. Y los estarás utilizando como papel en los futuros proyectos. Entonces vamos a cubrir la posición absoluta. En primer lugar, en realidad descubriré los grados relativos. Eso es lo que queremos decir uso a posición relativa permite posiciones y elementos de acuerdo al flujo normal del documento. Entonces si no tienes elementos antes, y luego agregas el siguiente elemento después en el código, entonces en realidad se colocará justo después de él. Por lo que justo después de que termine el otro, éste se posicionará. Entonces como puedes ver, un muy publicitario padres y tú tienes hijo absoluto. Entonces cuando tengamos el, tenemos por ejemplo, el párrafo alelo parent div después de que será, se insertará básicamente justo después de su padre relativo. Posicionamiento absoluto. Por lo que con posicionamiento absoluto permite posicionar un elemento fuera del flujo normal del documento, provocando que los elementos vecinos actúen como si el elemento no existiera. Por lo que el anterior no afectaría realmente al elemento actual. Entonces digamos que tenemos en el código tenemos un div, y luego el siguiente paso después está absolutamente posicionado. Ahora el primer elemento antes está relativamente posicionado sobre el posicionamiento que utiliza, no afectaría al que sigue. Por lo que no se insertaría justo después, como si no pudiera ser con el familiar. Entonces en este caso, como se puede ver aquí, tenemos un grito absoluto. Entonces como puedes ver, cuando estamos usando posicionamiento estático y el primero y el Secundario usando posicionamiento absoluto. Como se puede ver, el niño absoluto es estático. El tiro estático es básicamente fijo Prueba de su estática musicalmente y en realidad grita, tiene su propio estilo, no le importa todas las demás celdas. Incluso estará encima de ellos. Quiere, dependiendo de cómo lo haya posicionado y cómo lo haya alineado básicamente también. Entonces esa es la diferencia entre absoluto y relativo, que es lo que básicamente queremos decir. Uso. 6. 5 clase de Sizing: Muy bien chicos, así que ahora vamos a estar hablando de las clases grupales de dimensionamiento. En primer lugar, tenemos el ancho. Entonces como puedes ver aquí, tenemos las diferentes clases para ello. Y eso los hace con tus píxeles. Tenemos con Px, lo que me da exactamente un píxel. Con tu 25. Te da cinco. Como puedes ver, cada clase tiene sus mediciones exactas. También tenemos estos peces crecen abajo con la mitad. Da el porcentaje de 52. Será exactamente el 50 por ciento del ancho de pantalla. Tercero básicamente hará el tercero de la pantalla. Si quieres conocer los detalles, básicamente puedes ir a la documentación sobre presidente CSS. Además contamos con auto ancho. Entonces con 0 para ajustar el ancho de divs en consecuencia, en consecuencia al elemento, al contenido de ese div. También contamos con ancho de pantalla. Por lo que W pantalla básicamente sería lo que encontraremos el ancho de la pantalla. Y establecería los divs con en consecuencia a la pantalla donde los trajes que llenaron el ancho del del ancho serán básicamente ese es todo el ancho de la pantalla. También contamos con ancho fijo. Por lo que básicamente puedes ajustar el ancho específico del usuario como. Entonces como puedes ver por aquí, tenemos ocho y puedes ver las diferentes tallas. Y respeto a los números que se muestran. También contamos con ancho de fluido. Ahora con a través de ella. Como pueden ver, si tenemos la mitad de los dos tipos, podemos tener dos elementos que tendrían, y ellos ocuparán toda la sección. O podemos tener como tres de tercios, tres, tres tercios, o podemos tener, por ejemplo, divisiones. Un tercio y dos tercios te permite tener una dinámica muy agradable con al igual que tenemos con flexing Bouchra básicamente. También tenemos full, que básicamente también al igual que con pantalla y tipo de lo mismo y ocupa toda la zona. En este caso, escoge el ancho responsive, puedes seleccionar el diferente estilo basado en las pantallas, el programa de tamaño de pantalla para dispositivos medianos, podemos haber acostumbrado con clase y para dispositivos pequeños podemos tener un clase de cliente y de esa manera será receptiva para bien. Y ahora tenemos estos en realidad. Ahora esta glutamina con esto descubrió lo principal que era tan importante como algunas otras cosas son muy detalladas sobre ella solo las usaría en circunstancias específicas. En tanto que sólo vamos a cubrir las cosas que principalmente vas a usar. Para min-width. Podemos tener, podemos especificar un ancho mínimo para que cuando el, por ejemplo, como cuando tenemos elementos, no sea más pequeño que el ancho mínimo. Como puedes ver en este caso, ponemos tus zapatos y serán de 0 píxeles. Pero si especificamos un número diferente al que obviamente debería respetar ese número. El mínimo estaba lleno para ser básicamente un 100 por ciento. Por lo que ahora pasemos a otras cláusulas importantes. Tenemos de nuevo responsividad por la responsabilidad. Nuevamente, al igual que explicamos antes, podemos haber especificado el ancho mínimo en función del tamaño de la pantalla y la masa básicamente se ajustará de acuerdo al tamaño de la pantalla y al ancho máximo. De nuevo, es más o menos lo mismo. Sólo un poco tengo que saberlo. Utiliza dos condiciones siempre que quieras acusar cosas específicas. Pero aparte de eso, otra vez, lo mismo. Por lo que tenemos max-width, euro es hace el ancho máximo de 0 píxeles, básicamente 0's, este caso. Y si tienes max, ninguno, eso hará el ancho máximo como lo harías si tuvieras, si tuvieras el ancho máximo, básicamente lo eliminaría. Y ancho máximo extra suave. Básicamente lo hará en do se establecería en 20 RAM para ancho máximo. Nuevamente, estas clases, puedes comprobarlas si quieres. Tú espectáculos de Djibouti, pero sí. Por lo que El Mar desplácese más hacia abajo. Vamos a repasar el uso de esto. Entonces en este caso tenemos máximo ancho mg, que básicamente se mezcla el máximo con medio. Si subimos, podemos ver que el ancho máximo, máximo se fijará en 20 REM para el máximo. Entonces como pueden ver justo aquí, le hemos dado mucha de la pantalla. El ancho de la pantalla es mucho de su tripulación. El térmico es motor. Podemos ver que si seguimos adelante y yo estaba cada vez más pequeño pero sólo me hago más grande, se mantiene el juego. Vamos, Hagamos eso despacio en realidad. Entonces vamos más suave y nos vamos porque lentamente, como se puede ver es volver a apostar, que es un axón con entonces era tan Gambia. Entonces ahora podemos bajar. Vamos a la altura ahora. Entonces vamos a repasar la importancia de unas alturas. Entonces otra vez, sobre la altura de 0 píxeles, nuevo, es justo lo mismo que las otras clases que expliqué. Hp x dará una altura de un píxel. Y tienes todas estas otras clases personalizadas también que puedes usar O2. Entonces básicamente, acabo de hacer de acuerdo, en consecuencia a cuál será la altura del botón, ajustado en consecuencia al contenido del mismo. Por lo que el O2, como se puede ver, se llevará tratado de. Trataré de ajustar la altura de acuerdo al contenido de ese presupuesto. Entonces si bajamos, tenemos esta altura de pantalla. Oye, pantalla básicamente comprobará lo más alto sea la pantalla de la velocidad que estás usando. Y se llenará, tomará toda la altura de eso demasiado el tamaño de la pantalla, básicamente. Contamos con altura fija. Tenemos, de nuevo, al igual que hicimos con un ancho fijo, tenemos todos estos números que te permitirán especificar una altura específica. Tenemos alturas completas, y este caso, dará o para que coincida con las alturas de los padres. Entonces, por lo que sobre los padres de esa división , coincidirá con la misma altura. Para que vuelva a responderse, podemos usar diferente. Entonces si quisiéramos hacerlo sensible, podemos usar los diferentes nombres de dispositivos. Tan md para dispositivos medianos como N para dispositivos pequeños, LG y todo. Y luego podemos especificar las clases de alturas exactas. Y entonces eso hará que la altura sea sensible. Y de acuerdo al ancho de la pantalla, lo siento, en el transcurso del tamaño de pantalla. Vayamos a ellos con prisa ahora. Nuevamente, al igual que min-width, tenemos estas clases específicas para controlar la altura mínima del, los elementos de los elementos. Por lo que la altura mínima de 0 lo hará 0 píxeles, mínimo, y la altura mínima de caída lo hará un mínimo del 100 por ciento. Una pantalla de altura mínima la hará en consecuencia a las alturas de las pantallas. Entonces como puedes ver, tienes un dos, la altura mínima en realidad está ajustada a plena. Y tenemos esta ilustración de una que básicamente te muestra esto. Y lo vuelves a hacer sensible, podemos especificar las cláusulas específicas para diferentes dispositivos de pantalla. Alturas de Macs. Entonces ahora de óxidos contra ella va a ser como max-width. Tienes estos cursos para la altura máxima. Y se puede específicamente más o menos lo mismo que para la altura y el ancho. Y tienes estos ejemplos ya que puedes sobrecargar igual que te expliqué antes. Y sí. Entonces eso resume más el Eso resume más o menos el tamaño del tamaño de las clases grupales. Entonces ahora pasemos al editor y vamos, intentemos realmente implementar estos cursos de los que acabamos de hablar. Vamos a pasar por el ancho de la pantalla. Entonces usemos algunas de las clases por aquí. En primer lugar es hacer cobertura 12 W pantalla. Por lo que básicamente tomará una altura de 12. Tomaremos un ancho completo. Y ahora vamos a darle a esto un color de fondo de azul, sombra de 500. Como puedes ver, en realidad está retomando las palabras completas. Va a tener WE sin piel es por ejemplo, W ocho. Eso básicamente nos dará un ancho fijo de ocho. Ahora, aunque tengamos una dimensión más grande de tenemos diferentes tamaños de pantalla ahí con homies siempre será ancho fijo de 12, por ejemplo, en este caso, quiero hacer un gran abierto 24, y eso básicamente hará aún más grande. Ahora movámonos con fluidez. Entonces ahora vamos a tener un div o tenemos que, dentro de él que quien tenga cada uno tendrá su propio ancho. Entonces usemos gestos. Y luego dentro de esto vamos a tener W0, W1 sobre 23. Por lo que eso tomará la mitad. Y otro también tomará otra mitad. O hagamos dos bien más, dos cuartos, un cuarto, 1 sobre 4. Y luego tendremos otro, 1 sobre 4 de esta base común uno. Y esto le da un color de fondo. Entonces hagamos este verde usando vg verde con una hoja de 100. Y éste, Hagámoslo VGB con ovejas de 600. Y éste tiene que ser 600. Y ahora veamos realmente esto en acción. Para el componente padre es el hidrogel. Entonces démosle una altura fija de peine. Como se puede ver, tenemos el primer div. Tomará la mitad para básicamente tomar la mitad de la pantalla. Y luego los otros dos, tendrás una cuota cada uno. Entonces si tuviéramos que, por ejemplo, hacer cada uno el tercero. Si cambiáramos el ancho y lo hiciéramos un tercio para cada uno, entonces cada uno básicamente tomará un tercio de la proporción de la proporción de ancho de pantalla. Ahora, ya podemos ver, Vamos a probar este nuevo responsive a saber. Para dispositivos medianos podemos especificar, podemos hacer que éste sea un 4.5 y qué dispositivos tomaremos un tercero establecido para hacer dispositivos o lo que sea, 3.5to tres. Sé para otros dispositivos votando por un tercero. Entonces si tuviéramos que cambiar el ancho a medida que persigas por lo que tienes diferentes dispositivos. Por lo que ahora tomará un tercio del camino. Si haces una más grande, tomará hasta la mitad. Ahora, cubramos el ancho mínimo. Entonces vamos a tener un div con un ancho de 20 para un ancho fijo de 24. Y hagámoslo azul, BW para la sombra de 200. Y también le demos una altura de 2024. Y como puedes ver, tenemos este aumento las hojas te un 100 para que quede más claro. Y como puedes ver, ahora, si fuéramos a usar ancho mínimo de, por ejemplo, caer como has estado y donde está lleno. Ahora eso los haría quieres estar lleno. Como se puede ver, se fijó en 24, ancho fijo de 24. Pero cuando tenemos ancho mínimo para eso, siempre se va a formar mínimo. Entonces ahora vamos a cubrir los glucoses y vamos a empezar con altura fija. Entonces vamos con 24 y vamos a darle el color de fondo. ¿ Cómo es que sólo le vamos a dar una altura de 12. Y como se puede ver, esencialmente 124024. De nuevo, igual que fue con lo mismo. Y ahora cubramos toda la altura usando pantalla. Y eso básicamente comprobará la altura de las pantallas y luego lo igualará. Y de nuevo, al igual que las otras clases. Entonces para la altura va a ser lo mismo que el material ancho que ya expliqué. Las únicas diferencias Eso es básicamente aplicarlo a la altura y al ancho. Entonces no tiene mucho sentido cubrirlo realmente. Nuevamente, eso resume más o menos las clases de grupo de dimensionamiento. Por lo que ahora podemos pasar al otro proceso grupal. 7. 6 clase de espacio: grupo de clase: Entonces ahora pasemos a despachar clases grupales. En primer lugar, empecemos con el relleno. Esto es muy importante porque lo usamos mucho en nuestros pronósticos. Entonces va a haber bastante simple, viejo como puedas ver por la permutación p 0, le daremos un relleno de 0 píxeles por todas partes. Por lo tanto, todos hacen el PPE X superior izquierdo, derecho e inferior con exactamente un píxel. Y como se puede ver, todas las demás propiedades, como se puede ver en la documentación es bastante clara. Entonces cuanto más alto poniendo el básicamente más relleno o revisarlo. Y también se pueden especificar hallazgos específicos también. Por lo que puedes usar también px y py. Px básicamente da su relleno horizontal y Puyi le da relleno vertical. Por lo que sólo va a hacer izquierda y derecha si haces horizontal y hará filtrado superior e inferior. Vertical, por lo que px vertical es horizontal. También puedes especificar que el lado específico para el que quieres obtener financiamiento, por ejemplo, acolchado top six, que le dará básicamente un top acolchado de 1.50.5 REM. Y puedes hacer calidades de relleno y relleno, relleno izquierdo Watson básicamente especificar el sitio específico al que quieres agregar relleno. Entonces ahora pasemos a xi. Bueno, está bien, Así que tenemos, así que estos son algunos ejemplos de ella. Tenemos, como se puede ver, acolchado top six, se puede ver que esa zona que se destacó con esas rayas que te muestra el relleno ahí mismo. Por lo que acolchado top six, se puede ver que hay un relleno agregado a la parte superior. Acolchado derecho, te da algo de relleno a la derecha. Y sin embargo autoexplicativo básicamente. Ahora podemos ver los ejemplos de relleno. Acolchado horizontal PXE. Entonces eso básicamente te da un relleno de h en ambos lados horizontales, por lo que izquierda o derecha. Y tienes relleno vertical, que como puedes ver, es sólo para arriba e abajo. Por lo que un relleno normal, como se puede ver en la ilustración, relleno en realidad se aplica a todos de lo mismo a pesar de usar relleno y luego el número que desea agregar. Y hacer un responsive es muy sencillo. Simplemente tenemos que especificar la pantalla específica del dispositivo y luego podemos agregar el relleno para ello. Por lo que podemos tener múltiples codones para diferentes dispositivos. De acuerdo, Así que ahora pasemos al margen. Margen también es este grupo de gases son muy importantes también porque lo usamos mucho ahora proyectos y lo estarás usando mucho dentro de tus futuros hijos predice. Entonces de nuevo, va a ser más o menos igual al relleno. Por lo que no tiene sentido están cubriendo get. Es decir, cada clase tiene sus propiedades sobre los derechos. Específicamente, muy bien explicado. Se puede revisar la conmutación se disuelve. Quieres checar si quieres ver los detalles de esta. Pero de todos modos, podemos pasar a usar estos marginales básicamente. Entonces la diferencia entre módulos, de nuevo, todo va a ser más o menos igual que muy similar a poner. Las únicas diferencias. El relleno se aplica a eso dentro de los elementos, y Morgan se aplica a los enemigos externos. Por lo que el margen básicamente daría observación entre los elementos corrientes y los elementos. Básicamente es alrededor. Por lo que cualquier enemigo está cerca de nosotros o básicamente pone en modelos entre ellos. tanto que el relleno en realidad se aplicará al elemento en sí y en realidad será acolchado en su interior. El elemento en realidad será paladar. Entonces sí, eso es más o menos lo mismo. Entonces si bajamos a estos son los márgenes a un solo sitio. Básicamente podemos usar mth, como puedes ver, aplica queriendo al margen superior, ¿verdad? Le daremos Moderado, relativamente autoexplicativo. No tiene sentido discutir realmente los detalles. Es decir, es muy autoexplicativo. Y se puede tener margen horizontal otra vez, le da solo aplica a los lados izquierdo y derecho. Le da un multinomial en el margen izquierdo y derecho Vertical, ¿ estás arriba y abajo? Y sí, es más o menos discapacitado. Y si quieres hacer un responsive, puedes especificar la pantalla del dispositivo. Y luego también puedes agregar en los módulos específicos que quieras usar. Lo importante para los márgenes también es que se pueden tener márgenes negativos. Entonces hay un, hay mucho margen entre dos elementos o vamos a ver, los otros elementos tienen mucho margen y eso hace que el elemento actual esté más alejado de él. En realidad podemos aplicar valores negativos. Y eso nos permitirá básicamente desplazar sus elementos actuales y acercarlo a los demás elementos quitando parte de la mercancía realmente aplicada. Por lo que es muy simple, solo especificas un negativo antes de lo real. Entonces si tuviéramos módulo, siguiente módulo está en 272. En este caso, podemos hacer menos antes de la, antes de la clase real. Y eso realmente aplicará básicamente su inverso. Por lo que en realidad quita el margen, no absoluto. Entonces vamos a aplicar también algunos de estos gases de los que acabamos de hablar. Entonces hagamos un nuevo div y le demos una clase de fondo, color. Color de fondo, rojo, la hoja de 500. Y pongamos un texto solo para ver cómo se ve todo. ¿ De acuerdo? Y así entonces vamos a tener algo de H1 con hola. Y ahora le vamos a dar algún margen. Por lo que se puede ver que con el Hola va a tener algún módulo. Por lo que le daremos un margen del Módulo 12. Y como se puede ver, el H1 real ahora tiene un margen a la izquierda, en la parte superior, en la derecha, y en la parte inferior. Y en realidad hay tener otro cada uno. Entonces básicamente podemos ver que tenemos dos H 1s y dijimos este div, solo para ver este margen. Como se puede ver ahora, tenemos, el primer módulo, tiene los primeros tres elementos, tiene módulos en el segundo no. Y como puedes ver, el completo elimina el margen de los primeros elementos que básicamente estarán pegados entre sí. Y si agregamos margen, horizontal por ejemplo, entonces para el primer elemento usando MX, por ejemplo, 12. Y como se puede ver, el margen sólo se aplica horizontalmente. Y si hacemos MI, se aplicará verticalmente. Y si quieres aplicarlo por todos lados, solo haría M Cohan, para todos los lados básicamente. Ver queremos reducir el margen del enorme y se desplazó hacia arriba. Podemos aplicar margen negativo. Margen. Por lo que podemos hacer menos margen top y podemos hacer 12. Y eso básicamente se desplazará hacia arriba y lo hará en el mismo nivel. Entonces eso si quieres aplicar módulos negativos. Ahora vamos a aplicar un poco de relleno. Entonces vamos a darle a este un relleno de, por ejemplo, añadiendo seis. Y eso básicamente debería darte algo de relleno. Y este tipo de margen top este hacer relleno 12. Como se puede ver, no tenemos, Porque antes cuando usamos margen, el margen se estaba aplicando a los elementos externos. Entonces por eso teníamos el espacio en blanco. Pero ahora en este caso en realidad se está aplicando dentro del elemento. Y por eso ya no hay espacio en blanco y se aplica el relleno real en lugar del módulo. De acuerdo, Así que eso resume más o menos los glucoses de relleno y margen. Ya podemos continuar con el siguiente apartado. 8. 7 clase de tipografía de grupo: Muy bien chicos, así que ahora vamos a cubrir el grupo de clases de la familia de fuentes. Por lo que las clases font-familia son principalmente tres. Entonces tenemos la fuente sans, serif y fórmula. Y tienes estos preajustes predeterminados que puedes usar. Y por supuesto puedes usar a tus clientes si te quieres, pero estos ya están disponibles con Tim y CSS. Judíos, por ejemplo, san-serif, sólo hay que hacer cuatro hijos como tela. Y sirves en uniforme servir. Y tener que usar fuente monospace en una. y que debería aplicar esas fuentes. Y vamos a cubrir el tamaño de fuente es muy sencillo, como se puede ver en la clase. Por lo que tienes acceso el cual es extra pequeño. Tendremos montaje que es muy pequeño, que es más básicamente. Y luego tienes base y tienes grande. Al bajar, el teléfono se hace más grande. Y fuera bajamos al uso. Muestra esto. A medida que bajamos, las clases se hacen más grandes. Y sí, puedes hacerlo responsive es todo para aplicando diferentes fuentes para diferentes dispositivos, para diferentes dispositivos de pantalla comparten. Entonces ahora vamos a cubrir el font-weight. De nuevo, es muy sencillo. Como se puede ver por las clases tenemos Fontan, lo que le da un font-weight de un 100 por unos derechos extra porque itera de cantidades de 200. Y a medida que bajamos por esta lista, el peso de la fuente aumenta. Y lo que esto hace es que sea más audaz mezclar las fuentes más gruesas. Entonces como puedes ver por el uso bajará al uso. Por lo que esto controla diferente forma de un elemento usando el font-weight para, a medida que el peso aumenta, básicamente se vuelve móvil, cubrir las alturas de línea. Nuevamente, esto es muy sencillo, medida que aumentamos la delantera, la linea-altura también aumenta así, por ejemplo, si estamos usando el dormir dentro del párrafo y tenemos como por ejemplo, liderando relajado, entonces el el espaciado entre las líneas será mayor. Entonces tendríamos más espacio entre las líneas. Por lo que la última pieza que quieres usar entre el nitrógeno y la línea de uso engañosa, preparatoria, tendrás. Entonces como pueden ver, si bajamos, podemos ver desde las diferentes necesidades. Por lo que tienes liderando, motos de nieve, buenos actos normales. A medida que bajamos, la delantera aumenta y luego más espaciado hay entre las líneas. Entonces eso cubre eso para el, que cubre todo para la linea-altura. Cubramos el tipo de estilo para las listas. Por lo que estas clases grupales te permiten básicamente vender la lista. Entonces si tenemos lista ninguna, entonces lo que esto hace es básicamente que eliminará los puntos de bala de la lista. Y como se puede ver aquí, también, si queremos tener puntos azules, entonces podemos usar el disco de lista. Y esto lo hará, esto básicamente nos dará puntos de bala para cada uno, para cada ítem de la lista. Y si queremos tener números y usaremos este decimal y eso nos dará como 1, 2, 3, 4, cada elemento de lista que lo numerará, grupo de alineación de texto de clases. Estos son muy importantes porque los usamos perdidos en los Proyectos y Recursos cubiertos esto. Entonces nos quedan textos. Eso es básicamente alianzas apps de izquierda a derecha. Srilanka texto de Australia y textos en, alinea el centro de texto. Es tránsito extra de derecha a izquierda y dice justifique básicamente lo convierte en una cuadra. Entonces como puedes ver, si bajamos al ejemplo, este es un buen ejemplo de cuando entiendes lo que quiero decir por textura hasta ahora. Entonces para el texto a la izquierda, como se puede ver, el texto va de izquierda a derecha. Y CentOS estar centrados y escribe es ser, se está alineando de derecha a izquierda. Y toma justifique, como se puede ver, es un bloque, por lo que enfriará el espaciado y todo en las líneas para que sea básicamente tenga una estructura de bloque, estructura cuadrada. Entonces ahora pasemos por el color de las garrapatas. Nuevamente, esto es muy importante usar esto mucho en los proyectos. Por lo que tenemos texto transparente para hacer transparentes los cheques y textos corrientes para darle el collage que puedes ver por aquí, la especie de bloque de texto negro claro básicamente lo hará negro. Y como puedes ver, cada uno, cada color básicamente haría que el color del texto y la hoja a medida que aumentes el documento del estudiante que cuanto más oscuro sea el color. Entonces como puedes ver, excreta 500 y luego tienes que excretar un 100100 es mucho más oscuro que 500 educación a través de eso casi resume, vamos a bajar. Entonces en cuanto a usar estos eruditos texto sencillo y el color que quieras, y luego puedes presentar la hoja de lo que quieras y aplicarla como ir a través de textos. Obesidad. Por lo que la obesidad en básicamente el número más de gama alta. Por lo que usaríamos la obesidad como texto la neurona opositamente. Y luego pones en el número de eficiencia, el nivel de básicamente, cuanto mayor sea el nivel de obesidad, más opaco será, y cuanto menos nivel de obesidad, más transparente será. Si bajamos a los ejemplos, como pueden ver, tenemos, tenemos estos textos y el primero tiene opacidad de un 100, muy opaco y no ser transparentes y perdidos. Uno tiene una densidad de 0 y como puedes ver, se ve bastante transparente. Por lo que verás los colores detrás de él o si tienes algo detrás de él. Está bien. Eso lo resume más o menos. Decoración de texto de portada. Por lo que tenemos estas tres causas líneas subyacentes. No somos subrayados, por lo que más o menos autoexplicativos. Por lo que los estados subyacentes, subyacentes, como se puede ver en el ejemplo, tachado básicamente lo provoca y ningún subrayado elimina lo subrayado. Entonces si tienes subrayando la retina en línea y es forma de teléfono fijo para ti, casi resume la sección de tipografía. Espero que todo esté muy claro. Entonces que más o menos sumas de estas clases arriba.