Apprendre le CSS Tailwind - Partie 1 - Expliquer la documentation

1. Aperçu du cours: Bonjour et bienvenue dans ce cours. Et cette classe, nous vous guiderons rapidement pour devenir un concepteur d'interface utilisateur arrière. Ce cours est financé, ce cours est amical pour le faire. Vous ne savez rien sur J1 CSS. Alors que nous commençons par enseigner les concepts de base et les éléments fixes, nous allons d'abord expliquer en détail les sujets et concepts essentiels et nous développerons travers la documentation CSS nécessaire à travers la documentation CSS nécessairepour vous enseigner les bases de cette classe. Donc ce cours va être principalement le côté théorique des visages des enfants. Et après ce cours, nous avons le glucose est faible. Les autres classes vont être le côté pratique de Tilman CSS où nous plongons dans des projets et implémente quelques sites web sympas en utilisant jusqu'à un CSS. 2. 1 groupe de cours d'arrière-plan: Ok, donc avant de faire les projets dans ce cours, nous voulons passer par les différentes sections par exemple, un CSS. Donc, dans cette vidéo, nous allons discuter des sections d'arrière-plan pour les classes et dit que je veux CSS. Alors allons de l'avant et commençons par la section de couleur d'arrière-plan. Maintenant, il y a beaucoup de couleurs différentes que vous pouvez utiliser. Donc, pour utiliser la classe d'arrière-plan, il suffit d'écrire bg, puis suivi de la couleur que vous voulez. Par exemple, le bloc BGO nous donnera la couleur noire. Je serai juillet, août, la couleur blanche. Et aussi si vous voulez avoir une nuance de cette couleur, vous pouvez utiliser le tableau de bord 5000100, le et vous pouvez faire la transparence BG ou pour le rendre transparent. Donc encore une fois, il est très facile d'utiliser les couleurs avec l'arrière-plan. Tout ce que vous avez à faire est juste BG pour indiquer que c'est une couleur de fond. Et puis la couleur que vous voulez, et puis l'ombre est tout si vous voulez. Donc, plus le nombre est élevé, plus l'ombre est sombre. Ok, maintenant passons à l'utilisation de laquelle, comme vous pouvez le voir ici, nous avons du vert. On peut le changer en bleu, par exemple, et ensuite on le fera en un bouton bleu. Allons maintenant et parlons de l'opacité. C' est donc une connexion très simple. Vous devez juste utiliser l'obésité bg. Et plus l'obésité est élevée, le plus sombre est fondamentalement sombre. Et moins il y a d'opportunités, plus il y a de transparents. C' est très explicite. Et descendons maintenant. Nous avons la responsabilité de Tailwind. Tout ce que nous avons à faire, c'est utiliser les différents faits. Par exemple, si nous voulons utiliser une couleur spécifique pour les appareils moyens avec seulement son MD. Et puis nous écrivons la couleur que nous voulons pour les grands appareils, LG pour les petits appareils, SM, ainsi de suite et ainsi de suite. Maintenant, nous avons l'effet de vol stationnaire. Pour utiliser le vol stationnaire, je dois juste avoir un vol stationnaire avant de la voiture que nous voulons. Et puis quand nous survolons et la couleur changera à ce qu'elle veut. Par exemple, ici, nous utilisons plusieurs centaines, donc la, la nuance de rouge sera plus élevée, donc il sera plus sombre. Et nous allons nous concentrer maintenant. Donc, quand nous cliquerons dessus, il deviendra blanc. Comme vous pouvez le voir, la couleur de fond est grise avec une nuance de 200. Et quand nous cliquerons dessus, il deviendra blanc. L' obésité de fond est aussi très simple. Vous venez de mettre le VG, qui est l'arrière-plan, puis vous tournez l'opacité, puis le nombre de l'obésité, plus elle est élevée, plus Piketty et moins elle est, plus elle est transparente. Passons maintenant à l'origine de l'arrière-plan. Donc, pour avoir ce bel effet, tout comme un timbre postal, il a un effet cool autour de lui pour lui donner cette origine et cette authenticité. Vous pouvez utiliser la bordure d'origine d'arrière-plan, puis nous pouvons utiliser le remplissage d'origine d'arrière-plan. Donc, pour lui donner plus de rembourrage comme vous pouvez le voir dans le numéro 2. Et si vous voulez en donner un, si vous voulez en faire un contenu de fusible, alors il apparaîtra. Le mou est comme il montre un numéro trois. Et aussi, passons à la spécificité que nous ne allons pas réutiliser qui vaut la peine de le couvrir. Maintenant la position de fond. Donc c'est très simple. Je veux dire, c'est très bon sens. Comme vous pouvez le voir si vous descendez sur la section d'utilisation, nous pouvons voir si vous faites BG LefTop il, qui va coller l'arrière-plan vers la gauche et vers le haut. Si vous faites juste le haut, c'était pour arriver à la perle supérieure votre sujet ou sauter dans le coin supérieur droit. Donc, ainsi de suite. Alors maintenant, allons sur les répétitions de fond. Ainsi, avec les répétitions d'arrière-plan, vous pouvez avoir un arrière-plan qui continue essentiellement à répéter jusqu'à ce qu'il remplisse l'écran entier. Ou vous ne pouvez pas avoir de répétitions, ce qui en fait juste une fois. Il suffit de choisir ceux d'arrière-plan. Comme vous pouvez le voir par ici. Vous pouvez avoir répéter horizontalement est aussi qu'il est distribué horizontalement. Encore une fois, c'est des choses très simples. Vous pouvez juste vouloir de la documentation et tout ce que vous voulez, vous voulez entrer dans les détails. Tu peux aller le voir ici. Vous avez des répétitions verticalement à nouveau, juste des répétitions vésicules. Donc tu serais juste GIPHY et j'ai vu Peter à la verticale. Ok, maintenant passons à votre taille d'arrière-plan. Alors quelle taille d'arrière-plan ? Ok, donc les tailles d'arrière-plan sont assez explicites comme 0, 0, 2 le fait. Il vous montre essentiellement automatiquement à sa taille par défaut. Donc, sur les tailles de l'image va le montrer tel qu'il est. Nous avons couvert. Maintenant, si vous utilisez la couverture bg, Était-ce faire, il couvrira essentiellement toute la zone, toute la scène. Donc c'est fondamentalement qu'il n'y a pas d'espaces blancs. Si nous descendons maintenant, nous avons contenu, contenu fera essentiellement l'image aussi grande que possible sans, sans modifier le rapport d'aspect et aussi sans le recadrer. Nous avons aussi réactif. Donc responsable, fondamentalement, le rendre réactif. Et maintenant, il est parti image de fond. Image d'arrière-plan. Nous pouvons utiliser BGN sur pour rendre l'image d'arrière-plan nulle. Donc, il n'y a pas d'image de fond et nous pouvons utiliser les différentes classes comme vous pouvez le voir ici, nous pouvons avoir. Dégradés, si basiques. Donc, il implémente les gradients de bas en haut. Nous avons deux en haut à droite. Donc, fondamentalement, il fait un gradient en haut à droite, de bas en haut à droite et ainsi de suite et ainsi de suite. Tout comme il est dit là-dedans, nous avons aussi des gradients linéaires. Et donc, il donne un élément et un fond d'ingrédient. Donc, vous pouvez utiliser comme la direction que vous voulez entrer, comme je l'ai expliqué. Et puis vous pouvez dans les couleurs que vous voulez. Ainsi, par exemple, de 400 à VI, lisez, 500 pour montrer que vous mettez à l'université et ensuite nous ferons le gradient pour vous. Alors nous avons des arrêts de couleur dégradée. Donc, encore une fois, comme je l'ai expliqué, mais la couleur s'arrête. Donc, fondamentalement, vous pouvez avoir une couleur de départ et il va de fondamentalement une couleur de départ au blanc au blanc. Et nous pouvons avoir d'une couleur à une couleur. Donc, d'une culture de départ et en couleur. Et nous pouvons aussi avoir trois couleurs. Donc, d'une couleur à une autre couleur à une autre couleur. Donc, fondamentalement supporte de une à trois couleurs. Fondamentalement résume les classes d'arrière-plan pour cette vidéo. Encore une fois, j'aurais peut-être sauté quelques classes parce que certaines d'entre elles étaient inutiles et vous ne les utilisez pas vraiment seulement dans des circonstances spécifiques. Cela devrait donc vous donner une bonne compréhension des couleurs de fond que nous allons utiliser dans nos projets. Bon, les gars, maintenant que nous avons discuté du groupe des clauses d'arrière-plan, Allons de l'avant et mettons en œuvre certaines de ces classes pour voir à quoi elles ressemblent en action. Ok, tout d'abord, faisons une nouvelle div et donnons-lui une couleur de fond. Alors donnez-lui une couleur de fond bleu avec une feuille de 300. Et faisons la hauteur de celui-ci à la hauteur de l'écran. Comme vous pouvez le voir, nous avons cette couleur de fond. Maintenant, augmentons la feuille pour la rendre plus sombre. Comme vous pouvez le voir, est devenu plus sombre. Si nous voulons en faire une certaine couleur pour, par exemple, les grands appareils, nous pouvons le faire en utilisant LG, puis point-virgule, essentiellement avec ce que nous voulons, pas de point-virgule, deux-points. Et puis on peut colorer ce qu'on veut. Par exemple, vous êtes à 600. Donc maintenant, si la largeur devient permet dispositif, alors la couleur de fond change à elle. Maintenant, faisons aussi l'obésité. Donc, par exemple, ne ferait pas le contraire ici pour les grands appareils. Donc, nous pouvons avoir, lorsque l'appareil est grand, nous pouvons faire l'obésité BG 50. Et ensuite, cela devrait rendre cela plus transparent. Comme vous pouvez le voir, le rouge est maintenant plus transparent. Et maintenant, parlons de l'effet de vol stationnaire. Si nous voulons passer le curseur sur cela, nous pouvons le faire comme une couleur Zola par exemple, planer sur Vg, vert et je vais faire comme un 100. Donc maintenant, chaque fois que je survole, le div devient vert. Maintenant, nous allons également couvrir l'image de fond. Fait une autre chose importante que nous allons utiliser dans nos projets. Encore une fois, hé, j'essaie de couvrir les choses les plus importantes parce qu' il y a des milliers d'adoucir certains CSS et il y a beaucoup de choses inutiles. Donc, je vais principalement couvrir le fond de fondation. Si vous voulez entrer dans les détails, vous pouvez toujours aller et dire un des sites CSS et vous pouvez essentiellement trouver tout ce que vous voulez. Les sonates ont une nouvelle div. Et cela lui donne une image d'arrière-plan en utilisant le style par exemple. Donc, nous allons faire l'image de fond. Vous trouvez l'URL, donc c'est bon. Juste un logo de vent arrière et j'image encore. Ok, prenons celui-là par exemple. Et maintenant, nous allons le styliser. Donc, certaines classes, nous allons utiliser la hauteur minimale de l'écran. En fait, non, enlevons ça. Pour l'instant. On va utiliser BG. Pas de répétitions, haut VEGF. Alors maintenant, laissez-moi m'arrêter pour que l'image se répète. Et VEGF renversé fondamentalement aligner tout le chemin vers le haut à gauche. Et aussi comme donner cette hauteur, mais cela nous donne la hauteur de l'écran. Donc, il sera fondamentalement tout prendre toute la hauteur de l'écran. Et comme vous pouvez le voir, si nous le rendons plus grand, si nous agrandissons ce panneau. Donc, vous pouvez voir que les actions avec le haut à gauche de nous le changer en haut. Donc, une sorte de LefTop. Nous allons juste BG, qui haut, essentiellement centrer et en faire les meilleurs stocks en haut de lui, toi et Watson. Watson, Watson va fondamentalement entrer dans cette position. On parle aussi de la taille de l'arrière-plan. Il y a donc quelques classes de dimensionnement, de dimensionnement que nous pouvons utiliser pour changer l'image d'arrière-plan, la taille de celui-ci. Tout d'abord, changeons l'image parce que nous voulons quelque chose que vous pouvez aimer, quelque chose avec un arrière-plan à notre prochain parfait, parce qu'il a un bon fond afin que nous puissions voir combien est fondamentalement couvrant dans la div. Alors changeons cette image. Et maintenant, si nous, si nous utilisons le Vigenere répète BG, par exemple, couverture BG pointillé essentiellement couvert l'ensemble de l'écran avec l'image. Donc Vg couverture, comme vous pouvez le voir maintenant, toute l'image. L' ensemble div est recouvert de l'image. Si nous le faisons, nous contenons, alors il ne sera fondamentalement pas découper l'image. Donc, c'est fondamentalement que vous essayez d'obtenir l'image entière à l'intérieur de cette div. Et si nous faisons BGO deux, alors il obtiendrait réellement les dimensions réelles de l' image et il s'affichera à l'intérieur de la div. D' accord ? Donc, comme vous pouvez le voir, la raison pour laquelle je voulais devenir, est devenue si grande parce qu'il y a une dimension de cette image. Donc, pour les couleurs dégradées, il y a en fait trois types de croix que nous pouvons utiliser. Ainsi, vous pouvez avoir juste une couleur de départ qui finit par devenir transparente. Alors allons-y et faisons-le. Prenons un div, et donnons-lui une couleur. Donnons-lui un dégradé de dégradés de plage à R. Donc ça va à droite. Et nous allons utiliser tous arrêté le gradient de, par exemple, bleu avec l'ombre de 500. Et nous allons juste laisser, comme vous pouvez le voir, devient de YouTube, que vous devriez transparent. Et maintenant, faisons l'autre où vous pouvez avoir de la couleur à une autre couleur. Donc, nous pouvons avoir une autre couleur fondamentalement qui est deux, par exemple, violet. Ou changeons juste la couleur. Faisons de, du chagrin, un 100, deux 600 bleus. Et on en a 100 à 600. Comme vous pouvez le voir maintenant, nous avons un dégradé en utilisant deux couleurs, trois couleurs. Vous pouvez également le faire en utilisant une couleur moyenne. Donc, nous pouvons aussi les mettre à l'intérieur, ce qui est dans ce cas va être bleu. Et nous pouvons le faire, nous pouvons le faire par la grâce, comme vous pouvez le voir maintenant nous avons le rouge. Maintenant, vous avez des dégradés verts, bleus et rouges, des copies officielles qui couvrent essentiellement nos dégradés. Donc, si nous voulons changer la direction du gradient, nous pouvons le faire à partir de la classe. Donc, nous avons BG gradient à notre dans ce cas va fondamentalement vers la droite. Donc, de gauche à droite, nous faisons 22 cr. Donc en haut à droite, qui va faire la direction de fondamentalement la direction sera en haut à droite de nous faisons par exemple, GB va être, désolé, seriez-vous notre bas à droite ? Cela dépend de la direction que vous voulez. Vous pouvez essentiellement choisir la direction du dégradé et il implémentera essentiellement cette direction pour vous. Donc, cela couvre à peu près cet aspect pratique des classes de groupe d'arrière-plan. Je veux dire, je n'ai pas couvert tout ce qu'on a fait dans la théorie. Principalement, je pense que j'ai raté seulement l'origine de l'arrière-plan parce que fondamentalement, nous essayons juste de couvrir les choses les plus importantes que nous allons réellement utiliser et les choses qui sont réellement pratiques. Donc, si vous voulez entrer dans les détails, vous pouvez toujours passer par un CSS et vous pouvez essayer ces classes d'abord. 3. 2 cours de bordure: Alors maintenant, couvrons les groupes border-rayon. Ce groupe de classes va être projets très importants que nous allons mettre en œuvre. Alors couvrons-les. Donc, nous n'avons arrondi aucun. Cela n'a fondamentalement aucun rayon de frontière pour les eaux de l'élément que nous utilisons. Nous avons arrondi SM. Cela vous donne essentiellement un petit rayon de bordure de 0,125 REM. Et nous avons arrondi, ce qui vous donne essentiellement un rayon de frontière plus de 0,25 RAM, RAM. Et au fur et à mesure que nous descendons, le rayon de la frontière devient plus semblable, plus efficace. Et il devient, il vous donne plus haut rayon de frontière fondamentalement. Et si nous voulons avoir comme par exemple, nous pouvons également spécifier le bois réel que nous voulons cibler. Donc, si nous voulons faire plein, voulu, par exemple, ne vous que le rayon de la bordure supérieure, vous pouvez le faire, vous pouvez t. Donc, nous pouvons essentiellement spécifier les mots exacts que je veux utiliser de vouloir à la bonne que nous pourrions faire est-ce que nous voulions au bas, vous pouvez faire B, et nous pouvons également spécifier la taille de celui-ci. Donc oui, c'est très facile à utiliser. Donc maintenant, si nous faisons défiler vers le bas, nous pouvons essentiellement regarder ces exemples. Donc, comme vous pouvez le voir, vous avez arrondi, lisser l'eau, c'est très minimum. Et si vous avez comme nous les avons arrondis, ayez MD et algues. Algues comme vous pouvez le voir, il a le plus haut rayon de frontière. Donc, nous avons des pilules et des cercles aussi. Pour que nous puissions courir tout ça pour nous donner un cercle. Et vous pouvez avoir, de sorte que vous pouvez le voir, l'eau est vraiment forte avec l'autour pour l'instant. Et nous avons aussi arrondi non-soi. Nous avons déjà un rayon de frontière pour une clause spécifique. Nous pouvons supprimer que le choix arrondi pas comme vous pouvez voir que l'en-tête, l'eau est parti. Et nous pouvons également spécifier un spécifique un rayon frontière spécifique à partir des éléments sélectionner haut ou droit ou en bas border-rayon et nous pouvons fondamentalement les contrôler. Et la personne qui met les poteries exactes, je veux la largeur. Comme vous pouvez le voir, c'est très facile, explicite. Tu n'as pas mis la frontière et tu as mis le numéro. Plus le nombre est élevé, plus le modèle aura de largeur. Et si vous voulez cibler une nuance spécifique, vous pouvez le faire en utilisant le tableau noir qu'elle pour, quels sont nos top G54 sont 48 L pour gauche, ainsi de suite et ainsi de suite. Et comme vous pouvez le voir ici, nous avons la frontière différente, largeur, la hauteur, la largeur, plus l'élite pense que nous devrions, comme vous pouvez le voir. Il en va de même pour les sons individuels, comme nous l'avons expliqué. Fondamentalement ciblé en utilisant le site spécifique. Donc T pour top ou fluorures avant acheté un peu alpha gauche. Comme vous pouvez le voir, nous pouvons réellement parler, il y a de l'eau aurait un div et moins fondamentalement lui donner un rayon de frontière en utilisant, par exemple, SM arrondi. Alors donnons-lui une hauteur de 12, 10, 12, et rendons rouge. Et puis ces deux SM arrondies. Comme vous pouvez le voir, nous avons un très petit rayon. Augmentons ce LG arrondi inutilisé. Et comme vous pouvez le voir, nous avons un rayon de frontière beaucoup plus fort. Maintenant, nous allons également utiliser arrondi recherché pour faire un cercle complet. Comme vous pouvez le voir maintenant cercle. Et maintenant, après cette ronde et la nourriture est fait arrondi aucun pour le faire pour enlever leur propre rayon. Comme vous pouvez le voir, ça marche. Et maintenant, nous allons cibler le sommet de l'eau qu'il est. Donnons-lui juste un registre, exécutez le CI, et nous ferons trois Excel. Ainsi, comme vous pouvez le voir, le rayon de bordure supérieur est vraiment fort et il n'y a pas de bordure est sur le fond. Alors maintenant, OK, alors maintenant donnons-lui une certaine largeur de bordure, ce qui est que vous devez faire comme des bordures, votre portefeuille, vous, par exemple, qui vous donne ce que la largeur, comme vous pouvez le voir. Maintenant que la frontière, le côté droit, nous voulons le donner seulement pour que nous puissions faire la frontière côté droit 8. Et cela devrait essentiellement nous donner seulement l'eau du côté droit. Et maintenant, faisons par exemple, frontière indigo 600. Et ça devrait vous donner un colorisme. Donc, le côté droit est maintenant coloré avec la couleur indigo et une nuance de 600. Donc, fondamentalement, vous pouvez changer cela en utilisant, par exemple, la bordure, le haut, la gauche, le bas. Vous pouvez cibler l'eau spécifique que vous voulez. Et cela couvre essentiellement tout ce qui est important en ce qui concerne les frontières. 4. 3 cours dans Flexbox et de grilles: Maintenant, nous allons couvrir la flexbox et les glucoses de grille. C' est très important parce que nous l'utilisons beaucoup dans d'autres projets. Et c'est l'une des classes fondamentales, l' une des classes de groupe fondamentales que vous utiliserez toujours lorsque vous travaillez avec Telemachus. Donc, tout d'abord, commençons par la direction flexible. Comme vous pouvez le voir ici, nous avons quatre classes, cours , qui est fondamentalement comme les éléments. A l'intérieur des éléments que vous voulez ajouter à l'intérieur d'un div, une ligne. Et si vous faites inverser ou fondamentalement retourner et fondamentalement le mettre de droite à gauche au lieu de restaurants. Et flex Coase qui fondamentalement aux éléments à l'intérieur d'une colonne div, il ajoutera son de manière verticale. Et le noyau de flux inverse il va fondamentalement, fondamentalement inverser les éléments. Donc, à partir de bas en haut au lieu de haut en bas. Ici, nous avons la rangée. Tout comme je l'ai expliqué, quand vous utilisez flexor, quand vous avez ces trois éléments ici, quand vous avez div voulait 23. Maintenant, l'ajouté d'une manière horizontale, sorte qu'ils sont ajoutés à la droite de chacun. Et quand vous appliquez l'inverse flexible, il appliquera essentiellement le 0, ajoutez-les tout le chemin vers la droite et vers l'atome gauche, essentiellement un par un vers la gauche. Et quand vous utilisez du charbon de flux pour les ajouter de manière verticale, comme vous pouvez le voir juste là. Et lorsque vous utilisez flex, flex colonne inverse, cela va les ajouter de bas en haut pour le rendre réactif. Encore une fois, comme nous l'avons expliqué, l'autre groupe traverse, il suffit de spécifier l'écran de l'appareil. Et puis vous pouvez fondamentalement ajouter les classes que vous voulez un ordre de vendre cela si d'une manière responsable. Enveloppement flexible. Ceci est très important aussi pour les projets que nous utilisons beaucoup. Donc ce que cela fait, c'est qu'à mesure que vous allez d'ici, nous avons trois types. Vous avez flex wrap, flex wrap reverse et flex Europe. Donc, nous ne voulons pas de votre application, alors vous pouvez appliquer Flexner vers le haut. Et ce que cela fera, c'est que même quand nous avons un lissage qui est plus petit que notre contenu, le dernier élément était d'être là ne serait pas fondamentalement enveloppé et l'incertitude sur la ligne suivante. Il restera essentiellement sur la même ligne. Et lorsque vous utilisez flex wrap, comme vous pouvez le voir où nous avons utilisé flex wrap, nous avons trois éléments à l'intérieur de cette div principale, qui est, qui utilise l'extra. Maintenant, le troisième élément est fondamentalement ajouté sur la deuxième ligne plutôt que de continuer sur la même ligne parce que la largeur il, parce qu'il ne peut pas tenir dans un et confiant qu'il sera fondamentalement inséré sur la ligne suivante. Et quand nous avons rapidement inversé, ce que cela fait est fondamentalement qu'il ajoute les éléments de bas en haut ou de gauche à droite, fondamentalement dans ce cas. Et encore une fois, pour le rendre réactif, nous spécifions simplement le nom de l'appareil spécifique et nous pouvons mettre dans les classes d'enveloppement flex spécifiques. Alors commençons par flex one. Cela permet donc à un élément flexible de croître et de rétrécir au besoin et ignore le même côté initial. Donc, fondamentalement, si nous avons, disons que nous avons un élément, un développement qui utilise flex, trois éléments qui a flex un. Alors voyons, nous avons trois éléments. Chaque élément prendra essentiellement la moitié de l'espace de ce développement est flux. Donc, si nous avons trois, alors Israël prendrait ACE2, tout comme nous l'avons expliqué précédemment avec le, en spécifiant un poids spécifique, comme par exemple avec la troisième moitié. Dans ce cas, vous devez le faire. Nous pouvons simplement dire flex un et il est automatiquement mis là dedans avec pour nous. Donc, pour dire, dans ce cas, nous avons compris sur cet exemple. Par ici. Nous avons trois éléments, c'est-à-dire flex un, et ils partagent un tiers des éléments parents. Donc, ils partagent un tiers du programme et deux, parce qu'ils étaient difficiles pour eux, ils prendraient chacun du CO2, donc automatiquement, juste, alors allons-y et il semble que pas de longueur d'onde, de même que fait, est nous permet à intégrale et boire en tenant compte n'est pas la taille de la chaussure. Donc, il verra essentiellement combien de contenu il y a pour cet élément. Et il ajustera la taille de x en conséquence du côté contenu. Taille, qui est essentiellement la taille initiale. Pour flex 1. S' il y a un flex, alors il le supprimera fondamentalement. Vous voyez que vous utilisez le noir par exemple. Vous avez beaucoup de cours. Je veux juste enlever le Flexner, surtout vous très pratique quand vous voulez le faire. Par exemple, déboguer quelque chose ou similaire, assurez-vous que cela fonctionne. Vous pouvez facilement le faire en utilisant flexible car vous n'aurez pas à supprimer l'autre processus pour rendre réactif, tout comme je l'ai expliqué précédemment avec l'autre processus de groupe, vous pouvez simplement spécifier la largeur d'écran spécifique. Donc MD, SM, LG, puis mettre les classes flexibles que vous voulez, cette façon, il sera réactif. Et cela résume à peu près le flex. Passons maintenant à l'équipage flexible. Donc, nous avons flex Drew euro et flex group. Donc, si nous les utilisons parce que cela empêchera l'élément de croître réellement avec la largeur de l'écran. Donc, nous avons des jambes poussé sur puis il va essentiellement prendre autant d'espèces qu'il peut disponible fondamentalement. Ne grandissez pas si bien. Encore une fois, comme je l'ai expliqué, nous avons cet exemple. Voir les éléments qui ont un verrou, l'élément central. Celui-ci utilise des appareils vous, comme vous pouvez le voir dans le code. Et maintenant, si nous le faisons plus grand ou plus petit, les flammes poussent, vous serez toujours verrouillé et il ne grandira pas. Et d'autres éléments utilise fixe pousser sur. Donc, il va réellement grandir, grandir et grandir. Et il sera en fait essentiellement augmenté et tous prendre n'importe quelle, n' importe quelle taille disponible et il sera en cours d'exécution. Il va essentiellement augmenter, établit en conséquence. Maintenant, et nous avons deux clauses, rinçage 0 et correction des rétrécissements, rétrécit, ne laisse pas l'élément rétrécir. Et rétrécir, lui permet de rétrécir. C' est à peu près tout. À moins de couvrir à peu près le contenu. Il s'agira d'un groupe important de classes. Donc justifie enseigné, tout est fondamentalement. Donc, une fois que nous aurons un élément qui utilise, juste si je commence, les éléments à l'intérieur, il sera appliqué de gauche à droite. Donc, si nous avons, par exemple, une colonne, alors ce sera de haut en bas. Et si nous avons fondamentalement une rangée, alors il sera appliqué de gauche à droite. Justifier fin agira fondamentalement comme si nous avons une ligne inverse. Donc, si nous avons une ligne et que nous utilisons la ligne inverse pour justifier et fera fondamentalement cela. Donc, il va ajouter les éléments pour utiliser une ligne. Ensuite, pour ajouter les éléments de droite à gauche et la colonne deux autres de bas en haut. Justifier centre sera essentiellement centré pour avoir une colonne centrée au milieu de l'écran comme verticale, verticale Santa Anna, pour l'utilisation de la croissance fera essentiellement le centre horizontal, justifier entre elle sera fondamentalement donnent un espace entre les éléments en fonction de la quantité d'espace disponible autour. Encore une fois, ceux-ci en particulier entre les arbres autour et surtout les villosités. Donc, ceux-ci sont très similaires dans la fonctionnalité. Donc les différences entre ne donne qu'un espace égal entre les éléments. Seuls les éléments tournent autour, se soucie en fait de l'autour des objets, pas entre les objets. Donc, disons que nous avons des éléments à l'intérieur d'un div. Seul le premier et le dernier, nous aurons fondamentalement une quantité égale d'espace, donc entre un et le div réel. Donc, sur le côté gauche de l'un, il aura un espace égal entre juste comme trois et le côté droit de celui-ci. Donc, ces 21 et côté gauche auront des marges égales, aimerait juste trois et le côté droit, qui est basé sur ceux entre les côtés. Donc, fondamentalement, donne un espace égal entre les éléments et les éléments autour. Donc fondamentalement, le parent est aussi, le conteneur parent aura aussi la marge entre l'élément et le conteneur sera la même que la marge entre les éléments et les éléments. Donc oui, c'est assez déroutant. Je vous recommande de vérifier fondamentalement sur documentation et de jouer avec elle afin que vous puissiez fondamentalement comprendre, mais fondamentalement basculer entre est principalement ce que nous allons utiliser sauvagement va utiliser la parole autour d'un prêt, nous allons l'utiliser. Ok, alors maintenant passons en revue les exemples montrés ici. Donc, nous avons justifié le départ. Il l'ajoute essentiellement de gauche à droite. Justifier le centre. Les éléments seront ajoutés au centre. Nous avons juste à mettre fin, cela sera ajouté sur le côté droit. Je pense que j'ai fait l'erreur d'elle avant parce que j'ai dit que j'ai suggéré par n va être la même chose que d'utiliser flexor inversé, mais ce n'est en fait pas parce que flexible, ado réversible, fondamentalement un sur le premier élément sera ajouté comme un, puis le second sera ajouté. Donc, c'est un peu différent, fondamentalement justifier et aligner les éléments vers la droite. Alors que flux, flux à travers inverse fondamentalement les retourner comme aussi il sera 1, 2, 3 sera 321. Je voulais juste clarifier cela avant de continuer. Donc l'espace entre donc ce que cela fait, il se soucie de l'espacement entre les éléments et il mettra son également, également entre eux. Donc 123 aura entre eux, l'espacement entre eux serait égal. Alors que l'espace autour, nous ne nous soucions pas vraiment du spécifique, eh bien, nous nous soucions de l'espacement entre les éléments, mais les quantités égales seront entre un et le conteneur et trois sur le continuum. Ainsi, l'espacement entre un et le côté gauche, qui est l'espacement entre le conteneur et un, sera le même que l'espacement entre trois et le conteneur sur le côté droit. Alors que l'espacement, l'espacement autour de ces éléments vont être égaux. Et s'il vous plaît uniformément, Il est essentiellement donne un espacement égal entre, entre tout, donc entre les éléments et entre la, entre les éléments ainsi. Donc, cela couvre le contenu justifié. Maintenant, passons à la justification des éléments. Ok, Donc maintenant, nous allons couvrir les éléments qui en fait nous n'avons pas vraiment besoin de couvrir cela parce que c'est à peu près juste comme justifier. Tout comme justifier le contenu. La seule différence est que ceci est utilisé avec des grilles. Donc, je veux dire la seule chose qui est vraiment, vraiment étirer votre classe, suggestive clause d'étirement d'article. C'est différent. Je veux dire, cela lui donne son va être comme le groupe flex était de permettre à l'élément de prendre autant spécifique à la justification. Justifier le contenu est que justifier les éléments n' utilise pas l'espace uniformément autour et l'espace entre. Il n'a pas de discours et cela dépend des marchandises. Donc oui, c'est à peu près tout. Maintenant, nous pouvons aller de l'avant et passer à la section suivante. Donc, aligner le contenu. Je ne vais pas couvrir ça et ça va couvrir ça brièvement. Les principales différences entre les éléments justifient le contenu et justifient sont très simples. La différence est, c'est qu'il fournit des utilitaires pour contrôler façon dont les lignes sont positionnées dans des conteneurs flexibles et de grille pluriannuels. Donc, vous avez ces cours que vous consommez du contenu, centre la pensée consciente, tout comme nous l'avons couvert, et ils justifient le contenu justifier-et justifient les éléments. Donc, les concours et mélanger le contenu. Centrez-le et démarrera essentiellement le fera commencer de gauche à droite et l'aligner à la fin. Des choses spécifiques que nous voulons et sont les différences est qu' il contrôle comment ROS oxygène et les conteneurs flexibles angered. Groupe de classes sont des éléments d'alignement. Donc, nous alignons les éléments fournit des utilitaires pour contrôler la façon dont éléments Flex et grille sont positionnés le long d'un axe transversal continu. Donc, fondamentalement, il vous permet de positionner les éléments virtuellement. Donc, nous avons des articles pensées. Commençons par les articles pensées. Comme vous pouvez le voir, tous les articles sont essentiellement arrêtés le stock vers le haut. Et nous avons envoyé si elles sont effectivement alignées au milieu. Et nous avons fini avec un. Donc, fondamentalement, ils sont collés au fond. Et nous avons une base de référence. La ligne de base est fondamentalement quand ils le sont, lorsque le contenu d'eux est centré. Alors maintenant, couvrons aussi la société. Nous avons aussi des étirements, que nous n'avons pas couverts. Stretch étire essentiellement la hauteur doit correspondre avec le récipient. Donc, il sera étiré. Donc, cela couvre à peu près les éléments d'alignement maintenant. Donc, cela résume notre groupe flex et grille de classes. Comme vous pouvez le voir dans toutes les sections que nous avons abordées. J' espère que c'est fondamentalement si vous avez besoin quoi que ce soit et que vous voulez en apprendre fondamentalement plus en détail, continuez et dites quand la documentation je le recommande fortement parce qu' elle explique tout en détail, mais couvre essentiellement l'ensemble du modèle flex box et du système de grille. 5. Groupe de 4 cours de mise en page: groupe puissant de classes est les classes de conteneur. Et puis ça va être une classe en gros. C' est une autre tâche importante que nous utilisons dans nos projets et vous en utiliserez beaucoup dans votre avenir. Tones utilise des projets. Donc, nous avons un croisé avec son conteneur et nous pouvons l'utiliser pour fondamentalement nous pouvons avoir comme MMD LG pour les points d'arrêt. Donc, il permet fondamentalement, contient essentiellement des éléments et du contenu. Donc, vous mettez fondamentalement dans vos articles dans un conteneur, puis donne avec elle, il ajustera automatiquement la largeur maximale de sorte que comme votre écran me obtient deux appareils différents auront une largeur différente. Donc, vérifiez fondamentalement la largeur et il aura une largeur maximale pour ce périphérique actuel. Alors nous allons juste vous montrer un exemple. Il devient donc nucléaire. Donc, comme vous pouvez le partager maintenant, nous avons, largeur de notre appareil est de 446. Si nous devions augmenter cela, il augmentera essentiellement avec elle et jusqu'à ce qu'il vous obtienne 640. Donc, revenons à la documentation est d'expliquer. Donc, nous avons des appareils SM ne sont pas des appareils. Donc le conteneur n'aurait pas, si nous avons un écran de plus de 640 pixels, il aura essentiellement une largeur maximale de 640 pixels. Maintenant, on est à 640. Comme vous pouvez le voir, la largeur maximale est de 10. Donc maintenant la largeur maximale est de deux ou 640, même si notre appareil est de 744 pixels. Pourquoi ? Parce que revenons à la commutation. Comme vous pouvez le voir, le suivant est MD. Md nécessite que l'écran soit au-dessus de 768 pixels. L' un est au-dessus de cela, alors il définira la largeur maximale à la 768. Donc, je voulais essentiellement atteindre que dès que nous recevons des centaines dépasse les augmentations de largeur maximale. Nous avons donc ces points d'arrêt. Ainsi, un conteneur ajuste automatiquement la largeur maximale afin que le contenu ne passe pas par-dessus bord. Et cela ne ressemble pas à moins que vous ne faites comme une classe spécifique qui vous permet de déborder votre contenu. Et puis il ne serait pas si vous utilisez flex wrap none, alors cela permettrait au contenu de rester à l'écran. Mais sinon, cela vous permettra essentiellement de garder le contenu dans l'écran et l'utilisateur n'aurait pas à faire défiler. Donc je sais que c'est le premier, le premier point d'arrêt. Allons à la documentation. Le premier point d'arrêt a une largeur maximale de 100. Et cela serait appliqué lorsque vos appareils d'écran en dessous de six cent six cent quarante pixels. Donc, cela résume le conteneur et comment il conserve fondamentalement vos contient les éléments et comment il, comment il le maintient réactif. Maintenant, nous allons couvrir le positionnement, le groupe de positions des classes. Ceux-ci sont très importants lorsque vous positionnez vos éléments, lorsque vous les utilisez sur votre debout. Donc ce que nous allons principalement couvrir le positionnement absolu ou relatif parce que sont ceux que nous allons utiliser tout au long du projet. Et vous les utiliserez comme rôle dans les futurs projets. Alors couvrons la position absolue. Tout d'abord, je vais réellement découvrir les degrés relatifs. C' est ce que nous entendons utiliser à la position relative permet des positions et des éléments en fonction du flux normal du document. Donc, si vous n'avez pas d'éléments avant, et que vous ajoutez l'élément suivant après dans le code, alors il sera réellement positionné juste après. Donc, juste après la fin de l'autre, celui-ci sera positionné. Donc, comme vous pouvez le voir, une très publicité parents et vous avez enfant absolu. Donc, quand nous avons le, nous avons par exemple, le paragraphe allèle parent div après ce sera, sera fondamentalement inséré juste après leur parent relatif. Positionnement absolu. Ainsi, avec un positionnement absolu vous permet de positionner un élément en dehors du flux normal du document, provoquant les éléments voisins à agir comme si l'élément n'existait pas. Donc, celui avant cela n'affecterait pas vraiment l'élément actuel. Donc, disons que nous avons dans le code, nous avons un div, puis l'étape suivante après qu'il est absolument positionné. Maintenant, le premier élément avant qu'il soit relativement positionné sur le positionnement qu' il utilise, il n'affecterait pas celui qui suit. Donc il ne serait pas inséré juste après, comme ça ne pouvait pas être avec le parent. Donc, dans ce cas, comme vous pouvez le voir ici, nous avons un cri absolu. Ainsi, comme vous pouvez le voir, lorsque nous utilisons le positionnement statique et le premier et le secondaire en utilisant le positionnement absolu. Comme vous pouvez le voir, l'enfant absolu est statique. Tir statique est fondamentalement fixe Essayer de leur statique musicalement et effectivement crier, a son propre style, ne se soucie pas de toutes les autres cellules. Il sera même au-dessus d'eux. Souhaite, en fonction de la façon dont vous l'avez positionné et comment vous l'avez fondamentalement aligné ainsi. C' est donc la différence entre absolu et relatif, qui est ce que nous entendons fondamentalement. Utilisation. 6. Groupe de cours de calibrage: D' accord les gars, alors maintenant on va parler des classes de groupe de taille. Tout d'abord, nous avons la largeur. Donc, comme vous pouvez le voir ici, nous avons les différentes classes pour cela. Et cela les rend avec vos pixels. Nous avons avec Px, ce qui me donne exactement un pixel. Avec vos 25. Ça te donne cinq. Comme vous pouvez le voir, chaque classe a ses mesures exactes. Nous avons aussi ces poissons poussent vers le bas avec la moitié. Il donne le pourcentage de 52. Ce sera exactement 50 pour cent de la largeur de l'écran. Troisièmement fera essentiellement le troisième de l'écran. Si vous voulez trouver les détails, vous pouvez essentiellement aller à la documentation sur président CSS. Nous avons également la largeur automatique. Donc, avec 0 pour ajuster la largeur divs en conséquence, en conséquence de l'élément, au contenu de cette div. Nous avons également la largeur de l'écran. Donc écran W serait essentiellement ce que nous allons trouver la largeur de l'écran. Et il définirait les divs avec en conséquence à l'écran où les costumes qui ont rempli la largeur de celle de la largeur seront fondamentalement c'est toute la largeur de l'écran. Nous avons également une largeur fixe. Donc, vous pouvez fondamentalement ajuster la largeur spécifique à l'utilisateur similaire. Donc, comme vous pouvez le voir ici, nous en avons huit et vous pouvez voir les différentes tailles. Et le respect des chiffres montrés. Nous avons aussi une largeur de fluide. Maintenant avec à travers elle. Comme vous pouvez le voir, si nous avons la moitié des deux types, nous pouvons avoir deux éléments auraient, et ils prendront toute la section. Ou nous pouvons avoir trois tiers, trois, trois tiers, ou nous pouvons avoir, par exemple, des scissions. Un troisième et deux tiers vous permet d'avoir une très belle dynamique avec tout comme nous avons avec Flexing Bouchra fondamentalement. Nous avons aussi plein, qui fondamentalement aussi juste comme avec l'écran et genre de la même chose et prend toute la zone. Dans ce cas, choisissez la largeur responsive, vous pouvez sélectionner le style différent en fonction des écrans, le programme de taille d'écran pour les appareils moyens, nous pouvons avoir habitué à la classe et pour les petits appareils, nous pouvons avoir un classe de clients et de cette façon, il sera réactif pour de bon. Et maintenant, nous avons ces choses en fait. Maintenant, cette glutamine avec cela a découvert les choses principales qui était aussi important que d'autres choses sont très détaillées sur elle ne les utiliserait que dans des circonstances spécifiques. Alors que nous allons juste couvrir les choses que vous allez principalement utiliser. Pour largeur minimale. Nous pouvons avoir, nous pouvons spécifier une largeur minimale de sorte que lorsque le, par exemple, comme quand nous avons des éléments, il ne serait pas plus petit que la largeur minimale. Comme vous pouvez le voir dans ce cas, nous mettons vos chaussures et ce sera 0 pixels. Mais si nous spécifions un nombre différent de ce qu'il devrait évidemment respecter ce nombre. Minimum était plein pour être fondamentalement un 100 pour cent. Passons maintenant à d'autres clauses importantes. Nous avons à nouveau réactif pour la réceptivité. Encore une fois, comme nous l'avons expliqué précédemment, nous pouvons avoir spécifié la largeur minimale basée sur la taille de l'écran et la masse sera fondamentalement ajustée en fonction de la taille de l'écran et de la largeur maximale. Encore une fois, c'est à peu près la même chose. Juste un peu besoin de savoir. Utilise deux condition chaque fois que vous voulez accuser des choses spécifiques. Mais à part ça, encore une fois, la même chose. Donc, nous avons max-width, euro est fait la largeur maximale de 0 pixels, fondamentalement 0, ce cas. Et si vous avez max, aucun, cela fera la largeur maximale comme vous le feriez si vous aviez, si vous aviez la largeur maximale, supprimerait fondamentalement. Et la largeur maximale extra lisse. Fondamentalement, il le fera en faire, il serait réglé sur 20 RAM pour la largeur maximale. Encore une fois, ces classes, vous pouvez les vérifier si vous voulez. Vous êtes à Djibouti, mais oui. Donc, la Mer fait défiler plus bas. Revenons juste sur l'utilisation de cela. Donc, dans ce cas, nous avons mg de largeur maximale, qui est fondamentalement mélangé le maximum avec le milieu. Si nous montons, nous pouvons voir que la largeur maximale maximale sera fixée à 20 REM pour le maximum. Donc, comme vous pouvez le voir ici, nous lui avons donné beaucoup de l'écran. La largeur de l'écran est beaucoup de son équipage. Thermique, c'est le moteur. Nous pouvons voir que si nous continuons et que je devenais plus petit mais que je deviens plus gros, ça continue de jouer. On y va, faisons-le lentement en fait. Alors allons-y plus lisse et nous irons parce que lentement, comme vous pouvez le voir est le jeu à nouveau commencé à elle, qui est un axone avec alors il était si Gambie. Alors maintenant, on peut descendre. Allons sur la hauteur maintenant. Alors passons en revue l'importance d'une hauteur. Donc encore une fois, sur la hauteur de 0 pixels, encore une fois, c'est juste la même que les autres classes que j'ai expliquées. Hp x donnera une hauteur d'un pixel. Et vous avez toutes ces autres classes personnalisées aussi que vous pouvez utiliser O2. Donc, fondamentalement, je viens de faire selon, en conséquence de ce que la hauteur du bouton sera, réglé en conséquence du contenu de celui-ci. Donc, l'O2, comme vous pouvez le voir, il faudra essayé de. Je vais essayer d'ajuster la hauteur en fonction du contenu de ce budget. Donc si on descend, on a cette hauteur d'écran. Hey, écran va essentiellement vérifier le plus haut de l'écran de la vitesse que vous utilisez. Et il va remplir, prendra toute la hauteur de cela trop la taille de l'écran, fondamentalement. Nous avons une hauteur fixe. Nous avons, encore une fois, tout comme nous l'avons fait avec une largeur fixe, nous avons tous ces nombres qui vous permettront de spécifier une hauteur spécifique. Nous avons des hauteurs pleines, et ce cas, il donnera o pour correspondre aux hauteurs du parent. Donc, sur les parents de cette division, il correspondra à la même hauteur. Pour le rendre réactif à nouveau, nous pouvons utiliser différents. Donc, si nous voulions le rendre réactif, nous pouvons utiliser les différents noms de périphériques. Donc md pour les appareils moyens comme N pour les petits appareils, LG et tout. Et puis nous pouvons spécifier les classes de hauteurs exactes. Et puis cela rendra la hauteur réactive. Et selon la largeur de l'écran, je suis désolé, au cours de la taille de l'écran. Allons les voir à la hâte maintenant. Encore une fois, tout comme min-width, nous avons ces classes spécifiques pour contrôler la hauteur minimale des éléments des éléments. Donc, la hauteur minimale de 0 fera 0 pixels, minimum, et la hauteur minimale de chute fera un minimum de 100 pour cent. Un écran de hauteur minimale le rendra en conséquence aux hauteurs des écrans. Donc, comme vous pouvez le voir, vous en avez deux, la hauteur minimale est en fait réglée sur plein. Et nous avons cette illustration d'un qui vous montre fondamentalement cela. Et vous le rendez réactif, nous pouvons spécifier les clauses spécifiques pour différents périphériques d'écran. hauteurs de Mac. Donc maintenant, à partir des oxydes contre elle va être comme la largeur maximale. Vous avez ces cours pour la hauteur maximale. Et vous pouvez spécifiquement à peu près la même chose que pour la hauteur et la largeur. Et vous avez ces exemples comme vous pouvez les frais généraux comme je l'ai déjà expliqué. Et oui. Donc, cela résume à peu près le Cela résume à peu près la taille du dimensionnement des classes de groupe. Alors maintenant, passons à l'éditeur et essayons de mettre en œuvre ces cours dont nous venons de parler. Passons à travers la largeur de l'écran. Donc, nous allons utiliser certaines des classes ici. Tout d'abord est faire couverture 12 W écran. Donc, fondamentalement, il faudra une hauteur de 12. Nous prendrons une largeur complète. Et maintenant donnons à cela une couleur de fond de bleu, nuance de 500. Comme vous pouvez le voir, c'est en fait prendre les mots complets. Il va avoir WE sans peau est par exemple, W huit. Cela nous donnera une largeur fixe de huit. Maintenant, même si nous avons une plus grande dimension de nous avons différentes tailles d'écran là-bas avec homies sera toujours la largeur fixe de 12, par exemple, dans ce cas, je veux faire un grand ouvert 24, et cela fera fondamentalement encore plus grand. Maintenant, bougeons fluidement. Donc maintenant, nous allons avoir un div ou nous devons, à l'intérieur de celui-ci que qui ont chacun aura sa propre largeur. Alors utilisons des scintilles. Et puis à l'intérieur, nous allons avoir W0, W1 sur 23. Donc, cela prendra la moitié de cela. Et un autre prendra également une autre moitié. Ou faisons deux autres bons, deux quarts, un quart, 1 sur 4. Et puis nous en aurons un autre, 1 sur 4 de cette base commune. Et cela lui donne une couleur de fond. Alors rendons celui-ci vert en utilisant vg vert avec une feuille de 100. Et celui-ci, Faisons le VGB avec des moutons de 600. Et celui-ci doit être 600. Et maintenant, voyons cela en action. Pour le composant parent est l'hydrogel. Alors donnons-lui une hauteur fixe de peigne. Comme vous pouvez le voir, nous avons la première div. Il faudra la moitié pour prendre essentiellement la moitié de l'écran. Et puis les deux autres, vous aurez un quota chacun. Donc, si nous devions, par exemple, faire chacun le troisième. Si nous devions changer la largeur et en faire un tiers pour chacun, alors chacun prendra essentiellement un tiers de la proportion de la largeur de l'écran. Maintenant, nous pouvons voir, Essayons ce nouveau sensible à savoir. Pour les appareils moyens que nous pouvons spécifier, nous pouvons faire celui-ci est un 4.5 et quels appareils nous prendrons un troisième ensemble pour faire des appareils ou quoi que ce soit, 3.5th trois. Je sais pour d'autres appareils voter pour un tiers. Donc, si nous devions changer la largeur que vous poursuivez pour ce que vous avez différents appareils. Donc maintenant, il va prendre un tiers du chemin. Si vous faites un plus grand, cela prendra la moitié. Maintenant, couvrons la largeur minimale. Donc, avons un div avec une largeur de 20 pour une largeur fixe de 24. Et faisons-le bleu, BW pour l'ombre de 200. Et donnons-lui aussi une hauteur de 2024. Et comme vous pouvez le voir, nous avons cette augmentation les feuilles vous un 100 pour le rendre plus clair. Et comme vous pouvez le voir, maintenant, si nous devions utiliser la largeur minimale de, par exemple, tomber comme vous l'avez été et où il est plein. Maintenant, ça les rendrait que tu veux être plein. Comme vous pouvez le voir, il a été réglé sur 24, largeur fixe de 24. Mais quand nous avons une largeur minimale pour cela, il va toujours être formé minimum. Alors maintenant, couvrons les glucoses et nous allons commencer par une hauteur fixe. Alors partons avec 24 et donnons la couleur de fond. Comment on va juste lui donner une hauteur de 12. Et comme vous pouvez le voir, essentiellement 124024. Encore une fois, comme c'était avec la même chose. Et maintenant, nous allons couvrir toute la hauteur en utilisant l'écran. Et cela va essentiellement vérifier la hauteur des écrans et ensuite il va le faire correspondre. Et encore une fois, comme les autres classes. Donc, pour la hauteur va être la même que les choses de largeur que j'ai déjà expliqué. Les seules différences C'est essentiellement l'appliquer à la hauteur et la largeur. n'y a donc pas grand intérêt de le couvrir. Encore une fois, cela résume à peu près les classes de groupe de dimensionnement. Maintenant, nous pouvons passer à l'autre processus de groupe. 7. Groupe de cours à 6 d'espacement: Passons maintenant à la distribution des classes de groupe. Tout d'abord, commençons par le rembourrage. C' est très important parce que nous l'utilisons beaucoup dans nos prédictions. Donc, il va être assez simple, aussi vieux que vous pouvez le voir à partir de la permutation p 0, nous allons lui donner un remplissage de 0 pixels tout autour. Donc, tous font le PPE X en haut à gauche, à droite et en bas avec exactement un pixel. Et comme vous pouvez le voir, toutes les autres propriétés, comme vous pouvez le voir dans la documentation est assez clair. Donc, le plus élevé de mettre le plus de rembourrage ou de le revoir. Et vous pouvez également spécifier des résultats spécifiques. Donc, vous pouvez utiliser aussi px et py. Px donne essentiellement son rembourrage horizontal et Puyi lui donne un rembourrage vertical. Donc, il ne fera que gauche et droite si vous faites horizontal et il fera le filtrage haut et bas. Vertical, donc vertical px est horizontal. Vous pouvez également spécifier que le côté spécifique pour lequel vous voulez obtenir un financement, par exemple, le rembourrage top six, qui lui donnera essentiellement un haut de rembourrage de 1.50.5 REM. Et vous pouvez faire des nuances de rembourrage et de rembourrage, rembourrage gauche Watson spécifie essentiellement le site spécifique auquel vous voulez ajouter un rembourrage. Passons maintenant à xi. Eh bien, d'accord, donc ce sont quelques exemples d'elle. Nous avons, comme vous pouvez le voir, rembourrage top six, vous pouvez voir que cette zone qui a été mise en évidence avec ces rayures qui vous montre le rembourrage juste là. Donc rembourrage top six, vous pouvez voir qu'il y a un rembourrage ajouté au haut. Rembourrage droit, vous donne un peu de rembourrage sur la droite. Et pourtant, il s'explique fondamentalement. Maintenant, nous pouvons voir les exemples de rembourrage. Rembourrage horizontal PXE. Donc, cela vous donne fondamentalement un rembourrage de h sur les deux côtés horizontaux, donc à gauche ou à droite. Et vous avez un rembourrage vertical, qui, comme vous pouvez le voir, est seulement pour le haut et le bas. Ainsi, un rembourrage normal, comme vous pouvez le voir sur l'illustration, rembourrage est effectivement appliqué à tous les mêmes malgré l'utilisation du rembourrage, puis le nombre que vous voulez ajouter. Et faire un responsive est très simple. Nous avons juste à spécifier l'écran de l'appareil spécifique et ensuite nous pouvons ajouter le rembourrage pour cela. Donc, nous pouvons avoir plusieurs codons pour différents appareils. Ok, maintenant passons à la marge. Marge est aussi ce groupe de gaz sont très importants aussi bien parce que nous l'avons utilisé beaucoup maintenant projets et vous allez l'utiliser beaucoup à l'intérieur de vos futurs enfants prédit. Encore une fois, ça va être à peu près comme le rembourrage. Donc il n'y a pas de raison de couvrir get. Je veux dire, chaque classe a ses propriétés sur les droits. Plus précisément, très bien expliqué. Vous pouvez vérifier la commutation se dissout. Vous voulez vérifier si vous voulez voir les détails de cette. Mais de toute façon, nous pouvons passer à l'utilisation de ces marginaux essentiellement. Donc, la différence entre les modules, encore une fois, tout va à peu près être la même que très similaire à mettre. Les seules différences. Le rembourrage est appliqué à celui à l'intérieur des éléments, et Morgan est appliqué aux ennemis extérieurs. Donc, la marge serait essentiellement donnée regarder entre les éléments courants et les éléments. Fondamentalement, c'est autour. Donc, tous les ennemis sont proches de nous ou fondamentalement mis dans des modèles entre eux. Alors que le rembourrage, il sera effectivement appliqué à l'élément lui-même et il sera effectivement rembourré à l'intérieur. L' élément sera en fait le palais. Donc oui, c'est à peu près la même chose. Donc, si nous descendons à ces sont les marges d'un seul site. Nous pouvons essentiellement utiliser mth, comme vous pouvez le voir, applique voulant à la marge supérieure, non ? Nous allons le donner Modéré, relativement explicite. Il ne sert à rien de discuter des détails. Je veux dire, c'est très explicite. Et vous pouvez avoir une marge horizontale à nouveau, donne ne s'applique qu'aux côtés gauche et droit. Il lui donne un multinomial sur la marge gauche et droite Vertical, êtes-vous en haut et en bas ? Et oui, c'est à peu près désactivé. Et si vous voulez faire un responsive, vous pouvez spécifier l'écran de l'appareil. Et puis vous pouvez également ajouter les modules spécifiques que vous souhaitez utiliser. L' important pour les marges aussi est que vous pouvez avoir des marges négatives. Donc, il y a un, il y a beaucoup de marge entre deux éléments ou voyons, les autres éléments ont beaucoup de marge et cela provoque l'élément actuel à être plus loin de lui. Nous pouvons effectivement appliquer des valeurs négatives. Et cela nous permettra essentiellement de déplacer leurs éléments actuels et de les rapprocher des autres éléments en supprimant une partie de la marchandise effectivement appliquée. Donc, c'est très simple, vous spécifiez juste un négatif avant le réel. Donc si nous devions avoir le module, le module suivant est sur 272. Dans ce cas, nous pouvons faire moins avant le, avant la classe réelle. Et cela va effectivement appliquer son inverse. Donc, il supprime réellement la marge, pas absolue. Appliquons donc aussi certains de ces gaz dont nous venons de parler. Alors faisons un nouveau div et donnons-lui une classe d'arrière-plan, de couleur. Couleur de fond, rouge, la feuille de 500. Et mettons un texte juste pour voir à quoi tout ressemble. D' accord ? Et alors on va avoir du H1 avec bonjour. Et maintenant, nous allons lui donner une certaine marge. Donc, vous pouvez voir qu'avec le Hello va avoir un module. Donc, nous allons lui donner une marge du module 12. Et comme vous pouvez le voir, le H1 réel a maintenant une marge à gauche, en haut, à droite et en bas. Et il y en a en fait un autre chacun. Donc, nous pouvons essentiellement voir que nous avons deux H 1 et a dit cette div, juste pour voir cette marge. Comme vous pouvez le voir maintenant, nous avons, le premier module, a les trois premiers éléments, a des modules sur le second n'a pas. Et comme vous pouvez le voir, le plein supprimer la marge des premiers éléments qui seront fondamentalement collés ensemble. Et si nous ajoutons marge, horizontale par exemple, alors pour le premier élément en utilisant MX, par exemple, 12. Et comme vous pouvez le voir, la marge n'est appliquée qu'horizontalement. Et si nous faisons MON, il sera appliqué verticalement. Et si vous voulez l'appliquer de tous les côtés, serait juste faire M Cohan, pour tous les côtés fondamentalement. Voyez que nous voulons réduire la marge de l'énorme et décalé vers le haut. Nous pouvons appliquer une marge négative. Marge. Donc on peut faire moins de marge et on peut faire 12. Et cela va fondamentalement décalé vers le haut et il le fera au même niveau. Donc, c'est si vous voulez appliquer des modules négatifs. Maintenant, appliquons un peu de rembourrage. Alors donnons à celui-ci un rembourrage de, exemple, en ajoutant six. Et ça devrait vous donner un peu de rembourrage. Et ce genre de marge haut ce ne rembourrage 12. Comme vous pouvez le voir, nous avons pas, Parce qu'avant quand nous utilisons la marge, la marge était appliquée aux éléments extérieurs. C' est pour ça que nous avions l'espace. Mais maintenant, dans ce cas, est effectivement appliquée à l'intérieur de l'élément. Et c'est pourquoi il n'y a plus d'espace et le remplissage réel est appliqué plutôt que le module. Ok, Donc ça résume à peu près le rembourrage et les glucoses de marge. Nous pouvons maintenant passer à la section suivante. 8. 7 cours de groupe de typographie: D' accord les gars, alors maintenant on va couvrir le groupe de classes de la famille de polices. Donc, les classes de polices sont principalement trois. Nous avons donc la police sans, serif et formule. Et vous avez ces préréglages par défaut que vous pouvez utiliser. Et bien sûr, vous pouvez utiliser vos clients si vous le souhaitez, mais ceux-ci sont déjà disponibles avec Tim et CSS. Juifs, par exemple, san-serif, vous avez juste à faire quatre fils comme un tissu. Et vous servez en uniforme. Et d'avoir à utiliser la police monospace sur un. Et que je devrais appliquer ces polices. Et nous allons couvrir la taille de la police est très simple, comme vous pouvez le voir dans la classe. Donc, vous avez accès qui est très petit. Nous aurons l'assemblage qui est très petit, ce qui est plus fondamentalement. Et puis vous avez la base et vous avez grand. En descendant, le téléphone devient plus grand. Et on descend à l'usage. Ça montre ça. Au fur et à mesure que nous descendons, les cours s'agrandissent. Et oui, vous pouvez le rendre réactif est tout pour en appliquant différentes polices pour différents appareils, pour différents périphériques d'écran partager. Maintenant, nous allons couvrir le poids de la police. Encore une fois, c'est très simple. Comme vous pouvez le voir sur les classes, nous avons Fontan, ce qui lui donne un poids de police de 100 pour un droit supplémentaire parce que itérations de quantités de 200. Et au fur et à mesure que nous descendons cette liste, le poids de la police augmente. Et ce que cela fait, c'est qu'il est plus gras mélanger les polices plus épaisses. Donc, comme vous pouvez le voir à partir de l'utilisation va descendre à l'utilisation. Donc, cela contrôle la manière différente d'un élément en utilisant le poids de la police pour, au fur et à mesure que le poids augmente, devient essentiellement mobile, couvrir les hauteurs de ligne. Encore une fois, c'est très simple, car nous augmentons le début, la hauteur de la ligne augmente également de façon, par exemple, si nous utilisons le sommeil à l'intérieur du paragraphe et nous avons comme par exemple, menant détendu, alors le l'espacement entre les lignes sera plus élevé. On aurait plus d'espace entre les lignes. Donc la dernière pièce que vous voulez utiliser entre l'azote et la ligne d'utilisation trompeuse, lycée, vous aurez. Donc, comme vous pouvez le voir, si nous descendons, nous pouvons voir des différents besoins. Donc, vous avez leader, motoneige, bons actes normaux. Au fur et à mesure que nous descendons, le début augmente puis plus il y a d'espacement entre les lignes. Donc, qui couvre que pour le, qui couvre tout pour la hauteur de la ligne. Couvrons le type de style pour les listes. Donc, ces classes de groupe vous permettent de vendre essentiellement la liste. Donc, si nous n'avons aucune liste, alors ce que cela fait est fondamentalement, cela supprimera les points à puces de la liste. Et comme vous pouvez le voir ici aussi, si nous voulons avoir des points bleus, alors nous pouvons utiliser le disque de liste. Et ce sera, cela nous donnera essentiellement des points à puces pour chacun, pour chaque élément de la liste. Et si nous voulons avoir des nombres et nous allons utiliser cette décimale et cela nous donnera comme 1, 2, 3, 4, chaque élément de liste qui le numérotera, groupe d'alignement de texte de classes. Ceux-ci sont très importants parce que nous les utilisons perdus dans les Projets et Ressources couverts. Il nous reste donc des textos. C' est essentiellement des alliances applications de gauche à droite. Srilanka texte de l'Australie et des textes dans, aligne le centre de texte. C' est le transit supplémentaire de droite à gauche et dit justifier il en fait un bloc. Donc, comme vous pouvez le voir, si nous passons à l'exemple, c'est un bon exemple de quand vous comprenez ce que je veux dire par texture jusqu'à présent. Donc, pour le texte à gauche, comme vous pouvez le voir, le texte va de gauche à droite. Et CentOS étant centré et écrit est en cours, est aligné de droite à gauche. Et prend justifier, comme vous pouvez le voir, c'est un bloc, donc il va refroidir l'espacement et tout dans les lignes de sorte qu'il est fondamentalement a une structure de bloc, structure carrée. Alors maintenant passons par la couleur des tiques. Encore une fois, c'est très important d'utiliser cela beaucoup dans les projets. Nous avons donc du texte transparent pour rendre les contrôles transparents et les courants de texte pour lui donner le collage que vous pouvez voir ici, le genre de bloc de texte noir clair le rendra fondamentalement noir. Et comme vous pouvez le voir, chaque couleur ferait essentiellement la couleur du texte et la feuille à mesure que vous augmentez le document étudiant que plus la couleur sera sombre. Donc, comme vous pouvez le voir, il excrète 500 et puis vous devez excréter un 100100 est beaucoup plus sombre que 500 éducation à travers ce à peu près résume, allons vers le bas. Donc, en termes d'utilisation de ces savants texte simple et la couleur que vous voulez, et puis vous pouvez présenter la feuille de ce que vous voulez et de l'appliquer comme aller à travers les textes. L'obésité. Donc, l'obésité au nombre essentiellement plus haut de gamme. Donc, nous utiliserions l'obésité comme texte le neurone de manière opposée. Et puis vous mettez dans le nombre d'efficacité, le niveau de fondamentalement, plus le niveau d'obésité est élevé, plus il sera opaque, et moins le niveau d'obésité, plus il est transparent. Si nous descendons aux exemples, comme vous pouvez le voir, nous avons, nous avons ces textes et le premier a l'opacité d'un 100, très opaque et ne pas être transparent et perdu. On a une densité de 0 et comme vous pouvez le voir, il a l'air assez transparent. Donc, vous verrez les couleurs derrière elle ou si vous avez quelque chose derrière elle. D' accord. Ça résume à peu près tout ça. Décoration de texte de couverture. Nous avons donc ces trois causes sous-jacentes lignes. Nous ne sommes pas soulignés, si à peu près explicatifs. Donc, les états sous-jacents sous-jacents, comme vous pouvez le voir dans l'exemple, barré le provoque fondamentalement et aucun soulignement ne supprime le souligné. Donc, si vous avez souligné la rétine en ligne et que c'est une forme de ligne fixe pour vous, résume à peu près la section typographique. J' espère que tout est très clair. Donc, à peu près des sommes de ces cours jusqu'à.