Apprendre le CSS pour un design Web réactif moderne créez des sites Web à partir de zéro HTML5 CSS3

1. 0 Introduction à un démarrage rapide au CSS: Bienvenue dans le guide QuickStart pour appliquer CSS. Coiffer vos pages Web pour débutants. Je m'appelle Lawrence. Je vais être votre instructeur pour ce cours. J'en suis venu avec de nombreuses années d'expérience en développement Web. J'ai vraiment aimé travailler avec CSS car cela vous donne vraiment l'occasion de concevoir et de donner vie à vos pages Web. Nous allons couvrir toute la syntaxe commune du CSS. Comment ajouter du CSS et créer une feuille de style dans votre page HTML, sélectionner des éléments de page, puis appliquer différentes propriétés de style à ces éléments de page. Définition des arrière-plans de couleurs, images d' arrière-plan, de la définition du modèle de boîte, la configuration des différentes marges, du remplissage, bordures pour les éléments de page que vous avez sélectionnés, comment mettre à jour le texte et styles combattus, y compris différentes familles de polices utilisant Google Fonts et importation de polices à partir de sites externes à l'aide de la propriété display et comment afficher les éléments de page, les éléments page positionnés, flotter les éléments de page, pseudo-classes et les pseudo-éléments, et comment les appliquer dans votre conception. Nous allons également vous expliquer comment créer des modèles de sites Web de base à l'aide de flotteurs CSS, de CSS Flexbox et de grille CSS. Donc, toutes les techniques modernes que vous devez connaître pour créer des sites Web à partir de zéro. C'est tout ce qui arrive dans les prochaines leçons. Il existe également un guide de ressources téléchargeable qui inclura le code source ainsi que des liens pratiques, conseils et des ressources qui vous aideront au long des leçons du cours. L'une des meilleures façons d'apprendre est d'essayer le code par vous-même. N'ayez pas peur de lui donner un coup de feu. Essayez-le dans votre propre éditeur et voyez ce qui se passe. Je sais que vous êtes ravi de commencer. Commençons avec CSS dans la prochaine leçon. 2. 1 Ajouter du CSS à la page: Il s'agit de savoir comment ajouter un style CSS à votre page HTML. Vous pouvez également sélectionner des éléments et appliquer des valeurs de propriétés simples à ces éléments afin de les rendre dans la page Web. Css n'est pas un langage de programmation comme JavaScript et il ne s'agit pas non plus d'un langage de balisage comme HTML. Css est un langage de feuille de style et le but du CSS est de prendre une page structurée HTML simple, sélectionner les éléments de page et appliquer un style aux éléments. J'ai une page HTML de base et nous allons ajouter du style aux éléments de la page. Il existe plusieurs façons d' ajouter un style à la page, de sorte que vous pouvez ajouter un style à la page, l'ajouter directement dans les balises de style. Sélectionnez l'élément avec une balise d'en-tête. Je spécifierais d'abord l'élément. Il s'agit donc de la sélection de l'élément auquel nous voulions appliquer le style. Appliquez ensuite les propriétés de style que nous voulions définir la couleur du texte dans l'élément d'en-tête, nous indiquerons la couleur rouge. Ensuite, nous satisfaisons une valeur qui sera rouge. Ce qui a fait, c'est que texte transformé dans l'en-tête l'a rendu rouge. style peut également être appliqué directement dans l'élément, dans l'attribut de style, spécifiant l'attribut de style. Et ici, nous allons créer un contexte. couleur. Les propriétés de style vont être les mêmes, puis nous lui attribuons simplement une valeur. Je vais donc attribuer une valeur de noir aux propriétés de style. Nous définissons donc pour cet élément la propriété style de couleur d' arrière-plan noir. Ce que cela fait, c' est que la couleur d'arrière-plan est en noir. Les principaux inconvénients de le placer dans votre code HTML, c' est qu'il est difficile à trouver, difficile à mettre à jour et que vous devez parcourir les éléments. Et ce qui se passe, c'est que lorsque vous le définissez comme attribut de style, cela va en fait remplacer les autres propriétés de style , car cela va arriver à la partie la plus proche de l'élément tel qu'il se trouve directement dans l'attribut. Donc, si nous devions mettre à jour cela en noir, ce qui se passe, c'est qu'il va en fait remplacer l'en-tête de style chaque fois que nous le modifions, cela n'a pas d'importance car nous ajoutons une autre propriété de style à ça. Pour pouvoir l'ajouter directement dans les éléments de page, vous devez éviter de l'ajouter en tant qu' attribut de style directement dans l'élément de page et de faire une sélection avec celui-ci, soit en utilisant dans les balises de style ou dans la feuille de style, ce qui constitue les meilleures pratiques comme lorsque vous l'ajoutez à la feuille de style. Il y a de nombreux avantages à faciliter la mise à jour, à partager le même style sur plusieurs pages HTML et qu'une feuille de style, un fichier séparé qui contiendra le style pour la page HTML. Et il s'agit d'un fichier auquel il est lié depuis le texte HTML. Nous avons configuré une balise de lien, puis en utilisant le HRF, reliant à l'emplacement de la feuille de style. Ensuite, l'utilisation de l'attribut REL pour vous aider sera une feuille de style. Allons-y et nous allons créer un tout nouveau fichier. Je vais le garder dans le même répertoire. Et c'est là que nous allons appliquer les feuilles de style et les propriétés de style aux éléments de page du fichier HTML. Je l'ai enregistré en tant que style CSS. Et puis nous allons lier à ce CSS le même en-tête. Ensuite, nous allons appliquer une couleur à cet en-tête. Mettons donc à jour cela et définissons la couleur sur le texte à lire. Maintenant que nous avons sélectionné l'élément appliqué à l' aide de la feuille de style, mettez à jour l'élément de page avec une balise d'en-tête. Et ça change ça en rouge parce que nous allons travailler hors de la feuille de style. Et ce sera le fichier séparé qui contiendra tout le CSS. Si nous devions créer un deuxième fichier HTML, nous pouvons créer un lien vers la même feuille de style. Si nous en créons un deuxième, appelé index deux, et que nous passons à la deuxième page. J'y mettrai une mise à jour pour qu'on en dise deux et que l'original en dise un. Maintenant, si nous voulons sélectionner et mettre à jour l'en-tête sur les deux pages, il suffit de mettre à jour la feuille de style à laquelle ils seront tous deux liés. Et maintenant, cela va appliquer la couleur bleue aux deux en-têtes des deux pages car ils sont tous deux liés à la même feuille de style. C'est l'avantage d'utiliser une feuille de style distincte afin de mettre à jour le style que vous pouvez facilement y associer et d'y apporter des mises à jour, ce qui va passer par tous les fichiers que tous les fichiers HTML qui sont liés à ce fichier CSS particulier. Le CSS commence par configurer un sélecteur. Il s'agira donc de l'élément et de l' élément auquel vous souhaitez appliquer cet ensemble de règles en particulier. Cela peut également s'appliquer à plusieurs éléments de sorte que la même chose. Par conséquent, si nous sélectionnons tous les éléments qui sont des éléments de liste, cela s'appliquera à tous les éléments de la liste. Lorsque nous sélectionnons l'élément de liste, nous constatons que les puces sont désormais bleues sur tous les éléments de la liste. Vous pouvez également l'appliquer à toutes les balises d'ancrage. Et maintenant, il s'agit de mettre à jour le texte des deux fichiers pour qu'il soit bleu pour les balises d'ancrage. Et c'est le sélecteur. La sélection traite ce que l'on appelle le sélecteur. Ensuite, une fois que vous avez effectué la sélection, vous sélectionnez ensuite la propriété que vous souhaitez utiliser. Dans ce cas, nous utilisons la propriété color et nous définissons la valeur de la propriété sur bleue. Par conséquent, la modification de la valeur de la propriété appliquera une valeur différente à cette propriété de couleur. Et tous les deux vont être ce qu'on appelle la Déclaration. Nous déclarons que la propriété color est définie en rouge dans les balises d'ancrage sélectionnées dans le fichier HTML de la page Web Vous pouvez ajouter plusieurs valeurs de propriétés dans le jeu de règles au sein de la sélection, dans les crochets bouclés. En ajoutant simplement une deuxième ligne, je vais définir la couleur d' arrière-plan et je mettrai à jour la couleur d' arrière-plan de celles-ci pour qu'elle soit noire. Il va être appliqué à tous les éléments correspondants qui correspondent à cette sélection, où nous utilisons les points-virgules afin de séparer ces différentes instructions. Même si nous ne devions pas avoir de lignes séparées, cela fonctionnera toujours tant que nous aurons le point-virgule qui sépare ces valeurs de propriété pour les séparer. Il est donc plus lisible dans le fichier CSS où nous la définissons sur une nouvelle ligne, la propriété CSS, le nom et la valeur séparés par les deux-points. Allez-y et créez un fichier HTML. Vous pouvez ajouter plusieurs éléments HTML. Appliquez le style, créez un nouveau fichier CSS, sélectionnez certains éléments sur la page et appliquez un style à ces éléments et vous êtes prêt à passer à la leçon suivante. 3. 2 éléments de sélection CSS: Il s'agirait d'explorer la façon dont nous pouvons faire la sélection. La sélection est donc essentielle pour sélectionner l' élément de page auquel vous souhaitez appliquer le style. Vous pouvez utiliser les balises, les classes de l'ID. Vous pouvez également effectuer une combinaison où éléments se terminent en spécifiant le sélecteur de classe. Il existe également un caractère générique, ce qui s'applique à tous les éléments de la page. Vous pouvez également regrouper le processus de sélection en sélectionnant plusieurs éléments de page, divers sélecteurs et virgules séparant les sélecteurs. Pour appliquer le style, vous devez sélectionner les éléments. Nous avons un certain nombre d' éléments de page différents sur la page, et nous allons sélectionner ces éléments. Vous pouvez donc d'abord le sélectionner à l'aide de la balise. Qu'il s'agisse de la div, l'en-tête, de la navigation, la liste non ordonnée ou de l'élément de liste. Nous pouvons le sélectionner à l'aide de la balise, ce qui permettra de sélectionner tous les éléments de page correspondant à cette sélection. Par exemple, si nous voulons sélectionner la navigation, continuons à faire une sélection, puis appliquons les propriétés à cela. Je vais mettre à jour la propriété de couleur d' arrière-plan des éléments de page qui ont une navigation. Et nous allons mettre l' arrière-plan en jaune. Dans la zone visuelle de la page Web, page HTML, nous pouvons voir que l'arrière-plan devient jaune à la navigation. Sélectionnons les éléments de la liste et nous appliquerons également une couleur d'arrière-plan aux éléments de la liste. Je vais le sélectionner et le définir sur un fond bleu. Ce que nous pouvons voir ici, c'est que le bouton qui est le parent de la liste non ordonnée et des éléments de liste obtient un arrière-plan jaune. Mais parce que nous avons appliqué l'arrière-plan spécifiquement aux éléments de liste imbriqués dans le parent. Nous voyons qu' un fond bleu est appliqué à ces éléments. Vous pouvez également sélectionner des éléments à l'aide de leurs identifiants. Allons de l'avant et nous allons ajouter une pièce d'identité. Nous avons plusieurs plongées sur la page. Et c'est une autre façon de distinguer un bloc de code que nous voulons appliquer le style pour obtenir un ID d'un. Nous pouvons donc sélectionner cet élément en utilisant le hachage et en spécifiant le nom de l'ID. Et je vais également appliquer une couleur de fond à celle-ci. Et nous allons mettre celui-ci en rouge. Nous voyons que cette div en particulier a maintenant la propriété de lire la couleur d'arrière-plan y être appliquée. Si nous devions sélectionner toutes les divs et appliquer une couleur d'arrière-plan de Bij à toutes les divs. Celui qui a sélectionné l' élément avec l'ID d'un élément est toujours rouge. Si nous déplaçons cette propriété en dessous, nous voyons qu'elle est toujours rouge car nous sommes plus spécifiques sur l'EEI et appliquons la couleur d' arrière-plan rouge. Et si nous devions supprimer cette div obtient également une couleur de fond beige qui lui est appliquée. Une autre façon de faire une sélection consiste à utiliser la classe. Nous avons une div avec une classe d'emballage. Si nous voulons sélectionner cet élément avec une classe de wrapper et définir une couleur d'arrière-plan sur cet élément. Et ça va être le parent de tous les éléments. Sélectionnez-le et définissez-le pour qu'il soit violet. Donc maintenant, tous les éléments vont obtenir une couleur de fond violet. Ceux qui sont imbriqués à l'intérieur de l'emballage auront une couleur d'arrière-plan de style différente leur est appliquée. Et cela va entraîner ce type d'effet où le parent obtiendra la couleur d'origine, les enfants à l'intérieur, définissant également différentes couleurs pour eux. Et cela affecte la façon dont il est produit. Vous ne devez avoir qu'un seul élément avec un identifiant particulier. Il s'agit donc d'une façon unique de sélectionner l'élément de page. Lorsque vous le sélectionnez avec des classes ou des balises, il est possible qu'il y plusieurs éléments qui seront représentés. Si vous souhaitez être vraiment précis avec l'élément de page, vous pouvez le sélectionner à l' aide de ses propriétés. Et nous avons une liste non ordonnée avec les éléments de la liste, et ils ont tous des balises d' ancrage à l'intérieur. Donc, si nous voulons nous concentrer et lister un élément, je lui donnerai une classe de points forts, et je donnerai également à la seconde une classe de surbrillance. Nous voulons sélectionner tous les éléments de la liste en ajoutant la classe de surbrillance, nous permet de sélectionner les éléments que nous pouvons faire lorsque nous sélectionnons les éléments de la liste, joindre avec une classe de points forts. Définissez la couleur d'arrière-plan pour ces derniers, définissez la couleur d'arrière-plan sur le vert. Nous avons maintenant sélectionné ces éléments de page et les appliquons à une couleur d'arrière-plan verte. Ce sont donc les éléments de liste avec la classe de surligner ce style qui nous permet de mettre en valeur 0 sur ces éléments et d'y appliquer le style. Nous pouvons également choisir à l'aide du caractère générique. Et ce sera quelque chose qui peut être appliqué à tous les éléments de la page. Si nous voulons définir une couleur rose sur le texte, le caractère générique sélectionne tous les éléments de la page. De plus, nous pouvons regrouper les sélections en séparant des virgules. Allons de l'avant et nous allons y retourner et ajouter plusieurs identifiants différents, et nous ajouterons un autre élément avec un ID de trois. Et si nous voulons sélectionner tous ces éléments correspondants sur la page, nous pouvons être séparés par des virgules. Donc, en sélectionnant l'élément avec un ID d'un, un ID de deux, un ID de trois. Ensuite, sélectionnons également l'élément avec une classe de surbrillance. Tous les éléments correspondants vont faire appliquer cette propriété. C'est ainsi que vous pouvez regrouper la sélection, les éléments sélectionnés avec un ID de 123, ainsi que les éléments avec une classe de surbrillance et appliquer une couleur rouge à ces éléments. âme des personnes correspondantes a désormais une couleur rouge. Les autres sont roses. Et je vais en fait mettre à jour cela pour qu'il soit blanc car nous avons couleurs d' arrière-plan pour tous. C'est ainsi que vous pouvez regrouper le processus de sélection, sélectionner plusieurs éléments de page et appliquer les propriétés à tous. Alors, essayez de créer votre code HTML et de faire une sélection à l'aide des balises, des ID et des classes. Et vous pouvez être prêt à passer à la prochaine leçon. 4. 3 définitions des couleurs et des arrière-plans avec CSS: Cette leçon porte sur les couleurs et les différentes unités de couleurs que nous pouvons ajouter à l'arrière-plan. Et c'est l'arrière-plan de l'élément de page que nous avons sélectionné, ainsi que la couleur qui va affecter la couleur du texte de l' élément de page sélectionné. Ensuite, comment ajouter des images à l'arrière-plan, le raccourci des images, puis les différents types de valeurs de couleurs que nous pouvons utiliser, tels que le RVB, la valeur hexadécimale, le RGBA, ou simplement les valeurs nommées pour les couleurs. C'est tout ce qui arrive dans cette leçon. Allons de l'avant et faisons une sélection de certains éléments de la page. Nous allons donc sélectionner l'élément avec la balise d'article dans la sélection, puis nous appliquerons certaines propriétés à cet élément. Donc, en sélectionnant cet élément que nous allons appliquer une couleur d'arrière-plan afin de définir une couleur d'arrière-plan, nous utilisons la couleur d' arrière-plan de la propriété. Ensuite, nous pouvons sélectionner les différentes couleurs. Les couleurs peuvent être ajoutées à l'aide des noms de couleurs et de la plupart des noms de couleurs typiques. Donc, il suffit d'être répertorié dans l'éditeur. Il s'agit des noms de couleurs couramment utilisés et vous pouvez spécifier l'arrière-plan à l'aide du nom de couleur. allons sélectionner une autre page, des éléments et nous sélectionnerons l'élément avec l'ID de trois. Et il existe de nombreuses options différentes pour définir les valeurs de couleur. Vous pouvez utiliser les valeurs RVB, c'est-à-dire les valeurs rouge, verte et bleue. Cela se fait en indiquant le RVB. Ensuite, les parenthèses, en définissant une valeur comprise entre 0 2550 étant le côté 0, représentent la quantité de couleur que nous voulons appliquer. Par conséquent, 0 est le plus bas. Si vous souhaitez appliquer autant que possible au RVB rouge, nous le réglerions sur 255, soit le maximum. Nous allons définir 0 vert et 0 bleu sur l'élément avec l'arrière-plan, avec l'ID de trois. Il en résulte une couleur rouge semblable à celle de l'élément dont l'ID est égal à un. Et faites une couleur d'arrière-plan, utilisez une valeur de couleur hexadécimale. Les valeurs hexadécimales sont donc des valeurs de six caractères au format hexadécimal, indiquées par le hachage afin d' indiquer la valeur hexadécimale que nous allons utiliser. Semblable à ce que nous avons vu avec RVB. Les deux premiers caractères du diable vont représenter la quantité de rouge. Donc, en commençant par une valeur de 0, c'est 0, ce qui serait le plus bas. Et se terminant par une valeur ff, qui serait la valeur la plus élevée pour l'hexadécimal. Nous allons faire la même chose que nous répondons 0 vert et 0 bleu à la couleur d'arrière-plan, ce qui aura également pour résultat la couleur d'arrière-plan rouge. Il existe également une option pour un RGBA. Rgba nous permet de définir une couleur transparente. J'ai créé un autre élément avec l'ID de quatre. Et nous allons le sélectionner, appliquer une couleur d'arrière-plan à l'élément avec l'ID de quatre. Et cette fois, au lieu du RVB, utilisera le RGBA. Et ça va être indiqué par RGBA. Et la dernière valeur entre parenthèses RGBA va indiquer la quantité de transparence que nous allons appliquer à celle-ci. Donc 0 appliquerait 0 de cette couleur, l'élément. Nous voyons que c'est l' élément avec l'ID de quatre. n'y a donc aucune couleur que l' on voit visiblement appliquée. On peut aller de 0 à un. Si nous effectuons un 0,5, c'est 50 % du contenu appliqué à l'alpha du bloc de couleurs. Et c'est là que nous obtenons cette nuance de rouge plus claire. Et ça va être transparent de 50 %. Donc, si nous avions un élément ou un contenu en dessous, cette valeur serait affichée. Si nous devions définir une couleur d'arrière-plan pour le corps, je définirai la couleur d'arrière-plan en bleu. Les résultats du RGBA vont donner une couleur violette car il ombrage 50 % de la couleur à l'aide de l'arrière-plan, qui est bleu, et en utilisant 50 % de la couleur RVB, qui est rouge. Et ça va donner une teinte violette. Si vous mettez à jour le RVB a21, cela ne sera pas transparent, et ce sera la valeur couleur complète. Et c'est là que nous obtenons une valeur de rouge qui y est appliquée. Donc, lorsque vous utilisez le RGBA, ce qui se trouve en dessous et les couleurs en dessous seront importants quant aux couleurs utilisées . Il est également possible de définir la couleur de la police. Nous allons donc sélectionner la couleur de la police à l'aide de la propriété color. Pour cela, nous pouvons également lui appliquer une valeur de couleur. Il peut s'agir des valeurs de couleurs nommées, RVB , RGBA, en plus des valeurs hexadécimales des couleurs. Il existe également une propriété que vous pouvez utiliser pour ajouter de l'opacité à l'élément de page. Tout comme ce que nous avons vu avec RGBA, où tout cela se trouve dans une seule instruction et définissez une valeur pour cela. Et si nous définissons la valeur d'opacité de l'élément, ce qui s'est passé, c'est que nous avons obtenu l'opacité, mais cela a été appliqué à la fois à la police et à la couleur d' arrière-plan. C'est donc là que va être la police. Légèrement bleu car la police reçoit également opacité de 0,5, car l'opacité 0,5 est appliquée à l'arrière-plan. Cela va maintenant correspondre à ce que nous avons avec RGBA. Vous pouvez donc utiliser l'opacité pour appliquer l'opacité à l'arrière-plan. Pour les arrière-plans, vous pouvez également ajouter et utiliser des images. Ensuite, nous devons spécifier l'URL de l'image dans les parenthèses ayant une image directement située dans le même dossier. Et cette image va être appelée JPEG local à un point. Et lorsque nous appliquons l'image d' arrière-plan, nous voyons que ce qui s'est passé, c'est que maintenant l'arrière-plan du corps contient l'image qu'elle contient. C' est parce que l'image va être plus petite, alors ce que nous devons couvrir l'arrière-plan complet. C'est là que nous obtenons cet effet, où nous avons la répétition à la verticale et à l'horizontale. Si vous définissez une image qui sera transparente. Il s'agit donc d'une version transparente de l'image. Nous voyons que maintenant nous avons l'arrière-plan affiche car l'image est placée sur le dessus et nous avons toujours la couleur d'arrière-plan du bleu qui s'affiche en dessous. Donc, si nous devions mettre à jour la couleur d'arrière-plan, définir sur une couleur grisâtre qui va entraîner l' arrière-plan est toujours visible. Mais comme nous utilisons un fichier PNG, cela va être transparent et nous pouvons voir à travers l'image jusqu' à l'arrière-plan. Vous pouvez également contrôler l'arrière-plan pour la répétition de l'image d' arrière-plan qui s'affiche si vous ne voulez pas répéter ou ressentir que vous voulez répéter à l'horizontale ou à la verticale. Réduisons notre point de vue à 100. De cette façon, nous pouvons voir la répétition dans la zone d'affichage. En utilisant la répétition en arrière-plan, nous avons la possibilité de définir comment nous voulons qu'elle se répète. Nous pouvons donc le configurer pour répéter x. Et ce que cela va faire, c' est qu'il va le répéter sur l'axe X. Si on le répète, pourquoi ? Cela ne va le répéter que sur l'axe Y. Donc, vous n'avez qu'une seule image et cela se répète tout au long de l'élément de page. Il existe un certain nombre d'autres options pour la répétition, sorte que la répétition sera la valeur par défaut, où nous la définissons et elle se répète comme sur toute la page. Non, je répète. Cela ne va donc pas se répéter à la fois sur l' vertical ou sur l'axe des x, sur l'horizontale ou sur l'axe x. Il n'affiche donc qu'une seule image. Supposons donc que vous puissiez contrôler la façon dont l'image se répète en arrière-plan. Si vous n' utilisez que celui-ci, vous pouvez également définir une position d' arrière-plan. Et la position d'arrière-plan est une propriété utilisée pour spécifier la position où l' image d'arrière-plan sera définie. Nous pouvons donc positionner cela à partir de la gauche. Nous pouvons aussi faire à gauche, en bas. Il y a aussi droit et haut. Il va être placé en bas à gauche. Cela va le déplacer vers le bas droit, puis il y a le haut droit. Et parce que nous n'avons pas beaucoup de contenu là-dedans et que le haut sera le même si nous l'agrandissons. Et si on déplace ça vers le bas, on va pouvoir voir le positionnement réel du bas. Il est donc maintenant positionné en bas de la page. Il définit donc la position de départ de l'endroit où nous définissons cette image. Il existe également une valeur de pièce jointe. Donc, si nous le configurons en haut de la page, la pièce jointe en arrière-plan et ce que cela va faire, cela va définir la propriété qui va spécifier si l'image doit défiler ou être fixe. s'agit donc de la pièce jointe et il y a une fixe ou une position de défilement. Donc, à la volonté fixe, c'est qu'il va le réparer en place. Donc, même si nous faisons défiler, l' image d'arrière-plan restera au même endroit. Il ne va donc pas faire défiler là où nous allons faire défiler le contenu de la page. Si nous le définissons sur Scroll , c'est l'autre option. Maintenant que nous défilons, l'image se déplacera vers le haut car nous disposons de moins d'espace sur la page. Et si je devais la rendre encore plus petite, verrais que lorsque nous défilons vers le bas, cette image se déplace avec la barre de défilement. Il existe également un format abrégé pour tout cela lorsque nous pouvons définir tous ces éléments individuellement, mais nous pouvons également définir cela en groupe. Et ce que je vais faire, c'est que je vais commenter les propriétés ici, en les supprimant. Vous pouvez également faire des commentaires dans feuilles de style à l'aide de la barre oblique du système d'exploitation. Ensuite, lorsque vous avez terminé le commentaire, il vous suffit de faire les astérisques et la barre oblique avant , ce qui reviendra et se détachera du commentaire. Revenons donc aux milieux. Et nous allons définir tout cela dans le format raccourci, configurant la couleur, l'image, la répétition, la pièce jointe et la position. Tout cela se fait dans la propriété d'arrière-plan unique. Vous pouvez également utiliser uniquement l'arrière-plan et définir une couleur d'arrière-plan. Cela fonctionnera également. Il n'est pas nécessaire d'ajouter toutes les autres valeurs de propriétés. Si vous ne voulez qu'une couleur d' arrière-plan, vous pouvez utiliser le raccourci plutôt que d' écrire la couleur d'arrière-plan. À partir de là, vous pouvez ajouter des valeurs supplémentaires à cette propriété. Vous pouvez définir l'URL comme nous l'avons fait avec l'image d'arrière-plan. Il y a l'image en cours de mise en place. L'option suivante est la répétition. Donc, si nous ne voulons pas qu'il se répète, nous ne pouvons spécifier aucune répétition. Comme ces trois lignes de code. Nous pouvons également définir la position supérieure droite, définir le défilement et, par défaut, ce sera Scroll. Nous allons donc régler ça pour qu'il soit corrigé. Nous le corrigeons donc en haut à droite où le défilement vers le bas, cette image est maintenant fixée à la position supérieure droite de la page, ne se déplaçant pas avec le défilement, qui est l'action par défaut. Et il s'agit simplement d'une méthode abrégée que vous pouvez utiliser pour définir toutes ces propriétés et valeurs sur une seule ligne. Alors allez-y et essayez-le. Mettez à jour les couleurs de la police, ainsi que les couleurs d'arrière-plan des éléments de la page. Essayez le RVB, l' hexadécimal, ainsi que le RGBA, puis définissez une image arrière-plan et vous serez prêt à passer à la leçon suivante. 5. Remboursement de marge de 4 modèles de boîte: Nous allons donc simplement couvrir les modèles de boîtes en différentes parties, soit la bordure, le rembourrage, la marge, la largeur et la hauteur des éléments. Ainsi, les dimensions de l' élément pour le contenu, et comme nous pouvons le voir à droite dans le navigateur, elles ont une représentation calculée du modèle de boîte ainsi que du visuel. dans la page Web en haut, nous allons modifier le rembourrage, la bordure, la marge et les dimensions du contenu. Disons que nous allons nous concentrer sur le modèle de boîte. Le modèle de boîte est donc un terme utilisé lorsque nous parlons de la conception et la mise en page des éléments de page. Ainsi, chaque élément de la page aura une représentation du contenu. Donc la hauteur et la largeur du contenu, le rembourrage de ce contenu, Il y a une bordure qui va s'enrouler autour de lui. Et ensuite, la marge sera à l'extérieur. Et cela va représenter tous ces éléments, différentes parties qui vont continuer dans le modèle de boîte. Si vous utilisez un navigateur Chrome, vous pouvez sélectionner un élément, effectuer une inspection. Ensuite, dans l'Inspecter, si vous faites défiler jusqu' à l'endroit où nous avons les styles et les styles calculés, il vous donnera une représentation du modèle de boîte de cet élément particulier. Nous avons donc la marge, la bordure du rembourrage, largeur et la hauteur par défaut. Il y a donc des marges supplémentaires qui sont ajoutées en raison du contenu du bloc. Jetons un coup d'œil et nous allons faire quelques ajustements. abord, nous sélectionnons l'élément de page que nous voulons également appliquer le style. Et ce sera l' élément avec une carte d'identité de deux. Et nous allons définir une bordure pour que nous puissions voir les limites avec le contenu intérieur. La bordure peut être définie à l'aide de la largeur de la bordure. Il y a également une couleur de bordure que nous devons trier. Ensuite, la propriété style bordure. Cela peut également être fait comme un raccourci pour cela par la suite, ce qui nous permet d' appliquer la bordure autour de l'élément de page. Maintenant, dans le modèle de boîte, nous avons une bordure d'un. Je vais le rendre légèrement plus petit, donc nous le faisons zoomer assez gros. Je vais donc le rendre plus petit pour qu'il soit plus facile de le voir à l'écran. De cette façon, nous pouvons également voir le modèle de boîte qui y est associé. Il existe un moyen d'écrire cela comme un raccourci. Je vais me permettre une barre oblique et commenter cela et vous pouvez simplement le faire comme une frontière. Donc, le plus souvent, vous verrez cela écrit comme une frontière parce que sans tout cela, vous ne verrez rien pour le pensionnaire. Définissez la largeur de la bordure et définissez le style de la bordure et la couleur de la bordure. Cela va nous permettre d'appliquer cela. Nous pouvons mettre à jour ces valeurs. Donc, si nous effectuons cinq choix pour la bordure, cela sera également mis à jour dans le modèle de boîte. Et nous avons remarqué qu'à l'intérieur de l'élément lui-même, à l'intérieur de la bordure, le rembourrage y est contenu. Ajoutons donc un peu de rembourrage à cet élément de page. Vous pouvez définir le rembourrage comme nous l'avons vu précédemment, où nous pouvons faire un haut de rembourrage et définir un certain nombre d'unités que nous voulons effectuer le tracé. Vous pouvez également faire du rembourrage en bas, et c'est en appliquant les différents rembourrages. Il y a aussi le rembourrage gauche et droit. Réglez le rembourrage à gauche sur 15 médiators et réglez le rembourrage. Super. C'est donc le rembourrage fourni. Le rembourrage se trouve à l' intérieur de la bordure et à l'extérieur de la zone de contenu du contenu lui-même. Définissons une largeur de 200 PECS, et nous allons définir une hauteur de 200 pics qui modifieront les dimensions du conteneur principal. Et je vais en fait définir la valeur à 100 pour que nous puissions le voir encore visiblement sur la page. Maintenant, cela a été mis à jour. Alors que lorsque c'était juste le style par défaut de l'élément qui prenait les propriétés de la div. Ainsi, au fur et à mesure que nous avons redimensionné, il prenait toute la largeur sur la largeur de croix disponible. Nous avons maintenant une hauteur et une largeur définies. Comme nous l'avons vu avec la frontière. Nous pouvons définir les propriétés de remplissage des bordures dans le format abrégé. Tout va se faire dans une seule ligne. Lorsque nous réglons le rembourrage, le premier jeu de rembourrage. Si nous définissons un rembourrage de cinq pix, ça va appliquer cinq pics tout au long. Nous voyons qu'il est appliqué en haut, en bas, à droite et à gauche. Si nous pouvons définir une autre valeur, cela va être le haut et le bas restera à cinq. Et la gauche et la droite vont recevoir dix photos. Donc, si vous avez deux valeurs en raccourci pour le rembourrage, il va d' abord l'appliquer en haut et en bas, puis à droite et à gauche ensuite. Si vous ajoutez trois valeurs dans le rembourrage, il va utiliser un format de type dans le sens des aiguilles où la première valeur est appliquée en haut. La deuxième valeur sera appliquée à droite. La troisième valeur est appliquée en bas. Et comme il n'y a pas encore de quatrième valeur, il va appliquer la position gauche et droite. Cela va donc appliquer le rembourrage gauche et droit de la même façon. Il y aura donc dix rembourrages pour les deux. Enfin, nous pouvons y ajouter une quatrième valeur. Et cela va nous permettre d' appliquer le rembourrage en haut, à droite, à gauche, en bas, puis sur le côté gauche. Et vous pouvez voir que c'est représenté ici et rendu dans le modèle de boîte. Voyons également ce que nous pouvons faire avec la marge. Donc, comme on l'a vu avec la marge, la marge, valeur supérieure en bas, était-ce qu'elle allait être ajoutée dans le modèle de boîte. Ils se déroulent dans la page. Et nous avons également la méthode abrégée que nous pouvons utiliser sur ces derniers. Définissons une couleur d'arrière-plan pour les éléments. Donc, en définissant une couleur d'arrière-plan, je vais la définir comme lue. De cette façon, nous pouvons voir où se trouvent les limites de l'élément de page. Notez que la couleur rouge sera également contenue dans le rembourrage et tout jusqu'à la bordure. Mais en dehors de la bordure pour utiliser la marge, cela ne sera pas ajouté à l'élément. Cette couleur rouge ne sera pas ajoutée à cet élément. Configuration de la marge. Et comme nous l'avons vu avec le rembourrage, et nous commencerons par les 20 médiators. Cela va ajouter une marge pour le haut, bas et tout le reste. Si nous faisons dix choix comme valeur suivante, ce sera pour les valeurs de gauche et de droite. Ainsi, comme nous l'avons vu avec le rembourrage, les marges fonctionneront de la même manière. Ensuite, j'ajouterai les deux autres options. Et maintenant, nous avons un rembourrage séparé et des marges séparées pour tous les côtés de l'élément de page. Généralement, nous utilisons les méthodes raccourcies pour le rembourrage, pour la bordure et pour la marge. Afin d'appliquer le style à ces éléments de page, essayez de sélectionner un élément de page et d'appliquer la mise à jour des valeurs de propriétés de modèle de boîte à cet élément. Et vous pouvez être prêt à passer à la prochaine leçon. 6. 5 Texte et polices CSS: Nous allons couvrir les différentes façons mettre à jour la police. Cela inclut la mise à jour de la majuscule à l'aide de la transformation, la mise à jour de la décoration, le soulignement la mise à jour de la décoration, et la suppression du sous-jacent, ajout d'un retrait d'ombre, d' interligne, de hauteur de ligne, mise à jour de la taille de police à l'aide de la méthode abrégée pour la taille de police et la famille de polices. Comment choisir Google Fonts et intégrer ces familles de polices dans votre page Web à l'aide la hauteur de ligne pour centrer le contenu verticalement, ainsi que l'alignement et l'alignement du texte soit à gauche, à droite ou au centre. Et toutes les propriétés de police couramment utilisées que vous rencontreriez avec CSS apparaissent dans cette leçon. Allons dans notre code HTML. Nous allons sélectionner l' élément avec un ID de deux, puis nous allons ajouter une bordure autour de lui et appliquer des mises à jour aux propriétés et au style de celui-ci. Définissez la bordure. Et je vais définir un choix, une bordure de prélèvement et faire une bordure rouge autour de celle-ci afin que nous puissions voir la page, le contenu de la page, zoomer pour qu'elle soit légèrement plus grande. Faisons quelques mises à jour du texte. En connaissant le texte, nous pouvons définir une couleur. La couleur est définie à l'aide de la valeur de couleur et peut mettre à jour la couleur du texte. Il existe également d'autres propriétés pour les textes, telles que l'alignement du texte. Et cela nous permet soit de centrer, justifier la gauche, la droite. Il existe donc un certain nombre d'options différentes. Si nous le définissons à droite, ce qui arrive au texte, c' est qu'il s'aligne sur la droite. Et par défaut, il est aligné vers la gauche. Vous pouvez également centrer l' alignement du texte et le centre alignera ce contenu de texte à l'intérieur. Je vais également ajouter quelques marges. Ce n'est donc pas exactement directement à la frontière. Et je vais l'agrandir légèrement. Faites donc un remplissage de l'élément de page. Nous pouvons également ajouter des marges si nécessaire, qui peuvent le mettre en évidence un peu mieux là où nous voyons où elle est alignée. Notez que l' alignement a lieu jusqu'à la fin de l'endroit où se trouve le rembourrage. Si nous devions l'installer à gauche, nous avons toujours le rembourrage sur le côté gauche. Ramenez-le au centre et enregistrez ça. Il y a aussi une justification. Ce qu'ils justifient, c'est qu'il va le répartir plus équitablement. Il semblerait donc que le contenu du texte soit réparti également de gauche à droite. Dans ce cas, étant donné que la deuxième partie de la phrase se termine, elle n'est pas en mesure d'ajuster le texte pour la largeur égale pour la gauche et la droite et les marges. Mais si nous devions y ajouter du texte supplémentaire, je vais juste dupliquer le contenu du texte qui justifie maintenant d' essayer de répartir également le contenu entre la décoration du texte de gauche et de droite. Et il y a un certain nombre d'options pour cela. Il y a donc un sous-jacent, il y a un sous-jacent, un solide aucun est la valeur par défaut ne dit aucune décoration sur le texte. Bien que si vous utilisez une balise d'ancrage par défaut, il y a des décorations sur celles-ci. Faisons le soulignement pour le contenu du texte. Ensuite, nous allons sélectionner le texte d'ancrage et faire la décoration du texte. Si vous souhaitez supprimer la décoration de texte par défaut de l'ancre. Et vous ne pouvez les régler sur aucun. Et ça va supprimer la ligne de décorations de texte par défaut pour que vous puissiez le faire. Nous allons faire la ligne à travers le texte sélectionné. Il existe une option sous-jacente qui placera le, si le sous-jacent, il le surplombera. Placez donc la ligne au-dessus du texte, vous pouvez transformer le texte à l'aide de l'option Transformation du texte. Si vous voulez mettre en majuscule les textes dont il est probablement déjà en majuscule, vous pouvez le convertir en minuscules. Vous pouvez également le convertir en majuscules. Sélectionnez les balises d'ancrage et mettez-les toutes à jour pour qu'elles soient majuscules qui mettront tout en majuscules. Je vais sélectionner le contenu de l'en-tête. Et nous allons mettre en majuscule l'élément d'en-tête, en sélectionnant la transformation de texte, puis en majuscules et mises à jour en minuscules. Ensuite, l'écran va l'afficher sous textes en majuscules. Par exemple, vous pouvez faire une ombre de texte et qui fournit un effet d'ombre. devez spécifier l'endroit où vous positionnez l'ombre. Donc, mettez-le en quatre photos pour Pix, puis quatre pics vers le bas. Cela nous donne donc l'effet d'ombre. Ensuite, le vert correspond à la couleur de l'ombre et au retrait du texte. Ensuite, spécifiez la quantité que vous souhaitez mettre en retrait du texte, qui mettra le texte en retrait. Je commence par ce qu'est le premier personnage. L'espacement entre les lettres de sélection peut être utilisé pour identifier l'espace entre les lettres. C'est donc la propriété d' espacement des lettres. Et cela s'attend à une valeur unitaire. La configuration de l'espacement entre les lettres de dix pics espacera les lettres en utilisant les valeurs des dix pics entre les lettres. Et sélectionnez également la hauteur de la ligne. Et la hauteur de ligne définit la hauteur de cette ligne de contenu particulière. Frappé. Par défaut, il est défini sur quelle que soit la taille de police. Vous pouvez donc le régler sur une hauteur de ligne différente qui espacera encore plus l'espacement. Vous pouvez définir une taille de police et la taille de police peut être soit un incrément, soit elle peut être définie comme une valeur, soit les choix, les points ou les EMs. Donc, n'importe quelle unité que vous pouvez utiliser, je vais simplement utiliser les photos et définir cela sur 20 choix, qui augmentera la taille de la police. Et si vous n'avez pas la hauteur de ligne, la hauteur de ligne par défaut sera définie sur les 20 choix. Utilisez également la hauteur de ligne pour centrer verticalement. Donc, si vous n'avez qu'une phrase dans l'emballage, nous avons l'en-tête, la div. Faisons donc une sélection d'éléments. Donc, en-tête div, configurez une hauteur pour cet élément et cela sera réglé sur 100 choix horizontalement centrer le texte beaucoup dans une bordure. Et si nous définissons la hauteur de la ligne sur 100 choix, cela va maintenant centrer verticalement le texte à l' intérieur de l'élément. Vous pouvez également définir la police à utiliser. Cela peut donc être défini à l'aide la famille de polices et cela mettra à jour la police. Il s'agit des polices par défaut qui s' affichent dans l'éditeur. Vous pouvez donc choisir parmi ces polices, et ce sont des polices par défaut. Vous pouvez également obtenir des polices de caractères provenant de sources externes. J'utilise généralement des polices Google pour sélectionner une police. Et il s'agit d'un site Web sur lequel vous pouvez sélectionner des polices et les intégrer dans votre projet. En baisse et il y a actuellement plus de 1400 polices parmi lesquelles vous pouvez choisir. Vous allez donc passer par ici et sélectionner la police que vous souhaitez utiliser. Et je vais sélectionner celle-ci, faire une sélection de la police. Ça va vous donner un exemple de la façon dont ça va ressembler. Sélectionnez la vue des polices sélectionnées. Et maintenant, vous pouvez sucer, obtenir le code pour l' amener dans la police. Il y a le CSS de la police. Nous pouvons appliquer cela à notre paramètre de contenu Web, la famille de polices. Ils doivent également introduire la police. Et il vous montre comment vous pouvez le faire, où vous pouvez créer un lien vers la feuille de style. La meilleure façon de le faire si vous voulez le faire directement dans votre fichier CSS, c'est de pouvoir effectuer l'importation. L'importation vous permettra de l' intégrer dans votre fichier CSS. N'importe quel code HTML lié au fichier CSS aura alors accès pour utiliser la police de points. Maintenant, lorsque nous examinons le nom de la société, il est défini dans cette police que nous avons sélectionnée dans les polices Google. Mettons à jour la taille de la police. Je vais le rendre vraiment gros, 23 EM. Vous aurez également la possibilité de définir les différents styles, différents styles de police. Vous allez ensuite sélectionner les styles de police dans le texte d'ancrage. Et il y a des options par défaut, vous allez utiliser la normale. Vous pouvez le définir en italique, ce qui va l' incliner légèrement vers le côté droit. Vous pouvez également définir un poids de police et il y a plusieurs incréments. Vous pouvez le définir en gras et en gras, et cela ne fera que modifier le contenu de la police sélectionné. Vous pouvez également le faire en raccourci de police. Je vais aller de l'avant et sélectionner un autre élément de page où nous avons l'identifiant d'un. Sélectionnez donc cet élément de page, puis nous appliquerons des propriétés différentes à ceux-ci. Configurez cela et j' ajouterai une bordure afin que nous puissions voir où se trouve l'emplacement de cet élément de page. C'est donc celui que nous avons sélectionné en bas. Ajoutons-y un peu de rembourrage. Mettez également à jour la taille de la police. C'est vraiment une grosse police là-bas. Le raccourci de police. Nous pouvons y appliquer différentes propriétés de dimensionnement. Donc, au lieu d'utiliser la taille de la police, vous pouvez l'insérer juste en dessous de la police. Parce que vous devez posséder deux propriétés, la taille de police et la famille de polices. Donc, si nous voulions mettre à jour cela et inclure la famille de polices que nous avons introduites de Google. Il est possible de le faire dans ce type de format. Et maintenant, cela va être appliqué et nous l'avons fait dans un format abrégé. Vous devez avoir la taille et la famille de polices. Et vous pouvez en ajouter d'autres, comme l'italique. Ainsi, cela mettra en italique la police. Les adopters offrent un moyen plus simple d'écrire le contenu de cette police. Il s'agit de certaines des propriétés de police couramment utilisées dans le style. Alors allez-y et essayez de sélectionner les éléments de la page et d'appliquer les différentes propriétés de style aux éléments. Et vous pourriez être prêt à passer à la prochaine leçon. 7. 6 affichage d'éléments CSS: Cette leçon va couvrir ce que fait la propriété d'affichage et les différentes valeurs si couramment utilisées ou bloquent les blocs en ligne et en ligne, ainsi qu'en afficher aucune. Alors comment ils vont affecter les éléments de la page et ensuite la différence entre la visibilité cachée et l'affichage aucune, et comment ils vont apparaître sur la page Web. La propriété display est l'une des propriétés CSS les plus importantes que vous pouvez utiliser pour contrôler la mise en page. Par défaut, certains éléments de la page, tels que les divs, possèdent déjà une propriété. Et c'est la propriété display, qu'il s'agisse d'un bloc ou d'une ligne, lorsque vous créez des éléments de page. Et je vais créer un couple ici où nous avons une div. Et puis dans la div, j'ajouterai quelques travées. Spans, ce qu'ils font, c'est qu'ils sont en ligne, ce qui signifie qu'ils ne prendront pas une nouvelle ligne de code. Par défaut, les spans seront en ligne et les divs sont ceux qui vont prendre le bloc de code complet. Si je devais mettre à jour et envelopper ce premier mot, le mien avec la nouvelle ligne avec la div, il va le déplacer et le définir sur une nouvelle ligne, alors que les travées seront en ligne. Faisons une sélection de ces éléments et nous allons mettre à jour ces éléments de page. En sélectionnant l'en-tête dont la div se trouve immédiatement en dessous, que vous pouvez utiliser à l'aide du signe supérieur à. Je vais choisir une bordure. Ainsi, ADA, on choisit une bordure noire solide à cette sélection de la div, puis le contenu contenu dans cette div. Je vais mettre à jour les spans, en sélectionnant les travées contenues dans la div. Et cela va s'appliquer à toutes les travées contenues dans cet élément parent et définir la propriété display pour qu' cet élément parent et elle soit bloquée. Ce qui s'est passé, c'est que les spans maintenant la même propriété d'affichage que la div, où ils vont prendre une nouvelle ligne, ajouter une bordure. Maintenant, ils vont passer sur une nouvelle ligne, en définissant la propriété display pour qu'elle soit en ligne. Et parce que nous n'avons pas autre élément en ligne, c' est pourquoi il ne le fixe pas l'un à côté de l'autre. Allons de l'avant et nous allons mettre à jour le code HTML. Et nous y aurons les deux valeurs. Et ces deux vont être des divs. Et maintenant, ce sont des divs qui vont être en ligne. Je vais également ajouter une bordure autour d'eux afin que nous puissions les distinguer dans la zone visuelle de la page. Alors mettez-les en bleu. Maintenant que les div sont en ligne, les travées sont bloquées. Nous pouvons voir la différence entre les deux éléments de niveau bloc qui commencent par une nouvelle ligne et ils prendront toute la largeur disponible du conteneur. Si nous devions mettre à jour la largeur disponible dans l'en-tête, c' est-à-dire le conteneur parent. Et nous avons défini une largeur de cela. Et je vais régler ça à 200 choix. Les conteneurs bloqués, qui bloquent les éléments d'affichage vont prendre toute la largeur de cela. Il y a aussi un présentoir, aucun. Je vais donc sélectionner l'élément de navigation et mettre à jour cette propriété d'affichage. Ce sera donc les hyperliens que nous avons sur la page. Et je vais régler cela pour qu'il n'en affiche aucun. Ce qui s'est passé, c'est que cela a réellement disparu de la page et qu'il se trouve toujours dans le code source, mais l'affichage, aucun ne le cache simplement de la vue. En fait, cela va être différent de la visibilité nulle. Permettez-moi donc de le ramener et je vais sélectionner l'élément avec celui qui le cache. Ensuite, nous sélectionnerons l' élément avec un ID de deux utiliserons la visibilité et définirons la visibilité sur masquée. Et la différence entre l'affichage nul et la visibilité cachée est que le caché occupe toujours l'espace sur la page, alors que l' affichage aucun n'a complètement supprimé que élément de page de la zone d'affichage, la couleur d'arrière-plan de celui-ci. Il est donc plus visible. Ensuite, nous le masquerons une fois de plus en utilisant l'écran aucun. Donc, quand je mets à jour cela pour dire n'afficher aucun, il va disparaître ce bloc jaune de la zone visible de la page. Allons de l'avant et nous allons sélectionner les éléments de la liste sur la page qui mettront à jour certaines propriétés des éléments de la liste sur la page. donc non ordonnée, liste des éléments. Et ce que nous voulons faire appliquer aux éléments de la liste va mettre à jour l'affichage et je vais définir l'affichage comme bloc en ligne. Lorsque nous faisons cela, ce qui s'est passé, c'est qu'il conserve toujours les propriétés de la liste non ordonnée. Il existe certaines propriétés par défaut. C'est pourquoi il est en retrait. Mais avec l'affichage aucun, affichage en ligne bloc, ceux-ci nous ont permis de les aligner horizontalement. C'est ainsi que les menus de navigation sont généralement créés, où nous avons une liste non ordonnée et nous effacons les éléments de la liste non ordonnée, les propriétés par défaut telles que la marge et le remplissage. Donc, en supprimant cela, cela rendra cela directement en ligne. Je vais également définir la bordure pour que nous puissions voir toute la liste non ordonnée et définir la bordure d'un pixel vert solide. Cela occupe la totalité de l'espace de bloc. Mais nous avons supprimé la marge et le remplissage qui permettait aux éléments de la liste de s' aligner sur le bloc en ligne de gauche sera légèrement différent de ce que nous avons avec couleur en ligne pour eux, de sorte que nous pouvons voir où se trouvent les limites de ces éléments. Ce sera donc le bloc en ligne. Et si je passe en ligne, vois qu'il y a un peu de rembourrage supplémentaire qui va être là avec les blocs. Donc, un peu d'espacement supplémentaire entre le bloc en ligne et en ligne. Il y a donc une légère différence entre les deux, et il y aura une plus grande différence si nous prenons le rembourrage et si nous ajoutons du rembourrage aux éléments. Une fois que nous ajoutons le rembourrage à cela, qu'il est juste en ligne. Les éléments en ligne ne prendront pas le dimensionnement parent. Vous voyez donc que lorsque nous utilisons simplement l'inline, bien que nous soyons en mesure d'appliquer le même remplissage en regardant le parent de la liste non ordonnée. Maintenant, ça va être plus petit que ce que nous avons pour la taille. Nous devons donc obtenir ces propriétés de blocs à l'aide du bloc en ligne. Il s'agit donc d'une combinaison entre l'inline et le bloc. Et cela nous permet de prendre toute la hauteur de la valeur de la propriété parent-enfant, l'affichage, aucun bloc en ligne, valeur de la propriété d'affichage en bloc en ligne. Vous pouvez être prêt à passer à la prochaine leçon. 8. 7 Position de l'élément CSS: Positions spécifie le type de positionnement de l'élément. Nous allons donc examiner ceux qui sont couramment utilisés comme le parent, le fixe, le collant absolu, et comment vous pouvez les utiliser pour positionner le contenu de la page. Ensuite, au fur et à mesure que le contenu de la page fait défiler une différence de comportement entre les différents éléments auxquels les différentes propriétés de positionnement sont appliquées. Avec cette propriété position, on a pu sélectionner un élément et définir sa position sur la page. Allons de l'avant et nous allons faire une sélection de certains éléments de la page. Il sélectionne la barre de navigation. Pour la barre de navigation, une couleur d'arrière-plan a permis distinguer où elle commence et où elle se termine. Ce sera donc leur barre de navigation. Et dans la navigation, nous avons également des listes non ordonnées et un tas d'éléments de liste, puis des balises d'ancrage qui y sont contenues. Allons-y et nous allons mettre à jour la position de cet élément. Définissez la position et je mettrai la position sur statique. Quelle est la position statique statique ? Ce n'est pas qu'il soit positionné de façon spéciale. Ce sont des personnes ****** qui selon le flux normal de la page. Donc, le régler sur une position statique. Et je vais agrandir le texte un peu afin que nous puissions consoler. Je vais également mettre à jour certains contenus. Donc, l'élément article et moi mettrons à jour la hauteur sur le fait que nous sommes en mesure d' avoir un défilement pour le contenu de la page avec la position statique, ce sera la position par défaut. n'y a donc pas de positionnement spécial pour cet élément. Nous pouvons utiliser la position relative. Et la position relative nous permet mettre à jour la position à partir de sa position normale. Lorsque vous le définissez comme une position relative, elle sera toujours en ligne avec le flux normal de la page. Mais l'utilisation de la position relative nous permet de mettre à jour la position gauche et la position supérieure. Donc, si je voulais déplacer l'élément entier vers la droite de 36, cela peut être fait en utilisant la position relative à la position statique. Il va ignorer cette deuxième propriété. Il ne vous permet donc pas de faire la gauche ou le haut. Vous devez donc définir la position relative, ce qui vous permet de définir les autres propriétés et positionner cet élément en effectuant des ajustements à l'endroit où il se trouve sur la page. Il y a aussi une position inférieure pour cela. Si vous le définissez sur 40 photos du bas. Il s'agit donc d'un bas de 40, et cela se détache du bas de l'élément parent de l'endroit où se trouvait la position initiale de cet élément contenant. Je vais m'ajouter à la classe d'emballage. Et je mettrai une hauteur de 400 pioches. Et ensuite, nous ferons également une frontière autour de lui. Donc, un seul choix, un bloc solide. Il y a notre emballage pour que nous puissions voir le haut et le bas de l'emballage. Si nous sélectionnons un élément et si nous utilisons la position fixe, cela va corriger l'élément au même endroit même si la page est défilée. Nous allons aller de l'avant et nous allons sélectionner l'élément d'en-tête et définir sa position comme fixe. Et j'ajouterai également une couleur de fond pour le règlement. Il suffit de le mettre en bloc. Ce sera donc la position fixe de l'élément. Et généralement, lorsque vous utilisez les différents positionnements, mettez également à jour la couleur pour qu'elle soit blanche. Avec la position fixe, vous définissez généralement une largeur, alors donnez-lui une largeur et faites une largeur de 50 %. Une fois que nous avons enregistré cela, nous voyons que nous avons une largeur de 50 %. Il y a aussi une gauche que vous pouvez définir. Comme nous l'avons vu avec le parent. Le fixe permet de le positionner dans une partie particulière de la page. Cela va être relatif à l' emplacement de l'écran. Si nous avons un écran de plus grande taille, il restera dans les vingt-cinq pour cent. 25 % de réduction par rapport au haut de la taille de la page. Ainsi, au fur et à mesure que nous le monterons, cet élément se déplacera également. Je dois mettre à jour cela pour être RGBA afin que nous puissions réellement voir le contenu qui est en dessous configuration en tant que version Alpha. Et je vais lui donner 50 % de transparence. Nous pouvons donc voir le contenu qui se trouve sous l'élément de position fixe. Revenons aussi là où nous avons mis le fond. Si nous le définissons à 0, cela pourrait être le même. Ainsi, le bas zéro et haut 0 seront partout où se trouvait la position par défaut. Comme il était statique, il resterait toujours dans cette position par défaut. Bien que nous ne le bougions pas vers la gauche de 30 ans, la première position aurait toujours été la même. Si nous le remettons en relation et que nous le mettons à jour, ça va être mis à jour où il était censé être positionné à l'origine, et cela mettra à jour cette valeur de position. Il y a aussi une position absolue. Il s'agit de la position absolue et de sa par rapport à la position de l'ancêtre. Ce n'est donc pas relatif au point de vue. Par exemple, fixe par rapport au point de vue. L'absolu va être relatif au parent. Allons de l'avant et nous allons sélectionner les éléments de page et nous sélectionnerons celui avec l'ID de deux. En fait, sélectionnez celui avec l'ID d' un et mettez-le à jour. Il y a tout un bloc de texte. Je vais définir une couleur d'arrière-plan pour que nous puissions la voir sur la page. Au jaune. Il va donc définir ce bloc de texte en jaune et définir sa position. Définissez la position sur absolue. Et j'utiliserai les mêmes valeurs de positionnement que celles que nous avions là. Maintenant, il est défini comme absolu. Mais la différence est qu'au fur et à mesure que je fais défiler, ces positions fixes restent les mêmes, mais l'absolu commence seulement à être au même endroit. Je mettrai à jour l'affichage pour qu'il ne soit pas du NEF. Et donc, lorsque nous commençons par défaut , cela va être positionné par rapport à l'endroit où se trouve le parent. Si nous devions mettre à jour l'enveloppe et si nous étions à la marge, haut de l' enveloppe de 40 choix, cela le déplacera également bas et mettra à jour où nous avons fixé son positionnement. Au fur et à mesure que nous le faisons défiler, il sera toujours par rapport à l'endroit où se trouve le contenu de la page principale. Mettez également à jour cela pour être enseigné et nous le fixerons à 100 choix. Et pour le haut de l'en-tête, ce serait 100 choix. Et j'utilise également une RGBA pour celle-ci. Nous pouvons donc voir comment celui-ci se déplace différemment de ce que nous avons pour la position fixe. Parce qu'une fois de plus , elle est positionnée. Et si l' élément positionné n'a pas d'ancêtres positionnés qui utilise tout le corps du document. Ajoutons donc un certain positionnement à cela. Donc, si nous définissons une position relative à l'emballage, à partir de là, nous faisons dix choix. Cela affecte maintenant l'emplacement de la position absolue. Parce que l'Absolu est défini en relation. Si l'un des ancêtres a une position fixe, il le positionne à l'endroit où il se trouve dans l'ancêtre. Il y a aussi une position collante. Sélectionnez donc l'élément avec un ID de deux et définissez cette position sur la position collante. Définissez également une couleur d'arrière-plan pour cet élément. Et cette couleur d'arrière-plan sera verte. Définissez les 0 premiers choix. Et cet élément va être collant. Et le collant, nous basculerons entre le relatif et le fixe en fonction de l' relatif et le fixe en fonction endroit où se trouve la position de défilement. Nous allons réduire la taille de l'article et j' augmenterai la taille. Alors que je fais défiler, on voit que le collant va changer. Donc, en fonction de l' endroit où se trouve le défilement, la position est définie, Il va être mis à jour dans la zone d'affichage. Alors que je fais défiler vers le bas, il reste collant là. Et alors que je continue à faire défiler, il passe à utiliser le décalage de position relatif entre le collant, en utilisant à la fois fixe et relatif. Assurez-vous que vous disposez de suffisamment de contenu pour pouvoir faire défiler. Vous pouvez ainsi voir les différences entre les propriétés de positionnement et de positionnement. Valeurs. 9. 8 Flottant d'élément CSS: Le flotteur vous permet de positionner le contenu sur la page afin que vous puissiez créer différentes colonnes sur votre page. Ce que vous pouvez faire avec cela, là où vous pouvez le positionner vers la droite ou vers la gauche, effacez le flotteur pour éléments de la page suivante en utilisant l' option claire comment le débordement fonctionne avec le flotteur et les éléments flottants, alignez-les dans le reste du contenu de la page. Et comment le flotteur affecte les éléments suivants qui sont les frères et sœurs des éléments auxquels le flotteur leur est appliqué. C'est donc tout ce qui arrive dans cette leçon. Float est utilisé pour le positionnement et le formatage du contenu, en particulier pour les images, ainsi que pour créer la mise en page et la structure de la page. Nous avons maintenant la grille CSS ainsi que Flex, que nous allons couvrir un peu plus tard. Nous voulons maintenant sélectionner l'image sur, dans l'élément avec l'ID d'un. Passez en revue et faites une sélection et sélectionnez l' élément avec la balise image. Allons de l'avant et nous allons appliquer certaines propriétés à cela. Je vais définir une largeur de 100 pics et en fait je vais utiliser la largeur maximale. Donc, si la taille de la page diminue et que la largeur maximale fonctionnera, c'est que la largeur maximale que nous verrons pour cette image sera de 400 choix, même si la taille de la page est allouée et permis pour plus, et nous allons nous en tenir à la largeur maximale. Je vais réduire cela à 100 pioches afin que nous puissions mieux voir comment les flotteurs vont fonctionner si l'on flotte dans la ligne. Nous voyons donc que l'image va être directement en ligne avec le contenu. Mais nous positionnons le contenu. Nous ne positionnons pas le contenu directement autour de l'image. Vous pouvez utiliser des flotteurs pour résoudre ce problème. Donc, configurer un flotteur si nous voulons faire flotter l' image vers la droite, cela va enrouler le texte autour de l'image. Ajoutons une bordure pour l'image. Donc, choisissez solide et autorisé dans une bordure rouge afin que nous puissions facilement voir où se trouve la bordure de l'image. Cela nous permet d' ajouter la moitié du texte autour de l'image. Nous pouvons également le faire flotter vers la gauche. Cela fera le même effet, mais positionnez-le sur le côté gauche. Vous pouvez également sélectionner les éléments de la liste dans le bouton. Et appliquons un flotteur à ceux-ci. Configuration, un flotteur de gauche pour les éléments de la liste. Et ce qui s'est passé maintenant, c'est que nous avons les éléments de la liste, ils flottent juste à côté de l'autre. Et avec les flotteurs, vous devez appliquer un clair, sinon la propriété float sera toujours appliquée à l'élément suivant. Et c'est là que nous avons ce type d'effet, où nous ne supprimons pas les éléments de la liste et où nous devrions effacer et avoir un clair afin d'éviter qu'il ne passe à l'élément suivant, on peut mettre en place une travée. Et dans l'intervalle, donnons-lui un cours. Je vais juste appeler ça un flotteur clair. De cette façon, nous pouvons sélectionner le flotteur clair pour la liste non ordonnée. J'ajouterai une bordure autour la liste non ordonnée afin que nous puissions facilement identifier où la liste non ordonnée se termine par arrêts et où elle est flottante. Nous avons remarqué que dans la liste non ordonnée, nous n'obtenons pas la hauteur de la liste non ordonnée. L'arrière-plan. Si nous devions appliquer une couleur d'arrière-plan à la liste non ordonnée, j'y appliquerai simplement une couleur d'arrière-plan noire. Il se présente comme une ligne cause du flotteur qui le flottait vers la gauche. Si je devais retirer le flotteur, point couvrirait l' ensemble des éléments. Mais dès qu'on le fera flotter vers la gauche, ça va prendre ces valeurs de propriété et appliquer le flotteur. Je veux ajouter le flotteur clair. Ce que ça va faire, c'est que ça va nous permettre de dégager les flotteurs. On peut dégager le flotteur à gauche, on peut dégager le flotteur, n'est-ce pas ? Et puis on peut dégager le flotteur et les deux. Habituellement, vous allez utiliser le Clear pour flotter les deux flotteurs déclarés. Je vais également sélectionner l'article et appliquer une bordure autour de l'article. Et nous allons également appliquer la classe de correctif clair au site a. Comme vous pouvez voir que ce qui se passe ici, c'est que nous le flottons vers la gauche, cet élément récupère toujours ce style pour le faire flotter vers la gauche. C'est donc si nous faisons le flotteur clair qui replacera la ligne suivante dans le site à sa position par défaut sur le côté gauche. Si nous mettons à jour le dépassement de la liste non ordonnée. Donc, si nous définissons le débordement pour qu'il soit automatique, cela va alors définir la hauteur et dimensions du parent au fur et à mesure que nous le flottons. C'est donc là que nous avons obtenu la couverture complète de la partie noire que nous sommes autorisés à sélectionner cet élément. Et maintenant, il prend les propriétés du flotteur et empêche l'élément de déborder, il se trouve à l'extérieur du conteneur. Nous pouvons donc également définir cela sur l'élément avec l'ID d'un et faire de même lorsque nous pouvons définir le débordement. De cette façon, il fournira suffisamment d'espacement pour l'élément car nous flottons le contenu et nous permettra toujours passer à la partie suivante de la page. Les éléments peuvent utiliser les flotteurs dans afin de créer des colonnes dans le contenu de votre page Web. Allons de l'avant et nous allons créer une zone de colonne principale et mettre en place quelques divs différentes. Je vais simplement leur donner une classe de col pour colonne et ensuite leur donner différentes valeurs contenues dans le contenu afin que nous puissions les distinguer. Donc, ce seront trois colonnes que nous allons mettre en place. Ils vont tous avoir la classe CO L. et nous allons utiliser des flotteurs afin créer un bon design de colonne libre. Pour accéder à la feuille de style, sélectionnez l'élément avec la classe CLL et ajoutez-en une bordure. De cette façon, nous pouvons faire la distinction entre eux. Appliquez ensuite un flotteur. Retournons-les sur le côté gauche. Et remarquez que nous n' avons pas la solution claire. C'est pourquoi ce contenu est toujours en cours, le contenu suivant est toujours flotté. Nous devons appliquer le clair de l'élément suivant. sera donc pour celui qui va réaligner cela alors que nous nettoyons les flotteurs pour les éléments. Définissons la largeur pour ces derniers, et je la fixerai à 33,3 %. La raison pour laquelle nous ne sommes pas en mesure de faire le plein 100 % est que la frontière, si nous devions enlever la frontière, elle serait en stock juste à côté de l'autre. Il existe également un autre moyen de corriger ce problème où nous pouvons appliquer le dimensionnement de la boîte. Et ce que la propriété box-size nous permet de faire, c'est inclure le rembourrage et la bordure dans la largeur totale des boîtes. Appliquons donc la propriété box-size à tous les éléments de page et définissons la taille de la boîte sur le nombre de border-box pour le remplissage complet, ainsi que la bordure des éléments. Et cela nous donne la capacité de les aligner. Je dois ajouter un peu de rembourrage pour ces éléments et nous allons également définir une hauteur pour les éléments. Cela nous donne donc un peu plus d' espacement autour des éléments. C'est ainsi que vous pouvez créer une colonne à trois colonnes l'aide du flotteur. Et tant que vous nettoyez le flotteur du prochain élément frère. Et aussi si vous avez du contenu qui déborde les éléments flottants. Si nous avons les images contenues dans chacune de ces images, il y aura un débordement. Vous pouvez donc définir le débordement sur caché. Cela masquera tout débordement du contenu. Ou si vous le définissez sur Auto, cela réajustera automatiquement la hauteur et nous permettra de faire défiler pour voir le contenu complet de l' élément a été flotté. Il y a donc deux options que vous pouvez faire avec le débordement afin de bien insérer le contenu de la page. Alors allez-y et essayez-le sur votre page et familiarisez-vous avec ce que vous pouvez faire avec la propriété float et les différentes valeurs qui y sont associées. 10. 9 cours Pseudo CSS: Ce sera une leçon amusante où nous allons nous concentrer sur les pseudo-classes. Et ce que font les pseudo-classes, c'est qu'elles nous permettent de faire des sélections et de définir l'état d'un élément. Il est donc généralement utilisé sur les balises d' ancrage où ils ont le lien, le visiteur, le survol et l'actif. Vous pouvez mettre à jour ces propriétés de style. Il n'est pas limité à ces éléments, les balises d'ancrage, vous pouvez les placer sur n'importe quel élément où nous avons le survol. Donc, au cas où vous survolez, nous obtenons une bordure rouge pour les images. Les autres éléments qui planaient au-dessus sont en bleu clair. Il y a aussi une possibilité de faire une sélection. Ainsi, premier enfant perdu, vous pouvez faire le nième enfant, ce qui vous permet de faire pair ou impair. Vous pouvez faire un style alternatif pour les frères et sœurs. Spécifiez également la case à cocher, vérifier si elle est cochée et appliquer un style lorsqu'elle est cochée. Il y a également la pseudo-classe de focus, qui met à jour les propriétés de style lorsque le focus est appliqué aux éléments. Pseudo-classes, vous pouvez définir l'état de l'élément. Donc, si l'élément, et cela se fait généralement lorsque nous utilisons des liens hypertexte. Faisons une sélection des balises d'ancrage et nous allons mettre à jour certaines propriétés de pseudo-classe pour cela. Nous avons donc généralement une valeur pour le lien lui-même. Et ceux-ci changeront selon qu'il a déjà été cliqué. Il s'agit donc d'une propriété par défaut des hyperliens. Et si vous souhaitez les modifier, donc tous les liens que nous avons actuellement, si nous les configurons comme un tout nouveau lien. Cela signifie donc que le lien n'a pas été visité. Nous pouvons définir la propriété du lien et mettre à jour la couleur. signifie que si nous avons un lien hypertexte qui n'a pas été visité, il deviendra rouge. Et je vais mettre à jour cela pour avoir une valeur différente. Nous voyons maintenant que ceux qui n'ont pas été visités vont lire. Nous avons également des liens visités. Définissons donc une nouvelle valeur par défaut pour l'état visité du lien et mettons à jour celle-ci et celles qui ont été visitées. Mettons ça en vert. Cela vaut pour tous les autres liens que nous avons. Vous pouvez également définir un effet de survol chaque fois que vous survolez le lien. Donc, pour l'instant, par défaut, il n'y a pas d'effet de survol. Donc, parfois, ils vont le faire. Vous avez la décoration du texte et n'avez rien défini. Alors que nous le survolons, le sous-jacent disparaît. Vous pouvez également mettre à jour la couleur d' arrière-plan des éléments. Alors que nous les survolons, mettons-les à lire. Et nous allons définir la couleur du texte pour qu'elle soit blanche. Cela vous donne donc ce type d'effet que vous voyez couramment dans les menus de navigation. Il y a également un état actif. Nous allons donc sélectionner les éléments et mettre à jour leur état actif. Et actif. Définissons ce type de couleur pour l'actif. Ce qui est actif signifie que chaque fois qu'il est cliqué vers le bas lorsque je le survole, si j'appuie dessus, ça deviendra vert. Cela va donc nous donner l'actif. Mettons également à jour la taille de la police pour qu' elle soit un peu plus visible lorsque j'appuie dessus. Quand on clique dessus, il devient gros. Et quand je le relâche, il revient au dimensionnement par défaut. C'est donc l'état actif. Et ce sont des pseudo-classes typiques que vous avez peut-être, que vous avez pour les balises d'ancrage. Il n'est donc pas nécessaire que ce soit uniquement sur les étiquettes d'ancrage. Vous pouvez le configurer sur d'autres éléments de page. Par exemple, je dois sélectionner les images, vais définir la largeur des images à 100 choix. Et la hauteur des images sera de 100 choix. Cela les rendra beaucoup plus petits. Appliquons une pseudo-classe à eux. Chaque fois que nous survolons les images, je vais sélectionner la bordure. Et nous allons mettre en place une bordure de trois poinçons. Et il sera lu quand on le survole. Par défaut, ajoutons une bordure pour que les images soient bloquées. Sinon, les images se déplaceront dans leur position. Chaque fois que je les survole. Maintenant, ils ont le fond rouge. C'est aussi étrange pour la div et un sudo pour la div. Ainsi, chaque fois qu' il est survolé, mettons à jour la couleur d' arrière-plan et définissons cette couleur comme couleur d' arrière-plan. En fait, ne définissons pas cela sur la div principale, mais nous allons la définir sur les éléments contenus dans le principal. Sélection de l'élément avec la classe de wrapper. Ce sera donc l'élément principal et l'appliquera à tous les éléments qui se trouvent à l'intérieur. Donc, tous les éléments enfants dans emballage qui immédiatement dans l'emballage. Nous allons maintenant avoir cet effet de survol qui leur sera appliqué. C'est donc toutes les sections principales que nous avions sur la page Web. Vous pouvez également utiliser le pseudo pour spécifier l' un des enfants. Donc, si vous souhaitez obtenir le premier enfant de wrapper, vous pouvez spécifier le premier élément enfant. Il s'agit donc d'une autre façon d' affiner le processus de sélection. Mettons à jour la couleur d' arrière-plan du premier enfant et réglons la couleur rouge. Ce sera le premier enfant de l'emballage. Je vais en fait aller là où j'ai les divs. Et je vais donner à cela une classe de ligne, vais sélectionner le premier enfant qui se trouve dans la rangée. Ça va être un peu mieux à utiliser. Dans la ligne, nous voulons sélectionner la première colonne. Nous pouvons donc le faire en sélectionnant la classe, puis en sélectionnant le premier enfant de l'élément. Il va donc renvoyer le premier enfant correspondant dans la liste qui sera tous au même niveau. Toutes les colonnes sont donc au même niveau. C'est là que nous sommes en mesure de sélectionner le premier enfant. Vous pouvez également faire le dernier enfant. Ainsi, la sélection dans la ligne mettra à jour et définira la dernière propriété enfant. On peut régler ça en bleu. Il peut également être spécifique, donc utiliser le nième enfant. Ce sera donc le nombre d'enfants. Donc, si vous souhaitez le définir pour chaque deuxième élément, nous spécifions également le numéro que nous voulons ignorer. Cela va donc l' appliquer à tous les autres éléments pour chaque deuxième élément. Et je mettrai à jour la couleur de la police à lire. instant, il ne va que dans l'élément. Et nous allons les copier et nous les dupliquerons. De cette façon, nous pouvons définir plusieurs éléments qui sont les éléments enfants lorsque nous spécifions l'utilisation de sa valeur d'index. Donc, ça va se rapporter à la seconde. Mettons à jour et définissons une couleur d'arrière-plan et définissons la couleur d' arrière-plan sur le vert. Encore une fois, ce sera le deuxième. Nous pouvons mettre à jour cette option pour sélectionner toutes celles qui sont impaires. Nous pouvons également mettre à jour cela pour sélectionner tous les éléments correspondants qui sont égaux, que nous l'appliquerons à tous les éléments alternatifs. Allons de l'avant et ajoutons une case à cocher dans notre page. Sert notre case à cocher avec un chèque. Donnez-lui une classe de Checker, et nous en ferons quelques-uns. Donc, nous avons le chèque moi un, vérifiez-moi aussi, vérifiez-moi trois et vérifiez-moi. Cela nous donne donc quelques cases à cocher sur la page. Et maintenant, sélectionnons les éléments qui sont en entrée. Avec le type de case à cocher. Nous pouvons être plus spécifiques avec les types d'entrée en utilisant les crochets , puis en spécifiant le type. Ce sera donc l'un des attributs de l'élément. Nous voulons y appliquer l'option cochée. Donc, vérifiez si elle est cochée, puis appliquez-y un peu de style. Ce que nous voulons faire, définissons une hauteur de 50 pixels et une largeur de 50 pix à cet élément vérifié. Quand ils seront vérifiés, ils vont devenir vraiment gros. Il existe également un pseudo-sélecteur de focus qui peut être appliqué si nous nous concentrons sur une entrée. Et mettons à jour la couleur d' arrière-plan. Alors réglez ça sur le jaune. Et je vais en fait mettre à jour et ajouter des entrées supplémentaires juste régulières. Maintenant, ces entrées, chaque fois qu'elles sont sélectionnées et que l' accent est mis sur elles, elles obtiennent le sélecteur de jaune et les cases à cocher. Ils seront toujours mis à jour au fur et à mesure qu'ils sont cochés, comme nous l'avons fait avec la case à cocher, en sélectionnant l'entrée, puis en sélectionnant le type en tant que texte. Cela s'appliquera à cette propriété. Et certaines des propriétés qu'ils ne seront pas disponibles pour tous les éléments de la page sont celles qui sont simplement définies comme couleurs d' arrière-plan par défaut pour eux. Essayez-le et voyez ce que vous pouvez faire avec les pseudo-classes. Essayez les différentes pseudo-classes sur différents éléments de page. Il peut être prêt à passer à la prochaine leçon. 11. 10 Éléments Pseudo CSS: Cette leçon nous allons mettre à jour la partie de la sélection, l'élément sélectionné. Ainsi, mettre à jour la première ligne, la première lettre, ajouter du contenu après et avant la sélection des éléments. Et tout va se faire avec des pseudo-éléments, où nous utilisons les deux points pour indiquer le pseudo-élément et appliquer des styles à une partie de l'élément sélectionné. pseudo-éléments nous permettent de créer et de sélectionner des parties spécifiques d'un élément. Nous allons aller de l'avant et nous allons faire une sélection du contenu de la page. Nous avons déjà un certain nombre d'éléments de page que nous avons déjà. Je vais sélectionner celui qui a une carte d'identité. Ensuite, nous allons appliquer un pseudo élément à cela, en sélectionnant l'élément avec l'ID d'un. Et je vais mettre à jour la taille de police de l'élément, rendre la taille de police relativement grande. Nous pouvons également mettre à jour la taille de l'image en tant qu'images plutôt grandes. Mettons donc à jour la largeur de l'image, 200 PECS. Il est donc beaucoup plus petit. Appliquons maintenant un pseudo élément. Donc, si nous voulions l' appliquer à la première ligne, nous pouvons le préciser dans une seule ligne. Et c'est en utilisant les deux Colin's qui nous permettent d' indiquer le pseudo, en sélectionnant la première ligne. Et mettons à jour la première ligne et ajoutons une couleur rouge à la première ligne. Ce sera la première ligne du contenu. Au fur et à mesure que la ligne se rétrécit, elle ne s' applique qu'à la première ligne. agit d'une façon intéressante d'appliquer différents effets à certaines parties de l'élément. Mettons à jour la couleur d' arrière-plan et nous allons définir la couleur d'arrière-plan pour qu'elle soit noire. La couleur de la police définira tout cela en blanc. Et je vais définir ça comme plage. Mettons-le à jour. Et il fera une sélection de la première lettre. Au sein de cet élément. Sélection de la première lettre. Et je mettrai à jour la taille de la police de la première lettre, ce sera pour EM. C'est la façon dont il peut mettre à jour la première lettre, rendre vraiment volumineuse. Vous pouvez également définir du contenu après la sélection de l'élément. Vous pouvez donc sélectionner l'élément et utiliser Après vous permet d' ajouter du contenu après l'élément que vous avez sélectionné. Nous pouvons spécifier le contenu. Ajout du contenu de HelloWorld. Il y a le contenu en cours d'ajout. Je sais que c'est un peu difficile à voir. Nous allons donc mettre à jour la couleur pour qu'elle soit bleue pour l'arrière-plan. Il y a donc le contenu qui s' affiche après l'un de l'autre. Et si vous allez inspecter contenu de la page de l' élément, il y a ce qui suit. Et nous ne voyons pas le monde du bonjour être écrit car cela se fait avec le style. Donc, quel que soit le contenu de cette police ce sera le contenu qui a été ajouté. Vous pouvez également faire un avant. Cela placera le contenu avant. Cela l'a effectivement ajouté à la première ligne et mis à jour le contenu. Ainsi, l'application même de la première lettre à cette première partie du contenu de la page en tant que pseudo-éléments vous permet sélectionner une partie de l'élément et d'y apporter des mises à jour. Il y a des limites aux différentes propriétés qui peuvent être appliquées. Alors allez-y et essayez de vous familiariser avec ce que vous pouvez faire en tant que pseudo-éléments. 12. 11 Disposition flottante CSS: Nous allons créer un site Web de base avec des flotteurs. Nous avons donc la navigation d'en-tête typique, le menu et le pied de page. Et nous allons utiliser les flotteurs. Il flotte donc aussi bien pour la conception à trois colonnes que pour les liens de la barre de navigation appliquant les différentes pseudo-classes et les pseudo-éléments afin d'effacer les flotteurs. Ensuite, appliquez diverses propriétés de style afin de le faire ressembler à un site Web. Nous allons mettre à jour cette page Web typique LEO pour toucher un design à trois colonnes. Nous avons donc une navigation d' en-tête, la zone de contenu principale et une zone de pied de page. C'est en faire une sélection. Et puis on va les ajouter à l'aide d'un flotteur. Tout d'abord, allons de l'avant et nous allons ouvrir le style et effacer le style que nous avions précédemment et appliquer la boîte de bordure car nous allons utiliser les flotteurs. Cela va donc être fait pour tous les éléments de la page. En sélectionnant tous les éléments de page et définissez la taille de la zone pour que ces éléments de page soient border-box. Ainsi, lorsque nous configurons les colonnes, qui est la prochaine que nous allons sélectionner. Nous pouvons définir une largeur pour ceux qui sont de 33 %. De cette façon, nous pouvons les faire correspondre correctement sur la page. Je vais les fixer à 33 %. Ajoutez également une bordure pour eux afin que nous puissions voir clairement toutes les différentes colonnes. Cela peut donc être un pixel, bordure noire solide. Il y a nos colonnes. Définissons une hauteur par défaut pour eux. Et la hauteur peut être de 200 pics. Ensuite, en utilisant le flotteur, nous pouvons les faire flotter vers la gauche. Alors installez-les comme flotteurs. Et je vais les faire flotter vers la gauche. Cela permet de définir la base des trois colonnes. Je vais également aligner le texte pour aligner le texte que nous avons. Définissez cela comme étant aligné au centre pour le texte. Nous avons les trois colonnes là. Nous voulons définir le pied de page. J'ai ajouté des classes pour le pied de page et l'en-tête. Donc, en sélectionnant le pied de page et l'en-tête. Ensuite, je les configurerai tous les deux simplement séparés par des virgules de ces deux sélections. Je vais aligner le texte, aligner le texte au centre. Nous allons définir le contexte des deux. Ils pourraient tous les deux correspondre. Il y avait donc un fond noir. La couleur de la police peut être blanche. Il y a donc nos pieds de page là. Il est en fait appliqué aux colonnes parce que nous ne l'avons pas effacé par la suite. Nous voulons donc éclaircir après la sélection du contenu principal. Je vais donner à celui-ci une classe de moyenne pour que nous puissions le sélectionner dans le style. Nous voulons appliquer le correctif clair pour cet élément principal, le sélectionner, puis en utilisant le pseudo, le définir. suite, nous allons y mettre du contenu. Et cela nous permettra de trouver solution claire sur les deux. Et le contenu peut être simplement un contenu vide. Définissez l'affichage en tant qu'affichage de tableau, puis utilisez un clair pour effacer les deux. Donc, réservez en nettoyant tous les chars et déblayez les deux. Cela nous permettra une fois de plus de séparer l'en-tête et le pied de page. Et parce que ces colonnes, à cause du flotteur, elles flottaient au-dessus de l'en-tête et du pied de page. Fixons une hauteur pour cela. Cela peut être 120, choisit la hauteur de ligne pour eux afin que nous puissions aligner le texte au centre, aligner verticalement le texte. Et bien sûr, si vous ajoutez plus de texte, vous devez mettre à jour la hauteur de ligne. À l'heure actuelle, je ne vais pas ajouter de texte supplémentaire, donc je le paramétre pas ajouter de texte supplémentaire, comme hauteur de ligne également pour la barre de navigation. Ce sera donc la barre de navigation. Je vais lui donner une classe de navigation au cas où nous voudrions réutiliser les balises, différentes parties de la page. Je vais le sélectionner comme classe de navigation. Pour la barre de négation suffisante. Nous pouvons aligner le texte sur l'alignement central. Faisons une couleur d'arrière-plan pour le contenu et définissons cette couleur en rouge. Allons de l'avant et nous allons ajouter quelques plongées là-dedans. Ensuite, nous utiliserons ces divs et nous allons les aligner à l'aide des flotteurs. Sélection dans la navigation, les divs. Nous pouvons également faire les plongées qui se trouvent immédiatement au sein du NADPH. Configurez ça pour qu'il flotte. À gauche. Ajoutez un peu de rembourrage pour les développeurs, dix photos. Nous voulons également faire le correctif clair pour ensuite, séparer les virgules. Et c'est aussi là que nous avons les chars. Et cela devrait également être réglé sur après. Je vais aussi régler celui-ci, après. Nous allons régler cette div pour qu'elle soit effacée par la suite. Pour les développeurs, définissez une largeur de 25 pix. Définissez une largeur de 25 pix. Alignez également le texte au centre car nous avons les quatre éléments présents dans la liste. Il définira une couleur d'arrière-plan pour chacun d'entre eux. Définissez la couleur d'arrière-plan en rouge et la couleur de police peut être blanche. Pour eux, il y a nos liens. Chaque fois que nous les survolons. Ce ne sont pas encore des liens, mais nous devrions ajouter des liens. Nous allons mettre à jour la couleur d'arrière-plan chaque fois qu'elle sera survolée. Et je vais définir la couleur d'arrière-plan pour qu'elle soit noire. La couleur peut aller au rouge. C'est ainsi que vous pouvez configurer un site Web de base avec des flotteurs. 13. 12 Flex Layout CSS: Nous allons créer un modèle CSS à l'aide Flexbox et configurer notre modèle HTML typique. Nous avons l'en-tête, la navigation, le principal et le pied de page, mais le site Web à trois colonnes, Flexbox nous permet de créer une mise en page Web. Cela va également être réactif, donc fur et à mesure que nous le redimensionnons et l'agrandissons, ces colonnes vont continuer à créer des éléments réactifs dans un conteneur qui sont vraiment faciles à utiliser flex, cette leçon que nous allons créer et utiliser Flex Box pour créer un site Web à trois colonnes. Nous allons donc sélectionner les éléments de la page et les mettre à jour. Allons de l'avant et nous allons sélectionner tous les éléments qui sont des colonnes. C'est ici que nous avons le design à trois colonnes. Je vais également appliquer à tous les éléments et ajouter la taille de la boîte. De cette façon, nous pouvons définir le dimensionnement par défaut de chacune des cellules. Et cela inclura également le rembourrage et toutes les bordures. dimensionnement de la boîte nous permettra d'inclure les bordures et le rembourrage pour la largeur des cellules de l'élément. Nous sélectionnons donc toutes les colonnes. Je vais ajouter une bordure aux colonnes. Donc, un choix solide, et je ferai une bordure bleue pour les colonnes. Il y a nos trois colonnes que nous voulons appliquer. Je vais également ajouter un peu de rembourrage aux colonnes. Alors configurez le rembourrage et je ne ferai que dix pixels de rembourrage. Et je vais définir une hauteur par défaut pour qu'elle soit de 200 choix. Il y a donc nos trois colonnes. Alignez un texte afin que nous puissions aligner le texte pour qu'il soit centré. Et maintenant, nous voulons les stocker en utilisant le flex. Définissons la largeur de flexion et que nous pouvons définir à l'aide de la propriété flex d'un. Ce sera donc la largeur de chacun de ces conteneurs. Nous devons sélectionner le parent et appliquer la propriété flex au parent. Ainsi, les colonnes sont contenues dans l'élément moyen, dans l'élément principal. Mettez à jour et définissez la propriété display pour qu'elle soit flexible. Cela permettra aux enfants du conteneur principal d' obtenir cette propriété d'affichage. Et c'est là que nous obtenons le design à trois colonnes. Nous pouvons également mettre à jour cela et définir la navigation. Nous avons un élément avec une classe de navigation, il suffit de les séparer par des virgules et nous voulons appliquer la propriété flex aux deux immédiatement qui va les stocker. Nous voulons donc appliquer différentes propriétés aux éléments de navigation. Ce sont ceux qui sont les divs de la classe de navigation. Donc, en sélectionnant la classe de navigation, puis les div qui y sont contenues. Allons de l'avant et établissons une frontière pour eux. Je vais mettre en place une bordure verte pour eux. De cette façon, nous obtenons des bordures autour d'eux, en ajoutant un peu de rembourrage pour celles-ci. Et nous allons trier environ cinq pixels de rembourrage pour eux. Ensuite, en utilisant flex, nous allons définir la valeur de flex pour un élément et aligner le texte aligner le texte de manière à centrer l'alignement du texte qui nous donne les éléments de lien. Configuration d'un arrière-plan. Je vais définir une couleur d'arrière-plan pour les éléments de la page, et je les configurerai en bloc. Et puis la couleur peut être bleue, vont en fait définir la couleur pour qu'elle soit blanche. Et ajouter l'effet de survol à ces éléments chaque fois que les éléments sont survolés. Pour leur donner le champ qu' ils seront des liens. Nous pouvons ensuite appliquer la liaison, soit avec JavaScript , soit dans le HTML en tant que balises d'ancrage. Chaque fois que nous survolons une mise à jour, la couleur d'arrière-plan. Nous allons mettre ça en bleu. Alors que nous survolons. Il nous donne une nouvelle couleur d'arrière-plan pour ces éléments. Nous allons maintenant sélectionner l' en-tête et le pied de page. Les éléments avec une classe d' en-tête et l'élément avec une classe de pied de page appliquent certaines propriétés à cela. Encore une fois, la couleur d'arrière-plan pour ceux-ci, couleur d' arrière-plan pour ceux-ci. Je vais régler le débordement pour qu'il soit automatique. Cela occupera donc tout l'espace disponible. Aligner le texte, centrer, aligner le texte. Et nous allons définir une hauteur minimale pour qu'elle soit de 100 PECS. Cela nous donne l'en-tête et le pied de page et fait également la hauteur de ligne pour ces derniers. En fait, pour le pied de page, nous allons le sélectionner séparément. Nous avons la div à l' intérieur de cet élément. En sélectionnant la div où nous avons le contenu du pied de page pour ce week-end, définissez une marge, puis un peu de rembourrage autour de celle-ci. De cette façon, nous pouvons ajouter des lignes de contenu supplémentaires. C'est ainsi que vous pouvez utiliser flex pour configurer un modèle de site Web par défaut avec trois colonnes. 14. 13 CSS sur la mise en page de la grille CSS: Nous allons appliquer la grille d'affichage. Ainsi, la grille CSS, afin de créer un modèle de base à trois colonnes avec une barre de navigation, cela pourrait être entièrement réactif. L'utilisation de la grille CSS vous permet de créer des éléments de page réactifs. Je vais vous montrer comment créer un modèle de démarrage de base que vous pouvez utiliser pour vos sites Web afin de les développer davantage lorsque vous y ajoutez du contenu supplémentaire sur des éléments. En commençant par une mise en page basique et très basique, nous allons avoir un en-tête, une zone principale de navigation et un pied de page pour le contenu. Cette leçon, nous allons configurer la conception du site Web et la mise en page à l'aide de la grille. Ce sera un site Web à trois colonnes. Donc, tout d'abord, sélectionnons le conteneur principal, et ce sera le conteneur signifiant j'ai déjà ajouté dans le dimensionnement de la boîte. Ce sera donc le parent qui va afficher les enfants, les enfants immédiats avec un format de grille, en utilisant l'affichage et en le configurant comme grille d'affichage. Ensuite, pour la grille, nous allons les configurer comme un FR, FR et un FR. Cela a immédiatement placé ces colonnes dans ce type de structure. Mettons à jour les colonnes, sélectionnons les éléments avec les colonnes, configurons les, saisissons la bordure. Configurez leur largeur. Et ils vont être placés dans la grille. Nous voulons donc le rendre dynamique afin de ne pas avoir à définir la largeur, mais nous allons définir la hauteur de ces cellules. Et je vais également définir l'alignement du texte pour aligner le contenu du texte à l'intérieur d'eux. Il y a donc ces quatre colonnes. Vous pouvez également raccourcir cela en utilisant la répétition. Donc, s'ils doivent tous avoir la même taille que nous pouvons utiliser la répétition. Et mettre en place une répétition de quatre avec un FR pour chacun d'entre eux. Et en fait, cela devrait être trois parce que nous avons les trois colonnes. Nous allons aussi le faire pour la navigation. Nous avons des éléments avec une classe de navigation. Ce sera donc le parent de la grille. Ensuite, les éléments de navigation y seront contenus sous forme d'éléments de grille configurant la grille. Et il y aura quatre objets pour enfants à l'intérieur. Et nous sélectionnerons la navigation et les divs qui se trouvent immédiatement dans le cadre d'une classe. Et puis les diffs. Ces liens vont être des liens. Nous pouvons aligner le texte. Configurez également une couleur d'arrière-plan, et je vais définir une couleur d' arrière-plan verte. Pour eux. Je vais mettre à jour la taille de la police à 1.2 EM. Nous allons définir une couleur blanche pour les liens. Et nous ajouterons l'option chaque fois que nous les survolerons, qui mettra à jour la couleur. Donc, le pseudo. Et nous pouvons régler cela. Donc, définissez ça. Que diriez-vous de mettre ça en bloc ? Chaque fois qu'ils sont survolés, il y a nos liens et la grille sera réactive par défaut. Cela nous donne donc la structure de base dont nous avions besoin. Nous pouvons maintenant appliquer un style supplémentaire à l'en-tête, ainsi qu'au pied de page. Et définissez une couleur d'arrière-plan pour ceux-ci. Je vais juste mettre en place un fond noir par défaut. Et la couleur de la police peut être blanche. Nous allons sélectionner la taille de police. Rends-le vraiment grand. Ensuite, le texte s'aligne, centre aligne le texte pour ceux-ci. Cela nous donne donc notre structure de page Web de base où nous avons l'en-tête, le pied de page, et également définir le débordement pour ces derniers. De cette façon, ils descendront jusqu'à l' espacement par défaut de la barre de navigation. Nous en avons besoin dans la structure de la page. Ensuite, au fur et à mesure que vous le redimensionnez et que vous le réduisez. Il s'agira également d' éléments de page entièrement réactifs. Supposons que vous puissiez utiliser la grille pour configurer un modèle de site Web par défaut que vous pouvez utiliser comme point de départ pour développer votre page Web.