CSS 201 : CSS intermédiaire. Créez de superbes sites Web à partir de rien.

1. CSS 201 : Intermédiaire. Créer de magnifiques sites Web à partir de rien.: Bienvenue sur CSS à 200 un CSS intermédiaire. Dans ce cours, nous aborderons des morceaux de CSS plus grands et plus compliqués. Cela signifie que vous devriez déjà avoir une compréhension de base de CSS. Dans ce cours, nous allons étendre nos esprits un peu plus et regarder des choses comme le contour par rapport aux frontières. Les éléments de compensation étaient le positionnement spécialisé, regardant les sélecteurs avancés, explorant les pseudo-sélecteurs, les pseudo-éléments, les gradients, les transitions, les animations. Salut, je dis Caleb. J' enseigne à plus de 300 mille étudiants comment coder dans le monde entier et je fais des sites web depuis plus de 20 ans. J' ai travaillé avec des gens comme la Arctic Research Foundation, la nasa et Mozilla, ainsi que deux entreprises de développement Web de premier niveau à travers le monde. Encore une fois, mon nom est Caleb dit et bienvenue à CSS 201. 2. La propriété d'affichage: Si vous avez pris CSS one-to-one, vous devriez déjà connaître les types d'affichage 3D, en ligne, en ligne, bloc et bloc. Dans cette vidéo, allons de l'avant et démontrez la différence entre les trois d'entre eux parce que c'est essentiel à savoir pour le reste de ce cours. J' ai donc mon éditeur ouvert ici. Et je suis allé à File Open, puis j'ai ouvert un dossier appelé Less Than files. Et je vais créer un nouveau fichier ici appelé index.html. Et ici, faisons HTML deux-points cinq, appuyez sur l'onglet, et il crée sa page pour nous. Et appelons ce document de travail CSS 201. Maintenant, il y a trois types d'affichage différents ici. Et ce que je vais faire, c'est que je vais créer un div et un micro en fait trois divs et vous montrer les différences entre eux. Donc div, c'est la première copie de cette ligne. C' est la deuxième copie de cette ligne. Et tout ce que je fais ici et VS Code c'est le contrôle C, le contrôle V. Et il semble copier toute la ligne vers le bas pour moi. Et puis c'est le troisième. Maintenant, je vais passer à mon navigateur et je vais aller à File Open. Et je vais ouvrir index.html. Et d'accord, on voit une page ennuyeuse, ennuyeuse, ennuyeuse. Mais ce que nous pouvons faire ici, c'est juste une démonstration aussi rapide. Et encore une fois, c'est super vital à savoir. Donc nous avons trois divs ici. Allons de l'avant et créons un nouveau sélecteur. Allons de l'avant et tout ce que j'ai fait il y a eu un clic droit, inspecter et cliqué sur l'un de ces dibs. Peu importe lequel et cliquez sur ce petit bouton ici qui dit nouvelle règle de style. Je vais agrandir ça aussi. Cliquez sur ce bouton. Ça va me donner automatiquement un div. Et on pourrait changer le type d'affichage. Maintenant, nous ne pouvons pas changer celui-ci parce que celui-ci vient par défaut avec ses sourcils, mais nous pouvons l'écraser et nous pouvons dire que le bloc d'affichage est ce qu'il est actuellement. Donnons à cela une bordure cependant, bordure d'un pixel rouge solide. Et c'est à quoi ressemble le bloc d'affichage. Et c'est en grand contraste pour afficher en ligne, où tous les éléments sont côte à côte. Et puis nous pouvons faire le bloc en ligne, ce qui ne semble pas vraiment avoir fait beaucoup. Il est en train de le déplacer dans la Justice et juste une touche là-bas. Et ce que le bloc en ligne nous permet de faire est de rembourrer dix pixels. Et nous pourrions faire une marge de cinq pixels si nous voulions cinq pixels. Maintenant, nous pouvons faire une marge, nous pouvons ajouter une marge, nous pouvons ajouter un remplissage avec un élément de bloc ainsi. Et on peut les activer et les désactiver si on le voulait. Maintenant, une chose à noter est en ligne semble un peu différent de inline-block. Donc, nous pouvons faire en ligne, bloc en ligne et juste déplacer cela de haut en bas. Je fais juste basculer ça avec mes touches fléchées haut et bas. Et donc c'est en ligne, c'est inline-block. Et il est important de remarquer ces différences parce que nous allons utiliser le bloc en ligne beaucoup dans ce cours. Et c'est un bloc. Nous allons aussi utiliser ça. Ce sont donc les trois types d'affichage que nous allons commencer dans ce cours. Et il est absolument vital que vous les connaissiez parce que nous allons travailler avec des choses comme flexbox, Flex Box et grid. Et ce ne sont pas faciles à enrouler nos têtes, donc nous devons être assez familiers avec cela et nous avons couvert cela dans CSS one-to-one. Si vous êtes dans ce cours, n'hésitez pas à revenir à l'écran moins que NCSS one-to-one, où nous couvrons cela un peu plus en profondeur. 3. IMPORTante : Le modèle de boîte: Ok, jetons un coup d'oeil au modèle de la boîte. C' est quelque chose que nous n'avons pas couvert dans CSS 101, ce que je voulais vraiment, mais je pense que c'était un peu à avancer. Donc, le modèle de boîte est cette idée que vous avez une boîte et vous pouvez avoir un remplissage et une marge, et cela dépend des règles de votre navigateur sur la façon de calculer la largeur de cet élément. Donc, si nous créons un div ici et c'est ce qu'on appelle la boîte de classe div, et c'est tout ce que nous allons faire. Je vais sauver ça. Venez sur cette page et j'ai déjà pré-ouvert ceci avant d'enregistrer cette leçon. Donc, si je vais inspecter, je vais voir que dans mon corps j'ai une boîte et je peux ajouter une classe ici pour la boîte à points. Et ajoutons un peu de style. Alors bordure d'un pixel, rouge solide. Donnons à cela une hauteur de 300 pixels, une largeur de 300 pixels. Et changeons cette bordure au lieu d'un pixel. Faisons comme cinq pixels. Et maintenant, quand je descends ici, quand je fais défiler tout le chemin, on voit que c'est 300 par 300. Ok, cool. Maintenant, si je le voulais, je pourrais ajouter un rembourrage ici, et je pourrais dire un rembourrage de 30 pixels. Et vous remarquez comment quand j'active et désactive ça, ça rend ma boîte plus grande. Et ce n'est pas nécessairement ce que je veux parce que lorsque j'ajoute un remplissage de 30 pixels, cette boîte n'est plus 300 pixels. Il fait 370 pixels de large. Il a cinq pixels de chaque côté pour 105 à gauche, cinq à la vitesse, 300 pixels à l'intérieur, puis 30 pixels de rembourrage à gauche et à droite. Donc, si nous additionnons cela, nous avons cinq, trente, trois cent trente ici et cinq autres. Et si on fait défiler vers le bas, on peut voir tous ces chiffres ici. Bordure de cinq rembourrage 30 à l'intérieur de 300. Maintenant, parfois c'est ce que nous voulons, mais pour la plupart, ce n'est pas ce que nous voulons. Ce que nous voulons, c'est de dire, faire le tout 300 pixels de large ou 300 pixels de haut. Et cela inclut le rembourrage. Donc, par défaut, le modèle de boîte, ce que nous examinons ici sont le modèle de boîte ici n'inclut pas avoir de rembourrage, n'inclut pas avoir de marge. Donc, ce que nous pouvons dire est la taille de la boîte et par défaut c'est la boîte de contenu, mais nous voulons la boîte de bordure et vous pouvez voir qu'elle la rend plus grande ou plus petite ici. Et nous modifions le comportement par défaut d'un navigateur. Typiquement, nous voulons border-box. Ce que fait border-box, il est dit Ajouter cette bordure à ce rembourrage et assurez-vous que tout cela est une largeur de 300. Et maintenant, quand je survole ça, on peut voir que cette boîte est un peu plus petite. Et quand je fais défiler vers le bas, aucun de ces chiffres ne change réellement. Mais la boîte elle-même est plus petite. Il dit que tout est de 300 pixels. C' est la différence entre border-box et boîte de contenu. Maintenant, ce que j'aimerais que tu fasses, c'est que tu lui donnes une chance. Créez une boîte de 300 par 300 sur votre page. Il n'a pas besoin de bien paraître. Ajoutez un peu de rembourrage, puis changez la taille de la boîte et remarquez simplement quelles sont les différences et c'est vraiment, vraiment important pour nous de passer à travers ce cours parce que nous allons utiliser la boîte de contenu beaucoup. 4. Les bords :: Ok, jetons un coup d'oeil au contour. contour est la bordure qui fait le tour de tout. C' est honnêtement la frontière autour d'une frontière. Vous pouvez ajouter un contour et vous pouvez lui dire d'avoir un décalage. Nous utilisons le décalage de contour pour donner un peu d'espace entre l'élément et votre contour démontrera cela en seulement une seconde. Mais, fondamentalement, le contour est comme avoir deux frontières. Et c'est vraiment agréable pour l'amélioration visuelle. Maintenant, la plupart du temps, il se termine sont en fait super importants pour l'accessibilité. Donc, chaque fois que vous passez le curseur sur un élément ou lorsque vous tablez dessus, comme lorsque vous utilisez un clavier et appuyez sur la tabulation sur votre page, parfois un bouton aura comme un contour jaune autour d'elle ou un contour rouge ou un contour noir. Et ce n'est pas la frontière, c'est juste ce contour et il dit aux lecteurs d'écran et aux personnes ayant une déficience visuelle, personnes qui ne voient pas très bien ce qui est réellement sélectionné. Il aussi pour les guerriers de clavier là-bas qui aiment utiliser un clavier au lieu d'une souris. Ça les aide beaucoup et il y en a beaucoup. Donc c'est vraiment, vraiment important. Donc ce que je vais faire ici, c'est que je vais enregistrer ça comme un nouveau fichier appelé Outline. Et ce que je veux ici, c'est que j'ai encore cette boîte. Et ce que je voudrais faire est d'ajouter un contour autour d'elle. Donc, si je vais ici et que cela ne fait que partir de la dernière leçon, j'utilise exactement le même fichier. C' est bon parce que je suis juste dans l'éditeur ici dans l'inspecteur Will et nos outils de développement. Je peux ajouter un contour. Et rendons ça juste un peu plus petit. Je peux ajouter un contour. Et c'est un peu comme une frontière. Donc je peux dire cinq pixels, noir solide. Et vous pouvez voir que c'est en fait à l'extérieur de tout ça. Maintenant, si on regarde son modèle de boîte, il n'apparaît même pas ici. Nous avons un intérieur, nous avons un rembourrage, nous avons une bordure. Nous avons une marge à l'extérieur, mais cela ne nous montre pas vraiment quoi que ce soit sur le contour. Et c'est donc la différence entre une frontière et un contour de frontières réellement calculé. Un plan ne l'est pas. Et vous pouvez voir ça. Il ne fait pas bouger notre boîte à tous les âges, ajoute littéralement un contour autour d'elle. Maintenant, il y a un moyen d'ajouter un décalage. Nous pouvons dire décalage de trait de contour, et nous pouvons donner à cela une valeur de pixel aussi. Donc, disons pas pour, donnons-nous un décalage de dix pixels. Et nous allons vouloir ajouter une certaine marge ici. Alors faisons la marge de 30 pixels. Et ce que ce décalage fait, c'est qu'il se déplace juste ce contour vers l'extérieur. Maintenant, ce que je voudrais que vous fassiez pour cette leçon particulière est de créer un élément et de lui donner une bordure, puis de lui donner un aperçu. Peu importe quelle couleur est. Vous pouvez juste lui donner une sorte de contour. J' ai juste fait quelque chose d'ennuyeux, cinq pixels noir solide, puis j'y ai ajouté un décalage pour démontrer que cela peut être déplacé vers l'extérieur. 5. Comment ajouter des ombres à du texte: L' ombre technologique ressemble beaucoup à une ombre de boîte. La seule différence vraiment ici est qu'une ombre de boîte peut avoir comme une ombre intérieure appelée un encart et que le texte ne le fait pas. D' accord, donc ce que je vais commencer à faire ici, c'est que je vais écrire en CSS interne, pas en CSS externe, pas en CS en ligne mais en CSS mais en CSS interne. Ainsi, lorsque vous téléchargez ces fichiers de projet, vous pouvez réellement avoir accès à tous ces CSS. J' ai une boîte ici, coucou, coucou. Et allons de l'avant et ajoutons du texte ici. Et ce texte va dire bonjour monde. Et quand je charge cela dans mon navigateur, il dit juste bonjour monde. Nous pouvons rendre cela beaucoup plus grand. Nous pouvons changer la taille de la police si nous le voulions un peu plus tard, ce que nous ferons peut-être aussi bien, juste pour que nous puissions vraiment plonger dans CSS. Alors sélectionnons cette boîte par notre classe. Et nous avons appris sur ce sélecteur et CSS 101. Et donc tout cela dit est de sélectionner cet élément par ce ClassName nous donne une taille de police de peut-être comme 40 pixels. Sauvegardons et actualisons. On y va. C' est plus grand. Et maintenant, ce que nous pouvons faire, c'est nous pouvons ajouter une ombre de texte. Donc, l'ombre du texte. Et cela prend un x, un y, une valeur de flou et la couleur. Alors allons de l'avant et modifions cette valeur x. Nous voulons déplacer cela vers la droite, disons dix pixels. Ensuite, la valeur y va également être de dix pixels. Ça va le déplacer vers le bas. Un flou, disons que ça ne va pas flou du tout. Donc ça va être une copie exacte, aperçu exact de notre texte. Et la couleur ici va être lu juste quelque chose d'odieux que nous pouvons vraiment voir ce qui se passe. Maintenant, nous avons un texte, une ombre de texte qui nous déplace vers le bas dix pixels et le déplace vers les dix pixels droit. Et si nous voulions quelque chose d'un peu plus élégant, nous pourrions faire quelque chose comme deux pixels. Et au fait, pour sélectionner cela, tout ce que j'ai fait c'est sélectionner mes dix pixels ou c'est maintenant deux pixels, mais j'ai sélectionné ces dix pixels. Et si vous allez à Selection, ajoutez l'occurrence suivante pour moi, commande D, et ça va être différent pour vous probablement je peux imaginer. Vous pouvez simplement taper à deux endroits en même temps, ce qui est vraiment, vraiment utile. Parce qu'un bon raccourci à retenir, sautez de l'avant et enregistrez cela, actualisez, et cela semble un peu mieux. Maintenant, nous pouvons également ajouter une valeur de flou, cette valeur de flou actuellement un 0, qui est le même que de ne pas l'avoir quoi que ce soit. Par défaut n'est pas floue du tout. Allons de l'avant et ajoutons une valeur de flou de cinq pixels. Et tout cela va faire, c'est dire pour chaque pixel qui est là-bas, chaque pixel rouge floue cinq pixels. Et donc nous avons un joli peu floue. Ils sont en fait on dirait que ça sort un peu de la page. Maintenant, ce que nous pouvons faire, c'est que nous pouvons changer la couleur de fond du corps. Donc, la couleur de fond du corps va être noire. Ça va être de la même couleur que notre texte. Et allons de l'avant et rafraîchissons ça. Et maintenant, ça a l'air un peu effrayant. Maintenant, j'enregistre ça autour d'Halloween, donc c'est vraiment, vraiment bien, c'est applicable parce que c'est un peu effrayant. Mais nous ne pouvons plus voir ce texte, ce qui est vraiment sympa. Nous pourrions également essayer de, au lieu de faire cela, nous pourrions faire un RGBA couleur. Et peu importe quelle couleur nous remplissons sa couleur. Remplissons-le de noir, mais faisons-le aussi complètement transparent avec un 0 alpha là-dedans. Et maintenant, nous avons juste le texte floue. Donc, c'est l'ombre de texte serait, je voudrais que vous fassiez est d'écrire du texte sur votre page. Et ça pourrait juste dire bonjour monde. Puis ajoutez une ombre technique, ajoutez votre axe X, votre axe Y ou votre axe horizontal dans votre alignement vertical à un flou, puis ajoutez une couleur. Vous n'avez pas à faire le RGBA, nous avons appris cela et CSS 101 aussi. Donc, si vous avez besoin de revenir à CSS une à une extrémité, a rapidement appris ce que RGB est. Mais vraiment, c'est juste un mode de couleur qui dit rouge, vert, bleu, alpha, alpha est votre transparence. Donc on a dit « 000 », c'est noir et le faire passer complètement. 6. Forcer une largeur minimale sur un élément: D' accord, donc c'est la largeur minimale. Nous allons parler de ce qui est maintenant dans CSS 101, nous avons appris sur la largeur maximale, nous avons appris sur la largeur régulière. Si vous ne connaissez pas la largeur maximale, honnêtement, c'est exactement la même que la largeur minimale. Cependant, c'est le contraire. Donc c'est pareil, même mais différent. Maintenant, la largeur maximale dit a, un élément ne peut avoir qu'une largeur maximale. Et il va essayer de passer de la plus petite taille à cette largeur maximale avant de casser votre texte sur une nouvelle ligne, largeur minimale est en quelque sorte la même mais opposée. Donc, je peux sélectionner cette case ici, et je peux lui donner une bordure pour les pixels bleu uni. Et allons ici et jetons du lorem ipsum dans le bras inférieur. Et puis VS Code, je viens de frapper onglet. Et c'est parce que j'ai le template django sélectionné ici. Il devrait s'agir d'un code HTML. Allons annuler ça. Baissez-les. Onglet. On y va. Et quand je charge cette page, nous pouvons voir tout ce texte et c'est en fait un mauvais exemple. Je vais juste supprimer tout sauf cette ligne pour que nous ayons cette largeur ici. Allons de l'avant et supprimons tout cela. Enregistrer et actualiser. Ok, donc maintenant cela ne va pas vraiment faire quoi que ce soit parce que c'est un élément de bloc. Et rappelez-vous cette première leçon que j'ai dit que l'affichage des éléments de bloc est vraiment, vraiment important. Allons de l'avant et coupez ça. Nous voulons nous faire ne pas prendre toute la largeur. Donc, nous pouvons dire afficher le bloc en ligne, et cela nous permettra d'utiliser l'élément width avec lui. Cependant, il va également prendre une largeur minimale ici, ce qui est vraiment agréable. Donc, cet élément est ici 365 pixels de large. Donc nous voulons une largeur minimale de quelque chose juste un peu plus grand. Donnons à cela une largeur min. Et disons que la largeur minimale doit être de 450 pixels. Et donc ce que ça va faire, c'est de déplacer ça quelque part ici. Je vais plutôt bien jouer. Oui, c'était une bonne idée. Donc ça va le déplacer ici. Et si j'écris plus de texte, il va ensuite se développer. Et on peut voir ça en entrant ici. Et je vais juste copier cette ligne une ou deux fois. Et vous pouvez voir qu'il s'est étendu tout au long du chemin. Donc, il a cette largeur minimale. Et tout ce que je fais ici, c'est de défaire et de refaire. Mais il a cette largeur minimale, donc peu importe s'il y a de l'espace supplémentaire ou non, il va prendre cette largeur minimale. Et puis une fois qu'il a plus de contenu, peut-être trop de contenu. Ce qui va faire est alors déplacer ceci pour être une largeur de 100%. Maintenant, nous pouvons, nous pouvons épouser ça avec max-width aussi. Donc on peut dire que la largeur maximale ne peut être que quelque part ici. Alors allons de l'avant et combinons ces. On peut dire une largeur maximale de, disons 500 pixels. Rafraîchir. On dirait que rien n'a changé. Mais ce que cela va faire est de dire quelque part à propos d'ici probablement est la largeur maximale. Donc avant que cette bordure bleue ne prenne cette largeur de pneu, celui-ci ne va plus bien, donc je vais double-cliquer ici et coller ça quelques fois. Et nous pouvons voir que ça ne prend que, jusqu'ici maintenant. Et nos éléments de boîte, si nous descendons ici, 450 pixels de large, sont ce qu'il est par défaut. Ici, c'est 508 pixels et c'est parce qu'il prend quatre pixels de chaque côté. Donc 500 pixels à l'intérieur, 400 pixels, quatre pixels de chaque côté plutôt. Et on peut changer la taille de la boîte. Et faisons border-box. Et vous pouvez vraiment voir qu'il fait cette petite boîte de bordure de différence de huit pixels. Et si nous revenons ici, nous pouvons voir que l'élément entier est de 500 pixels. Maintenant, nous utilisons déjà les éléments d'affichage que nous avons appris de notre leçon d'affichage. Nous apprenons également et utilisons le dimensionnement des boîtes à partir de la leçon de dimensionnement des boîtes ou de la leçon de modèle de boîte. Donc, c'est min-width. L'idée encore ici est juste que ce sera une largeur minimale. Et si vous avez plus de contenu, il peut devenir plus grand. 7. Introduction aux positions de CSS: Le positionnement est la façon dont nous déplacons les éléments autour d'une page. Il y a plusieurs façons de le faire. Nous pouvons faire des positions absolues. Nous pouvons écrire une position relative, une position fixe ou une position collante. Il y a aussi un autre appelé statique, que tout est par défaut. Mais l'idée est que si vous voulez faire un site Web parfait en pixel, quelque chose qui correspond vraiment au design, parfois vous allez devoir déplacer des éléments autour. Et dans les prochaines leçons, nous allons parler de positionnement relatif, de positionnement absolu, de positionnement fixe et de positionnement collant. Et c'est ce qui va faire démarrer votre site et la recherche vraiment agir plus comme une application, surtout quand il s'agit de positionnement collant. Mais cela va également vous aider à déplacer les choses afin que nous puissions créer nouveaux composants dynamiques qui peuvent se superposer les uns sur les autres. 8. Positionnement relatif: positionnement relatif est l'idée de prendre un élément et déplacer d'un endroit où il se trouve naturellement sur votre page à un autre endroit. Juste légèrement hors de sorte qu'il prend votre position là où vous êtes assis ou debout en ce moment. Et c'est comme vous déplacer d'un pouce vers la gauche ou d'un pouce vers la droite. J' ai donc un nouveau document ici pour le positionnement relatif. Et ce que nous voulons faire, c'est créer une boîte et ensuite simplement la déplacer un peu. Alors allons-y et prenons ce cours de boîte. Donnons-lui une largeur. 300 pixels, hauteur, 300 pixels, bordure dix pixels, noir massif. Et quand j'ouvre ça dans le navigateur, c'est juste une boîte normale. Nous l'avons vu quelques fois déjà tout au long de ce cours. Donc ce que je veux faire ici maintenant, c'est que je peux dire position. Et il y en a un tas ici. Mais allons la position relative et il semble que rien n'a changé. Et c'est vrai, rien n'aurait dû changer. Mais maintenant, nous pouvons utiliser le haut, gauche, la droite ou le bas. sélecteurs ne sont pas des sélecteurs mais des propriétés. Donc on peut dire de déplacer ça du haut, en descendant. Déplaçons cela vers le bas à dix pixels. Ok, donc ce n'était pas très lisse, c'est en bas de 30 pixels. Et déplacons ceci vers la gauche ou vers la gauche, 30 pixels aussi. Et quand on les active et les désactive, on peut voir que c'est en fait bouger. Il bouge tout l'élément pour nous. Et donc encore une fois, ce que fait le positionnement relatif, c'est qu'il dit, ok, donc c'est là que votre élément se trouve par défaut sur votre page. Mais changeons notre position en relative. Donc, par rapport à l'endroit où il est généralement kystes ensembles, à partir du haut, déplacez-le vers le bas 30 pixels de la gauche, déplacez-le vers la droite, 30 pixels. Alors disons qu'au lieu de haut, on peut dire en bas. Et vous pouvez voir que cela a réellement déplacé hors de ma fenêtre. Viewport étant cette grande section blanche ici. Et on peut l'activer et le désactiver aussi. Et au lieu de gauche, on peut dire à droite. Et cela fait exactement le contraire. Et nous allons les activer et les désactiver aussi. Et donc c'est un positionnement relatif. Maintenant, là où cela arrive vraiment, vraiment pratique est quand vous devez déplacer quelque chose juste un peu hors de l'endroit où il se trouve naturellement. Peut-être que vous utilisez déjà votre rembourrage, vous utilisez déjà votre marge. Vous utilisez un rembourrage négatif ou une marge négative. Et vous devez en quelque sorte éloigner ça juste un peu juste pour le rendre parfait. C' est là que le positionnement relatif entre vraiment en jeu. Maintenant, le positionnement relatif a une autre sorte de superpuissance. Et c'est quand il s'agit d'éléments enfants qui utilisent la position absolue, dont nous allons parler ensuite. 9. Positionnement absolu: Le positionnement absolu nous permet de déplacer un élément en fonction de son élément parent. Mais l'astuce ici est que l'élément parent doit être positionné relatif. Donc, en prenant le relais de cette dernière leçon, ce que j'ai ici n'est qu'une boîte normale. Et si je retourne à mon rédacteur ici, allons de l'avant et changer sa position en non absolu mais relatif. Et c'est cette boîte ici. Et faisons de l'espace pour travailler. Et cela ne fait vraiment rien de la dernière leçon. Maintenant, là où cela devient puissant, où le positionnement absolu entre en jeu est disons que j'ai une deuxième boîte. Alors faisons la deuxième boîte de tableau de bord. Et c'est une abréviation Emmett. Donc, si vous venez de rejoindre ce cours maintenant vous n'avez pas pris CSS 101 ou HTML one-to-one ou HTML2 01, où je parle d'eux aux abréviations. Tout ce que je fais ici est d'écrire un peu de CSS et dès que vous voyez cette abréviation M, vous pouvez appuyer sur onglet et il crée un div pour vous par défaut avec une classe de deuxième boîte, tout comme écrire CSS et ensuite vous appuyez sur onglet. Et disons que cela doit être dans le top rate. Revenons à notre page ici et rafraîchissons. Et ça dit juste en haut à droite. Maintenant, nous pouvons ajouter un style à cela, et disons que ce doit être une boîte dans le quadrant supérieur droit. Ce que nous pouvons faire est maintenant sélectionner cette case et nous pouvons dire deuxième boîte, position, absolu. Donnez-nous aussi une frontière. Bordure de trois pixels, bleu uni, juste pour que nous sachions où nous travaillons. Et qu'est-ce qu'on fait ? Position absolue littéralement rien ne change. Il vient d'ajouter une bordure par ici. Je vais zoomer encore plus ici. Maintenant, ce que je voudrais faire est que cela se déplace dans ce quadrant supérieur droit comme si je faisais un graphique avec un axe x et y et il a un axe x négatif et un axe y négatif. Ce que je peux faire, c'est parce que c'est la position absolue. Je peux maintenant dire, allons coller ça au sommet. Et ça va dire 0. Il est déjà là par défaut. Mais au cas où vous étiez élément n'est pas ce que cela va faire est de déplacer ceci vers le haut de la page. Et à titre d'exemple, faisons le fond. Donc les zéros du bas vont dire que la position absolue autour de cet élément relatif va rester au fond. Et puis on pourrait dire juste, 0. Et maintenant ça le déplace en bas à droite. Maintenant, pour bouger en tant que sauvegarde, tout ce que nous avons à faire est de changer ce bas en haut. Et donc nous avons mis la position absolue top est 0, non ? 0. Et tout cela va faire, c'est déplacer ça en haut à droite. C' est ce que nous voulions, mais nous voulions prendre comme ce quadrant complet ici. Donc, ce que nous pouvons faire, c'est dire une largeur de 50%. Et essayons une hauteur de 50%. Et maintenant, nous avons une boîte dans ce quadrant supérieur droit. Et c'est ce que la position absolue nous permet de faire. Cela nous permet de faire quelque chose comme ça. Maintenant, c'est un exemple moche, mais si on le voulait, on pourrait lui donner un fond de noir. Et allons-y et débarrassons de cette frontière. Et maintenant on dirait qu'on en a découpé une partie. Maintenant, si nous voulons obtenir encore plus de fantaisie, étaient souvent ne vont pas travailler avec les frontières tout le temps. Alors allons-y et débarrassons-nous de cette bordure noire sur notre élément parent à la boîte, l'élément relatif. Allons-y et débarrassons-nous de ça. Et maintenant, nous avons déplacé cette boîte quelque part où elle ne vit pas naturellement. Il y a donc cette boîte de 300 par 300. Vous pouvez le voir ici. Et nous avons dit de cette boîte 300 par 300 prendre 50% de la largeur, 50% de la hauteur pour un 150 par 150, déplacez-le en haut à droite. Maintenant, je vais juste annuler rapidement cela et je vais vous montrer ce qui se passe quand je prends position relative loin de l'élément parent. Donc je travaille sur la boîte ici. Et si je me débarrasse de la position relative, il va directement à la page entière. Il prend 50% de la largeur de la page et il prend 50% de la hauteur des pages ou de la fenêtre d'affichage, en fait pas toute la page, mais juste le port de vue ici, ce qui pourrait très bien être la même chose selon votre page. Donc oui, si jamais vous voulez qu'un élément soit absolument positionné, vous devez vous assurer que votre élément parent utilise la position relative. Non, ça ne fait aucun mal. Vous remarquerez que quand j'activerai et éteindrai ça, la boîte à gauche ici ne change rien. Il change simplement le comportement de ses éléments enfants. Et c'est un concept vraiment important à comprendre dans CSS. Parce que quand nous arriverons à la fin de ce cours, nous allons travailler avec beaucoup d'éléments enfants. 10. Positionnement à l'ordre à l'ordre: Jetons un coup d'oeil au positionnement fixe et fixe. C' est difficile à dire avec un microphone, unpositionnement fixe, positionnement fixe bâtons de positionnement fixes et des éléments à une certaine partie de votre fenêtre. Et il vous permet de faire glisser la page vers le bas lorsque la page se déplace vers le bas. C' était en fait un exemple terrible. Tu sais, quand tu es sur un site web et qu'il y a un en-tête et Scott aime la navigation, un logo et tout ça. Et lorsque vous faites glisser la page vers le bas, elle glisse vers le bas de la page avec vous. C' est un positionnement fixe. Maintenant, je viens de réinitialiser ma page, avoir un style et une boîte. Sélectionnez cette boîte et ajoutez un peu de style. Donc, cette boîte, disons va avoir une bordure, un pixel rouge solide. Et une couleur de fond de, rendons ce look un peu plus élégant. F5, E5.5. Et ne faisons pas bordure d'un pixel rouge solide. Faisons la frontière en bas. Deux pixels, solide, CCC. Et vous pouvez voir ces couleurs apparaître ici. C' est une extrémité blanche cassé, un gris clair. Et changeons ça maintenant. Ok, il n'y a pas de contenu là-dedans, mais ajoutons du contenu. Disons que c'est un en-tête. Et d'accord, et c'est zoomer dans la direction opposée que je vais. Et d'accord, donc ça n'a pas l'air génial. En fait, nettoyons un peu ça. Débarrassons-nous de cette marge corporelle. Faisons ça. Le corps. Il y a un rembourrage dont je ne me souviens plus. Faisons la marge 0. Réinitialisons simplement ceci et rembourrage 0. Donc, ces coins de cet en-tête touchent réellement les côtés, parfait. Et dans cet en-tête, allons de l'avant et donnons à cela un remplissage de 40 pixels. Non, c'est beaucoup trop odieux pour cette démonstration. Voir 20 pixels. Ok, ça n'a pas l'air trop mauvais. On peut vivre avec ça. Maintenant. Disons que nous voulons faire défiler la page maintenant je n'ai pas assez de contenu pour faire défiler la page ici. Mais ce que je peux faire est de dire que les besoins du corps ont une hauteur minimale ou une hauteur fixe de, disons, 3 mille pixels. Et tout cela va faire, c'est me laisser faire défiler tout le chemin vers le bas comme si j'avais plus de contenu. Et si je voulais faire défiler vers le bas et qu'on voulait que ça reste avec moi ? On peut le faire. Et toujours dire ici est la position fixe ? Maintenant, cela peut être un peu Jackie, selon le navigateur que vous utilisez, en fonction de la version du navigateur que vous utilisez. Et vous pouvez réellement voir qu'il est petit jackie, C'est un peu comme un élément en ligne et un élément de bloc en ligne et il n'a pas pris toute la largeur. Eh bien, nous devons faire est de définir une valeur, en haut, à droite, en bas ou à gauche. Et ce que nous pouvons faire, c'est que nous pouvons dire, coller ceci en haut de la page, le faire coller à gauche de la page comme c'est actuellement le cas. Mais aussi donner à cela une largeur d'un 100% de la page. Et je vais le déplacer un peu. Et on y va. Maintenant, je fais défiler la page et vous pouvez réellement voir ma barre latérale ici comme je le fais défiler en restant collant. Maintenant, c'est un très mauvais exemple. Un meilleur exemple serait si j'ai un paragraphe ici et que je jette un peu de Lorem. Et j'ai juste copié ça encore et encore et encore et encore et encore et encore et encore et encore et encore. Et donc nous allons être en mesure de voir que cette page peut réellement défiler. Donc j'ai gardé ce rafraîchissement. Et en haut de ma page, j'ai mon ipsum lorem, mais comme je fais défiler vers le bas, il reste maintenant avec moi. C' est un positionnement fixe. Cela le rend plutôt collant en haut de la page. Maintenant, le positionnement collant est un autre type de positionnement. On va parler, on va l'aborder ensuite. Cependant, le positionnement fixe est vraiment, vraiment agréable car il va se superposer au-dessus de votre page entière. Donc vous savez, quand vous êtes sur un site Web et qu'il obtenu, il y a cette petite chose ennuyeuse en bas à droite. Et c'est comme des messages de soutien ou quoi que ce soit. Et c'est en ligne. 50% de tous les sites de nos jours, c'est un peu irritant Pour être honnête, mais ça colle avec vous peu importe où vous êtes sur la page et les couches au-dessus de tout. C' est ce que la position fixe fait pour vous. Ce que j'aimerais que tu fasses, c'est que tu lui donnes une chance. Créez un en-tête fixe, comme ce que j'ai. Lancez un tas de contenu ici. Vous aurez besoin de suffisamment pour que votre page puisse réellement faire défiler, puis défiler votre page vers le bas et assurez-vous qu'elle se superpose sur tout. 11. Positionnement collé (comme des en-têtes modernes): Le positionnement collant est relativement nouveau à CSS. Il nous permet d'avoir un en-tête pour coller à son élément parent. Donc, dans la dernière leçon, nous avons regardé le positionnement fixe, où il a été fixé à toute la page, votre fenêtre entière en fait. Et nous venons de faire un en-tête qui défilait tout le long de la page avec nous. Et ça ressemblait beaucoup à ça. En fait ressemblait exactement à ça parce que c'est ce que nous avons écrit. Maintenant collant peut faire essentiellement la même chose, donc fixé. Et on peut dire que c'est collant. Et vous pouvez voir que je fais défiler la page vers le haut et vers le bas, elle reste avec moi aussi. Cependant, la différence entre collant et fixe est fixé va être ici peu importe quoi. Et même si je fais défiler la page où il n'y a pas de contenu supplémentaire, ça va rester là. Alors qu'avec collant, il va être collant à son élément parent. Alors allons de l'avant et créons un exemple ici. Nous avons cette boîte, et sélectionnons cette boîte. Et nous allons faire afficher collant. Ok, donc je viens d'écrire un tas de trucs de cette dernière leçon. Je donne au corps une marge de 0, rembourrage de 0, hauteur par défaut de 3 mille. En fait, nous n'avons pas besoin de ça non plus. Et la boîte est positionnée couleur de fond collante est la même que la dernière leçon. Bordure inférieure comme un peu de rembourrage. Allons-y et débarrassons-nous de celui-là. Et quand je rafraîchis la page, on a juste ce bar ici. Maintenant, allons de l'avant et jetons ceci à l'intérieur d'un élément parent. Nous avons donc cette boîte et nous pouvons avoir un paragraphe avec faible RAM dans votre copier-coller, coller, coller, coller, coller, coller. Et si je fais un zoom avant, on verra que ce n'est plus collant. Et donc oui, ce n'est pas collant, mais on peut le rendre collant. Cela nécessite en fait une autre propriété ici. Donc, parce que sa position est collante, il doit également avoir en haut à droite, en bas à gauche, généralement il est juste en haut. On a une bonne propriété ici, on va dire 0. Et ça dit juste où être collant, sinon il ne sait pas. Et maintenant, quand je fais défiler la page, elle reste collante. Maintenant, c'est la première partie de deux. La deuxième partie est de le rendre collant seulement pour cette section particulière où il y a toutes ces choses ici. Alors allons de l'avant et ajoutez un style à votre style pour avoir une couleur de fond rouge et une couleur de blanc. Actualisez une page. Et nous allons voir, oh, j'ai oublié de rendre ça collant en ajoutant top 0. Alors, restez au sommet. On y va. Alors maintenant, c'est collant. Ajoutons une autre section sous ce bleu et cela change aussi cet en-tête. Alors allons de l'avant et copions tout ce truc. Et j'ai juste effondré ça avec une petite flèche ici. Et allons en dessous. Et celui-ci va être de couleur de fond bleu. Et le changement de ce qu'il y a ici. Alors disons la deuxième partie de notre boîte. Maintenant, nous utilisons, nous réutilisons CSS. Et dans la partie supérieure ici, faisons la première section. Ok, remontons en haut de la page. Rafraîchir. Oh, on ne voit pas très bien cette couleur. Couleurs égales au noir. C' est mieux. Donc c'est la première section, et quand je fais défiler vers le bas, ça va rester là. Et la section 2 se détache du chemin. Et puis leur Section 2. Et quand je fais défiler vers le haut, la première partie revient en jeu. J' aime vraiment cette partie. C'est vraiment sympa. Cela était vraiment difficile pour nous de le faire, mais il vient par défaut avec CSS3 ces jours-ci, ce qui est vraiment, vraiment sympa. Donc, c'est ce qui est collant maintenant en résumé, vous avez besoin de position collante, vous avez besoin d'une valeur supérieure. Nous avons donc une valeur maximale de 0. Et tout ce qu'on a fait ici, c'est qu'on a un élément parent. J' ai quelques CSS en ligne ici. Pas la meilleure façon de faire les choses, mais cela a vraiment conduit tout l'exemple à la maison. Donc nous avons un conteneur de parents ici. Et puis à l'intérieur, nous avons la position collante. Et il va être collant autour de tout ce contenu parce qu'il est collant à son élément parent. Maintenant, ce que je voudrais que vous fassiez, c'est de donner un coup de feu parce que c'est vraiment important pour rendre les sites Web et agir vraiment, vraiment sympa sur les appareils mobiles, ce qui fait partie du développement web responsive. Et cela fait partie de CSS plus avancé. Donc, savoir la position collante va être très, très utile pour vous. Alors s'il vous plaît donner ceci un coup si vous êtes coincé, n'oubliez pas, vous pouvez toujours poser des questions et apprendre à coder le groupe Facebook. 12. Contrôler du texte débordant: Le débordement est le moment où vous pouvez construire la largeur et la hauteur d'un élément. Mais alors vous courrez en quelque sorte le risque de votre contenu ou d'un lac débordant à l'extérieur de celui-ci. Dans cette leçon, je vais fournir un exemple et comment vous pouvez créer comme une barre de défilement à l'intérieur de vos boîtes. Maintenant, nous avons quelques options différentes. Nous pouvons choisir de cacher le débordement. Nous pouvons laisser les utilisateurs défiler à gauche et à droite, haut en bas ou tout simplement de haut en bas. Le plus souvent, nous ne voulons vraiment que l'utilisateur fasse défiler à l'intérieur d'une boîte de haut en bas. Alors allons de l'avant et ajoutons du contenu à cette boîte. Maintenant, j'ai juste cette boîte régulière que nous avons travaillé avec cela tout au long de ce cours sont jusqu'à ce que cette partie du cours de toute façon, c'est, c'est un ipsum lorem ici. Et ajoutons une autre ligne et une autre ligne. Et rendons ça très long. Et l'idée ici est que cette boîte est censée être de 300 pixels de large sur 300 pixels de haut. Et cela va être plus contenu que ce que cette boîte peut contenir. Donc, si je rafraîchis cette page et zoom avant, woo, ce n'est pas tout à fait suffisant. Allons de l'avant et copions ceci juste quelques fois de plus. On y va. Et l'idée ici est que si je fais un zoom arrière, nous avons cette boîte et le contenu artistique en sort. Maintenant, la raison pour laquelle cela se produit est parce que nous avons défini une largeur et une hauteur. Nous avons dit spécifiquement avec celui-ci, la hauteur de cette boîte est de 300 pixels et il doit être de 300 pixels parce que c'est peut-être ce que nos concepteurs ont dit ou concepteur. Il doit être de 300 pixels, ne peut pas être plus grand. Il n'est pas permis de grandir, sinon ça va avoir l'air un peu bizarre. Donc, ce que nous pouvons faire est d'ajouter cette petite barre de défilement sur le côté droit ici. Et nous le faisons assez facilement. Donc, sur notre classe de boîte, tout ce que nous avons à faire est de dire débordement. Et changeons cela en un document HTML. Encore une fois, j'ai lu beaucoup de Django, donc mes fichiers HTML par défaut à un modèle Django. Par défaut, vous devez automatiquement utiliser HTML par défaut, dès que vous avez l'extension HTML point dans votre nom de fichier. Donc débordement, nous avons quelques options différentes ici. Et c'est vraiment génial. Je vais jouer a été déplacer ma souris là et il dit syntaxe, visible, clip caché, défilement automatique. Faisons-le, faisons-le caché d'abord. Et donc si nous voulions cacher ce contenu, caché cachera ce contenu supplémentaire. Il y a plus de contenu ici. Et nous pouvons réellement voir quand je survole ce texte, que ce texte reprend toute la section, mais il est caché. On peut aussi dire visible. Et c'est juste la valeur par défaut. C' est ce qu'on a vu à l'origine. Et ensuite on peut faire de l'auto. Et c'est celui que vous allez vouloir le plus souvent est de faire défiler ici, retourner votre auto débordement. Et quand je me rafraîchis, ça me permet de faire défiler de haut en bas comme ça. Maintenant, cela va être vraiment important si vous créez une zone Lake, une liste de fonctionnalités de produit. Vous ne voulez pas qu'il prenne toute la page et que votre utilisateur fasse défiler pour toujours. Et ils peuvent choisir sur un appareil mobile de simplement faire défiler dans cette boîte. Ou si vous avez une section Foire aux questions, la même chose. Vous ne voulez pas prendre toute la page. S' il y a comme 100 questions, vous voudrez peut-être juste qu'il prenne comme 300 pixels et ils peuvent faire défiler les réponses ici. C' est donc débordant. Allez-y et donnez un coup de feu. Rappelez-vous que vous devez définir une hauteur I, vous devez avoir plus de contenu que ce que vos éléments peuvent actuellement contenir avec cette hauteur, puis définir le débordement sur auto. Et ça va juste te donner ce petit bar comme ça. 13. Le centre des éléments de bloc au milieu de la page: Pour centrer horizontalement un élément. Nous devons utiliser les éléments de bloc afin qu'ils puissent réserver toute la largeur de son type de section. Et il essaie de réserver comme toute la largeur. Je suppose que je vais le démontrer dans une seconde. Et puis on peut utiliser Margin-gauche auto, Margin-droite auto. Et donc tout ce que j'ai ici est un bloc, et je ne veux pas que ce soit un bloc en ligne, je veux que ce soit un bloc, ce qui est la valeur par défaut. Donc je n'ai pas vraiment besoin de ça pour un div. Et donc j'ai quatre pixels, bleu uni, minWidth et largeur maximale. Changons simplement cela à une largeur et une hauteur. J' ai copié le mauvais fichier. Et c'est bon. C' est assez facile à changer. Donc, avec les 400 pixels et une hauteur de 400 pixels. Et quand j'ouvre ceci dans cet élément ou cette page dans mon navigateur, nous pouvons voir que j'ai cette boîte maintenant disons que je voulais qu'elle soit juste au centre. Ce que je peux faire, c'est que je peux dire ici, et je vais agrandir ça. Marge gauche auto. Et cela va automatiquement appliquer à nouveau toute la marge. Donc on l'a déplacé vers la droite. C' est plutôt cool. Mais si on voulait qu'il soit au centre, on fait de la marge, non ? Auto. Et cela l'équilibre de part et d'autre. Et un raccourci que vous allez souvent me voir faire est quelque chose comme une marge. Disons que le haut va être 50 pixels et gauche et droite vont être automatiques. C' est en haut, c'est vrai, c'est en bas. C'est à gauche. Et pour que nous puissions les désactiver parce qu'ils ne sont pas utilisés. Et maintenant, nous avons la marge tout autour et notre élément est centré. Pourquoi c'est important ? Parce que finalement, vous aurez besoin de pouvoir centrer un élément en fonction de sa marge, pas seulement du texte, vous voulez le centrer en fonction de sa marge. Donc c'est toujours centré. Maintenant c'est à ce stade que tu te demandes probablement, wow, OK, c'est cool. On fait toutes ces choses, mais ça n'a pas l'air très sympa. Et le problème avec l'apprentissage CSS, que vous avez besoin d'apprendre ces petits composants, ces petits conseils et astuces. Avant de pouvoir réellement commencer à faire quelque chose de vraiment beau, nous devons savoir comment tous ces petits composants fonctionnent ensemble. Et c'est ainsi que nous centrons quelque chose au centre de notre page. Et faisons-le, faisons-le, faisons-le . On y va. Il est au centre de notre page en utilisant des marges. Allez-y et donnez ça un coup quand vous serez prêt. Passons à la leçon suivante. 14. Sélecteurs CSS avancés: Bon, jetons un coup d'oeil aux sélecteurs avancés. Nous avons quelques sélecteurs différents avec lesquels nous pouvons travailler. En fait, il y a une tonne de sélecteurs en CSS, mais nous allons travailler avec les sélecteurs de descendants, les sélecteurs d' enfants chez les sélecteurs de Jason et les sélecteurs de frères généraux. Alors allons de l'avant et créons un tas de boîtes ici. Et je vais mettre ça dans un parent avec une carte d'identité appelée parent. Et remontons ça. Et créons toutes ces boîtes. Et stylisons ces boîtes aussi bien. Donc on a une boîte à points et on va lui donner une hauteur de 20 pixels et une bordure d'un pixel, bleu uni. Ça va juste créer un tas de ces empilés l'un sur l'autre. Et c'est ce que nous voyons sur notre page. Ce n'est pas la plus belle chose jamais, mais c'est une leçon de sélecteur. On n'en a pas besoin pour avoir l'air bien. Nous n'avons pas besoin de faire trop d'autre chose que de sélectionner ce que nous voulons actuellement qu'il sélectionne. Donc, ce que nous pourrions faire est comme un sélecteur général de descendant, nous utilisons juste un espace et nous avons appris à ce sujet et CSS 101. Donc on pourrait dire parent, c'est l'ID parent et ça va correspondre à ça. Et puis tous les enfants de la boîte ici. Et nous le faisons avec un espace. Et donc quand je garde ça, retournez ici et je me rafraîchis, nous allions voir que rien ne change et c'est prévu. Mais tout ce que nous disons c'est que s'il y avait une boîte en dehors de ça et que c'est dû à cette boîte, ce n'est pas une boîte bordée bleue. Nous pouvons voir que cette boîte, même si nous faisons un clic droit et inspectons, a la classe de boîte, mais elle n'est pas stylée. Et c'est donc un sélecteur de descendant. De même, nous pouvons également faire seulement des sélecteurs d'enfants. Donc, au lieu de explicitement, en disant explicitement le sélecteur descendant, nous pouvons dire l'utilisation diélectrique de l'enfant le signe supérieur à. Voici votre parent, votre sélecteur d'enfant, et voici votre enfant. Et en fait, nous pouvons réellement voir que quand nous allons ici dans VS Code, il utilise le même symbole ici. Donc, nous avons div boîte à points, c'est notre classe et notre élément. Et puis nous avons ce signe plus grand que celui qui va à notre parent. Et ça va faire exactement la même chose qu'un sélecteur de descendant. Et quand je me rafraîchis, rien ne change. Maintenant, nous pouvons faire cette chose où nous sélectionnons des sélecteurs adjacents. Donc on peut dire « parent ». Et puis je veux sélectionner toutes les boîtes ainsi que d'autres boîtes. Et nous pouvons dire que la couleur de fond est égale au rouge. Et donc celui-ci est notre sélecteur adjacent. Et il va juste sélectionner des éléments qui sont, je suppose que adjacents à lui. Et donc il ne sélectionne pas le premier, mais il sélectionne le suivant et le suivant, et le suivant, le suivant jusqu'au bout. Et donc c'est un adjacent à sélectionner ou il ne va pas comme le premier, il va sélectionner les suivants. Et puis nous avons ce sélecteur général de frères et sœurs. Donc, nous pouvons tout sélectionner dans notre parent, sélectionner nos boîtes, puis nous avons ce tilde. Et donc sur mon clavier, c'est juste à côté du numéro un en haut à gauche de mon clavier. Il peut être différent selon que vous avez un clavier international. Mais un clavier anglais générique est juste à côté du numéro un et c'est ce tilde. C' est mon invité qui est un tilde. Je me souviens vraiment, c'est une ligne squiggly de toute façon. Et puis on peut dire boîte à points. Et nous allons changer la couleur d'arrière-plan de cette couleur d'arrière-plan. Mais notez pas la pièce jointe de fond, la couleur de fond au noir. Et cela ne va pas marcher parce que j'épeautre parent supposé être Perrin, sauver, rafraîchir, et il sélectionne tous les similaires. Et l'idée ici est que dans mon outil d'inspection, dans nos outils de développement, il va sélectionner le premier. Et puis il est dit, oh, en fait, plus tous les autres en bas de la route. Donc c'est un peu deux façons différentes de faire la même chose. Maintenant, ce que j'aimerais que vous fassiez, c'est aller de l'avant et donnez un coup de feu à ça. Une chose dont vous allez vouloir faire attention est que je sélectionne le parent plutôt que la boîte enfant pour styler tous ces éléments avec un élément bleu. Il remarque que cette case n'est pas sélectionnée. Mais je peux aussi faire est d'aller de l'avant et de se débarrasser des parents. Et quand je rafraîchis, vous pouvez voir que ma boîte bleue ou ma boîte non bordée a maintenant une bordure bleue, mais elle n'a aucun fond noir. Ou si je commente cela, il ya maintenant lu. Donc je vais juste annuler ça. Mais il faut faire attention à cette chose qu'on appelle la spécificité. Donc, si vous dites, sélectionnez l'ID parent, puis sélectionnez les éléments enfants ici, appelé boîte, et donnez-lui une hauteur de 20 pixels et une bordure d'un pixel, bleu uni. Ensuite, votre prochain sélecteur pour sélectionner exactement ces mêmes cases doit être exactement ce spécifique. Sinon, regardez ça. Et c'est un cours de crash sur la spécificité et comment cela peut être un cauchemar dans CSS. Donc, ce fond est maintenant noir. Mais si je vais de l'avant et je me débarrasse de cela, il va effectivement ignorer cela parce que c'est plus spécifique. Actualisez la page. Il a ignoré l'arrière-plan noir et il est allé avec les spécifiques donc il correspond en disant sélectionner l'ID parent, puis les classes de boîte, l'ID parent, les classes de boîte, il n' y a pas d'idée de parent juste dire n'importe quelle boîte avec une autre boîte à côté. Alors allez-y et donnez un coup de feu, jouez avec ça. N' hésitez pas à expérimenter avec spécificité. Si vous vous perdez un peu avec la spécificité, honnêtement, vous n'avez pas besoin de le savoir en ce moment, mais si vous êtes un passionné et que vous voulez vraiment savoir sur la spécificité, vous pouvez toujours aller et Google un peu aussi. Cela pourrait être des devoirs supplémentaires si vous avez vraiment l'impression que vous voulez apprendre CSS à 150% 15. Introduction aux pseudo: pseudo-classes sont un moyen de lier des états. Nous pouvons contrôler le style CSS lorsque vous passez le curseur sur un élément. Nous avons appris cela dans CSS one-to-one. Et c'est un pseudo sélecteur ou pseudo-classe, je crois qu'il s'appelle en fait. Mais avec d'autres pseudo-sélecteurs. Et nous pouvons également sélectionner des éléments qui ne devraient pas avoir une classe particulière. Ou nous pouvons même sélectionner l'élément exact sur une page en utilisant le nième sélecteur enfant. Donc, dans la leçon suivante, nous allons jeter un oeil sur le vol stationnaire nième enfant et le sélecteur non. 16. Sélection Pseudo : commencer: Pseudo-sélecteurs. Parlons de pas nième enfant et planer. Il y a quelques leçons, on a fait toutes ces boîtes. Allons de l'avant et surtout se débarrasser de cela. Et ce que je charge cette page, c'est juste un tas de lignes bleues. Donc c'est juste un tas de divs et on peut voir tous ces divs ici. Et donc j'ai un élément parent. Il a une idée appelée Parents, et nous savons que c'est le parent. Et un tas de boîtes. Maintenant un pseudo-sélecteur, nous allons utiliser le juste un deux-points standard à utiliser ou pour activer le sélecteur. Il y en a beaucoup. Mais dans cette leçon, nous allons vraiment seulement travailler sur pas nie-enfant et planer. Et il ressemble à ce deux-points et puis à votre pseudo-nom de classe. Donc celui-ci s'appelle hover, et nous pouvons changer cette couleur de fond en gris si nous le voulions. Et nous allons zoomer ici. Et quand je survole ces, ça change la couleur de fond. Non, ce n'est pas seulement la couleur de fond. Nous pouvons changer, nous pouvons changer la couleur de la bordure, nous pouvons changer la taille de la police, nous pouvons changer la famille de polices. Nous pouvons changer littéralement tout fonctionne exactement de la même façon. Mais tout ce que nous disons ici, c'est sélectionner toutes les classes de boîte. Donc, tout ça ici. Et quand vous mettez votre souris dessus, quand vous passez la souris dessus, que va-t-il faire ? C' est un pseudo-sélecteur. Maintenant, nous avons appris à ce sujet et CSS one-to-one réel rapide. Allons de l'avant et utilisons quelque chose d'un peu plus avancé. Donc on peut maintenant dire boîte. Utilisons le pas et voyons vraiment qu'il y en a beaucoup ici. On ne va pas passer par tout ça. Il ya juste tellement, et franchement la plupart d'entre eux sur gagné, généralement utilisé, mais ils sont pris en charge. Alors faisons une boîte de deux-points nulle. Et ce qu'on fait ici, c'est qu'on lui donne un autre sélecteur. Que ne devrait-il pas choisir ? Alors ne me sélectionne pas. Allons-y et copions ça et jetons ça dans le troisième, je ne sais pas. Et finissons ça. Faites une couleur d'arrière-plan de bleu. Donc, ils devraient tous maintenant avoir une bordure bleue, un fond bleu lorsque vous passez la souris dessus, ils vont tous devenir gris. Cependant, la boîte ne me sélectionne pas, c'est celui-ci, ne va pas avoir une couleur de fond bleu. Alors allons de l'avant et rafraîchissons et vous pouvez voir qu'il sélectionne celui-ci juste au milieu. Maintenant, une chose à garder à l'esprit ici est que CSS, comme la plupart des langages de programmation, fonctionne de haut en bas. Donc nous avons dit, donnez-lui une couleur de fond de gris quand nous survolons. Mais ensuite nous avons dit, si la boîte ne l'est pas, ne me sélectionnez pas, la classe n'a pas celle-ci. Ensuite, changez la couleur d'arrière-plan en bleu. Et quand nous retournerons ici, nous verrons que rien ne se passe, sauf celui-ci. Afin de résoudre ce problème, nous sélectionnons simplement cela et simplement le déplacer au-dessus. Enregistrer, actualiser. Et maintenant, cela fonctionne pour nous comme nous le voulons. Belle, beauté, beauté, BAD. Ok, disons que nous voulions en sélectionner un. Maintenant, il va y avoir un moment dans le futur où vous travaillez sur un site Web que vous avez, tout ce HTML et vous ne serez pas en mesure de modifier ce HTML. Peut-être que vous travaillez avec un framework comme Django et vous devez pouvoir simplement travailler avec du HTML droit. C' est très, très important. C' est l'une des compétences clés en CSS, est que vous devez être en mesure de ne pas toucher votre HTML et toujours sélectionner ce que vous devez sélectionner. Alors allons de l'avant et sélectionnons comme cette boîte ici. Disons que sélectionnez le nom. Et changeons cette couleur en blanc. Sur toutes les boîtes, la couleur va être blanche pour que nous puissions la lire. On y va. Nous voulons que celui-ci soit sélectionné et ensuite nous ne voulons pas que les autres soient sélectionnés. Maintenant, le problème est, celui-ci est le même que celui-ci est le même que celui-ci est le même que celui-ci. Et les trois derniers, ils sont tous identiques. Ils vivent tous à l'intérieur du parent qu'il n'y a rien d'unique à leur sujet. Comment sélectionnons-nous cela ? On peut claquer ça avec le nième sélecteur d'enfant. Et donc ce que nous pouvons dire est de sélectionner partout dans les boîtes, puis de faire nième enfant. Et il faut accolade bouclés, accolades mais parenthèses. Et ce nième enfant prend un numéro. Et alors lequel voulons-nous cela comme 12345. Donc nous jetons le numéro cinq là-dedans. Et changeons cette couleur d'arrière-plan. C' est déjà bleu. Cela ne va pas faire quoi que ce soit qui change la couleur d'arrière-plan en jaune. Et changeons cette couleur en noir. La couleur du texte est noire. Et quand nous actualisons notre page, il sélectionne juste celle-ci. Donc, nous savons qu'il y a un certain nombre de boîtes. Et nous avons dit, oh, nous avons juste besoin de sélectionner celui-ci, mais nous ne pouvons pas toucher au HTML. Nous pouvons dire sauter 1234, sélectionner le numéro cinq avec le sélecteur nième enfant, puis appliquer notre style. Maintenant, c'est vraiment important parce que cela pénètre dans sélecteurs avancés et cela va vous aider énormément à l'avenir à moment où vous travaillez avec un concepteur, très probablement. Donc, quand vous travaillez avec votre concepteur web, le concepteur web va dire, voici un tas de choses que vous pourriez travailler avec un dev back-end, de retour en profondeur dit, ok, nous allons faire ce travail dans Django et Il va y avoir un tas de cases à cocher, par exemple. Mais nous voulons que le troisième, le troisième élément de la case à cocher ait une bordure autour de lui de sorte qu'il dépasse vraiment. Donc, les gens sont plus susceptibles de cliquer sur celui-là. On peut le faire avec. Et l'enfant. Nous pouvons nous assurer que lorsque vous survolez quelque chose, les choses changent. Nous pouvons nous assurer que vous ne sélectionnez pas certains éléments. Vous pouvez les sélectionner tous, à l'exception de certains. 17. Introduction aux éléments pseudo: pseudo-éléments sont similaires dans la syntaxe aux pseudo-classes sont des sélecteurs. Ce que nous avons appris dans cette dernière leçon. La différence est la façon dont il agit. Donc, il semble très similaire, mais c'est légèrement différent. Donc, dans cette leçon particulière, nous allons nous servir de Colin. Donc nous pourrions sélectionner une boîte utilisée pour Colin et ensuite quel que soit le sélecteur soit appelé ou pas dans cette leçon, mais dans les prochaines leçons, nous allons apprendre sur ces pseudo-sélecteurs. Vous n'êtes pas des pseudo-sélecteurs, et ce sont en fait des pseudo-éléments. Donc ce que nous avons fait auparavant était une pseudo classe ou un pseudo-sélecteur de Hover. Cette fois, nous allons dire sélectionner la boîte et ensuite nous pourrions faire avant ou point de la boîte deux-points, deux-points après. Et cela va faire des choses différentes pour nous. Maintenant. Avant et après, c'est ce que nous allons apprendre d'abord, sont des éléments vraiment, vraiment intéressants. Parce que ce qu'il fait est, et nous allons aller plus en profondeur à ce sujet dans les leçons particulières. Mais il va réellement créer des éléments va faire certaines choses que HTML devrait faire. Donc CSS est en quelque sorte de franchir son, sa limite ici et entrer dans le monde du HTML. Maintenant, une autre différence est que ceux-ci n'ont pas vraiment d'actions. Alors que comme Hover c'est, tu sais, que tu planques sur quelque chose, tu fais quelque chose en fait. Ça va prendre une sorte d'événements de vol stationnaire. Vous mettez votre souris dessus et cela peut changer. Alors que comme avant et après, ceux-ci ne sont pas vraiment conçus pour le faire, bien que vous puissiez absolument le faire. Mais ceux-ci vont être fondamentalement ajouter des éléments HTML à votre page. Alors allons de l'avant et après. 18. Les éléments avant et après: Avant et après les pseudo-éléments sont beaucoup comme des éléments HTML en ligne. Mais nous n'avons pas besoin d'écrire un code HTML pour ceux-ci. Pour que nous puissions cibler certaines choses sur notre page. Et nous pouvons fondamentalement avoir plus de HTML ou au moins ajouter faux HTML et ensuite ajouter un tas de style pour que nous n'ayons pas vraiment à modifier notre HTML du tout. Donc, un bon exemple de ceci est une boîte. Et si je retourne à mon navigateur, c'est à quoi ressemble la boîte. C' est une page centrée qui a une bordure noire. C' est juste une boîte de 300 pixels par 300. Maintenant, ce qu'on peut dire c'est sélectionner cette boîte et puis avant qu'on puisse y faire toutes sortes de choses. Donc, la première chose que vous allez vouloir faire, c'est vous allez en vouloir, ajouter du contenu. Cela facilite la propriété contents et généralement nous ajoutons juste un, un espace vide là-dedans. Et ça dit juste au navigateur, Hey, regarde, il est censé y avoir un élément ici. Et vous savez, comme quand vous écrivez un div vide, il n'apparaît pas sur votre page. Même chose, mais nous allons ajouter un espace et ça s'assure qu'il apparaît sur la page. Ensuite, nous pouvons faire un affichage. Donc, nous pouvons dire bloc d'affichage. Et puis nous pouvons donner une bordure de dix pixels, rouge solide. Et voyons à quoi cela ressemble jusqu'à présent, ce ne sera pas parfait, mais ça va être assez proche. Et à ce stade, en fait, dès que je rafraîchis cette page, nous allons voir oui. Donc, nous avons quelque chose là-dedans qui est cool et nous pouvons réellement entrer dans notre élément d'inspection ici et le sélectionner. On peut faire toutes sortes de choses avec ça. Nous pouvons maintenant modifier ce CSS directement dans nos outils de développement. Allons de l'avant et donnons à cela une largeur de 100%. Voyons ce que cela fait. Et à ce stade, nous allons juste expérimenter. Vous pouvez voir qu'il lui donne une largeur d'un 100% bombé à cause des bordures, les bordures noires. Autrement dit, disons que nous voulons lui donner une hauteur et un 100%. Voyons si cela est honoré aussi. Ok, pas mal, pas mal. Disons qu'on voulait bouger ça. Alors nous allons dans un certain positionnement. Faisons la position relative sur toute la boîte elle-même. Mais alors dans le pseudo élément avant, ce faux élément qui n'existe pas réellement sur la page. n'y a pas de HTML ici. Nous pouvons éditer le HTML. On peut dire, bougeons ça. Alors déplacons ça en haut à droite. Et donc nous pouvons dire position absolue. Et nous savons que ça va marcher parce que c'est un parent. sélecteur utilise la position relative. Son élément parent utilise la position relative. Nous positionnons l'absolu. Faisons top moins dix pixels, et faisons à gauche moins dix pixels. Et on va voir ce genre de bosses ici. Oh, en fait c'est parce qu'on a des frontières là-dedans. Oui. Et dix pixels, bordure rouge solide. Donc on l'a juste chevauché. Allons-y et faisons 30 à la place. On y va. Maintenant, vous pouvez réellement voir que cela avant est au-dessus de la bordure noire. Et un meilleur exemple de ceci est si je fais la couleur de fond est égale au noir sur la boîte, pas le pseudo élément. Avant. Nous pouvons voir que le rouge est décrit au-dessus de lui. Maintenant, si nous voulions changer la façon dont nous pouvions absolument, nous pourrions le faire. Et cela fait partie du positionnement. On pourrait dire Zed index moins un. Et ça le couche derrière. Maintenant, de même, nous pouvons faire la même chose, mais avec après. Ainsi, chaque élément peut avoir un avant et après. On peut le faire. Boîte de deux-points, deux-points après. Et nous allons sélectionner cette boîte, mais nous allons créer un élément after au lieu d'un élément Before. Allons de l'avant et copions. La plupart de ces trucs vont être très, très similaires. Et nous pourrions effectivement regrouper ces sélecteurs si nous le voulions. Changons ceci de rouge massif en bleu massif. Et au lieu de haut, Faisons en bas et à droite. Et voyons comment cela se passe pour nous. Et ce ne sera pas exactement ce que vous attendez, mais ça va le faire, ça va montrer quelque chose et nous pouvons nous ajuster à partir de là. Ok, cool, cool. Nous avons donc ces éléments avant et après et ils sont derrière. Allons de l'avant et débarrassons de cet index. Ou nous pouvons en faire un positif est à l'index. J' en ai un ou laisser dire dix. Et ce n'est que des couches sur le dessus. Donc maintenant, nous avons cette belle petite erreur. Que se passe-t-il si nous nous débarrassons du fond ? Et c'est ça ? Ok. Donc juste après l'élément, il va être juste à l'intérieur. Vous pouvez voir qu'il y a cette bordure ici, ce tableau noir ou cette bordure de dix pixels. C' est juste à l'intérieur. Et si nous disions que le haut et la gauche sont les mêmes que l'avant ? Il le déplace exactement là où on s'attend à ce qu'il aille. Alors maintenant comme un exemple de plus, allons-y et débarrassons-nous de ce haut à gauche. Allons nous débarrasser de ce coin en haut à gauche. Et ça va être exactement les mêmes. On ne peut plus voir ça, mais on peut les sélectionner. Donc, nous avons un avant, et nous pouvons dire avant va être top moins 30 pixels et gauche. Et je vais juste déplacer ça dans la vidéo ici. Moins 30 pixels. D' accord ? Et nous pouvons sélectionner l'après et nous pouvons faire la même chose, mais fond différent. Moins 30 pixels, non ? Moins 30 pixels. Et cela nous donne juste ce joli petit effet de superposition. Maintenant, regardons un exemple du monde réel. C' est vraiment, vraiment cool, mais ce n'est pas vraiment un exemple du monde réel. Donc ce que je vais faire, c'est que je vais créer un HR ici, juste une règle horizontale. Et je vais créer un nouveau lien. Donc, un élément ne va pas aller nulle part et donner une frontière à ça. Allons de l'avant et mettons un peu de lorem ici aussi. Et jetez ça au centre. Et donc ça a défait mes affaires là-haut, c'est tout à fait correct. Et quand je zoomerai ici, je vais zoomer vraiment bien ici. Laissez-moi zoomer à 200%. Disons que nous voulons nous donner une frontière. Débarrassez-vous de ce style par défaut et donnons à cela une bordure appropriée. Et quand vous passez la souris dessus, c'est, la frontière devient plus grande. Donc, ce que nous pouvons faire est que nous pouvons sélectionner R, un élément, dire la décoration de texte. Aucun. Ne faisons rien là-dedans. Changeons la couleur en noir. Et voyons à quoi ça ressemble. Ok, cool. Ça s'insère. Vous voyez que c'est un lien, s'insère. On ne lui a pas dit de relier tant qu'on n'a pas plané dessus. Ce qu'on peut faire maintenant, c'est qu'on peut dire, Hey, Elément, avant. Faisons du contenu avec un espace. La largeur est égale à 100%. La hauteur est égale, disons, à quatre pixels. Cela nous donne une couleur de fond. Et je vais juste déplacer ça au centre de la vidéo. La couleur de fond va être bleue. Et voyons à quoi ça ressemble. Rien encore. Pourquoi c'est ça ? Eh bien, nous devons nous donner une position. Alors faisons sur notre élément principal ici, la position relative. Et puis sur l'avant, faisons la position absolue. En bas 0, à gauche, 0 a une largeur de 100%. Donc ça devrait venir maintenant pour nous. On y va. Donc, ça n'a pas vraiment l'air très bon du tout. Et ce n'est pas vraiment le but ici. Le but est de vous montrer que nous pouvons lui donner une frontière. Maintenant, ce n'est pas différent de la bordure en bas. Qu' est-ce qu'on a dit ici ? Quatre pixels, bleu uni. Mais maintenant en vol stationnaire, nous pouvons commencer à correspondre, à mélanger et à faire correspondre ça. On peut dire un vol stationnaire avant. Et changeons cette hauteur à 14 pixels. Donnez-lui un rafraîchissement. Et regarde ça. Maintenant, il couvre le texte. On ne peut plus voir le texte là-dedans. Et au lieu de cela, nous pouvons dire, toujours être sous le texte, être en dessous comme si nous étions, comme si nous étions en superposition un morceau de papier sur un autre morceau de papier. Donc on peut dire que l'indice va être moins un. Par défaut, tous les index zed ou Z sont à 0. On va dire, jeter ça juste derrière ce texte. Et maintenant bam, eh bien, on ne voit toujours pas que c'est, changeons ça du bleu au jaune. On y va. Ça a l'air un peu mieux. C' est encore très difficile à voir dans la vidéo. Faisons le rouge. C'est beaucoup mieux. Et donc maintenant, nous avons ce pseudo élément utilisant un état de vol stationnaire, et nous modifions cet élément lui-même. Donc, si nous allons ici et élargissons notre a, nous pouvons voir qu'il y a un avant. Et une autre chose cool que nous pouvons faire, c'est que nous pouvons cliquer sur ce point, cette ellipse. Et on peut le faire pour le vol stationnaire. Et cela plane sur cet état pour nous comme si nous mettions notre souris dessus définitivement. Et puis on peut cliquer dessus avant et voir ce qui se passe ici. Y compris le sélecteur d'un utilisant une pseudo-classe de survol utilisant un pseudo élément avant. Maintenant, ce que j'aimerais que tu fasses, c'est que tu lui donnes une chance. C' est très, très important parce que cela fait partie de CSS avancé. Nous entrons dans les parties charnues de CSS. Alors donne un coup de feu à ça. Essayez de créer un lien, essayez de créer des boîtes avec des éléments avant et après. 19. Changer la première ligne et la première lignes en utilisant des éléments pseudo: Avec le sélecteur de pseudo-éléments, nous pouvons cibler la première lettre d'un élément. Nous pouvons également cibler la première ligne d'un élément. Alors allons de l'avant et créons un paragraphe ici avec un tas de Lorem. Et on va mettre beaucoup de chaleur ici. Et tout va être dans un seul paragraphe. Et je vais mettre plusieurs lignes, juste garder mon code propre, mais ça va ressembler à un paragraphe sur la page. Alors vas-y. Ok, trop petit. Zoom avant. Et disons que c'est comme si nous étions en train d'écrire un site web ou recoder un site web pour un journal ou une sorte de magazine. Et nous voulons que cette première lettre soit énorme. On peut cibler ça. Nous pouvons dire dans notre style ici, cibler l'élément P. Et on peut faire la première lettre. Et puis nous pouvons faire la taille de police de, faisons quelque chose de gros. Faisons comme 50 pixels. Et ça va faire de ce que je suis juste le premier, pas les autres, juste le premier. Vraiment gros. Allons-y. Ok, ça va, c'est plus grand. Mais nous voulons que le texte s'enroule autour de lui. Et nous savons que nous pouvons faire des choses enveloppantes avec flotteur, flotteur gauche. Et c'est très, très important à savoir, mais c'est aussi quelque chose que nous avons appris et CSS 101. Donc, si vous n'êtes pas familier avec flotteur, vous voudrez peut-être vous familiariser avec flotteur. C' est très utile dans certains cas comme celui-ci. Et pour que L soit encore un peu trop grand. Mais ce que nous pouvons faire, c'est que nous pouvons sélectionner ce p, descendre vers le bas. Non, ce n'est pas là parce que ce n'est pas un élément. Sudo et on y va. Premier élément de lettre. Allons de l'avant et modifions la taille de la police. C' est juste une justice que je ne sais pas. Continuons à faire ce petit jusqu'à ce qu'il semble décent. Ouais, quelque chose comme ça. Et puis nous pouvons également ajouter une marge de Lac 50 pixels. Si nous voulions qu'il s'éloigne vraiment, nous pouvons ajouter une marge de cinq pixels pour le rendre un peu plus lisse. Et je vais juste déplacer ça. Et c'est le premier sélecteur de lettres. Alors allons de l'avant et ajoutons cette marge là aussi. Marge de cinq pixels. Maintenant, nous pouvons également sélectionner la première ligne, et ce ne sera pas nécessairement, cette ligne de code va être cette ligne. Et cela va dépendre de votre navigateur. Donc, nous entrons dans quelque chose d'un peu plus réactif ici. Allons-y et disons P. Première ligne. Et faisons le poids de la police de gras. Sauvez, rafraîchissez, et maintenant c'est boulé. La bonne chose à ce sujet, c'est que ça va toujours être la première ligne. Vous pouvez voir que ce ne sont que les quatre premières lettres ici. C'est vraiment difficile à voir. Je m'excuse pour ça. Mais si je fais ça, c'est toujours la première ligne. Peu importe la quantité de texte qu'il y a, c'est toujours la première ligne. Donc, c'est votre première lettre et vos pseudo-éléments de première ligne sélecteurs ou pseudo-sélecteur. Et honnêtement, vous n'allez pas l'utiliser trop souvent, mais il est bon de savoir qu'il est possible de le faire. Je ne vais pas te donner des devoirs pour celui-là, mais mets ça dans ta poche arrière, conserve-le pour plus tard. Sachez que cela est complètement possible au cas où vous travaillez avec un client qui a un site de style article comme un magazine ou un journal. 20. Mettre en évidence du texte avec une sélection: En utilisant la sélection, nous pouvons dire à notre navigateur quel texte devrait ressembler lorsque l'utilisateur le sélectionne. Donc, comme lorsque vous survolez et puis vous cliquez et faites glisser LED, vous pouvez voir que les changements miens dans le code VS un peu. Nous pouvons changer cela aussi dans le navigateur. Alors ouvrons ça en chrome. L' ouvrir dans Chrome. Nous avons lorem ipsum, rien de majeur ici. Et quand nous sélectionnons, c'est juste le navigateur par défaut. Donc, vous savez, honnêtement, il n'y a rien de mal à ça. Mais si vous vouliez le rendre un peu plus intéressant, surtout si vous avez un article, un site comme Medium, où je crois que si vous passez la souris dessus, il change la couleur de fond en vert et la couleur en blanc. Donc, allons en fait et faisons cet exemple exact. Donc, ce que nous pouvons faire ici, c'est que nous pouvons dire, et cela n'a même pas besoin d'un élément particulier. Nous pouvons simplement dire, chaque fois que vous faites une sélection, changer cette couleur d'arrière-plan en vert, et changer la couleur en blanc. Et maintenant, quand je sauverai et qu'on verra que c'était avant. Rafraîchir. C' est ce que c'est maintenant. Et c'est la sélection. Personnellement, j'aime ça. J'aime ça quand je suis sur une page et que je veux copier des textes que je sais exactement où je suis, je sélectionne ceci. Il me dit que le développeur frontal qui a fait ce site Web a réellement mis la pensée dans le temps et les efforts pour le faire. 21. Comment ajouter des transitions fluides: Jetons un oeil aux transitions. Les transitions nous permettent de faire des ajustements en douceur. Donc comme, vous savez, quand vous passez la souris sur un élément et que vous déplacez comme dix pixels le seront actuellement, il semble un peu junkie. C' est très brusque. Et au lieu de cela avec une transition, nous pouvons la rendre lisse pour qu'elle se déplace doucement vers haut et nous pouvons lui dire d'écouter un certain type de changement comme une largeur, une marge ou une position, n'importe quelle sorte de chose. On peut vraiment faire passer beaucoup de choses ici. Mais dans cet exemple, nous devrions faire la transition entre vous lien. Alors faisons un lien dans un bouton. Alors faisons un bouton. Et ça ne sera rien dedans. Et ça va dire, cliquez sur moi. Et donc ciblons ce lien. Et cela lui donne une couleur de fond de fff. Donc ça va être blanc. Il va déjà avoir l'air blanc, mais donnons-lui un blanc de toute façon, nous pourrons faire une transition plus tard. Nous pouvons dire que l'affichage est un bloc en ligne, et nous pouvons dire que le remplissage en haut et en bas va être de cinq pixels. Et à droite et à gauche va être 15 pixels. Cela donne aussi une couleur et une couleur explicite. Et cela va nous aider dans nos transitions. Donc les couleurs ne vont pas être blanches va être noir 000. Et voyons à quoi ça ressemble. Oui. D'accord. Maintenant, pas tout à fait texte-décoration. Aucun. Et donnons-lui une frontière. La bordure est d'un pixel, noir massif. Et allons-y et rendons ça plus grand. Zoom, zoom, zoom, zoom avant, avant. Je suis à 500%, donc c'est le bouton. Et quand vous passez la souris dessus et que rien ne se passe, ajoutons un survol. On peut dire un vol stationnaire. Et donc, quand nous survolons cela, changeons la couleur de fond pour qu'elle soit noire. Ou on pourrait faire une couleur hexadécimale 000. Et changeons la couleur pour être blanche ou fff. Allons-y et sauvegardons ça. Et d'accord, donc on a un état de vol stationnaire. C' est un petit jackie. Pas vraiment génial pour les épileptiques Pour être honnête, mais nous pouvons rendre cela beaucoup plus lisse en disant transition. Et que voulons-nous faire la transition ici ? On pourrait tout faire passer et on pourrait dire de prendre 0,2 seconde pour le faire. Donc, nous disons transition tout comme le premier paramètre. C' est ce que nous voulons faire la transition. Le deuxième paramètre est le temps que cela devrait prendre. Et lorsque nous actualisons la page, vous pouvez voir qu'elle s'estompe et s'estompe. Maintenant, c'est beaucoup mieux. Maintenant, nous pourrions réellement rendre cela beaucoup plus précis. Et honnêtement, ce n'est pas super performant parce que vos navigateurs recherchent maintenant chaque changement unique, il va chercher le remplissage d'affichage, le texte coloré, la déclaration, la bordure et la couleur d'arrière-plan sur l'état du survol. Peut-être qu'on ne veut pas ça. Peut-être qu'on n'a jamais voulu changer la couleur de fond. On peut dire changer cette couleur de fond. Au lieu de tout ce que nous changeons en couleur d'arrière-plan, correspond exactement à ce nom de propriété ici. Et ça va prendre 0,2 seconde. Maintenant, ça va changer. Cette couleur de fond va s'estomper et on peut vraiment être difficile à voir. Alors faisons comme 2,2 secondes. Et vous pouvez voir cette couleur d'arrière-plan lorsque je rafraîchis la page ici, cette couleur d'arrière-plan va prendre un peu de temps pour s'estomper, mais cette couleur va être instantanée. C. Ça a l'air cool. Je suppose que si tu aimes ce genre d'effet. Dites aussi virgule. Et j'aime mettre ça sur une autre ligne, la couleur. Changeons cette longueur de transition à quelque chose de vraiment long. Disons cinq secondes. Et quand je monterai ici, frappez rafraichir. Descendez. s'estompe et s'évanouit. Tellement gentil et lent. Maintenant, en général, vos transitions ne sont pas si lentes. Généralement, vos transitions sont de 0,2 seconde et celle-ci peut être de 0,5 seconde. Allons de l'avant et rafraîchissons quelque chose comme ça. Et donc ça rend ça un peu plus agréable. Maintenant, nous pouvons aussi changer des choses comme le rembourrage. Mais regardez cela quand je dis survol, rembourrage avec changement au remplissage de cinq pixels et 15 pixels. Changons ça pour doubler. Donc haut et bas vont être dix pixels. Gauche et droite vont être de 30 pixels. Ça va sembler un peu Yankee c que nous ne voulons pas vraiment que nous voulons qu'il soit agréable et lisse. Donc, ce que nous pouvons dire ici est une virgule, une communauté virgule et un remplissage. Et on pourrait dire 0,4 seconde ou parce que c'est tellement plus grand, on peut faire ça comme 1 seconde comme ça. Maintenant, ce n'est pas le plus bel exemple jamais vu, mais c'est un bon exemple. Et c'est vraiment bon pour le lac. Quand vous avez un site comme Allons to rocket man, n'apprenez pas wag tail.com. Et vous pouvez voir que ce vol stationnaire a un peu d'effet là-bas. Ou si vous deviez passer la souris dessus, c'est ce qu'on appelle une carte. Vous pouvez changer la couleur d'arrière-plan. Vous pouvez le faire fondre, s'estomper. Vous pouvez faire ce mouvement. Tu pourrais faire toutes sortes de choses avec une transition pour qu'il n'ait pas l'air si junkie. C'est donc une transition. Ce que j'aimerais que vous fassiez pour cette leçon, c'est de créer un lien, en faire un bouton, comme ce que j'ai fait, puis changer la couleur de fond lorsque vous passez la souris, vous n'avez pas besoin de faire tous les autres, mais juste modifiez la couleur d'arrière-plan lorsque vous passez la souris et assurez-vous d'ajouter cette transition à vos éléments principaux, pas votre pseudo-sélecteur, pas votre pseudo-classe. Ton élément principal. 22. Comment ajouter des arrière-plans dégradés: Ok, parlons de gradients. Il existe deux types principaux de dégradés. Il est linéaire et radial. Un gradient linéaire va d'un côté à l'autre. Tous les gradients radiaux émergent du centre. Maintenant, nous allons seulement travailler avec linéaire parce que ça a l'air beaucoup mieux. Et honnêtement, je ne pense pas avoir jamais vu un cas où un gradient radial semble bien. Mais si vous le vouliez, si vous voulez apprendre un peu plus que ce que je vais vous enseigner dans le cadre de ce cours, vous pouvez rechercher des gradients radiaux et nous allons probablement en voir un exemple de toute façon. Mais nous allons travailler avec gradients linéaires juste parce que, pour la plupart, ils ont l'air mieux, au moins, au cours de cette décennie en design web, il semble bon. Peut-être que les vieux styles reviendront et ça air bien d'avoir une sorte de dégradés radiaux mais des linéaires, alors qu'à ces jours, alors allons de l'avant et ajoutons une boîte, et c'est dû boîte. Et dans cette boîte, nous allons avoir une sorte de dégradés. Donc, ne l'appelons pas boîte, appelons-le dégradé. Et dans notre CSS, nous pouvons faire des gradients, sélectionner cet élément et nous pourrions dire l'image de fond fond va être un dégradé linéaire. Et cela va prendre une direction. Donc une direction, la couleur un, la couleur deux. Et donc cela ne va pas faire quoi que ce soit. Je vais laisser ça ici juste une seconde. Laissez cela sur l'écran et faisons une hauteur de 500 pixels. Et nous n'avons pas besoin de définir une largeur car c'est un élément bloc. Mais vous savez, pour une bonne mesure, c'est la largeur, 100%. Et il y a donc un gradient linéaire ici. Quelle sera cette direction ? Disons que la direction sera deux, non ? Donc ça va aller de gauche à droite. Ça va commencer par la couleur du noir, puis ça va aller en jaune. Et alors, allons de l'avant et charger cette page dans Google Chrome. Et maintenant, nous avons ce joli petit gradient. Ce qui est cool, c'est ça va de gauche à droite, mais nous n'avons pas besoin de le dire de gauche à droite. On peut le donner et l'angle. On peut dire quelque chose comme 45 DEG quatre degrés. Et ça change, ça change de noir dans ce coin en jaune dans ce coin au lieu de gauche à droite, c'est d'un coin à l'autre. Maintenant je vais être honnête ici, la plupart des gens ne mémorisent pas ça. C' est vraiment un truc plus vif. Les gens n'utilisent pas assez de gradients pour toujours être mémorables. Et c'est aussi difficile de comprendre exactement quel genre d'angle vous voulez. Donc, généralement, nous utilisons une sorte d'outil CSS Gradient. Et donc ce que je vais faire est juste de sauter sur Google et je vais taper générateur de gradient CSS. Et donc il y a CSS gradient point IO, Mozilla. C' est populaire. Celui-ci est populaire depuis un certain nombre d'années maintenant. Mais je veux dire, c'est juste comme le premier parce que j' ai dans d'autres cours donné à celui-ci une attention suffisante, allons-y avec CSS gradient dot IO. Et donc l'idée ici est que vous avez un gradient et nous pouvons le faire, nous pouvons faire radial ici. Alors allons-y et attrapons ça. Et j'ai juste fait glisser ça et ça s'est débarrassé de ça. Et donc faisons-le radial. Et c'est à ça que ressemble la radio. Il commence de l'intérieur et va à l'extérieur. Il y a donc un cas où ça a l'air bien. Dans ce cas, il semble bien. Ce que nous faisions, c'était entendre que cette couleur était noire et ensuite cette couleur ici. Et nous sélectionnons juste que l'un est blanc. Et donc c'est radial, c'est linéaire. Et on peut changer l'angle et tout ça en descendant ici, en changeant cet angle comme ça. n'y a pas d'angle quand il s'agit de radial. Et maintenant, la bonne chose à ce sujet est typiquement ceux-ci vous donneront exactement le CSS que vous cherchez. Et donc c'est vraiment sympa. Ça nous dit que c'est un gradient radial. C' est un cercle. Linéaire va être de 0 degrés. Allons de l'avant et changeons ça pour comme 68 degrés RGB 000, c'est RGBA noir, qui a l'alpha ici, c'est un, donc c'est complètement visible. Et 0% et puis encore, RGBA à 555255 à 55, c'est blanc. Une transparence à 100% ou peut-être que ce n'est pas le bon libellé. Quoi qu'il en soit, vous pouvez le voir complètement et ça va aller à 100 %. Donc ça commence à 0 et va à 100. Et on peut changer ça. C' est ce que ça signifie 100 %. Voyons, vous pouvez voir que ce nombre change là. Et à quoi ça ressemble, c'est qu'on peut rendre ça sympa et serré si on le voulait, quelque chose comme ça. Et puis vous pouvez avoir du texte sur la gauche. Vous pourriez avoir une image sur la droite si vous le vouliez, si vous vouliez faire passer celle-ci. Juste comme ça. Et vous pouvez avoir une image, une image de fond comme ça. Donc la plupart d'entre nous ne se souviennent pas vraiment de tout cela juste parce que nous l'utilisons si rarement. Ils sont gentils d'avoir. Mais d'habitude, nous utilisons juste une sorte d'outil qui va nous aider. Ce qui est vraiment sympa, c'est qu'on peut faire ça. Allez ici, cliquez à droite au milieu, et faisons ce vert. Et nous pouvons faire toutes sortes de choses avec ça, et nous n'avons pas à le comprendre à travers le code. Il y a des outils qui nous aident à le faire. Je suggère d'utiliser un outil pour quelque chose comme ça. Ce que je voudrais que vous fassiez, c'est aller de l'avant et Google CSS, générateur de gradient a utilisé cet outil, utiliser un autre outil, n'a pas vraiment d'importance. Ils font tous la même chose. Expérimentez, puis regardez le code qu'il vous donne. Copiez ce code, puis mettez-le dans votre page. Vous pouvez modifier l'arrière-plan dégradé entier de vos éléments corporels. N' oubliez pas de lui donner une hauteur de 100% si vous sélectionnez l'élément body ou une classe ou un élément div comme ce que j'ai fait. Et j'ai sélectionné le dégradé et ensuite je l'ai appliqué là. Alors allez-y et donnez qu'un tir est vraiment, vraiment amusant. Il ajoute une belle petite épice ici site aussi bien. 23. Comment How et gradients: En nous basant sur cette dernière leçon, nous pouvons créer une image d'arrière-plan afin qu'elle apparaisse plus sombre sans avoir à faire beaucoup de travail. Et maintenant, il y a quelques façons différentes d'y parvenir. On utilise un filtre que nous n'avons pas encore appris. Ou un autre est d'utiliser un dégradé à calque sur le dessus. Et dans cette leçon, nous allons utiliser le gradient sur le dessus. Juste parce que parfois vous voulez un dégradé sur le dessus et vous allez voir ça partout. Une fois que vous voyez cela, vous pouvez le voir comme partout sur Facebook. Vous pouvez le voir partout sur Twitter. Il y a des dégradés partout et ils sont beaux et élégants aussi. Donc, tout d'abord, allons de l'avant et sélectionnons l'élément du corps. Et je vais donner non, pas seulement le corps. Je veux dire, c'est comme le corps et les éléments HTML. Je vais donner cette hauteur d'un 100% et débarrassons de la marge et du rembourrage. Et puis je veux sélectionner juste l'élément du corps. Et ici, ce que je peux faire est que je peux dire que l'image de fond va être un dégradé linéaire. Donnons-nous comme un 180 degrés. Et disons que cela va passer du noir au noir, mais différent, opacité différente. Donc RGBA est 000, puis l'alpha va être 0. Et ça va commencer à 0%. Et puis ça va aller à RGBA 000, c'est encore noir, et ça va aller jusqu'à ce qu'on puisse dire 0. Donc, en fait, ça ne va pas faire quoi que ce soit, ça ne va pas du tout dégrader. Mais on peut dire 0,6 pour commencer par 60 % de noir transparent, puis deux. Et c'est tellement difficile à lire. Allons de l'avant et mettons ça sur de nouvelles lignes, quelque chose comme ça. On y va. Et c'est en fait une sorte d'entrer dans la programmation parce que c'est ce que ces parenthèses signifient. Cela signifie que c'est une fonction. Nous en parlerons en JavaScript. Une fois que nous avons fini avec CSS, nous en apprendrons plus à ce sujet en JavaScript. Mais ce que nous disons ici, c'est que nous avons un gradient linéaire, un 180 degrés, commencer par le noir , 60 %, voir à travers, aller à 80 % et ça va finir à 100 % sur la route. Voyons donc à quoi cela ressemble dans Google Chrome. Ok, donc c'est un joli petit dégradé. Allons de l'avant et faisons cela un peu plus. Oui, on y va. Donc, le plus tard sur le haut, plus sombre sur le fond. Maintenant, si nous voulions ajouter une image à cela, nous le pourrions absolument. Mais d'abord, nous avons besoin d'une image. Alors allons sur un Splash.com et jetons un coup d'oeil à cette image. Rock, prends celui-là. Et je vais cliquer avec le bouton droit de la souris et copier l'adresse de l'image. Et je vais faire un lien direct vers cette image. Et ce que nous pouvons faire ici, c'est des virgules. Et nous allons, peut-être en fait remettre ça sur sa ligne d'origine là-bas. Et j'aime faire ces alignements, donc ça a l'air sympa. Et puis nous pourrions dire URL, comme une image de fond régulière. Collez cette URL là, point-virgule. Et allons-y et jetons un coup d'oeil à ça. Ça a l'air plutôt bien. Maintenant, allons de l'avant et supprimons ce dégradé linéaire. Allons juste découper ça pendant une seconde. C' est à quoi ressemble l'image normalement avec un dégradé linéaire au-dessus de celle-ci. À quoi ça ressemble maintenant. Maintenant, la bonne chose à ce sujet est que nous pouvons ajouter du texte. Mais avant de le faire, allons de l'avant et ajouter des couleurs va être blanc. La taille de la police va être quelque chose d'énorme, comme 90 pixels. Et l'alignement du texte va être Centre. Et donc dans notre corps, nous pouvons maintenant dire, c'est une fusée. Sauvegardez ça comme une fusée. Et donc ce texte est un peu plus visible par rapport à cela. Si je vais de l'avant et que je supprime ça, tu sais, ce n'est pas mal, on peut toujours le voir. Allons, faisons même ça. Faisons le rembourrage. Top 200 pixels. Notez que nous allons plus loin, et c'est aller 500 pixels. Donc on ne peut même pas voir tout ça maintenant. C' est juste la nature de cette image. Et on ne peut pas changer l'image tout le temps. Mais ce qu'on peut faire, c'est remettre ces gradients linéaires ici. Et maintenant, nous pouvons le lire parfaitement bien. Maintenant, un cas dans le point est que si vous avez pris le CSS une, oh, une classe. Si vous avez un rocket man terne et attendez till.com, c'est exactement ce qui se passe ici. C' est même la même image. Maintenant, j'aimerais que tu lui donnes un coup de feu. N' oubliez pas que vous avez accès à ce fichier. En outre, vous pouvez poser des questions dans le groupe Apprendre à coder Facebook si vous avez des questions ou si vous êtes curieux de quelque chose, ou si vous voulez juste obtenir des commentaires. 24. Comment utiliser des polices Web personnalisés: Nous pouvons charger des polices web personnalisées sur notre site. Donc, les polices d'onde fonctionnent, c'est qu'il va essayer d'accéder à la police sur votre ordinateur. Et nous avons vu ce genre d'avant dans CSS 101, où c'est comme font-family et ensuite il a comme la première police et puis comme une sorte de retour. Et la plupart des gens ont comme Arial. Et puis ça va dire quelque chose comme une police serif et une police serif. Et donc il va essayer celui-là. S' il n'existe pas, il va essayer celui-là. Et s'il n'existe pas et qu'il va vous permettre de choisir l'ordinateur. Mais disons que celui-ci n'existe pas. Comment pouvons-nous le faire exister ? Maintenant, une bonne chose que nous pouvons faire est fondamentalement l'importer d'ailleurs. Donc, nous pouvons aller à polices dot google.com. Et allons de l'avant et prenons juste une police d'apparence cool que nous pouvons trouver quelque chose qui va vraiment sortir et qui va être un peu différent. Aucun d'entre eux n'est assez sauvage. Il y a celui-là, O. spécifique et donc j'ai juste cliqué dessus, sélectionnez ce cadran. Et je peux ajouter différentes variantes de police si je le voulais. Je ne vais pas le faire, je vais juste intégrer ici. Et nous pouvons importer soit via, directement via notre CSS, ce qui est assez cool, soit via notre HTML. Je vais faire la façon HTML. Alors prenez toute cette copie. Je m'excuse, c'est petit à voir, mais si vous suivez, ce sera plus facile sur votre ordinateur de le voir. Et puis au-dessus de notre style, suffit de coller ça là-dedans. Maintenant, nous ne savons pas encore quel est ce nom. Nous pensons que son o spécifique, mais pourrait être minuscule. Les majuscules peuvent avoir un nom différent. Nous, on ne sait jamais. Donc, ce que nous faisons est de revenir ici et il dit des règles CSS pour appliquer les familles de polices, Pacifica ou cursive. Allons de l'avant et changeons ça. Et ce que je vais faire, c'est que je vais le commenter et on va voir un Lorem Ipsum, Lorem Ipsum. Et continuons à changer cette taille de police pour quelque chose de plus grand, quelque chose comme 45 pixels. Et c'est ce que nous voyons. C' est notre police standard. Si je décommente Pacific, oh, ça change. Maintenant, voici le truc est que si je n'ajoute pas cette ligne ici, si je viens de couper ça de mon code. Il va à cursive. C' est ce que mon ordinateur utilise lorsqu'il est dit d'utiliser cursive. Donc ça veut dire, Hey, l'ordinateur de Caleb utilise Pacifica, mais s'il n'a pas Pacifica utiliser cursive, eh bien, Pacific o n'existe pas. Et donc ce que nous avons dit, faire exister dans cet élément HTML va dire, hey, allez ici, téléchargez ce fichier appelé Pacifica. Dans ce fichier, nous savons qu'il s'appelle Pacific O. donc nous pouvons maintenant y avoir accès et l'utiliser. Juste comme ça. Ce que je voudrais que vous fassiez, c'est donner une photo, aller sur les polices dot google.com, choisir une police qui est gratuite. Ils en ont ici qui sont payés. Ne payez pas pour une police à ce stade, s'il vous plaît. Il suffit de trouver une police gratuite comme Robodog. Robodog est un bon. Vous pouvez choisir tous les styles différents si vous le souhaitez. Ce sont aussi des poids de police différents. Donc nous sommes aujourd'hui comme nous, comme si c'était comme ça. Et nous pouvons utiliser ces différentes familles de polices ici. Allez-y et donnez-lui un coup de feu. Essayez d'utiliser une police personnalisée. 25. Quelles sont les transformations ?: Ok, parlons des transformations. Une transformation est un moyen de faire pivoter, d' incliner l'échelle ou de se déplacer dans un élément loin de sa tache naturelle. Maintenant, dans cet exemple, j'ai juste une boîte régulière sur ma page. Et quand je viens d'ouvrir ceci à la boîte normale, En fait, nous allons, ajoutons une marge à cela. Faisons marge 50 pixels et auto. Et ça va centrer une ligne pour moi. Maintenant, allons de l'avant et passons par certaines de ces transformations. Maintenant, les transformations ne sont pas difficiles. On peut les mélanger et les faire correspondre si on le voulait. Mais allons-y un à la fois. Alors commençons par traduire à celui-ci est intéressant. Traduire, je pense que personnellement n'est pas le nom propre. La propriété est appelée transformation. Et la clé, ou la déclaration complète va être transformée traduire, puis il faut des parenthèses. Et nous pouvons déplacer cela sur l'axe des x et l'axe des y. Donc, nous pouvons dire nous déplacer sur l'axe des x, un 100 pixels, sur l'axe des y, un 100 pixels. Et quand nous retournons à notre page, rafraîchir, nous pouvons le voir réellement déplacé. C' est ce que Translate fait. Il le déplace juste, il traduit là où il se trouve naturellement sur la page. Nous l'avons fait avec position, position relative, position absolue, position fixe, collante. On a fait toutes sortes de mouvements comme ça. Nous pouvons également utiliser la marge en haut et à gauche pour pousser l'élément autour, mais traduire comme une autre façon de le faire, ce qui est vraiment, vraiment sympa. Jetons un coup d'oeil à la suivante. Donc, je vais commenter ça. Et je vais commenter cela en utilisant CSS approprié. Nous pouvons également faire tourner. Voyons ce que fait Rotate. Nous voulons donc transformer, transformer, tourner. Faisons 45 degrés DEF pour les degrés. Et ça fait tourner pour nous. Et nous pouvons faire n'importe quel diplôme que nous voulions. Nous pourrions faire comme faire tourner 68 degrés ou 91 degrés, ce qui est en quelque sorte la même chose que de faire tourner un degré ou dix degrés. Nous pouvons faire tourner ça autant que nous le voulons. Si tu as tourné parfaitement 90, on dirait que rien ne s'est passé juste parce que c'est un carré. Donc ça fait 90 degrés, 0 degrés, 90 degrés. Et puis juste parce que encore une fois, la façon dont la géométrie fonctionne. Donc si jamais tu veux, oh, je ne sais pas si ça marche vraiment. Essayez de le changer de 90 ou 180 ou 270. Essayez de le changer pour aimer 200 et non, pas 370. Faisons comme 310 degrés et cela va dans un cercle aussi. Ainsi, le nombre maximal de degrés est de 360 degrés. Ensuite, nous avons forme de tendances. Et j'aime celui-ci s'appelle Scale. Et pour que nous puissions le mettre à l'échelle. Fondamentalement zoomer sur cet élément et nous pouvons, nous pouvons dire échelle à 200% ou mise à l'échelle à, et cela va le rendre plus grand. Ou si je l'échelle en 1.1.3. Donc encore plus grand, mais pas aussi grand que deux. Et commentons ça. Donc il n'y a pas de mise à l'échelle. C'est la taille naturelle de cette mise à l'échelle. Et enfin, nous allons avoir une inclinaison. Donc, nous pouvons faire la transformation biaisée et nous avons x et y. Nous pouvons dire biaisée sur les x et y, ou nous pouvons dire juste biaiser X si nous le voulions. Faisons biaiser X et Y prend deux valeurs. Alors faisons 20 degrés, et faisons aussi 20 degrés supplémentaires. Donc ça va se mettre à l'échelle sur les X et Y. et ça a l'air biaisé. Et la bonne chose à propos de ça, c'est que ça va biaiser ton texte. Donc si je fais du lorem ici, excusez mon message. Et si je le voulais comme un exemple, nous pourrions le commenter. Et on peut dire que les tendances se forment. Voyons vous demander comme un exemple de l'inclinaison X juste 20 degrés. Et on ne va pas fausser le Y du tout. Et c'est à ça que ça ressemble. Donc, il est incliné le long de l'axe des x à gauche et à droite. Y va l'incliner le long de l'axe haut et bas comme ça. C' est donc la transformation. Vous n'allez pas utiliser ces trop jusqu'à ce que vous entrez dans des dessins vraiment élégants est vraiment fou que je voudrais que vous finissiez par entrer dans. Il suffit de taper ceci dans votre poche arrière et de savoir que vous pouvez transformer des choses comme ça. Devriez-vous avoir besoin de le faire ? 26. Comment créer des animations avec CSS: Ok, jetons un coup d'oeil aux animations. Animations Laissez-nous déplacer les choses d'une manière fluide et contrôlée. C' est un peu comme une transition, mais nous n'avons pas nécessairement besoin d'une sorte d'événement pour le déclencher. Comme, vous savez, quand vous passez le curseur sur un lien et que cette transition change en quelque sorte. Eh bien, c'est parce que vous passez votre souris dessus. Mais si nous voulions juste quelque chose à bouger sur la page sans une sorte de déclencheur, nous pouvons le faire avec une animation. Et la bonne chose à ce sujet, c'est que nous pouvons dire à l'animation de commencer tout de suite. On peut lui donner une sorte de retard. On peut faire toutes sortes de choses avec des animations. Par exemple, nous pourrions faire bouger les choses, faire tourner les choses et faire sauter les choses ou rebondir si nous le voulions. Ou vraiment tout ce que nous pouvons faire avec CSS que nous pouvons animer. Donc ce que je vais faire ici, c'est que j'ai une boîte. Et allons de l'avant et juste montrer cette boîte et faisons le rayon de la frontière 50%. Et ça va être une boîte, mais ça va aussi être un cercle. Ça va s'afficher comme un cercle. Alors on y va. J' ai ce cercle. Rien de fantaisie. C' est complètement statique. Tout d'abord, lorsque nous créons une animation, nous devons lui donner un nom d'animation. Alors allons de l'avant et créons une nouvelle animation. Nous utilisons le symbole at, les cadres clés, puis un nom. Donc je vais appeler cette diapositive moi. Et ça va prendre un de, et ça va prendre a2. Maintenant, je veux m'assurer que c'est mobile. Disons donc que cette position de cet élément sera absolue, absolue. Il sera en haut de ma page et en haut à gauche de ma page. Et quand je rafraîchis la page, ça étreint le mur supérieur ici et le mur gauche là. Donc, ce que je peux maintenant dire est de haut est égal à 0. Et disons que la gauche est égale à 0. Et là où je veux qu'il aille, c'est à 100%. Donc, déplacons-le à gauche tout le long de la page. Et quand je rafraîchis cette page, rien ne va se passer parce que nous avons créé une animation, mais nous n'avons pas défini l'animation pour être applicable à notre élément. Donc, ce que nous faisons dans notre élément, c'est que nous disons que le nom de l' animation est égal à me diapositive et ceci est sensible à la casse. Donc j'ai un M majuscule là-dedans. Assurez-vous que vous avez le capital M dans le vôtre si vous utilisez le capital M. Donc, il doit être exactement le même. Lorsque nous enregistrons ceci et actualisons. On a vu que ça ne marche pas. Allons de l'avant et donnons à cela une durée d'animation. Il ne sait pas combien de temps, pour diapositive 4. Disons qu'il va glisser pendant quatre secondes. Maintenant, revenons en arrière. Et dès que nous lui donnons une durée va se déplacer tout le chemin à travers la page, puis hors de lui, et puis il recommence à zéro. Maintenant, si nous voulions le faire pour toujours, une animation, itération, un compte, un nombre d'itérations, l'a cloué. Et on dirait l'infini, l'infini. Et ça va aller jusqu'à la fin et recommencer et recommencer comme ça. Maintenant, si nous voulions aller à gauche puis revenir, nous pouvons lui donner une direction d'animation et une direction d'animation. Et nous pouvons dire tous avoir huit ans. Attends. Je vais nous rafraîchir et il ira à gauche et puis il va glisser. Il est allé tout le chemin à gauche et puis il va glisser vers la gauche et il va reculer vers la droite puis glisser vers la gauche. Maintenant, c'est une animation simple. Nous pouvons rendre ces choses beaucoup plus compliquées si nous le voulions. Nous pourrions simplement commenter tout cela et créons une nouvelle animation. Donc j'ai commenté ça et c'est comme si ça n'existait même pas. Pour qu'on puisse faire des images clés, glissez-moi. Donc ça va être exactement le même nom que celui-ci ici. Il se trouve que celui-ci est commenté. Et puis nous pouvons dire quelque chose comme à 0%, faire quelque chose, puis ajouter 50%, faire autre chose, puis ajouter un 100%. Non, pas là. Puis à 100%, faites autre chose. Alors à 0%, qu'est-ce qu'on veut que ça fasse ? Nous voulons que ce soit en haut, 0, à gauche, 0 à 50%. Changeons la couleur d'arrière-plan en bleu, et définissons réellement la couleur d'arrière-plan en noir. Par défaut. La couleur d'arrière-plan est égale au noir. Et puis à 100%, modifions à nouveau la couleur d'arrière-plan, couleur d' arrière-plan est égale au jaune. Et allons-y et voyons à quoi ça ressemble. Oh, en fait, on a besoin de 100 % pour rester, 100 %. Et donc ce que cela va faire est de dire à 0%, C'est là que le CSS devrait être appliqué à. Ce type de CSR devrait être appliqué à 0 %, à 50 % de quelle que soit cette animation, cette durée d'animation est de quatre secondes. Donc, à 50% ou deux secondes, changer la couleur de fond en bleu et devrait être complètement bleu à ce point. Et ça va essayer d'être gentil et lisse. Et puis à 100%, à quatre secondes, cette couleur de fond va être complètement jaune et la position va être laissée à 100%. Allons de l'avant et donnons un coup de feu et voyons à quoi ça ressemble. Juste comme ça et passe du jaune au bleu au noir. Maintenant, ce que j'aimerais que vous fassiez c'est que je veux que vous créiez une animation qui fait quelque chose comme ça. Cependant, je veux que tu fasses une boîte ou un cercle ou quelque chose comme ça. Vous pouvez même animer une image si vous vouliez juste faire un petit div avec une image dedans, je veux que vous fassiez le vôtre de haut à gauche en haut à droite, en bas à droite, en bas à gauche, puis remonter en haut à gauche. Donc je veux que la tienne aille tout autour du cadre de votre page. N' oubliez pas, vous allez devoir utiliser la position absolue pour cette position absolue. Vous allez vouloir définir l'état initial votre élément avant d'entrer dans les images clés. Donc, cela dit haut est 0, gauche est 0, même si je le répète ici, c' est ALK et c'est sympa et explicite. Ensuite, vous voulez lui donner un nom d'animation qui doit correspondre au nom de vos images clés ici. Donnez-lui une durée, sinon ne va pas fonctionner. Et puis pour votre tâche, pour cela, vous allez utiliser pour les pourcentages. Donc 02550%, 70 ou 75% plutôt. Et peut-être peut-être un 100% du milieu laisser ça à vous, voir comment ça marche pour vous. Allez-y et donnez ça un coup si vous êtes coincé, n'oubliez pas, vous pouvez poser des questions et apprendre à coder le groupe Facebook que nous sommes là pour vous aider. 27. Flexbox : le nouveau type de mise en page de page: Ok, parlons des mises en page de tableau ne sont pas des mises en page par mise en page. Donc, jusqu'à ce stade, vous avez probablement utilisé display inline-block. Vous avez probablement utilisé des tables ou flottant pour déplacer vos éléments sur votre page. Mais il y a un meilleur moyen. Il y a deux meilleures façons de faire en fait dans la première est flexbox. Donc je vais t'apprendre la flexbox. Il est important de vous familiariser avec flexbox. Je vais t'apprendre la base de la flexbox. Et puis je veux que vous alliez explorer la flexbox un peu plus loin. Maintenant, la chose avec flex et ce que nous allons apprendre après grille est sont de très gros modules CSS et vous n'avez pas besoin de tout savoir. Mangez comme si vous n'aviez pas besoin de mémoriser tout ça honnêtement. Vous devez vous rappeler comme comment certaines choses fonctionnent. Mais alors vous avez juste besoin d'être en mesure de Google vos réponses plus tard. Parce que honnêtement, j'écris du CSS depuis longtemps et je ne me souviens toujours pas toutes les façons d'appliquer flexbox sur le dessus de ma tête. Et c'est la nature de la bête. Il y a beaucoup à apprendre en CSS et il n'y a aucun moyen possible que vous puissiez tout apprendre et vous en souvenir. Vous avez juste besoin d'être capable de vous rappeler comment obtenir vos réponses. Et encore une fois, c'est environ 50% du développement web de nos jours est de savoir comment trouver vos réponses. Parlons donc de flexbox. Flexbox est un module de mise en page qui facilite la conception de structures de mise en page flexibles et réactives sans utiliser de flotteurs ou de positions ou de tableaux et des choses comme ça. Alors allons de l'avant et créons un div. Et je vais appeler ça le nominal, appeler ça un conteneur. Et ici, disons que j'ai deux éléments et que je les veux côte à côte. Donc j'ai un div ici et appelle ça à gauche et j'ai un div ici. Rappelle-toi ça, non ? Et quand je démarre ça dans ma page, et c'est juste de la dernière leçon là-bas. C' est écrit Gauche et Droite. Et si on veut qu'ils soient à gauche et à droite ? Pendant que nous pouvons les flotter, nous pouvons les positionner, nous pouvons faire toutes sortes de choses, mais il y a un meilleur moyen. Et c'est Flexbox. Donc, la bonne chose à ce sujet est qu'il est assez simple de commencer et il peut être vraiment, vraiment harcelé en bas de la ligne parce qu'il y a beaucoup à apprendre, mais commencer est vraiment facile. Alors allons de l'avant et sélectionnons notre conteneur. Et on va dire « Display ». Ceci comme un nouveau type d'affichage est le lin. Sauvegardons cela, actualisons notre page, et maintenant c'est à gauche et à droite. Et allons de l'avant et sélectionnons ces conteneurs, conteneur ou éléments de conteneur. Et donnons à ça une frontière. Un pixel, rouge solide. Cool. Ok, donc on a quelque chose qui est assis côte à côte. Allons de l'avant et faisons. Chacun de ces éléments. Ça pourrait être, disons 50%. Donc, nous disons base flexible et nous voulons que ce soit 50%. Maintenant, c'est flexible donc nous n'utilisons pas le mot width car width implique une valeur codée en dur. Flex base va dire commencer à 50%. Mais vous savez que faire si la colonne de droite prend plus d'espace et la colonne de gauche, la colonne de gauche est autorisée à rétrécir, ou vice versa. La colonne de droite est autorisée à rétrécir ou la colonne de droite est autorisée à croître. Donc ce que nous pouvons faire ici, c'est que nous pouvons dire que la classe est égale, non ? Et puis on peut dire, vous savez, s'il y a, allons faire de la fantaisie avec nos sélecteurs ici, conteneur div dot, non ? Nous pouvons dire que cette base flexible doit être de soixante-quinze pour cent. Allons de l'avant et rafraîchissons notre page et nous voyons qu'elle prend maintenant 75%. Et ce gauche a été en fait un peu rétréci. Et nous pouvons faire un exemple vraiment drastique ici de dire comme 95% et cela diminue autant que possible ici. Maintenant, nous pouvons dire que, hé, en passant, ceux-ci ne sont pas autorisés à rétrécir, Ils ne sont pas autorisés à croître non plus. Donc, nous pouvons dire que flex rétrécissement est égal à 0 et flex grow est également 0. Et ce que cela va dire, c'est cette base flexible, cette colonne de gauche sera toujours d'au moins 50%. Et maintenant ce que vous ne voyez pas, c'est que je peux faire défiler ici, c'est que le droit est 90% de la largeur de la fenêtre. Il arrive juste de passer à la partie de la page que nous ne pouvons pas voir par défaut. Maintenant, je vais me débarrasser de ça juste là-dedans. Juste parce que je pense que j'allais rendre ça un peu trop compliqué, mais c'était un bon exemple. Et maintenant, nous ne pouvons pas défiler à gauche et à droite, et nous avons 50% ici et 50% là-bas. Maintenant que se passe-t-il si nous voulions ajouter un autre conteneur que nous pourrions, ou un autre élément, nous pourrions dire que celui-ci devrait être central. Donc nous sommes restés au centre et ensuite, nous avons écrit. Et encore une fois, cela prend 50% de ma fenêtre, 50% de ma fenêtre, puis écrivez juste en prenant 50% de ma fenêtre pour une largeur totale de 150%. Et ça peut devenir vraiment, vraiment frustrant. Il y a un moyen de contourner ça. Sur notre conteneur. Nous pouvons dire flex wrap, envelopper la page. Donc, ce que cela va faire, c'est dire que c'est 50%, c'est 50%. Si quelque chose dépasse un 100%, il suffit de le cogner sur une nouvelle ligne. Et ceux-ci vont en fait sur leurs propres lignes parce que c' est 50% plus un pixel de chaque côté. Allons de l'avant et modifions tout sur notre page pour zone de bordure de taille de boîte afin que nos boîtes incluent également la largeur de la bordure. Et boum, nous travaillons avec les mises en page maintenant. Maintenant, nous pouvons simplement continuer à ajouter des éléments à, nous pouvons simplement continuer à les ajouter et ils vont juste continuer à empiler la façon dont nous voulons qu'ils s'empilent comme ça. Maintenant, nous pouvons changer cette base flexible. Changons cette base flexible à quelque chose comme 20%. Et maintenant, nous avons dix cellules, toutes en quelque sorte côte à côte et jolies et serrées ensemble. Et ils sont flexibles. Ce qui signifie que nous n'avons plus besoin d'utiliser des tables. Nous n'avons plus besoin d'utiliser flottante ou position absolue avec relative et des choses comme ça. Nous pouvons utiliser flexbox pour mettre les choses côte à côte. Ce n'est pas le meilleur exemple. Un meilleur exemple sera si nous faisons cela, créons dans notre div conteneur, et cela va être appelé navigation. Alors donnons à cela une classe de navigation. Et on va en créer un autre appelé contenu. Contenu ici. Et donc ce que je peux dire c'est, gardons la taille de la boîte. Gardez notre conteneur pour afficher flex, flex rap, donc il s'enroule sur une nouvelle ligne si nous le voulons. Allons-y et débarrassons de tout ça ici, sauf la frontière. Et nous allons redémarrer efficacement. D' accord. Donc, nous n'avons pas de base flexible ou une largeur flexbox est un moyen que vous pouvez y penser. Nous devons définir cette largeur maintenant. Maintenant, nous ne voulons pas nécessairement définir la base flexible sur les deux. Il s'agit de sélectionner le conteneur et les deux développeurs, nous voulons le sélectionner sur la navigation et le contenu. Alors allons de l'avant et tapez Navigation. Donnons à cela une base flexible. Et 20%. Et est-il permis de croître flex, de grandir ? Non. Est-il permis de rétrécir ? Flex psy, oui. On va dire qu'il est permis de rétrécir s'il le faut. Ok, donc c'est 20% de ma largeur de fenêtre. C' est toute cette section blanche que nous regardons ici. Et pour le contenu, faisons le contenu par points. La base Flex est égale à 80%, le reste de 100% moins 20%. Et faisons la même chose ici où nous disons fléchir, grandir et rétrécir. Mais le contenu est plus important. Est-ce qu'il est permis de grandir ? Oui, on a le droit de rétrécir. Disons non. Maintenant, nous avons du contenu là-dedans et nous pouvons nous débarrasser de tout ça et nous pouvons faire toutes sortes de choses. Nous pouvons dire H1, HelloWorld paragraphe avec un bas eux. Nous pourrions faire un autre H2 et autre cap, Bonjour monde à nouveau. Et nous pourrions faire un autre paragraphe avec un peu de lorem là-dedans. Et boom, nous avons la navigation, nous avons du contenu, nous avons une mise en page. Nous pouvons, même si nous voulions mettre un en-tête ici, nous pouvons faire l'en-tête point. Et allons-y et stylisons l'en-tête R-dot. C' est dire l'en-tête de point. La base Flex est un 100%. Peut-il grandir ? Non, nous ne voulons pas que ce soit plus de 100 %. Peut-il rétrécir, fléchir, rétrécir ? Non, ça doit être 100% tout le temps. Disons que l'en-tête sympa a a une couleur de fond de fff. Non. Faisons le CCS, CCC. Et disons que la couleur doit être cinq par cinq. Bordure inférieure, deux pixels, noir massif. Ok, ça a presque marché. On a juste besoin d'un contenu réel là-dedans. Donc en-tête. Pensez à ça. Ok, ça a l'air horrible. Je ne peux pas vivre avec ça en bonne conscience. Donc, faisons la couleur de fond est égale à cinq f cinq des cinq couleurs qui vont être rembourrage noir. Ça va être de 20 pixels. On y va. Et si nous allons de l'avant et nous débarrassons de cette frontière, et parce que c'est la seule chose là-dedans, nous pouvons nous en débarrasser, mais commençons simplement pour que vous puissiez accéder à ce code plus tard si vous le souhaitez. Nous avons une sorte de mise en page de table ou pas une table a o, mais en CSS 101, nous l'avons fait avec une table en CSS 201. S' il vous plaît, n'utilisez plus de tables. Nous n'avons pas besoin de tables pour les mises en page. Nous pouvons maintenant utiliser Flack. Et c'est ainsi que vous devriez créer des mises en page à l'avenir. Flex ou grid parlera de grille dans la prochaine leçon. Maintenant, ce que j'aimerais que vous fassiez, c'est probablement 20 minutes, peut-être même plus. Vous allez vouloir définir le flex d'affichage sur un élément parent. Donc, nous avons notre élément parent. Tous les éléments enfants seront des éléments flexibles. C' est ce qu'on appelle des éléments flexibles. Nous avons donc obtenu le contenu de navigation et l'élément d'en-tête. Et puis je veux que vous définissiez la base flexible d'eux. Voyez si vous pouvez faire fonctionner le flex rap. Flex grandit et rétrécit, gâche avec ça. Donc, vous voyez si vous pouvez obtenir que ça fonctionne pour vous ou ne pas travailler pour vous et avoir une idée de la façon dont il est censé fonctionner. Et je veux que vous, avant de passer à la grille, créez quelque chose qui ressemble un peu à ça. Maintenant, il n'a pas besoin d'être beau. Nous nous concentrons sur la mise en page ici, où nous avons une colonne de gauche ici. Nous avons une colonne de droite ici, et nous avons une ligne sur le haut appelé en-tête. Allez-y et donnez-lui un coup de feu. Rappelez-vous si vous êtes coincé, posez des questions ci-dessous, posez des questions dans le groupe Apprendre à coder Facebook. Il y a beaucoup d'entre nous qui en savent beaucoup sur flexbox, nous pouvons vous aider à avoir un moment de clades. 28. Grille : la terre promise de la mise en page des pages: Grid est un moyen encore plus efficace de créer une mise en page. Il est plus avancé et flexbox et il est spécialement conçu pour être efficace dans la mise en page. Donc, alors que flexbox a son but comme être capable d'aligner verticalement les choses, ce qui est agréable, nous ne l'avons pas couvert. C' est quelque chose que vous pourriez vouloir aller et google sur votre propre temps mais comme un peu de devoirs supplémentaires. Grid n'est pas conçu pour le faire. Grid a littéralement pour une mise en page de modèle. Donc, quand il s'agit de grille, il y a quelques choses que nous devons savoir. Il y a des colonnes, des rangées et des gouttières. Et ces gouttières, on les appelle des lacunes. Dans des cadres comme Bootstrap, vous allez les voir appelés gouttière. Nous ne les appelons pas techniquement gouttières, et CSS sont appelés lacunes. Nous avons donc des colonnes, des lignes et des espaces entre les colonnes et les lignes. Et comme un tableau HTML, nous pouvons faire que chaque cellule dépense une ou plusieurs colonnes ou lignes. Alors plongons dans ça. Alors allons de l'avant et créons notre première grille. Créons un ID ici et je dois changer du modèle Django au HTML. Allons de l'avant et créons un élément conteneur appelé grille. Et il a un ID de grille. Et donnons à ceci un objet, et appelons celui-ci. Et je viens de faire neuf articles ici. Maintenant, si on rafraîchit notre page, on verra un à neuf sur leurs propres lignes. Ceci est complètement attendu car actuellement cela n'utilise pas une grille, cela utilise le bloc d'affichage par défaut de base, et ce sont tous des divs. Donc, ce que nous pouvons faire ici est que nous pouvons sélectionner notre grille et nous pouvons dire affichage de la grille et un nouveau type d'affichage ici nous pouvons dire grille. Et cela va juste le transformer en une grille. Donc si on jette un coup d'oeil maintenant, rien ne se passe. Nous devons dire que cela a un modèle de grille, une grille, des colonnes de modèle. Et combien de colonnes nous voulons ? Eh bien, nous avons neuf sections, alors faisons trois par trois. Alors faisons l'auto, l'auto, l'auto. Donc ce sont des colonnes, et ça va être la colonne 123. Allons de l'avant et voyons ce que cela fait. Ok, on arrive quelque part côte à côte. C' est vraiment sympa. Allons de l'avant et sélectionnons chaque élément ici. Faisons l'objet. Et donnons à ceci une bordure, un pixel rouge solide. Et cela nous permet juste de voir avec quoi nous travaillons ici. Disons maintenant que nous voulons créer une sorte d'écart entre ceux-ci. Nous pouvons le faire avec un écart de colonne de grille ou un écart de ligne de grille. Un écart de colonne de grille va ressembler à ceci. Donc, l'écart de colonne de grille , et ce sera, disons 20 pixels. Et donc ça crée un petit écart entre nos colonnes. Ou on pourrait faire un écart de ligne de grille. Et cela crée un espacement entre les lignes r. Et nous pouvons avoir les deux en même temps. Ainsi, l'écart de colonne et l'écart de rouleau de 20 pixels. Et maintenant, nous avons une belle grille ici. Mais ce n'est pas très bien pour les modèles de page. Pour les modèles de page ont généralement une sorte d'en-tête, une sorte de navigation, Une sorte de pieds de page. Allons de l'avant et créons ça. Créons l'élément un. Faisons passer par 123 et on se débarrassera de 23. Et c'est beaucoup comme travailler avec la table, mais c'est en utilisant CSS. Donc ce que je vais faire ici, c'est que je vais copier tout ça. Copier. Collez et donnez simplement ces noms d'éléments ici. Donc, ceux-ci vont tous partager le style de 11 pixels bordure rouge solide. Sélectionnez l'élément un. Article 1. Et nous pouvons dire que la colonne de la grille va commencer à l'élément numéro un et il va terminer la colonne de la grille et à l'élément numéro trois. Et donc ce que nous disons ici, c'est commencer à la première colonne, juste ici, 23. Et ça va reprendre tout ça. Et en fait, je fais ça mal. Ça devrait commencer par un ici, deux là, trois là, et pour là, passons ça à quatre. Et l'élément un va maintenant être un en-tête et il a été déplacé, il a délogé le numéro 23. Donc si nous le voulions, nous pourrions nous en débarrasser si nous le voulions. On n'a pas besoin de le faire. Allons de l'avant et en fait nous débarrasser de 23. Donc, point 23. On y va. Maintenant, fusionnons un 69 ensemble. Et nous pouvons le faire avec le début de la ligne de grille et la fin de la ligne de la grille. Et nous voulons travailler avec le point 6 ici. Alors faisons l'élément six, début de la ligne de grille. Où est-ce que ça va commencer ? 1234. Disons que ça commence à deux heures. Et c'est due grille, fin de ligne et 1234, faisons quatre. Et de temps en temps, je les mélange. Oui, on y va. Ça a fait ça, c'est ça. Et maintenant, nous délogons ceux qui étaient juste après. Alors allons-y et essayons de retoucher ça. Parfois, quand on apprend ça, c'est un peu une conjecture, mais on a maintenant la sixième rangée. D' accord, donc on a 1456. Allons-y et débarrassons-nous de je ne sais pas. Débarrassez-vous de neuf. Et débarrassons-nous de neuf. Ok, c'est sympa. Allons de l'avant et fusionnons 45 ensemble. Donc, nous voulons l'article 45 ensemble. Donc, faisons l'élément pour et nous fusionnons les colonnes l'autre. Donc, nous voulons faire démarrer les colonnes de grille. Et c'est un ici pour ici, 34. On est allés deux à quatre. Et on peut le faire. Ok, ça marche. Maintenant faisons la même chose avec 57 parce que et voyons ce qui se passe quand on fait 57. On peut faire la même chose, point 5, et c'est juste appliquer le même style. Et maintenant, nous pouvons voir que tout cela est déloger. C' est, ça a l'air assez bien. Allons de l'avant et fusionnons 78 ensemble. Et débarrassons-nous de huit. Et donc nous voulons que sept ressemblent à l'article numéro un ici. Et nous pouvons réellement commencer à réutiliser les choses. Parce que l'article 1 et l'article 7 vont avoir exactement la même disposition dans le sens où je veux que l'article 7 prenne toute la largeur. Et l'article 1 va prendre toute la largeur. Donc, nous pourrions aussi bien réutiliser ce style. On a quelque chose à travailler ici. On a un en-tête là-haut, on a un pied de page ici, on a un espacement parfait. Nous avons une section de navigation ou peut-être une section de publicité. Nous avons du contenu pour le contenu le plus important, peut-être comme une section de résumé et le contenu de la page. Et c'est ainsi que vous créez une mise en page en utilisant Grid. Et donc la grille devient beaucoup plus complexe que cela aussi. Mais c'est un très bon début pour apprendre à utiliser Grid. Maintenant, lorsque vous créez une page à l'avenir, essayez d'utiliser Grid comme module de mise en page. Vous pouvez utiliser flexbox, vous ne pouvez pas techniquement utiliser des tables et des flotteurs, afficher inline-block. Vous pouvez faire toutes sortes de choses, mais essayez d'utiliser Grid à partir de maintenant. Ou si vous ne voulez pas utiliser grid, vous pouvez toujours utiliser flexbox. Les deux sont complètement acceptables à partir de maintenant. Mais ce que j'aimerais que vous fassiez, c'est que vous essayez de créer une mise en page comme celle-ci. Ce que je veux que tu fasses, c'est faire transpirer ton cerveau. Ne référencez pas mon code, bien que vous y ayez accès. Ne référencez pas mon code. Je veux que tu essaies de te rappeler comment faire ça. Et si vous ne vous souvenez pas, je veux que vous alliez vous entraîner à googler comment faire ça. Rappelez-vous, juste les termes sont ce que vous devez savoir. Allez-y et donnez-lui un coup de feu. Si vous êtes vraiment coincé ou si vous voulez rejoindre une communauté, vous pouvez toujours rejoindre le groupe apprenant à coder Facebook. Nous sommes là pour vous aider. 29. Votre projet final: Votre projet final va être de trouver un très beau design de site Web et de le répliquer autant que possible. Tu vas rencontrer une pléthore d'obstacles. Ça va être vraiment dur, va être vraiment une bonne pratique. Je dirais juste faire du mieux que vous pouvez et juste s'amuser avec. Si tu ne peux pas le rendre parfait, c'est tout à fait bien. Donc, ce que je voudrais que vous fassiez, ouvrez votre navigateur préféré, allez sur Pinterest.com et tapez simplement dans la conception web ou l'inspiration web design, mise en page web, quelque chose comme ça. Faisons de l'inspiration web design. Et créer un beau site à la recherche. Vous connaissez toutes les pièces et n'oubliez pas de décomposer les choses en plus petits composants. N' essayez pas de regarder une page et ils partiront, je ne sais pas comment faire tout cela, décomposer en petits composants. Donc un bon serait comme celui-ci. Et c'est un modèle de site Web Squarespace apparemment. Mais ce que vous pouvez faire, c'est que vous savez maintenant comment faire cette navigation ici. Vous savez comment faire des choses Centre, vous savez comment sélectionner l'élément central pour votre logo. Tu sais faire un héros. Vous rembourrage Nobel et marge. Donc, vous avez déjà couvert cette section. En bas. On a une petite carte. Vous avez déjà couvert cette section. Alors juste stylé. Il n'a pas besoin d'être fonctionnel. Il n'a pas besoin d'être un véritable carrousel et toboggan et tout. Mais vous voulez vous assurer qu'il a comme une couleur d'arrière-plan que les mises en page agréables. Vous pouvez essayer d'ajouter et des flèches et des choses comme ça. Cette section utilise également une grille. C' est un très bon candidat pour la grille, et puis vous utilisez juste des images d'arrière-plan. Donc, vous pouvez aller de l'avant et commencer avec quelque chose comme ça. Si tu ne veux pas faire ce site en particulier, c'est tout à fait correct. Tu n'as pas besoin de trouver celui-là non plus. Vous pouvez y aller et, vous savez, si vous vous sentez vraiment épicé, vous pouvez essayer de faire quelque chose comme ça avec tous les angles. Vous pouvez utiliser. Transformer pour biaiser les choses, pour tourner, les choses à utiliser comme cette section ici serait en fait un carré et puis il serait juste tourner un peu et de sorte qu'il se rencontre juste au milieu. Oui. Donne-lui un coup de feu. N' oubliez pas de briser les choses comme ça pourrait être Flexbox. Ce serait flexbox, pas nécessairement grille mais flexbox. Et celui-ci, nous avons juste une marge supérieure d'un extra comme 50 pixels. Donc, ce que j'aimerais que vous fassiez, donnez un coup de feu et essayez de le décomposer morceau par morceau. N' essayez pas de vous attaquer à tout ça en même temps. Peut-être que ce soir, vous avez essayé de faire comme la navigation et demain vous avez essayé faire avec la section héros et le lendemain vous essayez de faire la section suivante. Prenez votre temps avec elle, amusez-vous un peu avec elle, et essayez vraiment d'entrer dans le minutieux de CSS. Tout ce que vous avez appris dans ce cours s'applique à ces styles de dessins. Ces dessins sont assez sauvages en fait. Et pour être tout à fait honnête, c'est un design très, très avancé. Donc peut-être, tu sais, si tu ne te sens pas à l'aise, ne commence pas par celle-là. Mais tu peux commencer par quelque chose comme ça. C' est une très bonne chose. Il a votre navigation, a un en-tête, il y a un bouton là-dedans. Il y a différentes tailles de police, différents types de police. Vous avez différents styles ici. Donc, cela pourrait être flexbox aussi, ou flottant ou position relative ou position absolue. Tu peux essayer n'importe quoi comme ça. Je dirais essayer un de ceux-ci. Si vous voulez commencer avec quelque chose de plus facile, je dirais aller à rocket man, ne pas apprendre wag tilde.com et juste essayer de recréer ce site. La page de justice, pas toutes, pas toutes les pages ici, juste cette page. Donc, vous avez la navigation ici. C'est gentil et simple. Vous avez une image de fond, un dégradé sur le dessus. Vous avez un bouton, et vous avez différents textes, vous avez différentes polices, donc des polices Web personnalisées. Et ici, nous avons Flexbox, nous avons deux cartes côte à côte. Ici, nous aurions deux cartes côte à côte, mais celle-ci utilise la position relative et la position absolue pour le cogner en un peu. Donc, il est superposé à l'aide d'un index zed. Même chose avec cela, juste le sens inverse au lieu de se déplacer à gauche et le second se déplace à droite. Et ici, nous pourrions utiliser Grid ou flexbox. Je suggère flexbox pour celui-ci. Et puis vous pouvez utiliser Grid ici. Allez-y et donnez-lui un coup de feu. Je sais que c'est beaucoup à prendre, mais honnêtement et je ne peux pas insister assez sur ça. Commencez petit, commencez par la navigation. Commencez avec juste l'en-tête. Prenez votre temps dessus. Google beaucoup, poser beaucoup de questions. Je suis là pour toi. Apprendre à coder Facebook, une communauté. Ils sont tous là pour toi. Allez-y et donnez un coup de feu et n'hésitez pas à partager vos progrès en cours de route. Oh, et une dernière chose, parce que vous êtes en partage de compétences, vous avez votre section Projet de partage de compétences. Donc, si vous allez dans vos projets et cliquez sur le bouton vert qui indique Créer un nouveau projet. Je crois que c'est ce qu'il dit. Vous pouvez partager votre projet afin que vous puissiez partager des captures d'écran et partager votre code, comment vous pouvez faire toutes sortes de choses là-dedans. Alors assurez-vous de le partager là-dedans. Mais surtout, surtout, amusez-vous avec ça. 30. Résumé: D' accord, vous avez fini CSS 201. C' est CSS intermédiaire et en fait c'est intermédiaire à CSS légèrement avancé pour être complètement honnête. Mais, tu sais, super boulot de compléter tout ce cours. C' est beaucoup de contenu à prendre en compte. J' espère que vous avez appris quelque chose de amusant. J' espère que vous avez quelques mains sur l'expérience. J' espère que vous avez codé avec moi à travers les leçons. Mais parlons de vos prochaines étapes. Vos prochaines étapes vont être de créer un beau site Web en utilisant CSS et HTML. Je veux que tu essaies de te défier et de rendre un site aussi beau que possible. N' hésitez pas à vous inspirer d'endroits comme Pinterest. Parce que honnêtement c'est la raison pour laquelle CSS existe. Css purement pour rendre votre site Web belle. Maintenant, une fois que vous avez terminé avec CSS, vous pouvez aller apprendre JavaScript, mais s'il vous plaît n'apprenez pas JavaScript tant que vous n'êtes assez familier et assez satisfait de vos compétences CSS. Javascript est un jeu très différent à jouer. Mais une fois que vous êtes prêt pour JavaScript, j'ai aussi plusieurs cours sur JavaScript. Alors il suffit de consulter mon profil sur cette plateforme pour tous mes différents cours. Et enfin, si vous avez besoin ou si vous voulez un soutien supplémentaire, s'il vous plaît venez rejoindre le groupe d'apprentissage pour coder Facebook où vous pouvez poser des questions sur tout ce qui est lié à CSS. Last but not least, je voudrais vous dire merci d'avoir suivi mon cours CSS. Je sais qu'il y a d'autres cours là-bas et j'apprécie que vous suiviez mon cours. Encore une fois, mon nom est Caleb Colleen, et j'ai fièrement été votre instructeur de gorge CSS à 201, et j'espère vous voir dans un autre de mes cours. Amusez-vous à coder et je vous verrai partout.