Guide complet CSS (animation, flexbox, grille et Sass)

1. Introduction du cours: Bonjour et bienvenue. Je m' appelle Jet Shokar Je suis développeur Web Full Stack, freelance et formateur en ligne Et bienvenue dans le guide complet CSS du cours en ligne. Il s'agit du cours le plus complet, le mieux organisé et le plus convivial pour les débutants pour les développeurs Web qui souhaitent apprendre le CSS. Je ne vais pas vous expliquer pourquoi le CSS est important. Parce que vous êtes ici, vous le savez déjà. Il s'agit donc de l'un des cours les plus complets sur le CSS. Ici, vous pouvez en apprendre davantage sur l'animation CSS, Flexbox, Greed et SAS À ce jour, je télécharge déjà du contenu de plus de 19 heures. En outre, il est livré avec une liste de 171 vidéos. Nous allons commencer par les bases du CSS, telles que la couleur d'arrière-plan, bordures, les contours, le rembourrage, etc. Ensuite, nous allons apprendre toutes les propriétés du texte, tous les types de propriétés d'arrière-plan. Nous allons en apprendre davantage sur la mise en page CSS telle que la propriété d'affichage, la visualisation, l'index Z, la position, les requêtes multimédia, la stabilité, etc. Nous allons également en apprendre davantage sur les unités CSS, les fonctions, les variables et bien d'autres. Ensuite, nous allons passer à section du sélecteur avancé Oui, nous allons apprendre le sélecteur avancé CSS, tel que le sélecteur de combinateur, le sélecteur d' attribut, le sélecteur de positoselecteur, Ensuite, j'aborde certains sujets CSS avancés, tels que les règles de saisie, le comportement de défilement, le rapport hauteur/largeur, la couleur d'ascension Ensuite, nous allons apprendre l'animation CSS. Ensuite, nous allons passer à la grille CSS, CSS ex box, et enfin, nous allons aborder le préprocesseur CSS Nous allons apprendre le CS. Comme je vous l'ai dit, c'est le cours le plus complet sur le CSS. Et si vous souhaitez apprendre le CSS en détail, nous pouvons commencer notre voyage à partir de la leçon suivante. Merci beaucoup. 2. Qu'est-ce que le CSS: Bonjour, mes amis, bienvenue. À partir de ce tutoriel, nous allons démarrer CSS Three. Il s'agit du premier tutoriel lié au CSS, et dans ce tutoriel, je vais vous présenter le CSS. Le nom complet de CSS est Cascading Style Sheet. Et nous utilisons la feuille de style en cascade que nous utilisons au format DML. Sans TML, ce n' est pas très utile. abord, vous devez créer une structure TML, puis utiliser du CSS pour styliser les structures Maintenant, vous savez peut-être pourquoi nous apprenons le CSS. L'utilisation de base du CSS consiste à styliser les balises TML. Supposons que vous preniez n'importe quelle balise de paragraphe, sinon vous créiez Davil , n'importe quelle balise profonde, et que vous vouliez donner de la couleur à ces balises. Sinon, en ajoutant du remplissage, de la fusion, des bordures, , nous pouvons utiliser Nous pouvons créer tout type de style dans notre balise ATML avec du CSS. Nous créons simplement une structure en utilisant ASTML et nous gérons cette partie stylistique en utilisant du CSS Ensuite, nous utilisons le CSS pour un site Web réactif. Site Web adaptatif présentant le CSS Three. Maintenant, vous savez peut-être ce qu' est un site Web réactif ? Supposons que vous créiez une mise en page de site Web pour une résolution de bureau, puis que vous souhaitiez ouvrir le même site Web sur votre tablette et votre mobile. Dans ce cas, le CSS va jouer un rôle clé. Cela va changer la conception de votre mise en page en fonction de la résolution de l'appareil. Et la troisième utilisation la plus importante du CSS est l'animation sur les pages Web. En utilisant le CSS 3, vous pouvez animer n'importe quelle structure TMS, et le quatrième usage important du CSS permet de transformer des éléments AT en deux D et en trois D. Vous pouvez faire pivoter l'élément, modifier la perspective. Vous pouvez également jouer avec l'index Z, etc. Et le quatrième point important est que cela rend notre processus de développement Web très rapide. Maintenant, vous savez peut-être comment cela a rendu notre site Web très rapide. Laisse-moi te montrer. Vous pouvez donc voir ici que nous avons un fichier CSS au centre, et autour du fichier CSS, nous avons le total des recherches. Document stable, comme la page extérieure de la page d'accueil, page de contact, la galerie, etc. Nous pouvons donc maintenant styliser tout le document TML, sinon tous les fichiers d'estimation à partir d'un seul fichier CSS Si vous remarquez un site Web, son entête, son pied de page, sa barre latérale, tout reste exactement pareil Juste pour modifier le contenu de la page. Supposons que vous souhaitiez modifier couleur d' arrière-plan de votre site Web. Vous souhaitez utiliser une couleur d'arrière-plan rouge dans vos pages Web. Pour cela, il vous suffit de le modifier une fois dans votre fichier CSS. Une fois que vous avez changé la couleur d' arrière-plan dans le fichier CSS, cela se reflétera sur chaque document TML Mais si vous voulez le faire sans CSS, pour cela, vous devez utiliser la couleur BG dans vos balises TML, et vous devez faire la même chose dans votre fichier ETML six fois Un par un, vous devez ouvrir tous les documents TML et modifier la couleur d'arrière-plan Et c'est un processus très long et irritant. Parlons maintenant du type de logiciel dont nous avons besoin pour apprendre le CSS. En gros, nous avons besoin de deux logiciels, un éditeur CSS et un navigateur. Pour cela, vous pouvez utiliser n'importe quel éditeur TML, comme Note plus, Visa studio code, atom, etc. En gros, pour ce tutoriel, je vais utiliser Vs code Editor. Mais c'est à vous de décider quel éditeur vous allez choisir. C'est donc tout pour ce tutoriel. Merci donc d' avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 3. Tutoriel de mise en œuvre CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS 3. Et dans ce tutoriel, nous allons apprendre comment implémenter le CSS dans notre document StBL En gros, nous avons au total trois façons d' implémenter le CSS avec une version stable. Le premier moyen, et le plus simple, est le style en ligne. En utilisant le style en ligne, vous pouvez directement utiliser le CSS dans vos balises stables Il vous suffit d'attribuer un attribut de style dans votre balise stable. Et la deuxième méthode est la balise de style Impage. Dans votre document de table, vous pouvez utiliser la balise style pour implémenter le CSS. Et à la troisième méthode, vous pouvez créer une feuille de style externe pour votre code CSS. C'est la méthode la plus populaire et la plus efficace. Ici, nous devons créer un fichier CSS distinct, et nous associons ce fichier à des balises stables. Essayons maintenant de comprendre ce qu'est la méthode de style intérieur, comment nous pouvons utiliser la méthode de style intérieur. Comme vous pouvez le voir dans cet exemple, nous avons une balise de titre, et à l'intérieur de cette étiquette une balise, nous avons un texte. Bienvenue. Et maintenant je veux changer la couleur de police de ce texte. Pour cela, nous allons utiliser la méthode de style Inland. abord, nous devons utiliser l'attribut style dans cette balise headone. Ensuite, nous devons attribuer une propriété CSS, dans notre cas, une couleur, puis nous devons fournir la valeur et la valeur est verte. Et si vous remarquez, comme vous pouvez le voir, nous séparons la propriété et la valeur en utilisant deux points sinusoïdaux, et nous terminons notre ligne par un point-virgule De même, si vous souhaitez ajouter une autre propriété, oui, vous le pouvez, quelque chose comme ça. Supposons que vous souhaitiez augmenter la taille de police. Pour cela, vous devez utiliser cette propriété, la taille de police, deux points, et vous devez fournir la valeur, qui est de 15 pixels. Il s'agit donc de la méthode de style en ligne. Nous utilisons le code CSS directement dans notre balise eStaml. Vous pensez peut-être que c'est le bon processus, mais ce n'est pas le cas. Cela vaut le coup lorsque vous avez peu de balises eStaml, car lorsque vous avez beaucoup de balises stables, il n'est pas possible de styliser toutes les balises une par une Oui, c'est possible, mais ce n' est pas une bonne habitude. Parce que chaque fois que vous devez modifier une propriété ou une valeur, il est très difficile de trouver la propriété. De plus, cela rend notre page très longue et plus lourde. Et pour résoudre ce problème, vous pouvez utiliser la balise de style Impage Comme vous pouvez le voir dans cet exemple, il s'agit de la structure de base du tableau. Si vous aimez utiliser la balise de style d' image, vous devez utiliser la balise de style à l'intérieur de la balise de tête Nous pouvons maintenant utiliser toutes les propriétés CSS contenues dans la balise de style. Et une chose importante à retenir, que vous pouvez utiliser une étiquette de style à l'intérieur de l' étiquette principale, pas ailleurs. Ensuite, dans cette balise de style, nous devons prendre un sélecteur, quelque chose comme ça Supposons que vous souhaitiez sélectionner cette balise d'en-tête et modifier la couleur de police. Dans ce cas, vous devez cibler cette balise d'en-tête en utilisant son nom de balise, H one. Ensuite, à l'intérieur du Caliss, vous pouvez utiliser la propriété et la valeur. Maintenant, il va appliquer une couleur verte à toutes les balises d'en-tête. Si vous avez plusieurs titres et une balise, elle les sélectionnera tous. Pour l'instant, dans notre balise body, nous n'avons qu'un seul titre, une seule balise, mais cette méthode présente également un inconvénient. Supposons que vous ayez dix fichiers stables, alors vous devez faire la même chose dans tous vos fichiers stables. Ce n'est donc pas la meilleure façon d'implémenter le CSS. Parlons maintenant de la méthode la plus populaire, qui est la feuille de style externe. Dans cette méthode, nous devons créer un fichier CSS distinct. Ensuite, pour créer ce fichier CSS, nous devons définir la propriété et la valeur à l'aide du sélecteur LPop Supposons que nous créions ici un fichier CSS, style point CSS. Pour créer le fichier CSS, nous devons utiliser cette extension point CSS, puis lier le fichier CSS à notre document tamoul À l'intérieur de l'étiquette principale, nous devons utiliser ici la balise Link. La balise Link est spécialement utilisée à cette fin. Il est utilisé pour lier un document CSS. À l'intérieur de la balise link, nous devons utiliser un attribut. Notre premier attribut est RL. RL est l'abréviation de relation style sheet. Ensuite, nous devons déclarer le type de ce fichier, qui est du texte CSS. Cela signifie que le format de fichier est le texte et le style est le CSS. Et c'est l' attribut le plus important, qui est le HRF. Dans cet attribut, nous devons fournir le chemin du fichier. HREF est l'abréviation de hyperlink reference. Et ici, vous devez fournir le nom de fichier exact, sinon le chemin du fichier. C'est donc la meilleure méthode pour utiliser le CSS. Grâce à cette méthode, nous pouvons connecter un fichier CSS à plusieurs documents eSTIML C'est donc tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons en apprendre davantage sur le sujet de manière pratique. Merci donc d'avoir regardé cette vidéo, Statue. 4. Tutoriel de couleur CSS et de couleur d'arrière-plan: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS 3. Et dans ce didacticiel, nous allons en apprendre davantage sur la propriété de couleur CSS et la couleur d'arrière-plan. Nous utilisons la propriété de couleur pour changer la couleur du texte, et pour changer la couleur d'arrière-plan de n'importe quel élément, nous utilisons la couleur d'arrière-plan. Ça peut être n'importe quelle étiquette de tamale. Il s'agirait d'un paragraphe, balise profonde, d'un tableau, etc. Alors, sans perdre votre temps, passons à l'aspect pratique. Comme vous pouvez le voir, côte à côte, j'ai ouvert mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension de serveur Lip, et j'ai déjà créé un document TM nommé index point TML Comme vous pouvez le voir dans notre balise body, nous avons une balise de titre. Et dans cette balise d'en-tête, nous tapons ici, bonjour tout le monde. Si vous le remarquez, vous pouvez voir dans mon navigateur que, par défaut, la couleur est le noir. Maintenant, je veux changer la couleur étrangère. Pour cela, je vais utiliser ici la méthode CSS en ligne. Donc ici, je vais taper style, style attribute, puis je veux utiliser cette propriété CSS nommée gull Couleur, et je veux attribuer une couleur rouge au rouge. Si je configure ce fichier et apprends mon navigateur, vous pouvez voir le résultat. Vous pouvez maintenant voir que la couleur de police de ce texte a changé. Ici, vous pouvez prendre n'importe quel nom de couleur. Supposons que vous vouliez une couleur verte pour taper le nom de la couleur. Ensuite, il vous suffit de définir ce fichier, et vous pouvez voir le résultat dans mon navigateur. Et n'oubliez pas que nous pouvons utiliser différents formats de couleur Vdo. Nous pouvons utiliser la valeur argv hexavalu, la valeur argv, argv Si vous recherchez Websp Color, laissez-moi vous montrer et ouvrir n'importe quelle page Vous pouvez voir ici la valeur xa de cette couleur. Avec cela, il fournit également une valeur RGV. C'est ce qu'on appelle la valeur xA et c'est la valeur argv. Si je copie cette valeur et que je coupe le vert avec ce numéro xa, puis place ce fichier et que je reviens au document, vous pouvez maintenant voir le résultat Cela transforme la couleur de notre police en vert clair et elle est à peine visible. Changeons donc de couleur. Cette fois, je vais utiliser cette teinte rose. Je vais donc copier cette valeur hexa. Et je vais remplacer cette valeur hexa par celle-ci. Une fois que j'ai remplacé le fichier et revenu au document, vous pouvez maintenant voir la couleur. N'oubliez pas que le code hexavalu est toujours fourni avec un code numérique, mais qu'il commence par un tag sinus Comme je vous l'ai dit, le CSS supporte les formats de couleurs multiples. Il prend en charge les couleurs hexadécimales, les couleurs ixa décimales avec transparence, les couleurs RGB, les couleurs RGBA, les couleurs HSL, les couleurs HSLA. Nous allons découvrir tout cela dans nos prochains tutoriels. Mais pour ce tutoriel, je vais utiliser hexa Valu sinon le nom de couleur Ensuite, je vais créer un paragraphe, P. Et à l'intérieur de ce paragraphe, je vais ajouter du texte factice Je vais donc taper Loren. 20. En gros, il va ajouter 20 mots de paragraphe avec un texte factice Et je vais configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le paragraphe dans mon navigateur, mais je vais le dupliquer. Je vais donc sélectionner ce paragraphe et je doute. Dans un premier temps, je vais définir ce fichier, puis je vais changer la couleur de police du paragraphe. Voici donc notre premier paragraphe. Donc, pour changer la couleur de police du paragraphe, je vais utiliser ici la méthode Ilenss. Donc, pour taper un attribut de style, je veux appliquer de la couleur. Couleur et je veux la couleur verte. Entrez ce fichier, vous pouvez voir le résultat. Et aussi, je souhaite ajouter une couleur de fond à ce paragraphe. Pour cela, après le point-virgule, vous devez saisir la couleur d'arrière-plan Et je veux la couleur de fond lou et je vais définir ce fichier. Comme vous pouvez le voir, il ajoute une couleur de fond à notre premier paragraphe, et je vais faire de même pour notre deuxième Je copie donc l'attribut avec la valeur et la propriété. Et aussi, je vais le coller dans notre deuxième paragraphe. Et cette fois, je vais utiliser une autre couleur. Cette fois pour le fond, je vais utiliser la couleur rouge. Et pour une couleur affectueuse, je veux utiliser le blanc. Après avoir configuré ce fichier, vous pouvez voir le résultat. En utilisant la propriété de couleur d'arrière-plan, nous pouvons changer la couleur d' arrière-plan de n'importe quel élément, et en utilisant la propriété de couleur, nous ne pouvons changer que la couleur de la police, et vous devez vous en souvenir. À présent, vous décidez de mettre en évidence ce mot constructeur dès le premier paragraphe Pour cela, vous devez utiliser le tag Span. Vous devez déplacer ce mot dans la balise span. Laissez-moi vous montrer comment faire. Donc, ici, vous devez utiliser la balise span. Cachée. Et à l'intérieur de la balise span, vous devez déplacer ce mot, sinon la phrase. Ensuite, vous devez sifier et surligner ce mot, vous décidez de changer la couleur de fond de ce mot Pour cela, encore une fois, vous devez prendre l'attribut style. Style et encore une fois, vous devez utiliser la propriété de couleur d'arrière-plan. Couleur de fond, et cette fois vous voulez un fond vert. Vert. Si je configure ce fichier, vous pouvez voir le résultat. Mais il y a un problème. La couleur de votre police et celle de votre arrière-plan sont les mêmes. C'est pourquoi votre police n'est plus visible. Pour cela, vous décidez de changer la couleur de police maintenant. Vous allez changer la couleur de police de cette partie, constructeur. Ici, vous pouvez utiliser la propriété color. Couleur, et vous décidez d' utiliser la couleur blanche. Pourquoi ? Après l'étape de ce fichier, vous pouvez maintenant voir le résultat. Voici donc comment vous pouvez utiliser couleur et les propriétés de couleur d' arrière-plan. En gros, dans ce tutoriel, nous utilisons la méthode Lenses. Dans le prochain tutoriel, nous allons découvrir les sélecteurs de base Merci donc d' avoir regardé cette vidéo, Statute pour le prochain tutoriel. 5. Tutoriel des sélecteurs de base CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS 3. Et dans ce tutoriel, nous allons apprendre les sélecteurs de base CSS Lorsque nous travaillons avec la méthode impage, sinon avec un fichier CSS externe, sélecteurs de base sont très utiles et ils ne le sont pas pour les méthodes de style en ligne Voyons donc combien de types de sélecteurs de base nous avons. Nous avons au total trois types de sélecteurs de base. Nous pouvons sélectionner un élément par nom de balise, par nom de classe et par nom d'ID. Voyons maintenant comment sélectionner un élément par nom de tag. Voici un exemple de sélecteur de nom de tag. Nous pouvons sélectionner l'élément en utilisant un nom de balise stable. Supposons que je souhaite sélectionner toutes les balises de titre de notre page Web. Pour cela, il suffit de taper H un, puis nous devons utiliser Cariass Il va sélectionner toutes les balises d' en-tête de votre page Web. De même, si vous souhaitez sélectionner la balise table, sinon, balise deep, il vous suffit de saisir le nom, puis d'utiliser Cariss Ensuite, à l'intérieur des calices, vous pouvez passer votre propriété et votre testament Supposons que vous souhaitiez attribuer une couleur de police rouge à votre titre, une balise avec laquelle vous souhaitez définir la taille de police, 15 pixels. Ensuite, nous devons transmettre cette propriété et cette valeur dans la classe. Cette méthode est appelée sélecteur TagnEM car nous utilisons ici les balises estabal pour cibler le Mais il y a un petit problème avec ce sélecteur. Si vous avez plusieurs balises de table, sinon plusieurs balises profondes dans votre page Web, dans ce cas, toutes les propriétés seront appliquées à toutes ces balises profondes. Parlons maintenant de notre prochain sélecteur de base, qui est le sélecteur de classe Comme je vous l'ai dit, supposons que nous ayons plusieurs balises H one, mais que vous ne vouliez pas appliquer cette propriété à toutes les opérations. Dans ce cas, vous pouvez utiliser le sélecteur de nom de classe. Pour cela, le sélecteur de nom de classe est très efficace. Alors, comment nous pouvons l' utiliser, laissez-moi vous montrer. Comme vous pouvez le voir ici, nous sélectionnons un en-tête de nom de classe. Pour sélectionner la classe, vous devez utiliser le signe point. En haut d'un point, vous devez transmettre le nom de la classe. Dans notre cas, en-tête. Ensuite, dans les calres, vous pouvez utiliser vos propriétés CSS. Et pour attribuer cette classe dans votre balise TML, vous devez utiliser l'attribut class Supposons que vous utilisiez ici une balise deep, puis qu'à l'intérieur de la balise Dip, vous deviez utiliser l'attribut class. Comme dans le double cours, vous devez transmettre le nom de la classe. Vous pouvez choisir n'importe quel nom de classe. Maintenant, le CSS que vous utilisez ne s'appliquera qu'à cet élément profond, car cet élément profond a attribué une classe d'en-tête. Parlons maintenant de la spécification du nom du sélecteur de classe. Nous avons certaines limites quant à l'utilisation des classes. Laisse-moi te montrer. Il s'agit de la première méthode que vous pouvez utiliser en classe. Et voici un autre exemple dans lequel vous pouvez utiliser la classe. Ici, vous pouvez voir jusqu'au point, nous utilisons un total de deux mots, avec le moins de tirets dans le menu Oui, vous pouvez utiliser le trait d'union sinusoïdal. Vous pouvez également utiliser asco sine. Avec cela, vous pouvez également utiliser un étui camel. Mais la chose la plus importante que vous devez retenir, que vous ne pouvez pas attribuer , sinon laissez un espace entre deux mots. Si vous utilisez un espace entre ces deux mots, dans ce cas, cela ne fonctionnera pas. Vous devez donc vous souvenir de cette chose importante. Parlons maintenant d' un autre sélecteur, sélecteur d'ID C'est assez similaire avec class selectro. Je veux juste utiliser HTagsign avant le nom de l'identifiant. Dans notre cas, je veux dire Hateg. En utilisant le hastag, notre CS va identifier qu'il s'agit d'un identifiant. Et voici un exemple de la façon dont nous pouvons utiliser le sélecteur d'identification. Comme vous pouvez le voir, nous avons une liste de normes, et dans cette liste de décommande, nous attribuons un identifiant ID égal à mid pour attribuer cet identifiant, nous devons utiliser l'attribut ID. Alors maintenant, vous avez peut-être une question. Quelle est la différence entre le sélecteur ID et le sélecteur CLS ? L'ID doit être Q. Vous pouvez utiliser sélecteur d'ID une seule fois dans une page Web Vous ne pouvez pas utiliser le même identifiant plusieurs fois, mais vous pouvez utiliser le même sélecteur de classe plusieurs fois. Si vous voulez l'utiliser des milliers de fois, oui, vous le pouvez. Maintenant, la question est : pourquoi est-ce le cas ? Parce que certains éléments ne sont créés qu'une seule fois. Dans une page Web, nous ne créons pas de section d'en-tête plusieurs fois. Nous ne le créons qu'une seule fois. C'est pourquoi nous utilisons l'identifiant pour cela. En gros, l'ID attribue à cet élément une identité unique. C'est donc la différence fondamentale entre eux. Parlons maintenant de quelques sélecteurs de descendants. C'est un sélecteur de niveau supérieur assez avancé. Supposons que vous ayez des centaines de balises Anca sur votre site Web. Cela peut se trouver n'importe où dans votre section d'en-tête, section de contenu, votre section de barre latérale, section de pied de page, votre section nebr, etc., mais vous souhaitez cibler tags qui se trouvent dans Dans le cas contraire, élément d'en-tête. Dans ce cas, nous devons utiliser ce type de sélecteur d'annonces Il s'agit de l'en-tête de sélection du parent, et comme vous pouvez le voir, il s'agit d'un identifiant. Ensuite, je souhaite cibler toutes ces balises d'ancrage, qui se trouvent dans cette section d'en-tête. Je fournis donc un espace et cible et cible l'élément d'ancrage. De même, si vous souhaitez cibler l'ensemble de ce paragraphe, qui se trouve dans l'élément de liste, pour cela, vous pouvez utiliser celui-ci. Comme vous pouvez le voir, il s'agit d'une classe, moins d'espace possible, je veux cibler tous les paragraphes qui se trouvent à l'intérieur de l'élément de liste. Et dans notre dernier sélecteur, nous ciblons cette balise UL particulière, qui possède un identifiant de menu Ensuite, je fournis un espace et je cible toutes les balises LI qui se trouvent à l'intérieur de cette balise UL particulière. Je sais que cela semble confus. Ne t'inquiète pas pour ça. Cela ne fait que commencer. J'ai déjà créé des chapitres spécifiques pour ces sélecteurs avancés Maintenant, je l'ai juste oublié. Tu n'as pas besoin de te souvenir de quoi que ce soit. Même moi, je n'essaie pas de me souvenir de toutes ces choses. Lorsque nous travaillons avec elle , nous la recherchons. Ceci est juste une vidéo d'introduction de base du sélecteur CSS. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 6. Tutoriel CSS Border: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS. Et dans ce didacticiel, nous allons en apprendre davantage sur la propriété des bordures CSS. Pourquoi devons-nous utiliser la propriété frontalière ? La bordure de CS possède certaines propriétés. Notre premier nom de propriété est border notre deuxième nom de propriété est border style, et notre troisième nom de propriété est border color. En utilisant la bordure avec la propriété de CS, nous pouvons contrôler la frontière avec. Nous pouvons le faire de deux pixels, d'un pixel, sinon de 100 pixels également. Et en utilisant la propriété du style de bordure, nous pouvons changer le style de bordure. Il peut être en pointillé, en pointillés, nous avons au total dix styles de bordure différents, et nous allons en apprendre davantage dans ce didacticiel Et en utilisant notre troisième propriété, nous pouvons attribuer n'importe quelle couleur à notre bordure. Je vais vous montrer un exemple de cette bouteille. Comme vous pouvez le constater, nous avons un élément profond. Et dans cet élément profond, nous avons un paragraphe. Mais en dehors du paragraphe, nous avons une bordure rouge. C'est l'exemple de la frontière. Si vous souhaitez créer ce type de bordure, vous devez définir une bordure de deux pixels. Avec cela, vous devez taper border style solid. Il s'agit d'une bordure solide. bordure pleine vous fournit la ligne droite, et notre troisième propriété est la couleur de la bordure. Comme vous pouvez le voir, notre bordure est de couleur rouge. C'est ainsi que nous pouvons utiliser cette propriété et créer une bordure. Parlons maintenant du style de bordure. Comme je vous l'ai dit, nous avons dix styles de bordure différents. Les CSS fournissent un total de dix bordures. La première bordure est solide. La deuxième bordure est en pointillés. Puis viennent 7 jours, puis doublez. Ensuite, Grove. Ensuite, nous avons surélevé la bordure. Ensuite, nous avons un encart, puis un extérieur, aucun et un mélange Voici donc le style de bordure que nous allons apprendre dans ce tutoriel. Parlons maintenant de la sténographie des bordures. Comme vous pouvez le voir dans cet exemple, nous utilisons ici trois propriétés différentes de bordure avec style et couleur, mais je ne veux pas utiliser trois lignes différentes. Je veux tout faire en une seule ligne. Pour cela, la bordure C est abrégée, et voici l' exemple de la Il vous suffit de saisir la propriété de la bordure, puis de fournir les valeurs. Tout d'abord, vous devez indiquer la largeur de la bordure. Ensuite, vous devez fournir le style de bordure, et enfin, vous devez fournir la couleur de la bordure. Vous n'avez plus besoin de taper trois lignes différentes pour cette tâche. Passons maintenant à un autre sujet. Supposons que vous souhaitiez attribuer une bordure uniquement au côté droit. Dans ce cas, vous devez utiliser la propriété border right. Et si vous souhaitez utiliser uniquement le bas, sinon uniquement la gauche, vous pouvez utiliser ces propriétés. Ce sont donc toutes les propriétés liées aux bordures que je vais aborder dans ce didacticiel. Alors, sans perdre votre temps, passons à l'aspect pratique. Comme vous pouvez le voir, côte à côte, j'ai ouvert mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Lip Server, et j'ai déjà créé un document TML nommé index point HTML Comme vous pouvez le voir sur cette page, je vais créer une balise H one, une balise titre, et vous aurez également un total de deux paragraphes. Maintenant, je décide de donner une bordure à cette balise d'en-tête. Pour cela, je vais utiliser la méthode de style Impage. Donc, à l'intérieur de l'étiquette principale, je vais utiliser le style tag style. Et à l'intérieur de cette balise de style, nous devons d'abord sélectionner la balise d'en-tête. Dans notre précédent tutoriel, nous avons déjà découvert certains sélecteurs de base Nous découvrons Tax Selector. Donc ici, je vais utiliser un sélecteur Stimaltax, qui est H Ensuite, à l'intérieur de l'olivier, il est dit : «   Je vais utiliser les propriétés des bordures ». Tout d'abord, je vais attribuer une bordure à une propriété. Bordure Nous bordons avec, et je veux attribuer une bordure de deux pixels. Deux pixels. Notre prochaine propriété est de style frontalier. Style de bordure. Style de bordure, et je veux une bordure solide. Solide. Et notre dernière propriété est la couleur de la bordure, la couleur de la bordure, et je veux attribuer une bordure rouge. C'est vrai. Après avoir défini ce fichier, vous pouvez voir le résultat. Ici, vous pouvez le voir ajouter une bordure rouge à la balise headone. Nous pouvons utiliser la propriété de bordure dans n'importe quelle balise Astb. Il peut s'agir d'un tableau, d'un paragraphe, d'une balise LI, etc. Maintenant, faisons quelques expériences avec cette valeur. Supposons que je veuille augmenter la bordure certains tapent cinq pixels. Si je configure ce fichier, vous pouvez voir le résultat. Il a augmenté la bordure d'un maximum de cinq pixels. Maintenant c'est très visible. Et maintenant, je vais vous montrer différents styles de bordure. Tout d'abord, je vais vous montrer le style de bordure en pointillé, certains suppriment le solide et tapez en pointillé Après l'étape de ce fichier, vous pouvez voir le résultat. Voici un exemple de style de bordure en pointillé. Maintenant, notre bordure est faite de points. Parlons maintenant d' un autre style de bordure , le tiret. Je vais donc supprimer les points, taper dash et définir ce fichier Après l'étape de ce fichier, vous pouvez voir le résultat. Maintenant, notre bordure est faite avec Dash. Je vais appliquer la bordure suivante, qui est double. Cela va fournir des frontières doubles. Doublez et définissez ce fichier. Accélérons légèrement le rythme. J'espère que c'est clair pour toi maintenant. Maintenant, il offre un style à double bordure. Le prochain style de bordure que je vais appliquer est le groove. Si je configure ce fichier, vous pouvez voir le résultat. Zoomons légèrement. C'est ce qu'on appelle le style de bordure de groupe. Si vous le remarquez, vous pouvez voir que cela ressemble à un cadre photo. En gros, il fournit une petite vue en trois D, et la prochaine bordure que je vais appliquer, qui est surélevée. Si vous soulevez et définissez ce fichier, vous pouvez voir le résultat. C'est assez similaire avec Group. Juste dans le sens opposé de la lumière. Prochaine bordure que je vais appliquer, qui est en encart. Si je configure ce fichier, vous pouvez voir le résultat. En gros, groupé, surélevé, encart, début, les deux styles de bordure offrent une vue en trois D. Ces effets dépendent de la valeur de couleur de la bordure. Parlons maintenant d'un autre style de bordure qui n'en est pas un. Comme vous pouvez le constater, il n'y a pas de frontière. Aucune valeur ne définit aucune bordure. Notre prochain et dernier style de bordure est le mix. Pour le mix, nous ne saisissons pas le nom. Juste pour fournir les valeurs. Laissez-moi vous montrer comment faire. Ici, nous devons d'abord fournir la valeur supérieure, puis la bonne valeur, puis le bouton, puis le lever. Donc en haut, je veux une bordure en pointillé, en pointillé. À droite, je laisse de l'espace, et à droite, je veux une bordure en pointillés Et au fond, je veux une bouteille solide, solide. Et à gauche, je veux un double flacon. double. Si je configure ce fichier, vous pouvez voir le résultat différent. Maintenant, cette bordure est faite avec un style de bordure mixte. En haut, nous avons une bordure en pointillés. À droite, nous avons une bordure en pointillés. À la fin, nous avons une double bordure, et en bas, nous avons une bordure pleine. Voici donc comment fonctionne le style de bordure mixte. Parlons maintenant de la méthode abrégée, façon dont nous pouvons utiliser la méthode abrégée et taper toutes les choses sur Donc, d'abord, je vais commenter toutes les lignes, puis je vais taper border property, border. Comme je vous l'ai dit, dans un premier temps, nous devons attribuer la frontière à. Je vais donc attribuer une bordure en pixels. Ensuite, nous devons fournir un style de bordure solide. Avec cela, nous devons fournir la couleur de la bordure. Et pour ce qui est de l'espace, je vais utiliser le vert boercolor Et je vais configurer ce fichier. Après l'étape de ce fichier, vous pouvez voir le résultat. Nous n'avons plus besoin de taper trois lignes pour obtenir ce résultat. Nous pouvons le faire en une seule ligne. Maintenant tu décides que je ne veux pas de frontière dans toute la direction. Je veux placer la bordure en position inférieure. Pour cela, vous devez utiliser une probité de frontière différente. Je vais commenter cette ligne, et ici, je vais taper border bottom border bottom. Et je veux une bordure de trois pixels. Avec cela, je veux une bordure solide, solide, et notre couleur de bordure est le rayon. Si j'ai défini ce fichier, vous pouvez maintenant le voir, maintenant il a assigné une bordure en bas. De même, si vous souhaitez attribuer bordure à la bonne position, oui, vous pouvez, vous devez modifier la propriété. Passons maintenant à la saisie, à la bordure, au rack. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il a assigné une bordure à la bonne position. Et la chose la plus importante dont j'ai oublié de parler, c'est le rayon de la frontière. Supposons que je commette cette ligne et que je veuille cette bordure. Je décommente donc cette ligne. Maintenant, comme vous pouvez le voir, nous avons une bordure solide. Mais si vous remarquez, les arêtes sont très tranchantes. Je ne veux pas d' arêtes vives dans ma bordure. Je veux que ça se passe bien. Pour cela, nous avons le rayon de bordure violet de Somer serré, rayon de bordure, ici je vais passer, cinq pixels Si je place cette pile, vous pouvez maintenant voir que les bords de nos bordures sont incurvés, et vous pouvez contrôler le caractère carboné de cette bordure si vous augmentez ou diminuez la valeur Supposons que cette fois je passe 50 pixels, rayon de bordure, 50 pixels et que je définisse ce fichier. Vous pouvez maintenant voir la forme différente de cette bordure. Ainsi, en utilisant la propriété du rayon de bordure, nous pouvons contrôler les âges des frontières. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons parler du plan. Merci donc d' avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 7. Tutoriel CSS Outline: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons en apprendre davantage sur le plan CSS. À quoi sert la propriété outline ? Mais avant de savoir combien de propriétés nous avons dans les grandes lignes. Nous avons le total pour la propriété du contour, contour avec le style du contour, la couleur du contour et le contour opposé. Comme pour la bordure, nous avons dix styles de contour différents. Permettez-moi de vous montrer un exemple. Ici, vous pouvez voir un élément profond. Et dans cet élément profond, nous avons un paragraphe, et c'est le bas de cet élément profond. Si je dis valeur de décalage, et si j'attribue un contour Oset à cet élément DIP, laissez-moi vous montrer que cela ressemblera à ça Ici, vous pouvez voir une autre bordure en dehors de la bordure rouge, que nous appelons contour. En gros, nous utilisons le contour pour créer deux bordures différentes. Maintenant, si vous remarquez que vous pouvez voir, nous avons un espace entre la bordure et le contour, et nous pouvons attribuer cet espace en utilisant la propriété outline oposite Et si je parle de styles de contour, nous avons des styles presque similaires à ceux que nous avons en bordure, tiret en pointillé, double tâtonnement, encart surélevé Parlons maintenant de la sténographie des grandes lignes. Semblable à la propriété de bordure CSS, le plan de CS comporte également un raccourci Nous n'avons pas besoin d'utiliser ces trois lignes pour créer un plan, uniquement pour taper une ligne, mais avant, il suffit de continuer pour utiliser cette propriété outline. Après avoir utilisé la propriété outline, nous devons passer à la valeur toro three abord, nous devons transmettre l'aile de contour, puis nous devons transmettre le style et la couleur du contour. Voici donc comment nous pouvons utiliser la sténographie. Donc, sans perdre votre temps, étudions la pratique et voyons comment nous pouvons utiliser le plan. Comme d'habitude, j'ouvre côte à côte mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Lip Server, et je crée déjà un document d'estimation nommé index point DML Comme vous pouvez le voir sur cette page d'été, nous avons un titre et une balise De plus, nous avons une balise de paragraphe. Maintenant, dans un premier temps, je vais attribuer une bordure à notre balise de paragraphe. Pour cela, je vais utiliser une balise de style dans le style de balise de tête à l'intérieur de la balise de style. Tout d'abord, je vais sélectionner le paragraphe à l'aide de la balise P. Ensuite, à l'intérieur du CarlSSO, la première propriété de navigation est border. Bordure, et je veux une bordure de trois pixels, trois pixels. Avec ça, je veux du solide et non du solide. De plus, je veux utiliser la couleur rouge. Si je configure ce fichier, vous pouvez voir le résultat dans mon navigateur. Je vais maintenant créer les grandes lignes de ce paragraphe. Pour cela, comme je vous l'ai dit, nous devons d'abord utiliser la propriété Outline With. Tracez avec Outline With, et je vais utiliser trois pixels. Le nom de notre propriété suivante est Outline Style. Contour, style, style de contour, je vais utiliser Solid. Et notre dernière propriété a un contour coloré. Contour, couleur, contour coloré en vert. Et je vais configurer ce fichier. Définissez ce fichier en haut, ici vous pouvez voir le résultat. Vous créez ici un contour en dehors de la bordure, en dehors de la zone de bordure. Et si vous souhaitez modifier le style du plan comme vous le pouvez, si vous souhaitez utiliser un contour en pointillé, pointillé, vous pourrez voir le résultat Voici donc comment vous pouvez utiliser le contour et la bordure ensemble. Et si vous souhaitez créer un écart entre le contour et la bordure, dans ce cas, vous devez utiliser nom de propriété outline ci-contre. Permettez-moi de vous montrer le schéma ci-contre, et je vais passer une valeur de trois pixels, trois pixels. Avant de configurer ce fichier, vous pouvez voir le résultat. Il laisse peu d'écart entre le contour et la bordure. Si j'augmente la valeur, je vais donc passer huit pixels et définir ce fichier, vous pouvez maintenant voir le résultat. L'écart entre le contour et la bordure est maintenant de huit pixels. Maintenant, laissez-moi vous montrer comment utiliser le raccourci pour obtenir le même Pour cela, je vais supprimer toute cette ligne. Et cette fois, nous devons utiliser uniquement les probabilités générales. Contour. Notre première valeur est la largeur du contour, qui est de trois pixels. Notre prochaine valeur est le style de contour, et je vais utiliser le solide, et la couleur de notre contour est le vert. Si je configure ce fichier, vous pouvez voir le résultat. Voici donc comment nous pouvons utiliser la propriété outline shorten. Et n'oubliez pas que nous pouvons utiliser la propriété outline dans la balise Atmel. C'est donc tout pour ce tutoriel. Dans le prochain tutoriel, nous allons parler du rembourrage. 8. Tutoriel de rembourrage CSS: Bon retour, les gars, encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons en apprendre davantage sur le rembourrage CSS Pourquoi le rembourrage est-il la partie la plus importante du CSS ? Parlons maintenant du nombre de propriétés que nous avons dans le rembourrage CSS Nous avons au total quatre propriétés : rembourrage CSS, rembourrage en haut, rembourrage à droite, rembourrage en bas, rembourrage en gauche Mais avant, nous devons comprendre comment fonctionne essentiellement le rembourrage Comme vous pouvez le voir dans cet exemple, à l'intérieur de cet élément profond, nous avons un paragraphe. Mais si vous remarquez, vous pouvez voir qu'il y a un espace entre ce paragraphe et la bordure. En gros, je parle de cet écart, que nous appelons le rembourrage Selon cet exemple, l'écart entre la bordure et le paragraphe est appelé paddy Nous pouvons contrôler le rembourrage de chaque côté. Supposons que si vous souhaitez ajouter le même rembourrage dans toutes les directions, vous pouvez dans ce cas utiliser la même valeur Vous pouvez également utiliser un raccourci pour cela, en ajoutant dix pixels. Dans ce cas, vous n'avez pas besoin de taper quatre lignes pour cela. Si je fournis un rembourrage de dix pixels, il attribuera un rembourrage de dix pixels sur chaque côté Mais que se passe-t-il si vous utilisez rembourrage différent selon le site pour le rembourrage supérieur, vous utilisez dix pixels À droite, vous utilisez 20 pixels. Pour le bas, vous utilisez 15 pixels et pour la gauche, vous utilisez 25 pixels. Pour cela, vous pouvez également utiliser une sténographie. Il vous suffit de fournir un total de quatre valeurs différentes. Vous devez d'abord fournir la valeur supérieure, puis la bonne valeur, puis la valeur inférieure, puis la valeur libbed Donc, sans perdre votre temps et pour créer ce sujet, étudions le stage Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server, et je crée déjà un point d'index de nom de document TML Comme vous pouvez le voir à l'intérieur de notre balise body, nous avons une balise header one Dans un premier temps, je vais créer une balise Dip à l'intérieur de la balise body. Je vais donc taper DIV, D. Et dans cette balise DIP, je vais attribuer une balise de paragraphe, P. Et pour le paragraphe, je vais taper Loren et je veux ajouter 20 mots au total Et je vais configurer ce fichier. Et maintenant, je veux attribuer une classe à ce plongeon. Pour assigner une classe, nous devons utiliser la classe d'attributs de classe, et je vais assigner, et le nom de notre classe est taste, et je vais définir ce fichier. Et maintenant, je veux styliser cet élément deb en utilisant son nom de classe. Pour cela, je vais utiliser Tie Dot Taste. Voici ce que dit le foie, d'abord, je vais attribuer une bordure à ce paragraphe, une bordure. Et je veux ajouter une bordure de deux pixels. Et notre style boer est solide. Avec ça, je veux que la couleur noire m'ennuie. Et je vais configurer ce fichier. Pour l'instant, vous pouvez voir dans ce paragraphe qu'il y a un petit écart en haut et en bas. Nous l'avons appelé marge, pas rembourrage. Et nous allons en apprendre davantage sur marge et dans le prochain tutoriel. Maintenant, revenons à la garniture. Donc, pour l'instant, je vais supprimer cette balise de paragraphe. Je n'ai pas besoin de cette balise de paragraphe pour redéfinir ce fichier. Vous pouvez maintenant voir que Bdfaul n'a fourni aucune marge à ces textes Maintenant, ajoutons un peu de rembourrage, et je veux un rembourrage de dix pixels dans Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, dans toutes les directions, il ajoute un rembourrage de dix pixels Si je l'augmente, je vais le faire de 30 pixels et le sauvegarder à nouveau. Vous pouvez maintenant voir le résultat. La distance entre la bordure et le texte est désormais de 30 pixels dans toutes les directions. N'oubliez pas que le rembourrage ne s'étale pas en dehors de la bordure. Il s'est répandu à l'intérieur de la frontière. Si je définis une couleur d'arrière-plan pour ce div, laissez-moi vous montrer un type de couleur d' arrière-plan, de couleur d'arrière-plan, etc. Avec cela, je veux utiliser la couleur de police. Couleur : blanc. Et si je définis ce fichier, il est maintenant plus clair pour vous quelle est la zone de remplissage. Si je commente ce rembourrage et que je reconfigure ce fichier, vous pouvez maintenant voir qu'il s'agit de la zone exacte occupée par notre texte Mais si j'utilise le rembourrage puis que je définis ce fichier, vous pouvez maintenant voir qu'il ajoute l'espace supplémentaire en dehors de la zone de texte. Et maintenant, vous décidez de conserver un rembourrage différent selon le site Supposons que pour le haut, vous souhaitiez conserver un rembourrage de 50 pixels. Et pour cause, vous voulez donner une pastille de 30 pixels, sinon, une pastille de dix pixels. Et pour le bas, vous voulez donner une patty de 100 pixels. Et pour la gauche, vous souhaitez attribuer une pastille de cinq pixels. Si je configure ce fichier, vous pouvez voir le résultat. Sur le dessus, il fournit un rembourrage de 50 pixels. Et sur le côté droit, il a attribué un rembourrage de dix pixels. Du bas , il a attribué rembourrage de 100 pixels et du côté gauche, il a attribué un rembourrage de cinq pixels Voici donc comment fonctionnent les rembourrages. Maintenant, laissez-moi vous montrer une autre méthode abrégée pour utiliser le rembourrage Pour cela, je vais commenter cette ligne et la redéfinir. Maintenant, je veux attribuer un rembourrage. Donc, d'abord, je vais taper padding, padding et en haut et en bas, je veux attribuer un rembourrage de 100 pixels Et de gauche à droite, je veux attribuer un rembourrage de dix pixels Si je configure ce fichier, vous pouvez voir le résultat. Il s'agit donc d'une autre méthode abrégée. Ici, à la première valeur, nous devons fournir les valeurs supérieure et inférieure, et à la deuxième valeur, nous devons fournir les valeurs gauche et droite. Il s'agit donc de la propriété du rembourrage. Dans le prochain tutoriel, nous allons parler de la propriété des marges. Merci donc d' avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 9. Tutoriel CSS Margin: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS 3. Et dans ce tutoriel, je vais parler de la marge CSS. C'est l'une des propriétés les plus utiles du CSS. Maintenant, laissez-moi vous montrer comment cela fonctionne. Comme vous pouvez le voir dans cet exemple, nous avons une balise profonde, et à l'intérieur cette balise profonde, nous avons un paragraphe. Dans notre précédent tutoriel, nous allons en apprendre davantage sur le pad. Nous savons déjà que le rembourrage fonctionne de l'intérieur, mais la marge est opposée C'est un travail de l'extérieur. J'ajoute de l'espace en dehors de la zone frontalière. Maintenant, la question est de savoir pourquoi nous devons utiliser la marge ? Supposons que vous souhaitiez ajouter une autre profondeur en dessous de cet élément profond. Dans ce cas, vous devez prévoir un espace entre ces deux profondeurs. Laissez-moi vous montrer comment faire. Voici donc l'exemple d'une autre profondeur. Et entre ces deux profondeurs, comme vous pouvez le voir, nous avons un espace, et nous pouvons attribuer cet espace en utilisant la marge. C'est l'une des propriétés les plus utiles du CSS. Si nous n'utilisons pas de marge, les deux éléments se chevauchent Parlons maintenant des propriétés des marges. Combien de propriétés avons-nous en marge ? Nous devons remorquer quatre propriétés marge supérieure, marge droite, marge inférieure et marge relevée. C'est assez similaire avec le rembourrage. Et si je parle de la partie courte de cette propriété, vous ne pouvez utiliser que la propriété de marge. Si vous souhaitez ajouter la même marge dans toutes les directions, dans ce cas, vous pouvez utiliser la marge, puis vous pouvez utiliser le do. Dans ce cas, vous n'avez pas besoin de taper ces quatre lignes pour cela. Je réduis votre consommation de charbon. Mais quoi ? Si vous devez utiliser une valeur différente pour toutes ces directions, oui, vous le pouvez. Vous pouvez également utiliser le short et pour cela. abord, vous devez fournir la valeur, puis la droite, puis le bas, puis le soulever. En gros, il suit le sens des aiguilles d'une montre. F stop, puis à droite, puis en bas, puis en haut. Maintenant, la marge est associée à une autre valeur, qui est automatique. Nous utilisons la valeur automatique lorsque vous devez centrer un élément profond sur notre page Web. Si vous réglez automatiquement l'élément vers le haut et dans la bonne direction et que vous le réglez sur cet élément profond, vous l'alignez automatiquement au centre. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, nous ouvrons mon coordinateur Salt Studio et mon navigateur à l'aide de l'extension Light Server, et je crée déjà un document d'estimation nommé index point stem. Et comme vous pouvez le voir sur cette page tamal, nous avons une balise d'en-tête et deux balises Deep Et à l'intérieur de cette balise DIP, il y a du texte. Et si vous remarquez, vous pouvez voir que dans notre première balise Dip, nous attribuons d'abord un nom de classe, et dans notre deuxième balise Dip, nous attribuons une classe nommée second. Maintenant, en utilisant cette classe, je vais sélectionner cet élément DIP. Donc, dans cette balise de style, je vais sélectionner la première classe, je vais d'abord taper un point. Ensuite, Madi Caribra dit, d'abord, je vais utiliser border property, border Et je vais attribuer une bordure de deux pixels, et notre style de bordure est silencieux et notre couleur de bordure est rouge Ensuite, je vais dupliquer cette section. Et déchirez le premier par le second. Et aussi, je vais changer le nom de la couleur, qui est le vert. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, comme vous pouvez le constater, il n'y a pas d'espace entre ces deux D. Si vous voulez fournir de l'espace, utiliser le rembourrage ne fonctionnera pas. Laisse-moi te montrer. Supposons que dans notre première balise, je souhaite ajouter un fond de rembourrage, un fond rembourrage, dix pixels Et définissez ce fichier. Maintenant, vous pouvez voir que cela ajoute de l'espace de l'intérieur, pas de l'extérieur. Donc, si vous souhaitez ajouter de l'espace entre ces deux éléments, vous devez utiliser la propriété de marge. Donc, si vous utilisez la marge, le bas de la marge, puis que vous définissez ce fichier, vous pouvez maintenant le voir ajouter un petit espace entre ces deux éléments. En gros, cela ajoute un espace de dix pixels, et si vous le définissez à 100 puis que vous définissez ce fichier, vous pouvez maintenant voir la distance. De même, je voudrais ajouter une marge dans notre deuxième débilitation. Cette fois, je vais utiliser la marge supérieure, je vais passer 50 pixels, et je vais définir ce fichier, la marge supérieure à 500 pixels. Si je définis ce fichier, vous pouvez maintenant voir que la distance entre un élément profond et un élément profond est de 600 au total , car lors de notre premier élément d'immersion, nous utilisons la propriété margin bottom et nous fournissons 100 pixels. Et dans notre deuxième élément d'inclinaison, nous utilisons la probabilité maximale de la marge. Propriété supérieure de la marge, 500 pixels. La distance entre le premier élément DIP et le deuxième élément est donc de 600 pixels. Pour l'instant, je vais supprimer cette propriété du haut de la marge. Je ne le veux pas et j'ai redéfini ce fichier. Maintenant, je veux attribuer la propriété margin lip dans notre deuxième élément de base de données. Hemo tape donc margin, lip, margin lap, et je vais attribuer 150 pixels Si je configure ce fichier, vous pouvez voir notre deuxième élément profond se déplacer du côté droit car sur le côté gauche, nous utilisons une marge de 150 pixels. Et si vous souhaitez utiliser un raccourci et attribuer une marge dans le sens indiqué, il vous suffit d'utiliser la propriété de marge Et si vous définissez ce fichier, vous pouvez maintenant voir le résultat. Dans les deux sens, il y avait une marge de 150 pixels. Maintenant, si je crée un autre élément profond en dessous de ce deuxième élément profond, laissez-moi vous montrer DIV Dev et à l'intérieur de cet élément profond, je vais taper un paragraphe Lowm et je veux ajouter 30 mots Si je définis ce fichier, vous pouvez maintenant voir que la distance entre seconde et 30 éléments est de 150 pixels car elle utilise la propriété de marge. En gros, cela ajoute de la marge à notre deuxième élément dans toutes les directions. Et si vous souhaitez ajouter une marge différente direction différente, oui, vous le pouvez. Laissez-moi vous montrer comment faire. Donc, du haut, je veux une marge de 70 pixels. Et du côté droit, je veux une marge de 50 pixels. Et du bas, je veux une marge de dix pixels. Et du côté gauche, je veux une marge de 200 pixels. Si je place cette pile, vous pouvez maintenant voir le résultat. Du haut, nous avons une marge de 70 pixels. Si je commente cette ligne et que je la redéfinit, elle est maintenant plus claire pour vous. En haut, nous avons une marge de 70 pixels. À partir de la droite, nous avons une marge de 50 pixels. À partir du bas, nous avons une marge de dix pixels, et à partir de P, nous avons une marge de 200 pixels. Maintenant, permettez-moi de vous montrer un autre raccourci sur la façon dont nous pouvons utiliser Je vais donc faire cette ligne et commenter la précédente. Cette fois, je veux attribuer une marge haut et en bas, à droite et en fin de compte. Donc, de haut en bas, je veux 200 pixels. Et de gauche à droite, je veux 20 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, de haut en bas, nous avons 200 pixels, et de gauche à droite, nous avons 20 pixels. Maintenant, laissez-moi vous montrer une autre photo. Je vais donc dupliquer cette ligne et commenter la précédente. Cette fois, en partant du haut, je vais attribuer une valeur nulle. Et de gauche à droite, je vais également attribuer une valeur nulle. Et à partir du bas, je veux attribuer 100 pixels. Si je configure ce fichier, vous pouvez voir le résultat. De gauche à droite et en haut, nous avons une valeur nulle, mais en bas, nous avons 100 pixels. Il s'agit donc essentiellement de notre travail de fusion. Permettez-moi maintenant de parler d' une autre propriété , à savoir la marge automatique. Permettez-moi de vous montrer l'exemple de la façon dont nous pouvons utiliser la valeur automatique. Je vais donc commenter cette ligne, et d'abord, je vais attribuer wed à ce conteneur car par défaut, D n'a pas de hauteur intérieure. Je vais donc attribuer N V à ce conteneur de 500 pixels. Je vais configurer ce fichier. De plus, je vais augmenter la taille de la page et dézoomer un peu sur le contenu Maintenant, notre deuxième élément D est de 500 pixels. Mais si vous remarquez, vous pouvez voir que cet élément DP ne s'aligne pas au milieu. Je m'aligne sur le côté gauche. Je veux attribuer un espace égal à droite et à l'ascenseur. Pour cela, nous devons utiliser la propriété automatique des marges. Donc, tapez la marge de haut en bas, je veux 50 pixels, et de gauche à droite, je veux ou si je définis ce fichier, vous pouvez voir le résultat. Maintenant, de haut en bas, il utilise une marge de 50 pixels et de gauche à droite, il utilise Auto pour le placer au centre. Maintenant, il devient assez réactif. Maintenant, vous pouvez également voir son centre d'alignement. J'espère que vous comprenez maintenant comment nous pouvons utiliser la propriété des marges. Dans le prochain tutoriel, nous allons découvrir cette propriété, la largeur et la hauteur. Merci d'avoir regardé cette vidéo Sy tune pour le prochain tutoriel. 10. Tutoriel CSS de hauteur et de largeur: Salut, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS. Dans ce didacticiel, nous allons découvrir deux propriétés les plus importantes du CSS, à savoir hauteur et le Wi. Comme vous pouvez le voir, il s'agit du D, appelé propriété. Si vous souhaitez augmenter la taille de votre profondeur, en fonction de la position horizontale, dans ce cas, vous devez utiliser avec propriété. Et si vous souhaitez augmenter sa direction verticale, dans ce cas, vous devez utiliser la propriété de hauteur. Vous pouvez utiliser la probabilité et la propriété de hauteur avec une valeur en pourcentage, également une valeur en pixels. Si vous souhaitez utiliser une valeur fixe, vous devez utiliser une valeur en pixels. Et si vous souhaitez opter pour le réglage en hauteur, dans ce cas, vous devez utiliser une valeur en pourcentage. Nous allons en apprendre davantage sur les unités dans notre prochain tutoriel. Cette méthode est plus claire si nous commençons par la pratique. Commençons donc par la pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension lp server, et je crée déjà un document TML nommé index point TML À l'intérieur du body tag, comme vous pouvez le voir, nous avons un Deptag avec le nom d'identification en premier Donc, dans un premier temps, je vais sélectionner ce DP en utilisant son nom d'identification. Et pour sélectionner le D avec ID, nous utilisons HTagsinhTag ID Définissez ensuite la propriété clRasf que je vais utiliser, qui est Avec, et je vais utiliser un poids fixe de 300 pixels, et je vais définir ce fichier Si je configure ce fichier, vous ne verrez rien sur ma page. Je décide donc d' ajouter de la couleur de fond. Couleur d'arrière-plan, rouge, et définissez ce fichier. De plus, vous pouvez voir qu'il n'y a rien dans cette page car nous avons juste défini le mariage, pas la hauteur. Je vais donc décider d'attribuer de la hauteur à ce diable Hauteur, 200 pixels. Et je vais configurer ce fichier. Vous pouvez maintenant voir l' élément profond sur ma page Web. Les unités de pixels sont des unités statiques. Si j'augmente, sinon diminue la hauteur et la fenêtre du navigateur, cela ne reflétera cet élément car ce sont toutes des unités fixes. Et maintenant, je décide d'attribuer 50 % de la largeur du navigateur à cet élément. Pour cela, nous devons utiliser une unité dynamique, qui est la valeur en pourcentage. Alors voilà, je vais supprimer cette unité statique, et je vais la remplacer par 50 %. Ne t'inquiète pas. Nous allons découvrir cette unité dans notre prochain tutoriel. Vous pouvez maintenant voir que cet élément profond occupe 50 % du navigateur que nous utilisons. Si je clique avec le bouton droit sur notre navigateur , que j'inspecte l'élément et que je modifie la taille de la fenêtre du navigateur. Comme vous pouvez le voir, en fonction de la taille de la fenêtre du navigateur, largeur de l'élément a changé car ici nous prenons 50 % de la largeur du navigateur. De même, si vous souhaitez augmenter la largeur de cet élément jusqu'à 80 %, oui, vous pouvez simplement modifier la valeur en pourcentage. Et je vais remplacer 50 largeur 80. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Mais que se passerait-il si nous utilisions une valeur statique puis modifiions la taille, laissez-moi vous le montrer. Donc, cette fois, je vais utiliser 500 pixels. Maintenant, nous utilisons une valeur statique. Maintenant, nous ne pouvons pas le modifier dynamiquement. Donc, si je réduis la taille du navigateur, maintenant vous pouvez voir que notre largeur ne change pas en fonction la taille du navigateur parce que nous utilisons une taille fixe, et maintenant je vais ajouter quelques interprétations factices de cet élément profond Alors elle va taper Loren, 300, quoi ? Si j'ai configuré ce fichier, vous pouvez maintenant voir dans mon navigateur le contenu de notre texte provient de cet élément profond Si vous le remarquez dans notre section de style, vous pouvez voir ici, pour l'une ou l'autre hauteur, que dans les deux cas, nous utilisons une valeur statique, mais que notre texte s'ajuste en fonction du vent profond. Si j'augmente le Doi 500 pixels et que je définis ce fichier, comme vous pouvez le voir, encore une fois, cela ajuste le texte, mais cela ne fonctionne pas très bien pour la hauteur, et c'est le gros problème avec la propriété de hauteur Vous devez utiliser la propriété height lorsque vous savez que votre contenu ne débordera pas vers cet élément de base de données Et si vous souhaitez résoudre ce problème, vous devez utiliser les propriétés de hauteur minimale et de hauteur maximale. C'est donc tout pour ce tutoriel. Et dans le prochain tutoriel, je vais parler de la hauteur minimale et de la hauteur maximale. Merci donc d' avoir regardé cette vidéo. 11. Tutoriel CSS Min hauteur et Max hauteur: Bonjour, les gars. Contente de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS. Et dans ce didacticiel, nous allons apprendre hauteur minimale et de la hauteur maximale. Pourquoi devons-nous utiliser une hauteur minimale et une probabilité de hauteur maximale. Alors étudions de manière pratique. Comme vous pouvez le voir, j'ouvre ici mon précédent document estim et mon navigateur. Et vous savez déjà que si nous utilisons une hauteur fixe, notre contenu déborde de ce conteneur Pour résoudre ce problème, nous n'utilisons pas la propriété de hauteur. Sans utiliser la propriété de hauteur, nous aimerions opter pour une hauteur maximale et une probabilité de hauteur minimale. Permettez-moi de vous montrer l'exemple. Supposons que vous ayez moins de contenu. Je vais donc supprimer une partie du contenu de ce paragraphe. Ensuite, je vais configurer ce fichier. Maintenant, notre contenu est parfaitement organisé dans notre élément profond, et nous avons également de la place dans ce conteneur. Donc, pour cet élément profond, notre exigence de hauteur minimale est de 200 pixels. Je vais donc supprimer la propriété de hauteur, et je vais la remplacer par la hauteur minimale. Hauteur minimale, hauteur minimale 200 pixels. Après avoir défini ce fichier, comme vous pouvez le voir, il n'y a aucun changement dans notre forme. Mais quoi ? Si j'augmente un peu le contenu, laissez-moi vous le montrer. Encore une fois, je vais ajouter du contenu. Faible 200. Et puis définissez ce fichier. Vous pouvez maintenant voir les différentes âmes. Maintenant, la hauteur augmente en fonction de la taille du contenu. Nous pouvons donc augmenter la hauteur autant que nous le voulons, mais nous ne pouvons pas la diminuer moins de 200 car nous utilisons ici la propriété de hauteur minimale. Nous disons une hauteur minimale de 200 pixels. C'est donc l'utilisation de la propriété de hauteur minimale. Parlons maintenant de la propriété de hauteur maximale. Mais avant, je vais supprimer tout le contenu de ce paragraphe. Pour l'instant, je vais ajouter un peu moins de contenu, Lowm 50. C'est ça. Maintenant, je décide que je ne veux pas augmenter la hauteur de plus de 600 pixels. Dans ce cas, nous devons utiliser la propriété de hauteur maximale. Ici, je vais taper hauteur maximale, hauteur maximale, 600 pixels. Je vais configurer ce fichier. Comme vous pouvez le constater, il n'y a aucune modification pour configurer ce fichier. En gros, je tiens à dire que je ne veux pas augmenter la hauteur de plus de 600 pixels. Je vais maintenant augmenter la taille du contenu. Donc ici, je vais taper wim 200. Configurez ce fichier. Comme vous pouvez le constater, la hauteur de notre conteneur profond n'atteint toujours pas 600 pixels, je vais donc ajouter du contenu. Plus bas. Ici, je vais ajouter un autre paragraphe de 300 mots. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. En raison de la propriété de hauteur maximale, notre conteneur ne peut pas atteindre plus de 600 pixels. C'est pourquoi, cette fois notre paragraphe a survolé ce conteneur Il s'agit donc de l'utilisation de la propriété de hauteur minimale et de hauteur maximale. J'espère que le sujet est maintenant clair 42. Merci d'avoir regardé cette vidéo Restez connectés pour les deux prochaines, trop sombres. 12. Tutoriel CSS Min Width et Max Width: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, vous allez apprendre deux nouvelles propriétés CSS, largeur minimale et la largeur maximale. Donc, sans perdre votre temps, étudions de manière pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Lip Server, et je crée déjà un document HTML nommé index point HTML. À l'intérieur de la balise body, nous avons une balise headone et une balise deep, et nous avons d'abord défini un identifiant pour cet élément div. Nous allons maintenant utiliser cet identifiant pour styliser cet élément DV Ici, dans la balise de style, je vais sélectionner l'identifiant. Hashtag d'abord. Puis à l'intérieur du Cirass. Donc, dans un premier temps, je vais attribuer une bordure à ce conteneur profond. Je vais donc utiliser la propriété de la bordure. Bordure, et je veux une bordure de trois pixels, et je veux une bordure solide. Sur ce, je veux une bordure de couleur rouge, y. Bouleversez ce fichier. Oups, ça ne marche pas. Je pense que j'ai commis quelques erreurs. Oui. La première orthographe de notre nom d'identification est incorrecte. Tout d'abord, enregistrez-le à nouveau. Bougez ce fichier, vous pouvez voir le résultat. Je vais maintenant attribuer un poids fixe à cet élément DV Je vais donc utiliser avec ppty We 300 pixels, et je vais le sauvegarder à nouveau. Maintenant, je vais vous montrer le problème. Comme vous pouvez le voir dans mon répertoire de travail actuel, il existe une image nommée Amita point JPG Donc, dans cet élément profond, je vais utiliser la balise d'image IMG. Ensuite, nous devons fournir la source de l'image dans notre attribut source. Et le nom de notre image est Amita Amita point JH. Si je place ce fichier, vous pouvez voir le résultat ici. C'est là le problème. Ici, vous pouvez voir largeur de notre image est beaucoup plus grande que celle de Deid Comme vous pouvez le constater, notre largeur de profondeur est de 300 pixels, mais notre image est beaucoup plus grande. C'est pourquoi l'image a survolé ce conteneur. Ensuite, je vais utiliser le tag image. IMG, et à l'intérieur de la balise image, je vais définir la largeur à 100 %. Et je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, il est fixé à ce conteneur. Mais dans ce tutoriel, nous allons en apprendre davantage sur la largeur minimale et la largeur maximale. Cette fois, je vais utiliser la propriété de largeur minimale. La largeur minimale et la largeur maximale fonctionnent ensemble. Laissez-moi vous montrer comment faire. Donc ici, je vais définir la largeur minimale. Largeur minimale, je vais régler 300 pixels. Ensuite, je vais utiliser la largeur maximale, la largeur maximale, la largeur maximale, je vais utiliser 500 pixels. Et je veux configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, notre élément profond devient maintenant une roue de 500 pixels. Si j'inspecte cet élément, laissez-moi vous montrer et ouvrir mes cartes sur cette image, comme vous pouvez le voir, largeur de l'image est de 500 pixels et la hauteur 357 pixels car ici nous définissons une largeur maximale de 500 pixels. Nous ne pouvons donc pas étendre largeur de cet élément profond de plus de 500 pixels. Et si j'essaie de réduire la largeur de l'élément profond, nous ne pouvons pas la réduire en dessous de 300 pixels car Hear a défini une largeur minimale de 300 pixels. Il est assez similaire avec une propriété de hauteur minimale et de hauteur maximale. En gros, avec cette propriété, nous pouvons définir une limite supérieure et une limite inférieure. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons en apprendre davantage sur le dimensionnement des boîtes CSS pprity Merci donc d' avoir regardé cette vidéo. 13. Tutoriel de dimensionnement des boîtes CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons en apprendre davantage sur le dimensionnement des boîtes Avant de vous expliquer pourquoi nous utilisons le dimensionnement des boîtes, permettez-moi de vous montrer un problème Ici, vous pouvez voir un élément profond, et nous l'avons défini avec 200 pixels. Mais cette profondeur est dotée d'une bordure de dix pixels. Après avoir utilisé une bordure, cela a augmenté la profondeur des mauvaises herbes. Si nous utilisons dix pixels encadrés à gauche et à droite, le total devient alors 220 pixels De plus, si nous ajoutons un rembourrage à gauche et à droite, supposons qu'à gauche, nous utilisons un rembourrage de dix pixels Toujours à droite, nous utilisons un rembourrage de dix pixels. La largeur totale devient maintenant de 240 pixels, mais la largeur réelle est de 200 pixels. Comme nous utilisons un rembourrage de dix pixels dans chaque direction, utilisons également une bordure de dix pixels C'est pourquoi la largeur totale devient 240 pixels. Pour résoudre ce problème, le dimensionnement des boîtes va nous aider. Si nous utilisons le dimensionnement des boîtes, largeur de notre élément profond devient toujours 200 Cela n'augmentera pas l'aile de l'élément profond. En fin de compte, pour résoudre ce problème, le dimensionnement des boîtes a introduit le CSS Après avoir utilisé le dimensionnement de la boîte, la largeur totale serait de 200 pixels Et pour appliquer cette taille de boîte, nous devons utiliser la propriété de taille de boîte, la taille de la boîte et la valeur est la zone de Fondamentalement, la propriété de dimensionnement de la boîte comporte deux valeurs, la bordure et la zone de contenu. Si nous utilisons une bordure, nous ne pouvons pas augmenter la largeur, peu importe ce que nous utilisons. Si nous utilisons une bordure de marge de remplissage, cela n'augmentera pas non plus la largeur, mais si nous utilisons une zone de contenu, cela fonctionnera tel quel Dans ce cas, cela peut augmenter le Oi. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension de serveur Lip, et je crée déjà un index de nom de document Tim en HTML à points. Et à l'intérieur de ce document d'estimation, nous avons une étiquette détaillée. Et à l'intérieur de cette balise profonde, nous avons du texte factice Dans un premier temps, je vais attribuer un identifiant à cet élément profond. ID de développement, ID égal à celui de la boîte. Ensuite, à l'intérieur de cette balise de vignette, je vais sélectionner cet élément profond en utilisant son nom d'identification. Possède une étiquette, une boîte. Ensuite, vous définissez les calices, notre première propriété est W, et je vais dire 500 pixels Je veux définir ce fichier, puis je vais ajouter une bordure pour le dévaluer Je vais donc utiliser la propriété de la bordure. Pixel BDert. Et je veux de la poudre solide. Dans ce cas, la couleur de la bordure est rouge. Je vais configurer ce fichier. Et maintenant, je vais utiliser du rembourrage Après avoir utilisé le rembourrage, cela augmente notre largeur. Laisse-moi te montrer. En rembourrant chaque direction, je veux dix pixels Et définissez ce fichier. Après avoir défini ce fichier, vous remarquerez qu'il augmente la largeur de l'élément. Si j'inspecte cet élément et la position de mes cartes sur cet élément profond, vous pouvez maintenant voir que notre largeur profonde devient 524 pixels, car 500 est la largeur réelle de cette profondeur Ensuite, nous avons une bordure de deux pixels de chaque côté, donc c'est devenu 504. Avec cela, nous avons également rembourrage de dix pixels à gauche et à droite C'est pourquoi il devient 524. C'est donc l'un des grands problèmes. Si nous utilisons une marge de rembourrage des bordures, cela augmente la largeur profonde Mais après avoir utilisé la propriété de dimensionnement de la boîte, cela n'augmentera pas la largeur de l'élément profond taille de la boîte reste la largeur profonde, ce que nous attribuons. Laisse-moi te montrer. Donc, ici, je vais taper taille de boîte, taille de boîte, et je vais utiliser la probabilité de la zone de bordure. Je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le constater, il a réduit le poids de l'élément profond. Maintenant, si j'utilise le rembourrage, 50 pixels, et aussi la bordure, cinq pixels et que je définis ce fichier Et si j'inspecte cet élément et que j'inspecte au-dessus de ma voiture sur cet élément, maintenant vous pouvez voir qu'il est toujours écrit 500 pixels Weed parce que nous utilisons une boîte de taille Pubert. Après avoir utilisé du rembourrage et une bordure, cela n'augmente pas la profondeur de la Mais si vous utilisez une valeur différente pour cela, si nous utilisons la taille de la boîte, la zone de contenu, puis définissons ce fichier Maintenant, vous pouvez voir si j'ouvre mon azar sur cet élément, notre largeur devient 610 pixels car A nous n'utilisons pas la propriété de dimensionnement des boîtes Fondamentalement, la propriété de taille de la boîte réduit la taille du contenu qui se trouve à l'intérieur de cette boîte. C'est pourquoi il a maintenu le réel. La zone de contenu est donc la valeur par défaut de cette propriété. Nous devons donc utiliser une zone de bordure. Et après avoir défini ce fichier, vous pouvez voir le résultat. Encore une fois, il devient 500 pixels. C'est donc tout pour ce tutoriel. Dans le prochain tutoriel, nous allons en apprendre davantage sur la propriété CSS overflow Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 14. Tutoriel de débordement CSS: Salut, les gars, content de vous revoir. Qu'est-ce qui va revenir avec un nouveau tutoriel lié au CSS ? Et dans ce tutoriel, nous allons en apprendre davantage sur la propriété CSS Overflow. Comme vous pouvez le voir dans cet exemple, nous avons un élément profond, et notre texte déborde de cet élément profond, et c'est là le problème Ce type de problème apparaît lorsque nous utilisons une hauteur fixe pour cet élément profond. Supposons que nous utilisions une hauteur de 200 pixels pour cet élément profond, et chaque fois que nous essayons d'insérer des données de plus de 200 pixels, dans ce cas, en cas de dépassement de ce conteneur Et pour gérer cette situation, le CSS introduit la propriété overflow et il est livré avec quatre valeurs différentes La première valeur que nous pouvons utiliser est masquée. Nous pouvons masquer les données de débordement en utilisant cette valeur. La valeur suivante est scroll. Nous pouvons utiliser la barre de défilement à l'intérieur cet élément profond pour faire défiler les données de débordement Nous pouvons lire les données après le défilement. Elle peut être horizontale, sinon verticale. Notre valeur suivante est automatique, et il existe une différence mineure entre le défilement et le mode automatique. La différence entre le défilement et automatique est que si nous utilisons la valeur de défilement, vous pouvez voir cette barre de défilement dans cet élément profond S'il n'y a aucune donnée de débordement. Mais si nous utilisons autovalu, cela affiche le défilement ou lorsque nos données sont débordées Les données IB sont à débordement vertical, puis Auto Valu fournit un mot à défilement vertical et les données IP à débordement horizontal, puis Auto Value fournit un mot à défilement horizontal Et la dernière valeur est visible. Il s'agit de la valeur par défaut. Il va afficher les données de débordement telles quelles, et nous devons indiquer trois types de propriétés de débordement Le premier est le trop-plein, le second est le trop-plein X, et le troisième est le trop-plein Y. Notre premier débordement immobilier fonctionne dans toutes les directions Il fonctionne à la verticale et à l'horizontale dans les deux cas. Notre propriété suivante est le débordement X. Si vous souhaitez contrôler les données de débordement position horizontale, vous devez utiliser le débordement X. Et en particulier si vous souhaitez contrôler les données de débordement vertical, dans ce cas, vous devez utiliser Donc, sans trop parler, commençons par l'aspect pratique et voyons comment cela fonctionne. Enfin, nous sommes dans le codiitor de mon studio Visa et, comme d'habitude, je crée ici un document d'estimation nommé index point DM Et sur cette page d'estimation, nous avons une balise profonde avec une boîte de nom d'identification. Et à l'intérieur de cet élément profond, nous avons un paragraphe. Je vais maintenant sélectionner cet élément profond en utilisant son nom d'identifiant. Donc, dans la balise de style, je vais utiliser la balise has, et le nom de l'identifiant est box. Ensuite, à l'intérieur du Cali, il est dit, d'abord, que je vais utiliser avec Cupertin avec 250 pixels, hauteur 250 pixels Utilisez donc la même herse en hauteur. Et si vous remarquez, vous pouvez voir Harrow utiliser une hauteur fixe, et avec cela, je veux attribuer une bordure Bordure, deux pixels et je veux une bordure solide avec ça, notre couleur de bordure est le rouge. Et je vais satisfaire. Après satisfile, vous pouvez voir le résultat. Vous pouvez maintenant voir notre contenu survolé par ce diable Et pour résoudre ce problème, le CSS introduit la propriété overflow Donc, je vais d'abord taper le nom de propriété overflow. Et la première valeur que je vais utiliser, qui est cachée. Si j'enregistre ce fichier, vous ne pouvez plus voir les données de débordement en dehors du conteneur En gros, il masque tout le contenu du débordement, mais je ne veux pas masquer ces données Je veux lire ces données dans cet élément profond. Pour cela, nous avons une autre valeur, le scroll. Si je définis ce fichier, vous pouvez maintenant voir à l'intérieur de cet élément DIP que nous avons une barre de défilement. Ici, nous avons une barre de défilement horizontale. Nous avons également une barre de défilement verticale. Vous pouvez maintenant lire tous les paragraphes contenus dans cet élément DIP. Vous pouvez faire défiler le paragraphe vers le haut ou vers le bas. Si vous remarquez, vous pouvez voir que seule la barre de défilement verticale est active, pas horizontalement car notre contenu est du texte Si nous insérons une image dans cet élément profond, notre barre de défilement horizontale est également active Maintenant, je vais réduire la taille du paragraphe. Je vais donc supprimer certaines données. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez maintenant voir notre contenu ne débordera pas de ce conteneur, mais nous avons toujours des barres de défilement horizontale et verticale Pour résoudre ce problème, nous avons une autre valeur, Auto. Donc, pour supprimer la valeur de défilement et la remplacer par automatique. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, nous n'avons pas de barre de défilement dans cet élément deb. Mais si j'ajoute un mot à ce paragraphe, permettez-moi de vous montrer un mot de 150 mots de faible M , puis de redéfinir ce fichier. Vous pouvez maintenant voir que notre barre de défilement est à nouveau jumelée. Cette fois, vous ne pouvez voir que la barre de défilement verticale, pas la barre de défilement horizontale Donc, si nous utilisons AutoPpert, nous pouvons voir cette barre de défilement si nos données débordent Sinon, la barre de défilement ne s'affichera pas. Donc, dans la plupart des cas, nous utilisons la valeur automatique du débordement. Parlons maintenant l'objet perdu, qui est visible. Je vais donc supprimer l' automatique et le type visible. Si je configure ce fichier, vous pouvez voir le résultat. En gros, il s'agit de la valeur par défaut, et elle affichera les données de débordement telles quelles Parlons maintenant des autres propriétés de débordement. Ici, je vais utiliser Overflow. Y ? Et ici, je vais utiliser une valeur cachée. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant le voir masquer les données de débordement vertical. Mais si je passe la valeur de défilement, le défilement Y, faites défiler et définissez ce fichier Vous pouvez maintenant voir la barre de défilement verticale. Si vous vous souvenez, lorsque vous utilisez uniquement la propriété overflow, notre valeur de défilement fournit une barre de défilement dans le sens, vertical et Mais si nous utilisons particulièrement débordement Y puis la valeur de défilement, dans ce cas, seule la barre de défilement verticale sera seule la barre de défilement verticale Et si j'utilise les données et que je reconfigure ce fichier, vous pouvez toujours voir la barre de défilement verticale Pour résoudre ce problème, si vous souhaitez afficher la barre de défilement chaque fois que nous avons des données de débordement, dans ce cas, nous devons utiliser la propriété Auto Pour configurer ce fichier, vous pouvez voir qu'il n' y a pas de barre de défilement Mais si j'augmente les données, que j'appuie sur M 150 mots et que je reconfigure ce fichier, vous pouvez maintenant voir la barre de défilement Passons maintenant une autre propriété qui est overflow X. Je vais donc supprimer y et taper X. Après l'étape de ce fichier, comme vous pouvez le voir, il n'y a pas de barre de défilement horizontale dans cet élément profond car dans cet élément profond, son utilisation prend des données Nous n'avons pas de données susceptibles de déborder dans la direction XX. Et maintenant, je décide de créer un élément profond à l'intérieur de cet élément à l'intérieur de cette boîte. Donc, HemotypeTV et ici je vais utiliser la méthode de Je vais donc utiliser le style d'attribut de style. La première propriété est la hauteur. Pour la hauteur, je vais utiliser 100 pixels. Pour le Wi, je vais utiliser 400 pixels. Et pour la couleur de fond, la couleur de fond, je vais utiliser le rouge. Si je configure ce fichier, vous pouvez voir le résultat. Nous avons maintenant un défilement horizontal dans cet élément de plongée car le contenu déborde dans le déborde Voici donc comment nous pouvons utiliser cette importante propriété CSS, overflow Voilà pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 15. Tutoriel CSS Border Radius: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS. Et dans ce didacticiel, nous allons en apprendre davantage sur la propriété CSS border radius. Nous l'avons déjà appris dans nos précédents tutoriels. Mais dans ce tutoriel, nous allons en apprendre davantage sur le sujet. Comme vous pouvez le constater, nous avons un élément profond, et à l'intérieur de cet élément profond, nous avons du contenu. Par défaut, cet élément profond est doté d'un angle pointu. Mais dans cet exemple, vous pouvez voir la courbe dans le coin, et nous pouvons contrôler la courbe en utilisant la propriété du rayon de bordure. rayon de bordure comprend quatre propriétés au total : le rayon de la lèvre supérieure, le rayon de la bordure en haut à droite, le rayon de la bordure en bas à droite, le rayon de la bordure en bas à droite, rayon de la bordure en bas Et si vous voulez faire la même chose en une seule ligne pour cela, nous avons un raccourci, est la propriété du rayon de bordure Ici, vous pouvez utiliser les quatre valeurs en même temps. Dans cet exemple, nous avons au total quatre coins différents. Premier, deuxième, troisième et quatrième. Et si vous souhaitez utiliser cette propriété abrégée, vous devez taper quelque chose comme ça Pour notre premier angle, nous utilisons un rayon de bordure de 20 bixels. Pour le second, nous utilisons un rayon de bordure de 30 pixels, et pour le troisième, nous utilisons un rayon de bordure de 50 pixels Et pour le dernier angle, nous utilisons un boerradius de dix pixels. Ce n'est qu'un exemple. Commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Light Server, et je crée déjà un document ETML nommé index point TML Et dans cette page de tableau, nous avons une balise profonde avec une zone de nom d'identification. Dans un premier temps, je vais styliser cet élément profond en utilisant son nom d'identifiant. Ici, je vais taper une balise de style, un style, et dans cette balise de style, je vais sélectionner l'élément box, has tag box. Ensuite, dans le CalibrSSO, commencez par les propriétés with, et je vais dire 300 pixels nom de notre deuxième propriété est le rembourrage, et je souhaite fournir un rembourrage de 25 pixels Je vais aussi parler de la frontière. Bordure, et je veux une bordure pupixl, et notre frontière est solide Sur ce, je veux une bordure de couleur noire. noir. Et je veux configurer ce fichier. Après avoir défini ce fichier, vous verrez le résultat. Et si vous remarquez, vous pouvez voir tous les coins sont très nets, mais je ne veux pas de coins pointus pour la bordure. Donc, dans un premier temps, je veux attribuer un rayon de bordure au coin supérieur de la lèvre. Pour cela, nous devons utiliser le rayon supérieur gauche de la bordure. Bordure en haut à gauche, je vais utiliser dix pixels, et je vais définir ce fichier. Après avoir configuré ce fichier, si je zone un peu cette page, vous pouvez voir le résultat. la même manière, je souhaite modifier le rayon du coin supérieur droit. Pour cela, nous devons utiliser la bordure en haut, droite, le rayon. 50 pixels. Je souhaite configurer ce fichier. Pour configurer ce fichier, vous pouvez voir le résultat. Ensuite, je vais changer le rayon du coin inférieur droit. Pour cela, nous devons utiliser la probabilité du rayon en bas à droite de la bordure, somme au type, la bordure en bas à droite, la propriété du rayon. Et je vais dépasser les 50 pixels. Je souhaite configurer ce fichier. Configurez ce fichier, vous pouvez voir le résultat. Et le nom de notre dernière propriété est border bottom lip radius. Donc, pour dupliquer cette section, je vais la remplacer directement par elle. Et Hemo, disons dix pixels. Si je sauvegarde ce fichier, vous pouvez voir le résultat. Ainsi, d'un coin à l'autre, vous pouvez modifier le rayon à l'aide de ces propriétés. Mais quoi ? Si vous voulez un rayon égal dans tous les coins pour cela, vous pouvez utiliser le raccourci Je vais donc commenter cette ligne et ce héros pour utiliser un autre nom de propriété : rayon de bordure, rayon de bordure, 30 pixels. Il va maintenant fournir un rayon de 30 pixels à chaque coin. Si je configure ce fichier, vous pouvez voir le résultat. Et si vous souhaitez attribuer un rayon différent à un coin différent, oui, vous le pouvez. Supposons que pour le coin supérieur gauche, je souhaite utiliser 30 pixels, et pour le coin supérieur droit, je souhaite utiliser 50 pixels, son passe 50 pixels. Et pour le coin inférieur droit, je veux utiliser dix pixels. Et pour le coin inférieur de la lèvre, je veux utiliser 20 pixels. Si je mets cette bile, vous pouvez voir le résultat. Maintenant, nous n'avons pas besoin de taper ces quatre lignes pour cela. Nous avons également un autre raccourci. Laissez-moi vous montrer comment faire. Je vais prendre cette ligne et commenter la précédente. Ici, je vais passer dix pixels, 50 pixels. Maintenant tu as peut-être un coussin. Qu'est-ce que cela signifie ? Ici, nous passons deux valeurs au total. Le premier rayon de botter s' appliquera, dans le supérieur de la lèvre et dans le coin inférieur droit Et le second appliquera coin inférieur de la lèvre et le coin supérieur droit. Si je configure ce fichier, vous pouvez voir le résultat. C'est dans la direction opposée. De plus, nous pouvons utiliser valeur en pourcentage avec un rayon de bordure. Permettez-moi de vous montrer comment certains reproduisent cette ligne et commentent la précédente. Et cette fois, je vais utiliser un rayon de bordure de 20 %. Si je configure ce fichier, vous pouvez voir le résultat. Et si vous souhaitez obtenir une surforme d'un rectangle, vous devez pour cela utiliser un rayon de bordure de 50 %. Si je configure ce fichier, vous pouvez voir le résultat. Nous pouvons obtenir une forme ovale parfaite en utilisant cette valeur. Et si vous voulez créer un cercle en utilisant le rayon de bordure pour cela, vous devez utiliser un ténoïde à hauteur égale. Si j'utilise la hauteur, 300 pixels, puis que je définis ce fichier, et que notre rayon de bordure est de 50 %, cela créera un cercle Voici donc le didacticiel détaillé sur la propriété du rayon de bordure. Voilà pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 16. Tutoriel CSS Box Shadow: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons en apprendre davantage sur le CSS, box shadow. Voyons donc ce qu'est Box Shadow et comment nous pouvons utiliser Box Shadow. Ici, vous pouvez voir un élément profond, et à l'intérieur de cet élément profond, nous avons du texte. Et si vous remarquez que vous pouvez voir, cet élément profond n' a aucune ombre. Et si nous ajoutons de l'ombre à cet élément profond, cela ressemble à ça. Ici, vous pouvez voir qu'après avoir utilisé l'ombre de la boîte, vous pouvez voir une ombre en bas et à droite, et nous pouvons créer cette ombre en utilisant la propriété box shadow. Voyons maintenant comment utiliser la propriété box shadow. Pour utiliser la propriété box shadow, le total doit utiliser cinq valeurs. Chaque valeur a son propre objectif. La première valeur représente l'horizontale opposée. À l'aide de cette valeur, vous pouvez définir la gauche et la droite. En gros, cela fonctionne dans la direction des Xs. Notre valeur suivante représente V opposé, c'est-à-dire verticalement opposé. Vous pouvez le comparer à la direction YxS. À l'aide de cette valeur, vous pouvez contrôler le haut et le bas. Notre valeur suivante est le flou. Vous pouvez contrôler le flou des ombres à l'aide de cette valeur. Si vous ne souhaitez pas utiliser l'ombre fermée, vous pouvez utiliser cette valeur. Et la quatrième valeur représente le spread. Sur quelle zone souhaitez-vous étendre votre ombre ? Vous pouvez contrôler avec cette valeur, et la cinquième et dernière valeur est colorée. À l'aide de ce Vu, vous pouvez contrôler la couleur de l'ombre. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Light Server, et je crée déjà un index de noms de documents estim point TM Et comme vous pouvez le voir, dans ce code d'estimation, nous avons une balise profonde avec une zone de nom d'identification, et maintenant je vais styliser cet élément Je vais donc sélectionner cette profondeur en utilisant son nom d'identifiant. Je vais donc utiliser quelqu'un pour utiliser has tag boobs. Ensuite, à l'intérieur de la résine de couleur, je vais d'abord l'utiliser avec la propriété Avec 300 pixels. Notre propriété suivante est la hauteur, la hauteur, 200 pixels. Sur ce, je voudrais ajouter une certaine marge. Marge, gauche, 200 pixels. Si je configure ce fichier, vous ne pouvez rien voir ici car nous n' utilisons aucune couleur de fond. Je vais donc ajouter une couleur de fond, le rouge. Si je configure ce fichier, vous pouvez voir le résultat. Et maintenant, je veux ajouter une ombre à cet élément profond. Pour cela, nous devons utiliser la propriété box shadow, box shadow, box shadow, abord, nous devons utiliser XS Valu. Je vais donc transmettre deux pixels, puis nous devons transmettre la valeur Y XS. De plus, je vais utiliser deux pixels. Pour les ombres horizontales et verticales, nous utilisons deux pixels. Et n'oubliez pas que vous pouvez également utiliser des valeurs négatives pour déplacer l'ombre. Et puis je veux utiliser la valeur du flou. Pour le flou, je vais utiliser cinq pixels. Et pour l'instant, je ne veux pas utiliser la valeur du spread. Donc, directement, je veux passer à la valeur de la couleur. Pour la couleur, je vais utiliser le noir. Si je définis ce fichier, vous pouvez voir ici le résultat V. En gros, après avoir utilisé l'ombre, cela ressemblait à un objet en trois D. Maintenant, je veux déplacer l' ombre dans la direction XXS, donc je vais augmenter la valeur XXS. Donc, ici, je vais passer à huit, huit pixels. Après avoir défini ce fichier, vous pouvez voir le résultat ici. De même, si vous voulez le déplacer vers le bas, vous devez augmenter XS V mais je décide de le déplacer vers le haut. Donc, comme je vous l'ai dit, nous pouvons utiliser une valeur négative ici. Je vais donc utiliser moins huit pixels. Je vais configurer ce fichier. Pour configurer ce fichier, maintenant vous pouvez le voir, nous déplaçons notre ombre vers le haut. C'est ainsi que nous pouvons placer notre ombre dans n'importe quelle direction. Si j'utilise la valeur moins quatre, vous pouvez maintenant voir que nous avons réussi à changer la direction de l'ombre. Et surtout, vous devez vous rappeler que la valeur du flou, la valeur couleur et la valeur de dispersion sont facultatives Si vous ne le fournissez pas, cela fonctionnera également . Laisse-moi te montrer. Si je supprime à la fois la valeur et que je sauvegarde le fichier, vous pouvez voir le résultat. Mais si vous remarquez, vous pouvez voir que cette fois, nous avons une ombre solide car nous supprimons la valeur du flou Donc, sans flou, notre ombre n' est pas si jolie. Je vais donc ajouter un peu de flou. Trois, pixel. Et je veux envoyer ce fichier. Et si vous voulez redonner de la netteté à cette ombre, il suffit de passer à zéro pixel. C'est ça. Parlons maintenant valeur de propagation et je veux l' étaler jusqu'à dix pixels. Donc ici, après la propriété du sang, après la valeur je vais lier dix pixels, et je vais redéfinir ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, notre ombre s'étend maintenant sur dix pixels. Et si j'ajoute un peu de flou, quelque chose de dix pixels floue et définit Vous pouvez maintenant voir le résultat. Étalez Vallow, étendez l' ombre dans toutes les directions. Et si tu veux changer de couleur, oui, tu peux. Supposons que vous souhaitiez utiliser la couleur bleue. Je sais que ça a l'air très dégoûtant, mais pour l'exemple, je vais l'utiliser. Et je voudrais ajouter ce fichier. C'est ainsi que fonctionne l'ombre. Vous souhaitez maintenant ajouter une autre ombre à cet élément. Oui, tu peux. Il vous suffit d'utiliser le coma et de fournir les mêmes valeurs. Cette fois, je veux une ombre de huit pixels au niveau de la diction. De plus, pour la diction YX, je vais utiliser cinq pixels. Et pour le sang, encore une fois, je vais utiliser dix pixels. Et pour la valeur du spread, je vais utiliser cinq pixels. Non, je ne vais pas utiliser la valeur du spread pour cet exemple. Donc, directement, je vais utiliser la couleur, et pour la couleur, je vais utiliser le noir. Et je vais configurer ce fichier. Pour configurer ce fichier, vous pouvez voir ici que nous avons une autre ombre. Ici, nous ajoutons une autre ombre de couleur noire. Si j'augmente la valeur, quelque chose de 15 pixels, 15 pixels et que je reconfigure ce fichier, vous pouvez maintenant voir l' ombre très clairement. Voici donc comment nous pouvons utiliser plusieurs ombres à plusieurs ductions. Ici, vous pouvez utiliser plusieurs ombres autant que vous le souhaitez. Voici donc comment vous pouvez utiliser la propriété fantôme. Pour l'instant, je vais aussi supprimer cette méthode. En gros, je vais commenter cette ligne. Parlons maintenant d'une autre valeur, qui est incrustée. Ici, vous pouvez voir cette ombre à l'extérieur de la boîte, mais maintenant je veux utiliser l'ombre à l'intérieur de la boîte. Alors, comment est-ce possible ? Oui, c'est possible si nous utilisons inset Vd. Donc, après la propriété des couleurs, je vais taper inset Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, vous pouvez voir cette ombre de l'intérieur. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons en apprendre davantage sur la propriété flottante Merci donc d'avoir regardé cette vidéo. Restez à l'affût. 17. Tutoriel CSS Float: Il est content de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons en apprendre davantage sur la propriété flottante du CSS. Il s'agit de la propriété la plus utile en CSS. En gros, sans cette propriété, nous ne pouvons pas imaginer un site Web. Comprenons donc la valeur flottante avec des images. Ici, vous pouvez voir un élément profond. Et si je crée un autre élément profond, quelque chose comme ça, il le placera en dessous de l'élément d'immersion précédent. Mais si vous remarquez, vous pouvez voir sur le côté droit qu' il y a beaucoup d'espace vide, mais par défaut, le D sera placé sous l'élément de. Nous devons donc déplacer cet élément profond, de ce côté. Je veux placer le nouveau lament, droite de l'élément précédent En gros, le premier élément DIP occupe tout le vent du navigateur. C'est pourquoi nous n' avons pas de place pour notre deuxième élément d'immersion pour le placer à côté de cet élément profond. Pour résoudre ce problème, les CSS introduisent la propriété float. En utilisant la propriété float, nous pouvons ajuster ce deuxième élément d'immersion à droite de cet élément profond précédent, et notre propriété flottante a un total de deux valeurs, gauche et droite. Pour le bleu profond, nous devons utiliser float leaf et pour le rouge profond, nous devons utiliser float right. De plus, nous avons une valeur par défaut pour float, qui est none. Donc, sans perdre votre temps, commençons la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Live Server. Et je crée déjà un document eSTIML nommé index point TML Et comme vous pouvez le voir sur cette page d'estimation, nous avons au total deux éléments profonds, un et deux. Et je stylise déjà cet élément profond. Notre premier élément profond est de 300 pixels, et notre deuxième élément profond de 200 pixels. Mais après avoir créé cet élément profond, comme vous pouvez le voir, nous avons beaucoup d'espace sur le côté droit, mais par défaut, CSS est notre deuxième élément dip en dessous de l'élément db one. Par défaut, nos éléments profonds occupent toute la largeur de cette page, et nous devons maintenant supprimer l'espace inutilisé en utilisant la propriété float. Donc, lors de notre premier élément dip, je vais utiliser float property, float LP. Après l'étape de ce fichier, comme vous pouvez le voir, vous pouvez maintenant voir notre deuxième élément profond passer en arrière-plan sur debo one element Mais si j'utilise une valeur flottante en haut à droite, si je place ce fichier, comme vous pouvez le voir, notre premier élément se déplace vers la droite et notre deuxième élément profond occupe l'espace vide. Mais je ne veux pas de cette structure. Je veux placer notre premier élément profond en première position, puis je veux déplacer notre deuxième élément profond sur le côté droit. Ici, je veux utiliser float, P, et pour le deuxième élément profond, je vais utiliser float right. Si je configure ce fichier, vous pouvez maintenant voir la résine, et si j'augmente la largeur du navigateur, vous pouvez toujours voir qu'il place nos éléments au bon endroit. Nous avons maintenant un autre problème. Si vous remarquez, vous pouvez le constater, il y a un grand espace entre ces deux éléments profonds. Je ne veux pas de place. Je veux déplacer le deuxième élément profond à côté de l'élément Deb One. Pour cela, nous devons utiliser la valeur flottante t. dans notre deuxième élément profond. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il n'y a plus d'espace entre ces deux éléments profonds. De plus, ils sont collés les uns aux autres. Et maintenant je vais vous donner un autre exemple. Je vais donc créer un autre élément profond, et cette fois, son identifiant est trois. Je vais également écrire le texte trois. Et je vais dupliquer cette section, et je vais remplacer notre identifiant deux par trois. Et je vais définir une fleur de couleur en arrière-plan. Pour l'instant, je vais supprimer la propriété float. Je n'en ai pas besoin. Et je vais le définir avec 500 pixels, et je vais définir ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, par défaut, il le place derrière les éléments DB un et deep two car il s' agit du troisième élément dB. Et si j'utilise la propriété float, float, right, et ce fichier, maintenant vous pouvez le voir le placer en dessous puis deep two parce que nous n'avons pas d'espace nup sur le côté droit pour placer cet élément profond parce qu' il fait 500 pixels Mais si nous augmentons la largeur du navigateur, que s'est-il passé ? Après avoir augmenté la largeur du navigateur, vous pouvez maintenant voir qu'il place notre élément profond, droite de cet élément profond, car nous avons maintenant suffisamment d' espace pour le placer ici. Mais si vous voulez le placer dessous de l'élément à une ou deux profondeurs, laissez-moi vous montrer comment utiliser propriété float lip, float led. Si vous utilisez Float Lap, que vous définissez ce fichier et que vous réduisez la largeur du navigateur, vous pouvez maintenant voir qu'il place parfaitement le côté inférieur de ce navigateur, car nous n' avons pas assez d'espace pour passer à l'élément. En utilisant essentiellement la propriété alimentaire, nous plaçons Dep Elements du côté droit des lèvres, et cela rend notre site Web assez réactif Voilà pour ce tutoriel. Dans le prochain didacticiel, nous allons en apprendre davantage sur la propriété du niveau. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 18. Tutoriel CSS Clear: Salut, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec une nouvelle thèse liée au tutoriel. Et dans ce didacticiel, nous allons en apprendre davantage sur la propriété claire. Voyons maintenant combien de valeurs nous avons dans clear property. Nous devons distinguer trois propriétés claires, gauche, droite et les deux. Essayons maintenant de comprendre pourquoi nous devons utiliser cette propriété. Comme vous pouvez le voir dans cet exemple, nous devons plonger les éléments côte à côte, et nous avons du texte sous les deux éléments d'immersion. Et pour cet élément à deux plongeons, nous utilisons la propriété de hauteur minimale. Et pour l'élément de pied de page, nous n'utilisons aucune valeur flottante Mais pour ces deux éléments profonds, nous utilisons des valeurs flottantes à droite et à gauche. Mais le problème est le suivant : supposons que notre élément Dp one contienne beaucoup de contenu. Dans ce cas, cet élément profond va déborder de l'élément profond Puta, et c'est le gros problème si nous utilisons une valeur flottante Mais pour résoudre ce problème, le CSS introduit une propriété claire. Pour résoudre cette propriété, nous devons utiliser la propriété de déchirure jusqu'à notre dernier élément d'immersion, et ici nous devons utiliser voiture P. Mais vous avez peut-être une question. Pourquoi devons-nous utiliser la valeur de levage ? Parce que nous avons des données de débordement dans notre élément d'immersion de laboratoire. Si nous avons des données de dépassement dans notre élément profond droit, dans ce cas, nous devons les utiliser correctement Mais quoi ? Si nous avons des données dynamiques et que nous ne savons pas quel élément profond va déborder Dans ce cas, nous utilisons Tear Both. Si nous utilisons les deux valeurs, il faut les effacer des deux côtés. Donc, sans perdre votre temps, étudions la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visu Studio et mon navigateur en utilisant l'extension p server, et je crée déjà un point d'index de nom de document TML TML Et ici, vous pouvez voir que sur cette page d'estimation, nous avons un total de trois éléments profonds, et nous disons trois identifiants pour cela, un, deux et trois Si vous remarquez, vous pouvez voir dans notre premier élément Deep un, et dans notre deuxième élément Dep deux, que nous utilisons pour la probité, gauche et droite C'est pourquoi le premier élément d'immersion est placé sur côté gauche et le second élément d'immersion sur le côté droit. Mais qu'en est-il du troisième élément d'immersion ? Ici, nous n'utilisons aucune propriété flottante. C'est pourquoi notre troisième élément d' immersion se trouve derrière un ou deux éléments d'immersion, et je ne veux pas utiliser propriété float pour le troisième élément d'immersion. Je vais donc utiliser une propriété claire pour cela. Donc, pour taper, effacez les deux. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Pour l'instant, je vais utiliser 100 % avec 100 %. Je vais configurer ce fichier. Après avoir utilisé 100 % de largeur, cela fonctionne toujours tel quel. Maintenant, encore une fois, je vais commenter cette diapositive, et je vais augmenter la profondeur jusqu'à la hauteur. Je vais taper 400 pixels. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez maintenant voir que nous sommes confrontés au même problème. Mais cette fois, je ne vais pas utiliser les deux propriétés clear both. Cette fois, je vais utiliser la droite claire car la hauteur de notre conteneur du côté droit est bien supérieure à celle du côté gauche. Donc, si je définis ce fichier, vous pouvez maintenant voir le résultat. Maintenant, cela fonctionne à nouveau parfaitement. Mais quoi ? Si j'augmente la hauteur d'un élément profond. Donc, ici, je vais passer les 600 pixels. Si je fixe une hauteur de 600 pixels puis que je définis ce fichier, vous pouvez maintenant voir le problème. Notre conteneur profond a un trop-plein et trois conteneurs profonds en hauteur Pour résoudre ce problème, nous devons utiliser la propriété lap car nous plaçons notre conteneur profond d'un côté. Donc, si je passe Lap Tear Vulate et que je place ce fichier, vous pouvez voir, encore une fois, que nous résolvons notre problème Mais si nous utilisons les deux propriétés, déchirons les deux et que nous définissons ce fichier, vous pouvez maintenant voir qu'il n'y a aucun changement. Maintenant, il s'ajuste en fonction de l'élément de trop-plein. Si notre deuxième élément div est overflow, il le placera en fonction de deep two element Voilà pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 19. Tutoriel de police CSS: Bonjour, les gars. C'est bon de te revoir. 1 seconde. Je suis de retour avec un autre tutoriel lié au CSS. Et dans ce tutoriel, nous allons en apprendre davantage sur les polices CSS. Voyons donc quel type de propriété de formulaire nous allons apprendre dans ce didacticiel. Ce sont donc toutes les propriétés de police que nous allons apprendre dans ce didacticiel. Notre première propriété est la taille de police. À l'aide de cette propriété, nous pouvons définir la taille de police. Notre prochaine propriété est la famille de polices. Grâce à cette propriété, nous pouvons définir la police que nous allons utiliser. Ensuite, nous avons le poids de police. Nous pouvons contrôler l'audace de la police à l'aide de cette propriété. Nous avons également une autre propriété nommée style de police. En utilisant la propriété de style de police, nous pouvons rendre notre police en italique. Ensuite, nous avons la variante de police et la hauteur de ligne, et nous allons en apprendre davantage dans notre tutoriel. Notre propriété de taille de police est fournie avec une valeur prédéfinie extra extra small, extra small, small, smaller, medium large, extra large, extra large, etc. Parlons maintenant de la probité de la taille de police. En termes de probité de taille de police, nous pouvons fournir une valeur dans différentes unités Nous pouvons utiliser l'unité de pixel, l'unité de pourcentage , l'unité EM, l'unité ER EM, etc. Et nous allons tout apprendre à ce sujet dans ce tutoriel. Parlons maintenant d' une autre propriété qui est la famille de polices. À l'aide de la propriété de famille de polices, vous pouvez définir la police que vous allez utiliser, et vous pouvez utiliser plusieurs familles de polices à la fois. Supposons que vous utilisiez les familles de polices Arial, Heldica et Vardana au cas où Areal ne serait pas disponible dans cas où Areal ne serait pas disponible Dans ce cas, il utilisera Heltica. Et si les deux polices Arial et Heltica ne sont pas disponibles dans votre système, alors le Verdana sera intégré Ainsi, dans notre famille de polices, nous pouvons transmettre une valeur, sinon nous pouvons transmettre plusieurs valeurs. Et n'oubliez pas que si l'une des familles de polices n'est pas disponible dans votre système, dans ce cas, elle utilisera la police par défaut, police par défaut de votre navigateur. Parlons maintenant une autre propriété qui est la hauteur de ligne. Comme vous pouvez le voir dans ce paragraphe, nous avons plusieurs lignes. Mais si nous utilisons la propriété de hauteur de ligne, cela fournira de l'espace entre les lignes, quelque chose comme ça. Nous pouvons contrôler l'espace entre les lignes en utilisant la propriété de hauteur de ligne. Donc, sans perdre beaucoup de temps, commençons par l'aspect pratique et voyons comment nous pouvons utiliser ces propriétés. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension de serveur Lip, et je crée déjà un document ETML, nommé index point TML Vous pouvez voir que dans notre balise body, nous avons une balise de titre, et nous avons également une balise profonde, et à l'intérieur de cette balise profonde, nous avons un gros paragraphe. Et maintenant, je vais styliser cette boîte en utilisant son nom de classe. Donc, à l'intérieur de l'étiquette principale, je vais utiliser une balise de style. Style. À l'intérieur de cette balise de vignette , je vais d' abord sélectionner cet élément profond à l'aide sa zone à points de type ID Ensuite, à l'intérieur de la voiture résiste, notre première propriété est avec. Tout d'abord, je vais attribuer un ensemble de 400 pixels à ce conteneur. Ensuite, je vais attribuer le rembourrage. Rembourrage de 25 pixels. Notre propriété suivante est border, border, et je veux une bordure de deux pixels. Avec ça, je veux une bordure solide. Et la couleur de notre bordure est y. Et je veux définir ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat ici. Première propriété que je vais utiliser, qui est la taille de police, et je vais prendre la taille de police, 15 pixels. Si je place ce fichier, vous pouvez voir le résultat ici. Cela réduit la taille de notre police. Et si vous voulez le réduire davantage, vous devez réduire la valeur. Supposons que je tape huit pixels. Et définissez ce fichier. Vous pouvez maintenant voir police de nos paragraphes est très petite et qu'il est très difficile de lire ce texte. Je décide donc d' augmenter la taille de la police. Je vais faire 20 pixels. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Nous utilisons donc ici une valeur statique. Maintenant, je vais vous montrer un autre exemple où nous allons utiliser la valeur dynamique. Pour cela, je vais réduire une ligne de ce paragraphe. Et je vais dupliquer cette section. Et ici, je vais utiliser une autre classe, qui est la case 2, et je vais définir ce fichier. Avec cela, nous devons également styliser la boîte à deux sections. Je vais donc dupliquer cette section et la deuxième case d'hémotype. Mais cette fois, j'avais utilisé une taille de police de dix pixels. Si je définis le fichier, vous pouvez voir la différence entre la taille de police. Mais comme je vous l'ai dit, nous allons utiliser le zéro dynamique. Donc pour l'instant, je vais commenter les deux lignes et ici je vais styliser le body tag. Je vais donc taper body, puis à l'intérieur de la voiture ss, je vais utiliser la propriété de taille de police. Taille de police 30 pixels. Si je définis ce fichier, vous pouvez maintenant le voir atteindre 30 pixels sur les polices, ce qui se trouve à l'intérieur de la balise body. Maintenant, vous avez peut-être un quotien. Encore une fois, j'utilise une valeur statique, mais je vous promets que nous allons utiliser une valeur dynamique. En gros, nous allons utiliser une valeur en pourcentage. Maintenant, je vais utiliser la valeur en pourcentage, donc je vais utiliser la taille de police et je vais passer les 25 %. C'est ce qu'on appelle la valeur relative. Si j'ai configuré ce fichier, vous pouvez maintenant voir la différence. Pour utiliser une valeur dynamique, sinon, pourcentage est une valeur, nous devrions le comparer à la balise parent. Et comme vous pouvez le constater, nos boîtes 1 et 2 concernent l'élément profond situé à l'intérieur de l'étiquette corporelle. Nous utilisons donc ici une taille de police body tag de 30 pixels. Ainsi, lorsque nous utilisons 25 % de 30 pixels, taille de la police est de 7,5 pixels. Et si nous augmentons la valeur, supposons 50 pixels, puis définissons le fichier. Maintenant, vous pouvez voir que la taille de notre téléphone est de 15 pixels. Et si nous utilisons 100 % puis que nous définissons le fichier, vous pouvez maintenant voir que les deux tailles de téléphone sont en vente. Maintenant, la taille de notre téléphone est 30 pixels parce que chez notre parent, nous utilisons 30 pixels. La prochaine unité que nous allons utiliser pour notre quatrième taille, c'est l'EM. Laisse-moi te montrer. Taille de police, et je vais utiliser une EN. Cette unité fonctionne également en fonction de la valeur parent. Et comme vous pouvez le constater, notre valeur parent est de 30 pixels. Si nous utilisons 1 h 00 du matin et que nous définissons ensuite ce fichier, comme vous pouvez le voir, il n'y a pas de différence dans leur taille de police Mais si nous arrivons à 2 h du matin et que nous configurons le fichier, vous pouvez maintenant voir que la taille de police de notre deuxième élément de plongée est deux fois supérieure à celle de notre premier élément de plongée Comme vous pouvez le voir dans notre balise parent, nous utilisons ici 30 pixels. Donc, une étoile M pour 30 pixels, et si nous en faisons deux, en gros, cela double la valeur. Et comme je vous l'ai dit, EM fonctionnera également en fonction de la valeur du conteneur parent. De même, si vous voulez réduire la taille de la police, il suffit de passer en dessous de la valeur v. Supposons que je passe à 0,5 heure du matin, puis que je passe au fichier, et vous pouvez voir le résultat ici. Maintenant, il est écrit 15 pixels. C'est ainsi que ce type de valeur fonctionne ensemble. Sans cela, nous avons une autre unité ERM et de nombreuses taupes. Nous allons donc en apprendre davantage à ce sujet dans nos prochains tutoriels. Pour l'instant, je vais parler d' une autre propriété qui est la hauteur de ligne. Je vais donc commenter les deux lignes. Et je vais configurer ce fichier. De plus, je vais modifier la taille de police par défaut pour la balise body Et dans notre première case, je vais utiliser la hauteur de ligne, propriété, hauteur de ligne, hauteur de ligne. Ici, je vais utiliser 15 pixels. Si je définis ce fichier, nous réduisons essentiellement la hauteur de la ligne de notre premier élément. Si je le réduis davantage, cinq pixels, puis que je définis ce fichier, vous pouvez maintenant voir nos lignes se chevaucher. Et de la même manière, si vous voulez augmenter l'écart entre les lignes, supposons que je passe à 50 pixels et que je définisse ce fichier, vous pouvez maintenant voir la différence. Nous augmentons maintenant l'espace entre ces lignes. Non seulement cela, nous pouvons également utiliser une unité EM. Laisse-moi te montrer. Supposons qu'un EM soit l'unité par défaut. Un EM est la taille par défaut. Si je définis ce fichier, comme vous pouvez le voir, C, il n'y a aucune différence. Et si je veux augmenter l'écart entre ces deux lignes par rapport à l'écart existant, je veux deux intervalles de temps. Pour cela, nous devons transmettre deux valeurs EM. Si je configure ce fichier, vous pouvez voir le résultat. En gros, ce tutoriel concerne les polices, pas les unités, et j'ai déjà créé une autre section différente pour les unités. Alors ne t'inquiète pas pour ça. Parlons maintenant de notre autre propriété, qui est le poids de police. Nous pouvons contrôler l'épaisseur et l'audace de la police à l'aide de cette propriété Je vais donc taper font Wait, font to eight, et nous pouvons utiliser un ve prédéfini. Nous avons des produits audacieux, plus audacieux, plus légers. Supposons que j'utilise le gras, puis que je définisse ce fichier Après avoir défini ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, cela augmente notre police de caractères. Je sais que ma police est rarement visible, je vais donc augmenter la taille de la police. Taille de police 18 pixels. Et je vais configurer ce fichier. Vous pouvez maintenant voir que notre police est très audacieuse. Les propriétés Font to eight sont associées à une valeur prédéfinie. Nous avons la valeur 100-900. Si nous utilisons 100 puis que nous définissons ce fichier, vous verrez que nos polices paraîtront beaucoup plus fines. De même, si nous utilisons 900, c'est le point le plus élevé et que nous définissons ce fichier, maintenant vous pouvez voir, encore une fois, que cela rend notre police plus audacieuse Utilisons maintenant une autre propriété, qui est la famille de polices. Famille de polices, et je vais utiliser la police ARL. ARIEL. Pour l'instant, je vais utiliser une seule police aérienne, et je vais définir ce fichier. Après l'étape de ce fichier, vous pouvez maintenant voir le résultat. Ici, nous utilisons la police 8900, rend notre police Aerial plus audacieuse Mais si j'utilise 100 de temps en temps et que je configure ce fichier, vous pouvez voir que nos polices paraissent beaucoup plus fines que la version précédente. Et maintenant, vous pouvez augmenter le poids de la police une par une. Si nous utilisons 700 et qu'il s'agit de ce fichier, vous pouvez maintenant le voir rendre notre police plus audacieuse à nouveau. Pour l'instant, je vais faire en sorte que la police soit normale à huit. Et je veux configurer ce fichier. La propriété suivante que je vais utiliser est le style de police. style BDFaultFont comporte trois valeurs, italique normal et oblique Si vous voulez mettre votre police en italique et sans utiliser le tag I pour cela, optez pour tie fonttyle Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, cela rend notre police en italique. Et la valeur suivante que nous avons, qui est oblique, est essentiellement italique et oblique, semble très similaire Ils ont juste une petite différence entre eux. Laisse-moi te dire la différence. Supposons que nous utilisions une police aérienne et que cette police al soit livrée avec une variante en italique Mais quelle que soit la police, il n'y a pas de version italique, dans ce cas, nous devons utiliser une valeur obligu Cette valeur oblique met cette police en italique. Parlons maintenant de la propriété suivante, qui est une variante de police, une variante de police de type. Et notre propriété de variante de police Cai totalise deux valeurs, normales et petites majuscules Si nous utilisons des petites majuscules puis que nous définissons ce fichier, vous pouvez voir le résultat. En gros, tous les caractères sont écrits en majuscules. De plus, si vous remarquez qu' après le point, le deuxième caractère est légèrement plus grand. De plus, vous pouvez utiliser un raccourci pour toutes ces propriétés. Laissez-moi vous montrer comment faire. Donc, dans notre deuxième élément div, je vais utiliser une police de nom de propriété. Au début, nous devons fournir une valeur de style de police, et je vais utiliser Obliq Ensuite, nous devons fournir une variante de police, et je vais utiliser des petites majuscules. Et troisièmement, nous devons fournir un poids de police, et je vais utiliser une police normale. Ensuite, nous devons fournir la hauteur de la ligne. Et ici, je vais fournir deux E. Et aussi, nous devons fournir des signes de police. Je vais donc utiliser Slash, et je vais passer à 18 pixels Ensuite, nous devons transmettre la famille de polices. Ici, vous pouvez transmettre plusieurs noms de police à la fois. Vous pouvez également utiliser un quatrième nom. Pour l'instant, je vais utiliser la police AL. Aérien. Si j'ai configuré ce fichier, vous pouvez maintenant voir le reste. Désolé, cette valeur représente la taille de police et elle teste la hauteur de ligne. Donc, la taille de police, je vais en utiliser une fera l'affaire. Et pour la hauteur de ligne, je vais utiliser deux EM. Et si je configure ce fichier, vous pouvez voir le résultat. abord, nous devons fournir la taille de police, puis vous devez fournir la hauteur de ligne, et vous devez vous souvenir cet ordre pour l' utiliser dans une seule ligne. Ce sont donc les propriétés les plus importantes de la police. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons en apprendre davantage sur le CSS, formatage de texte, la décoration de texte et bien d'autres choses encore. Merci donc d' avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 20. Propriétés de formatage de texte CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec le nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons apprendre CSS de base lié aux propriétés de texte. Ce sont donc toutes des propriétés liées au texte en CSS. Alignement du texte, alignement du texte en dernier, transformation du texte, retrait du texte, espacement des mots, espacement des lettres Et nous allons tout apprendre à ce sujet dans ce tutoriel. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension de serveur Lip, et je crée déjà un document eSTIML nommé index point TML Et dans ce document eStiml, nous avons un Deep et à l'intérieur de cet élément Deep, nous avons un paragraphe Et comme vous pouvez le constater, nous attribuons ici une zone de nom d'identification, et nous personnalisons cette zone. Il est rembourré, bordé et peut être utilisé comme antenne familiale Dans un premier temps, je vais utiliser une propriété nommée text align text Align. L'alignement du texte du paragraphe BitifulO est à gauche. Mais si j'utilise right, puis que je définis ce fichier, vous pouvez maintenant voir le résultat. Maintenant, le texte de notre paragraphe est aligné sur le côté droit. De plus, nous avons une autre valeur pour cette propriété, qui est le centre. Et je vais sous-traiter ce fichier. Maintenant, notre paragraphe est aligné à partir du centre. Avec cela, nous avons une autre valeur, celle de la justification. Donc, si j'utilise justify puis que je définis ce fichier, vous pouvez maintenant voir le résultat. Maintenant, vous pouvez voir des deux côtés, nous avons le même espace. Maintenant, notre texte s'aligne du côté droit de la lèvre. Voici donc notre justification du travail d' alignement avec le texte. Et n'oubliez pas que la valeur par défaut d'alignement du texte est en retard. Parlons maintenant une autre propriété qui est l'alignement du texte en dernier. Donc ici, je vais taper le texte aligné en dernier. Cette propriété d'alignement du texte est utilisée pour notre dernière ligne. Vous pouvez contrôler pourquoi vous voulez aligner votre dernière ligne. Supposons que vous vouliez l' aligner à droite, à droite, puis définir ce fichier, vous pouvez maintenant voir le résultat. En gros, il cible la dernière ligne et s'aligne sur le côté droit. Et si je le place au centre et dense, c'est bien, et si je le place au centre de ce fichier, vous pouvez voir le résultat Nous avons également une autre valeur pour cette propriété. Nous avons mis en vedette une valeur. Nous avons également une valeur de luxure. Si j'utilise la valeur en étoiles, c'est comme un lift align. Et si vous utilisez Lust Value, alors quoi comme write align Parlons maintenant notre propriété suivante qui est la transformation du texte, certains types de texte, la transformation. Et la première valeur que je vais utiliser, qui est en majuscules. Si je le mets en majuscules et que je comprime ce fichier, vous pouvez maintenant le voir convertir tous les caractères en majuscules Elles sont désormais toutes en majuscules. Dans le cas contraire, nous avons une autre valeur appelée minuscule. Réinitialisez ce fichier, comme vous pouvez le voir, il convertit tous les caractères en minuscules La prochaine valeur que je vais utiliser, c'est capitaliser. Si j'utilise cette valeur et que je définis ce fichier, vous pouvez maintenant le voir convertir tous les premiers caractères d'un mot majuscule. Tous les mots que vous pouvez voir dans ce paragraphe commencent par une majuscule plus tard. De plus, nous avons une autre propriété qui n'en est aucune. Il s'agit du travail comme valeur par défaut. Donc pour l'instant, je vais utiliser des majuscules. Et je vais régler ça très bien. La propriété suivante que je vais utiliser est le retrait de texte Je vais donc taper un retrait de texte. Cette propriété fonctionne particulièrement en première ligne. Grâce à cette propriété, vous pouvez déplacer la première ligne. Supposons que vous ne vouliez pas commencer votre première ligne à partir de cette position. Vous voulez le démarrer jusqu'à 100 pixels. Vous pouvez donc passer à 100 pixels. Et si je configure ce fichier, vous pouvez voir le résultat. Maintenant, notre première ligne fournit une marge de 100 pixels à t. Pour clarifier ce sujet, pour le moment, je vais commenter cette ligne. Et si je le reconfigure, maintenant vous comprendrez mieux comment cela fonctionne. La propriété suivante que je vais utiliser est l'espacement des mots, le type de son, l'espacement des mots Grâce à cette propriété, nous pouvons créer un espace entre les mots. Supposons que j'ajoute un espace de 30 pixels entre nos mots. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, comme vous pouvez le voir, l'écart entre les mots est de 30 pixels. Si vous souhaitez l'augmenter, il suffit de passer une valeur plus importante et depuis ce fichier, vous pouvez voir le résultat. Pour l'instant, je vais commenter cette ligne. Ensuite, je vais utiliser une autre propriété, à l'espacement des lettres Espacement des lettres, je veux 20 pixels. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat différent. En utilisant la propriété d'espacement de Watts, nous pouvons créer un espace entre deux mots Mais en utilisant la propriété d'espacement des lettres, nous pouvons créer un espace entre les lettres C'est pourquoi vous pouvez voir l' écart entre ces lettres. Pour l'instant, je vais utiliser cinq pixels car 20 pixels sont utilisés en chiffres pour les lettres. Et je vais configurer ce fichier. Voici donc les propriétés de formatage de texte les plus utiles en CSS. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons parler de la propriété CSS takes decoration. Merci donc d' avoir regardé cette vidéo. Restez à l'affût. 21. Tutoriel de décoration de texte CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec une nouvelle thèse liée au tutoriel. Et dans ce tutoriel, nous allons apprendre à prendre des propriétés de décoration. Ici, vous pouvez voir, nous avons un total de trois prises de propriété de décoration, ligne de décoration, couleur de décoration, de style de décoration. Si vous utilisez la propriété de la ligne de décoration fiscale, vous avez quatre valeurs soulignées, au-dessus de la ligne et aucune. Et ce sont toutes des valeurs de propriété de style de décoration, pointillés solides, à double vague, et aussi des prises de propriété de décoration sont abrégées Vous n'avez pas besoin de taper ces trois lignes pour la propriété et le VDO Vous pouvez utiliser ce raccourci. Prend une décoration inférieure à la valeur nominale WV. abord, vous devez utiliser Taste DegreonPProperty, puis vous devez transmettre la valeur de la ligne de décoration Takes , qui Et ensuite, vous devez transmettre la valeur de couleur take degreon. Et enfin, vous devez réussir à prendre de la valeur du style de décoration. Donc, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons utiliser ces propriétés. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur Visual Studio et mon navigateur à l'aide de l'extension de serveur Lip, et j'ouvre mon précédent document d' estimation Utilisons donc tax DecorOnPProperty. Mais d'abord, je vais utiliser cette propriété dans notre balise d'en-tête. Ici, je vais sélectionner la balise d'en-tête, H 1, puis la liste. Je vais taper et intégrer la décoration. Taxes la ligne de décoration, et je vais utiliser le soulignement de la propriété. Soulignez la valeur. Si je place ce fichier, vous pouvez voir le résultat ici. Comme vous pouvez le voir, il y avait un soulignement dans notre balise d' en-tête. Et si vous ne souhaitez pas utiliser le soulignement, il vous suffit de saisir une autre valeur. Ligne ovale et définissez ce fichier. Vous pouvez voir le résultat. Vous pouvez utiliser la ligne de décoration Tex dans n'importe quel texte. Il peut s'agir d'un paragraphe, d'une balise d' en-tête , d'une balise UL, etc. Maintenant, permettez-moi de vous montrer une autre annonce sur la ligne de décoration de texte, qui est une ligne traversante. Si j'utilise cette valeur puis que je définis ce fichier, comme vous pouvez le voir, cela fonctionne comme une balise de grève dans notre tableau. Il y avait une ligne au milieu de ce texte. Pour l'instant, je vais utiliser la valeur soulignée. Souligner. Prend de la couleur de décoration, prend de la couleur de décoration. Prend la couleur de la décoration, je vais utiliser la couleur rouge. Si je configure ce fichier, vous pouvez voir le résultat. Et notre dernière propriété est d' adopter le style de décoration. Je vais donc taper le texte, la décoration, le style. Si j'utilise Dash puis que je définis ce fichier, vous pouvez voir le résultat. Tout comme la bordure DST, elle souligne ce texte De même, vous pouvez utiliser d'autres valeurs. Si vous souhaitez utiliser Dotate, vous pouvez voir le résultat. Vous pouvez également utiliser le film Dowel. Vous allez ajouter un double soulignement, lors de ce test, et nous avons une autre valeur, qui est la vague. Si j'utilise cette vue puis définis ce fichier, comme vous pouvez le voir, notre soulignement suit maintenant le style du motif, et maintenant je vais vous montrer le short et comment utiliser la propriété Shorten. Le type Hemo prend donc de la décoration. Pour la décoration, nous devons d'abord transmettre la valeur de la ligne, qui est soulignée, puis nous devons transmettre la valeur de couleur, qui est le rouge. Ensuite, nous devons passer le style de décoration Velo, ce qui est une bonne solution. Et si je commente cette ligne et que je configure ce fichier, vous pouvez voir le même résultat. Je préfère toujours la sténographie sans utiliser plusieurs lignes. C'est donc tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons découvrir les propriétés d' encapsulation et de rupture. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 22. Tutoriel CSS Word Wrap et Word Break: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Dans ce didacticiel, nous allons apprendre deux nouvelles propriétés, Word Wrap et Word Break. Voyons pourquoi nous devons utiliser la propriété WordAP. Comme vous pouvez le voir dans cet exemple, nous avons un conteneur profond et nous avons également un mot incassable Comme vous pouvez le constater, le mot est très long. Donc, si vous utilisez ce genre de gros mot et que vous dites déjà Dev weed, alors dans ce cas, il va déborder vers ce conteneur Pour résoudre ce problème, CSS ont introduit WordAP et cette propriété Wadrap comporte deux valeurs, break word Si nous utilisons un mot clé et un fichier epi, vous allez décomposer le mot en fonction de sa taille profonde Maintenant, parlons de notre autre propriété qui est Art Break. Cette propriété artbrek a une valeur totale de deux, cassez tout et conservez tout Conserver toutes les valeurs est la valeur par défaut. Nous devons utiliser break all value. Permettez-moi de vous montrer un exemple. Comme vous pouvez le voir, nous avons un élément de base et à l'intérieur de cet élément de développement, vous pouvez voir un paragraphe Dans ce paragraphe, nous avons beaucoup de mots. Si nous utilisons quelle valeur de rupture et de rupture, notre mot sera divisé en caractères. En gros, ça va casser tous les mots. Si nous n'utilisons pas la propriété break, notre mot hindi commence à la ligne suivante. J'espère que vous savez maintenant comment nous pouvons utiliser ce qui brise la propriété. Sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser de manière pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Live Server, et je crée déjà un document d'estimation nommé index point HTML. Dans cette page d'estimation, comme vous pouvez le voir, nous avons un élément profond avec un identifiant, une boîte. Nous avons également une balise d'en-tête. Dans un premier temps, je vais styliser cette boîte en D. Il doit taper avec une étiquette, et notre identifiant profond est box. Ensuite, à l'intérieur de la liste, première propriété que je vais utiliser avec W 400 pixels. De plus, je vais utiliser une bordure, et je veux une bordure d'un pixel. Avec cela, je veux une bordure solide et notre couleur de bordure est le rouge. Je vais configurer ce fichier. Faisons en deux pixels. Elle est désormais plus visible. Maintenant, je vais ajouter Word, qui prendra plus de 400 pixels de largeur. Laisse-moi te montrer. Je vais augmenter Lorem O R E M. Si je configure ce fichier, vous pouvez voir le problème Maintenant, notre parole déborde de cet élément profond. Maintenant, nous devons décomposer le mot en fonction de la taille profonde. Pour cela, nous devons utiliser une propriété et la propriété appelée Wordrap Ici, je vais taper word rap et nous devons utiliser une valeur appelée breakword Si j'utilise cette valeur puis que je sous-traite ce fichier, vous pouvez voir le résultat. Maintenant, il divise le mot en fonction de la largeur profonde. Si je zoome un peu cette page, elle est maintenant plus claire pour vous. C'est l'utilisation de la propriété Wadrap, et elle est fournie avec une autre valeur qui est normale et c'est la volonté par défaut Je ne vais donc pas utiliser ce point de vue. En gros, Wadap avait l'habitude de couper les mots longs, mais maintenant je vais augmenter un peu la longueur de ces mots Je vais taper un D après cela et je vais glisser ce fichier. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat différent. Cela n'a pas trahi le message. En gros, il le déplace vers la ligne suivante. Comme je vous l'ai dit, le Wadrap n'est utilisé que pour casser de longs mots, pas pour les orbes de taille moyenne Pour résoudre ce problème, nous devons utiliser une autre propriété qui est Word break. Je vais commenter cette ligne dans la ligne suivante, je vais utiliser Word break. Propriété Word Break, nous devons utiliser Break all value. Si nous définissons ce fichier, vous pouvez voir le résultat. Il brise avec succès le mot long et le petit mot. Il s'agit de l'utilisation des deux propriétés. C'est tout pour ce tutoriel. Merci d'avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 23. Tutoriel CSS de l'ombre de texte: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec une nouvelle thèse liée au tutoriel. Dans ce didacticiel, nous allons découvrir une nouvelle propriété, l'ombre du texte. Voyons maintenant ce qu' est l'ombre du texte. Voici un mot appelé hello word et il n'a pas d'ombre. Mais si j'utilise l'ombre pour ce mot, maintenant ça ressemble à ça. Vous pouvez maintenant voir une ombre derrière tous les personnages et pour créer cette ombre de prise, nous devons utiliser la propriété shadow. Comme vous pouvez le voir, nous passons d'abord deux pixels, deux pixels, cinq pixels et l'orange. Notre première valeur, deux pixels, représente H shadow. L'ombre H représente l'ombre horizontale. Et notre valeur suivante représente l'ombre verticale, l'ombre V, et notre troisième valeur représente le rayon de flou Les ombres horizontales fonctionnent dans les directions gauche et droite, et les ombres verticales fonctionnent dans les directions supérieure et inférieure. À l'aide de la valeur de flou, vous pouvez contrôler la netteté de cette ombre et notre dernière valeur représente la couleur Ici, vous pouvez utiliser le nom de la couleur, la valeur hexadécimale, la valeur argv, etc. Essayons maintenant de comprendre les ombres horizontales et verticales à l' aide de l'interface graphique. Ici, vous pouvez voir que nous avons X xs et la direction YxS. XxStnds pour l'ombre horizontale et YxStnds pour l'ombre et YxStnds Si vous souhaitez déplacer votre ombre horizontalement sur le côté droit, vous devez transmettre la valeur 1234 et si vous voulez la déplacer sur le côté gauche, vous devez transmettre la valeur moins 1234. De la même manière, les ombres verticales fonctionnent. Si vous déplacez votre ombre vers le bas, vous devez transmettre une, deux, trois ou quatre valeurs Si vous souhaitez déplacer votre ombre vers le haut, vous devez utiliser la valeur moins un moins deux moins trois moins quatre. J'espère que vous savez maintenant ce qu'est ombre H et ce qu'est l'ombre V. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server et je crée déjà un index de nom de document eSTIML (point d'index HTML Et comme vous pouvez le voir, dans notre body tag, nous avons un tag header. Dans un premier temps, je vais styliser cette balise de titre. Je vais sélectionner cette balise d'en-tête en utilisant son nom de balise H one. Ensuite, dans la propriété cliRasf, je vais utiliser du noir coloré Deuxième propriété que je vais utiliser, qui est text shadow, text, shadow. Tout d'abord, je vais fournir la valeur horizontale horizontale en pixels. Ensuite, nous devons fournir la valeur de l'axe vertical en pixels. Si vous remarquez que vous pouvez la voir utiliser une valeur horizontale positive, cela déplacera notre ombre du côté droit et utilisera également une valeur verticale positive. Cela signifie que l'ombre va être déplacée vers le bas. Ensuite, nous devons transmettre la valeur du flou. Pour la valeur du flou, je vais passer cinq pixels et nous devons transmettre la couleur Pour la couleur, je vais utiliser le vert. Si je configure ce fichier, vous pouvez voir le résultat. Si je supprime la valeur du flou puis que je définis ce fichier, vous pouvez maintenant voir notre ombre paraître très nette et si je veux la déplacer sur le côté des lèvres, je vais donc passer valeur moins moins deux pixels dans le sens horizontal Si je définis ce fichier, vous pouvez voir le résultat et si vous souhaitez le déplacer vers le haut, vous devez utiliser une valeur verticale négative. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, encore une fois, je vais utiliser une valeur de flou, mais cette fois, je vais utiliser une valeur de flou de deux pixels Après avoir défini ce fichier, vous pouvez le voir à deux pixels de sang par rapport à cette ombre Et si vous supprimez la couleur puis que vous définissez ce fichier, par défaut, il ajoutera de la couleur noire en tant qu'ombre. C'est ainsi que nous pouvons utiliser la propriété take shadow. C'est l'une des propriétés les plus utiles du CSS. C'est tout pour ce tutoriel. Merci d'avoir regardé cette statue vidéo. 24. Tutoriel CSS sur l'espace blanc: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons en apprendre davantage sur la propriété des espaces blancs du CSS. Cette propriété était livrée avec un total de cinq valeurs, normale, pas d'AP, par ligne, par dap Normal est la valeur par défaut. Je vais maintenant vous expliquer ce qu' est un espace blanc et pourquoi nous devons utiliser cette propriété. Comme vous pouvez le voir dans cet exemple, nous avons un élément profond et à l'intérieur de cet élément profond, nous avons un paragraphe factice Si vous remarquez que vous pouvez voir ici que nous avons corrigé ce conteneur, 200 pixels, alors j' utilise la valeur par défaut, espace blanc, normal. Comme je vous l'ai dit, normal est la valeur par défaut, donc c'est le travail tel quel. Mais si vous utilisez un espace blanc , augmentez la valeur, vous pouvez voir la différence. Vous pouvez maintenant voir le paragraphe entier sur une seule ligne. Vous pouvez voir que notre contenu déborde depuis ce conteneur, et si vous souhaitez masquer le contenu excédentaire, oui, vous devez utiliser le overflow , vous devez utiliser le overflow Parfois, nous avons besoin d' afficher en une seule ligne. C'est pourquoi nous devons utiliser Nodev VD. Cette propriété a une autre valeur, qui est pre tag dans notre Atmel Si vous savez comment fonctionne le pré-tag dans Atmel, vous pouvez comprendre Ici, vous pouvez fournir l'espace Asma que vous souhaitez. Vous pouvez fournir beaucoup d'espace blanc dans votre texte et c'est également similaire à la valeur nob Permettez-moi d'expliquer le sujet avec un exemple. Comme vous pouvez le voir, nous utilisons ici le pré-tag. Dans cet élément profond, nous avons un total de trois lignes, mais nous n'utilisons aucune balise de rupture pour rompre la ligne. Mais si vous remarquez le résultat, vous pouvez le voir ici imprimé tel quel dans notre structure TMA Il imprime les deux lignes séparément. Supposons que si je fournis un espace entre Dlo et set, vous pouvez voir l'exemple ici Il fournit également l'espace dans notre section de sortie à l'intérieur de ce développement. C'est l'utilisation de la pré-vague. Par défaut, la balise TML ne prend pas cet espace, mais le héros utilise la prévaleur C'est pourquoi il prend cet espace. Il fournit le même espace que nous fournissons dans notre structure eSTIML Parlons maintenant d'une autre valeur qui est preline. C'est assez similaire à la prévaleur, mais cela ne prend pas plus d'un espace. Il ne compte que le seul espace. C'est la différence entre la préligne et la prévaleur. Et si je parle de notre valeur suivante, qui est pré Ap, elle fonctionne aussi comme pre tag. Il prend les espaces blancs tels quels, entrez le tag tel quel, mais aucun AP ne fonctionne dessus. Vous ne pouvez pas tout afficher sur une seule ligne ici. Sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Result Studio et mon navigateur en utilisant l'extension Live Server et je crée déjà un document TML nommé index point DM Comme d'habitude, sur cette page d' estimation, nous avons une balise profonde avec une zone de nom d'identification, et nous personnalisons cette balise dip. Ici, nous avons dit 300 pixels fixés dessus et avons défini une bordure en pixel noir uni. Dans un premier temps, je vais zoomer un peu cette page pour que vous puissiez la voir clairement. Au début, je vais en faire une seule doublure, donc je ne vais pas utiliser de Rb Val Je vais taper un espace blanc, pas de RAD. Si je place ce fichier, vous pouvez voir le résultat ici. Maintenant, cela fait de notre paragraphe une doublure. Comme vous pouvez le voir, barre de défilement horizontale en bas. je divise le paragraphe de notre étiquette d'estimation en utilisant Enter, vous pouvez toujours le voir imprimer notre paragraphe sur une seule ligne. De plus, si je fournis plusieurs espaces puis que je définis le fichier, vous pouvez toujours voir le même résultat. Si vous souhaitez masquer ces données de débordement, vous pouvez utiliser la propriété cachée de débordement Débordement masqué. Et définissez ce fichier. Pour l'instant, je ne le veux pas, donc je vais utiliser, donc je vais commenter cette ligne et cette fois je vais vous montrer que vous l'emportez. Espace blanc, pré. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Vous pouvez maintenant voir l' espace blanc devant ce monde. Si je laisse plus d' espace blanc et que je place ce fichier, vous pouvez toujours voir le résultat. Vous pouvez également remarquer que vous pouvez voir d'ici que nous brisons notre ligne de démarcation. Si je coupe à nouveau cette ligne puis que je définis ce fichier, vous pouvez toujours voir le résultat. Support de pré-valeur NoDAP. C'est pourquoi notre contenu peut déborder de ce conteneur. Il prend également en charge les espaces blancs. Non seulement cela, il supporte également les sauts de ligne. Si vous remarquez, vous pouvez voir notre dernière ligne déborder de ce conteneur car il n'y a pas assez d'espace pour cette ligne dans ce conteneur C'est pourquoi il déborde et imprime tout le contenu sur une seule ligne Parlons maintenant d'une autre valeur qui est pre line. Si nous utilisons pre line, puis que nous définissons ce fichier, vous pouvez voir ici la différence. Je ne soutiens pas le rap, mais il soutient la nouvelle ligne. Si je divise cette ligne puis que je définis ce fichier, vous pouvez voir le résultat ici. Si nous utilisons une valeur de préligne, vous n'imprimez pas notre paragraphe sur une seule ligne Parlons maintenant de la dernière valeur, qui est le pré-rap, un certain type, le pré-rap. Je vais sous-traiter ce fichier. Après avoir sous-traité ce fichier, vous pouvez maintenant voir le résultat. Le pré-rap ne prend pas non plus en charge le non-RAP, mais il prend en charge les espaces blancs et les sauts de ligne. C'est la différence entre toutes ces valeurs, et elles sont également accompagnées d'une autre valeur appelée normal et c' est la valeur par défaut, donc je ne vais pas l'utiliser ici. C'est tout pour ce tutoriel. Dans le prochain tutoriel, nous allons en apprendre davantage sur le débordement de texte Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 25. Tutoriel de débordement de texte CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel sur les SSIS et dans ce tutoriel, nous allons en apprendre davantage sur un nouveau CSIS lié à une propriété et le nom de notre propriété est overflow Ce sont les valeurs associées à la propriété CSS text overflow Clip clip est la valeur par défaut, les points de suspension et la chaîne. Voyons maintenant pourquoi nous devons utiliser la propriété text overflow. Dans le didacticiel précédent, nous allons découvrir NoAP. Nous savons que si nous utilisons des espaces blancs avec des valeurs norab, sans RAP, notre paragraphe entier sera réduit en une seule ligne et il débordera notre paragraphe entier sera réduit en de Si nous utilisons la propriété cachée Overflow, elle masque le texte. Mais maintenant, je tiens à dire à notre utilisateur ce texte n'est pas terminé. Je veux lui montrer des points triples, sinon, ETC, etc. Si nous utilisons une propriété directement masquée, comme vous pouvez le constater, cela peut parfois couper notre texte et résoudre ce problème ne semble pas si professionnel que cela Vous pouvez utiliser la propriété de débordement de texte Si nous utilisons des ellipses de valeurs par dépassement de texte, nous ajouterons un point triple après cette phrase, et une autre chaîne de valeurs sera ajoutée Ici, nous pouvons spécifier la chaîne exacte que je veux imprimer. Supposons qu'à l'intérieur des carrés nous passons un double point, vous allez imprimer la même chaîne qu'après cette ligne. Commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server et je crée déjà un document TML nommé index point HTML Et comme vous pouvez le voir à l'intérieur de la balise body, nous avons une balise profonde dans laquelle nous définissons une case d'identification, et nous personnalisons également notre identifiant. Ici, nous parlons d'une largeur de 300 pixels bordure de deux pixels et d'un espace blanc, norab Après avoir utilisé Whitespace No AB, comme vous pouvez le constater, notre contenu déborde de ce conteneur Si j'utilise simplement Overflow et que j' utilise hidden and set ce fichier, vous pouvez voir ici qu'il n'a pas l'air génial Cela a coupé notre texte. Un utilisateur ne peut pas comprendre cette fin ou non, mais je veux montrer à l'utilisateur qu'il reste encore un mot dans ce paragraphe. Pour cela, nous devons utiliser le débordement de texte. Donc, pour commenter cette ligne, je vais taper text overflow, et je vais utiliser des points de suspension Si je définis ce fichier, oups, je pense qu'il y a un problème Nous devons utiliser la valeur de dépassement de texte avec la valeur de dépassement. Nous devons masquer le débordement puis définir ce fichier, vous pouvez maintenant voir le résultat Il ajoute trois points en dernier de cette ligne. Je veux dire que nous avons plus de contenu dans le Sparagram. Il s'agit de la première valeur. Nous avons également une autre valeur. Donc, pour dupliquer cette ligne et commenter la précédente. Cette fois, je vais utiliser une autre valeur qui est stream. Nous n'avons pas besoin de taper le nom de la valeur, nous devons saisir les codes doubles, je vais transmettre la chaîne exacte que je veux imprimer. Je veux imprimer le carré ss puis à l'intérieur du carré sis je veux imprimer deux points. Après avoir défini ce fichier, comme vous pouvez le voir, il ne fonctionne pas, je pense qu' il y a un problème avec le navigateur. Chrome ne supporte peut-être pas cette fonctionnalité. Je vais copier mon URL et ouvrir Firefox. Comme vous pouvez le voir, j' ouvre ici mon navigateur Firefox et si je passe cette URL puis que j'appuie sur Entrée, vous pouvez maintenant voir le résultat. Ici, vous pouvez le voir à la chaîne exacte, celle que nous tapons dans notre section CSS. C'est ainsi que vous pouvez utiliser la propriété text overflow. Ici, vous pouvez transmettre n'importe quelle chaîne, celle que vous souhaitez imprimer. C'est tout pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût. 26. Tutoriel de mode d'écriture CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons apprendre une autre nouvelle propriété, qui est l'écriture de move. Voyons donc quel type de valeur nous avons dans cette propriété. Ce sont donc toutes des valeurs que nous allons utiliser dans cette propriété. Notre première valeur est le trait d'union horizontal TV, et il s'agit d'une valeur par défaut Le téléviseur représente le haut et le bas. Notre valeur suivante est RL verticale. RL est l'abréviation de right to lift. Ensuite, la verticale R. R représente la lèvre vers la droite. Ensuite, nous avons RL latéralement et RL latéralement R. Donc, comme vous pouvez le voir, nous avons un élément profond, et dans cet élément profond, nous avons un foutu paragraphe. Et si vous utilisez la propriété du mode d'écriture, vous pouvez écrire votre paragraphe de cette façon. Vous pouvez faire pivoter votre paragraphe verticalement. En utilisant cette propriété, nous pouvons notamment faire pivoter le contenu du texte, non l'élément profond. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension p server, et je crée déjà un document d'estimation nommé index point HTML. Et si vous remarquez, vous pouvez voir sur cette page d'estal que nous avons un tag profond, et ici nous avons défini une boîte de nom d'identification Et nous avons également un paragraphe dans cette balise profonde. Et si vous le remarquez dans notre section de style, nous avons déjà défini une largeur fixe pour ce développement, et nous utilisons également une bordure. Donc, dans un premier temps, je vais utiliser notre propriété, qui est le mode écriture. Mode d'écriture. Première valeur que je vais utiliser, qui est le RM vertical. Jusqu'à ce fichier, vous pouvez voir le résultat ici. Si vous remarquez, vous pouvez maintenant voir que notre D fait toujours 400 pixels, mais qu'il est acheminé vers le paragraphe, et nous faisons pivoter ce paragraphe verticalement de droite à gauche Si j'augmente la taille du paragraphe, donc l'hémotype est faible m 100, puis sur ce fichier, vous pouvez maintenant voir le résultat Ça part de la droite, puis ça va jusqu'à la lèvre. Et si je le fais de la lèvre opposée à la droite. Donc, d'abord, je vais taper L, puis je vais taper R et définir ce fichier. Vous pouvez également voir le résultat. Maintenant, vous pouvez voir que nos cravates commencent du côté droit de la lèvre. Maintenant, laissez-moi vous montrer une autre propriété qui se trouve sur le côté RL Je vais donc supprimer le R vertical et je vais taper latéralement RL Si je définis ce fichier, après avoir sous-titré ce fichier, comme vous pouvez le voir, cela ne fonctionne pas car navigateur Chrome ne propose pas cette fonctionnalité. Je vais donc ouvrir ce fichier dans le navigateur Firefrogs. Si je page cette URL et ouvre ce fichier, vous pouvez voir le résultat. Certaines fonctionnalités ne sont donc pas prises en charge par le navigateur Chrome. C'est pourquoi nous devons utiliser le navigateur Firebog. Parlons maintenant de la dernière valeur, qui est la télévision horizontale. Je souhaite utiliser la télévision horizontale. Si je définis ce fichier, comme vous pouvez le voir, il imprime le résultat tel quel. De plus, si j'ouvre mon navigateur Firefox puis que je recharge ce navigateur, vous pouvez également le voir s'imprimer tel quel car il s' agit de la valeur par défaut Il s'agit donc d'écrire la propriété du mode en CSS. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 27. Tutoriel de comptage des colonnes CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouvel arbre CSS lié au tutoriel. Dans ce didacticiel, nous allons apprendre un nouveau CSS lié aux propriétés, et le nom de notre propriété est Colm count. C'est l'une des propriétés les plus utiles. Voyons donc pourquoi c'est utile. Comme vous pouvez le constater, nous avons un élément profond, et dans cet élément profond, nous avons un paragraphe. C'est un paragraphe normal, et c'est ennuyeux. Ça n'a pas l'air très intéressant. Mais si vous le remarquez dans les journaux et autres magazines, vous pouvez voir nos paragraphes, le paragraphe divisé en colonnes. Parfois, ça ressemble à ça. Il fournit de l'espace entre les colonnes. Nous pouvons créer cette partie en utilisant le nombre de colonnes. Et ce sont toutes les propriétés liées au nombre de colonnes, nombre de colonnes, ClumGap, la règle des colonnes, la règle des colonnes avec, le style de règle des colonnes, la couleur de la règle des colonnes, la colonne avec, l'aileron de colonne, l'envergure colonne. Nous connaissons déjà le nombre de colonnes et voyons comment fonctionne l'écart entre les colonnes. En utilisant la propriété column count, nous pouvons diviser le paragraphe en trois parties, mais en utilisant la propriété column gap, nous pouvons fournir de l'espace entre ces partitions. Vous pouvez augmenter la taille de l'écart, sinon vous pouvez le diminuer. Notre propriété suivante est également une propriété importante, savoir la règle des colonnes. En utilisant cette propriété, vous pouvez fournir des lignes entre ces partitions, et vous pouvez également contrôler l'épaisseur à l'aide de cette propriété. Propriété suivante, nous avons la largeur de colonne. Cette propriété vous permet d' augmenter la largeur de colonne, sinon de la diminuer. Notre paragraphe est divisé en trois colonnes, mais en utilisant cette propriété, vous pouvez contrôler la taille. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visals studio et mon navigateur en utilisant l'extension Live Server, et j'ai déjà créé un document TML nommé index point Et dans cette page HTML, nous avons une balise deep, et nous attribuons un identifiant à cette profondeur, qui est box. Et si vous remarquez, c'est elle qui porte cette boîte. L'utilisation des héros a été fixée à 600 pixels, et nous parlons aussi de bordure. Donc, première propriété que je vais utiliser, le nombre de colonnes. Nombre de colonnes, nombre de colonnes, et je voudrais diviser ce paragraphe en trois colonnes trois. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat ici. Il divise notre paragraphe en trois parties. Ici, vous pouvez diviser votre paragraphe en plusieurs parties. Supposons que vous souhaitiez diviser ce paragraphe en quatre sections, oui, vous le pouvez. Tu dois en passer quatre. Vous devez définir ce fichier. Mais pour l'instant, j'aimerais m' en tenir à trois parties. Il s'agit donc de l'utilisation de la propriété de comptage de colonnes. Parlons maintenant d'une autre propriété qui est l'écart entre les colonnes. Donc Hemotype : écart entre les colonnes et lui pour transmettre un poids. Et comme vous pouvez le constater, il s' agit de l'écart par défaut. Et si je veux augmenter l'écart, aidez-moi simplement à passer une vague. Supposons que je veuille augmenter l'écart de 50 pixels. Et si je place ce fichier, vous pouvez voir le résultat ici. Et si vous voulez augmenter l'écart, augmentez simplement la valeur. Elle passe donc 100 pixels. Après avoir défini ce fichier, voici le résultat. Pour l'instant, j'aimerais opter pour 50 pixels. La propriété suivante que je vais utiliser est la règle des colonnes. Et nous avons de nombreuses propriétés liées aux règles de colonne. Donc, première propriété, je vais utiliser la règle de colonne W. Pour l'instant, je vais utiliser une colonne de trois pixels. Et la propriété suivante, je vais utiliser le style des règles de colonne. Colonne. Règle. Style. Style racine de colonne, et je vais utiliser la valeur du point. Si je configure ce fichier, oui, vous pouvez voir le résultat. Oups, je pense que j'ai fait une erreur car ici nous utilisons un PC, pas un pixel Nous devons donc utiliser la valeur de pixel PX. Donc, si je définis ce fichier, vous pouvez maintenant voir le résultat. Si je supprime cette bordure, je vais la faire passer à zéro pixel et redéfinir ce fichier. Maintenant, vous pouvez voir que cette ligne n'apparaît qu'entre les colonnes, pas le côté gauche, ni le côté droit. Nous avons un style différent, similaire à la propriété de bordure. Je ne vais pas vous les montrer un par un. Parce que nous le connaissons déjà. Et maintenant, je vais utiliser une autre règle de colonne liée aux propriétés. Je vais donc dupliquer cette section, et cette fois, je vais utiliser la couleur. Règle des colonnes, couleur. Et ici, je vais utiliser de la couleur rouge. Si je définis ce fichier, vous pouvez maintenant voir la couleur des règles de colonne. Non seulement cela, vous pouvez également utiliser un raccourci pour la propriété de la règle de colonne Laisse-moi te montrer. Donc, juste au moment où vous liez la règle des colonnes. Et d'abord, nous devons passer la règle des colonnes avec, qui est de deux pixels. Ensuite, nous devons transmettre le style Column Rule, qui est solide. Ensuite, nous devons passer la règle des colonnes en couleur. Pour l'instant, je vais utiliser le vert. Et je vais commenter ces trois lignes. Si je définis ce fichier, comme vous pouvez le voir dans mon navigateur, notre règle de colonne est maintenant la couleur verte, il fait deux pixels et son style est solide. Et si vous voulez augmenter la règle des colonnes simplement pour augmenter la valeur, supposons que j'utilise dix pixels et que je définis ce fichier, vous pouvez voir le résultat. Parlons maintenant d'une autre propriété qui est le poids des colonnes. Pour utiliser cette propriété, nous devons commenter cette ligne, le nombre de colonnes, car nous n' utilisons pas les deux propriétés en même temps. Je vais donc commenter cette ligne et elle utilisera la colonne we. Largeur de colonne, et je veux créer ma colonne avec 100 pixels. Si je définis ce fichier, vous pouvez le voir ici diviser notre colonne en quatre parties. Mais si je réduis la valeur donnée à la colonne, zéro pixel, je vais également réduire la règle des colonnes d'un pixel, puis de ce fichier. Vous pouvez maintenant le voir diviser notre colonne en six parties, car il essaie toujours de diviser notre colonne en parties égales. Comme vous pouvez le voir, le héros est fixé à 600 pixels. Donc, si je divise 600 pixels par 100, cela donne six. C'est pourquoi il est divisé en six parties. Parlons maintenant d' une autre propriété appelée span de colonne. Mais avant, je vais commenter cette ligne, et je vais décommenter cette ligne, le nombre de colonnes Je vais également utiliser un écart de 20 pixels entre cette colonne et notre style de règle de colonne solide et deux pixels. Et l'épaisseur est de deux pixels. Si je configure ce fichier, encore une fois, nous revenons à l'ancienne étape. Maintenant, je vais vous montrer comment utiliser la propriété Spen de la colonne Supposons que je veuille déplacer ce titre d'une balise à l'intérieur de cette dévaluation Je vais donc déplacer ce titre d'une balise dans cette case D. Si je place ce fichier, vous pouvez voir le résultat. titre 1 est beaucoup plus grand pour cet exemple, je vais donc utiliser le titre cinq, tag, H cinq. Et enregistrez-le à nouveau. Maintenant, vous pouvez voir notre étiquette d' en-tête 5 s'ajuster dans notre première colonne, mais je ne le veux pas. Je souhaite augmenter la taille de cette colonne pour cette balise particulière. Donc, si j'utilise le titre trois, définissez ce fichier. Maintenant, je vais vous montrer exactement comment cela va fonctionner. Nous devons donc sélectionner cette balise en titre trois, H trois. Ensuite, j'ai dit que le culia disait que nous devions utiliser l'envergure des colonnes Envergure de colonne. Et je vais fournir tout l'espace à l'intérieur de cette profondeur. Je vais donc tout passer. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, pour cette balise en particulier, nous augmentons la taille de la colonne. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons découvrir le CSS pour la règle de phase. Merci donc d'avoir regardé cette vidéo. Restez à l'affût. 28. Tutoriel de règle CSS @font face: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce didacticiel, nous allons apprendre une nouvelle propriété lors de la phase de police rouge. Grâce à cette propriété, vous pouvez télécharger n'importe quelle police et l' utiliser sur votre page Web. Maintenant, la question est de savoir pourquoi nous devons utiliser cette propriété ? Nous avons déjà une propriété nommée famille de polices. Comme vous pouvez le constater, si nous utilisons une famille de polices, nous pouvons fournir ARIA Heltica et Sensory dans cette famille de polices Si la police ARL installe le système utilisateur, il appliquera la police ARL. Si ce n'est pas le cas, il recherchera également Heltka Si le Heltica n'est pas disponible, il se lancera dans le Sansai Et si tous ces éléments ne sont pas disponibles, le navigateur de polices par défaut sera utilisé. Pour résoudre ce problème, nous utilisions auparavant WebSaffonts Les polices Websap sont prises en charge par de nombreux systèmes d'exploitation populaires tels que Windows, Mcewas, En outre, il est pris en charge par les systèmes d'exploitation mobiles, Android Iwase Ce système d'exploitation utilise un groupe de polices commun dans son système. C'est donc la méthode précédente selon laquelle nous pouvons utiliser différentes polices. Mais maintenant, nous avons la propriété aérée de recadrage des polices. En l'utilisant, nous pouvons utiliser n'importe quelle police sur notre page Web. Et voici comment vous pouvez utiliser cette propriété fonfhase. Fontfhase est au niveau des calices dont vous avez besoin pour transmettre votre famille. Et ici, tu peux prendre ton propre nom. Vous pouvez transmettre n'importe quel nom. Et la propriété suivante que vous devez utiliser est la source. Et à la place de la source, vous devez transmettre l'URL, l'URL exacte de la police. Et n'oubliez pas de prendre le nom de la police, ici vous ne pouvez pas utiliser d'espace entre le nom. Ici, vous pouvez utiliser un étui en forme de chameau, sinon un trait d'union, mais vous ne pouvez pas utiliser d'espace Ensuite, vous devez transmettre le code source et transmettre ici le chemin exact avec l'extension. abord, vous devez transmettre le nom du dossier, puis vous devez utiliser une barre oblique et le nom de votre police Voyons maintenant comment utiliser cette police ? Pour utiliser ce fond, vous devez utiliser la propriété de la famille de polices. Ensuite, vous devez passer le nom de la police, le nom de police que vous attribuez dans votre vaste sélecteur de polices Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visal Studio et mon navigateur en utilisant l'extension Lip Server, et j'ai déjà créé un document ML nommé index point TML Et comme vous pouvez le voir, à l'intérieur de la balise body, nous avons une balise profonde avec une boîte de nom d'identification. Et maintenant, nous devons utiliser cette propriété de phase de police. Mais avant, nous devons télécharger une police pour l'utiliser. Il existe de nombreux sites Web qui proposent des polices à télécharger, mais j'aimerais préférer Font Squirrel Ici, vous pouvez voir différents types de polices. Pour l'instant, j'aimerais utiliser OpenSNS. C'est l'une des polices les plus utiles du site Web. Je vais donc sélectionner cette police, donc je vais cliquer dessus ici. Et si vous remarquez, vous pouvez également voir qu'il fournit une version d'épaisseur différente de cette police, claire, grasse, italique, etc. Et si vous voulez tester cette police, il vous suffit de sélectionner cette option, le lecteur de goût. Et si vous tapez quelque chose, imaginez que je vais taper « hello word ». Vous pouvez voir le résultat ici. C'est donc une très bonne police à utiliser sur notre site Web. Et si vous souhaitez modifier la taille de police, à partir de là, vous pouvez modifier la taille de police. Si j'utilise 14, une taille de 14 pixels est utilisée pour les paragraphes. Donc, si je l'utilise, vous pouvez voir le résultat. C'est une très bonne police à utiliser sur notre site Web. Et si vous ouvrez ce menu déroulant, vous pouvez voir ici différents styles de police de ces polices, Opensun bold, bold, italic, etc. Et si vous décidez utiliser cette police sur votre site Web, vous devez vous rendre dans cette section webfont Keith Et ce sont tous des WebfonFleetension. Donc TTF eOTSG. Et W Overlap est le plus recommandé car il supporte tous les navigateurs modernes. Ensuite, après avoir sélectionné cette extension, nous devons télécharger cette police. Je vais donc cliquer sur le bouton Télécharger. Comme vous pouvez le voir, voici le téléchargement de notre police avec succès. Ensuite, je déplace ce fichier téléchargé dans cette police de nom de dossier. Comme vous pouvez le constater, nous devons extraire ce fichier. Je vais donc publier un extrait ici. Ainsi, après l'extraction, vous pouvez voir ici les polices Web des dossiers. Si je l'ouvre, ce sont toutes les polices que nous pouvons utiliser sur notre page Web. Supposons que je veuille utiliser une police normale. Je vais donc ouvrir ce dossier et je vais le copier. Ensuite, je vais copier ce fichier particulier qui s'ouvre sur une police Web normale point Olive. Et je vais déplacer ce fichier dans le dossier principal des polices. Et aussi, je vais supprimer ces fichiers inutiles. Je n'en ai pas besoin. Revenons maintenant à l'éditeur de code Visal Studio Comme vous pouvez le voir, encore une fois, nous sommes dans mon éditeur de code Visal Studio Dans un premier temps, nous devons utiliser la propriété de règle de phase de police CSS. Je vais donc taper ici lors de la phase de lecture de la police. Ensuite, nous devons utiliser Cali Vss. Dans un premier temps, nous devons utiliser la propriété de la famille de polices. Famille de polices. Et dans cette propriété de famille de polices, nous devons transmettre une valeur Nous devons transmettre le nom de la police. Et si je vous montre le nom de ma police, notre nom de police est open sans. Donc, son type ouvre le soleil. Ensuite, nous devons fournir le chemin source de cette police. Le type Su est RC. Et ici, nous devons utiliser la valeur de l'URL pour localiser cette police. Comme vous le savez, URL est l'abréviation de Uniform Resource Locator, et à l'intérieur des rondelles, on indique le chemin de la police Donc, comme vous le savez, notre police se trouve dans notre dossier de polices. Fonts et notre nom de police est OpenSNSRgular web font. C'est ça. Si je définis ce fichier et si je l' utilise dans notre boîte de fond, un certain type, hastag box. Est-ce que les calibres sont ici ? Je veux utiliser OpenSensFont pour Encore une fois, nous devons utiliser la famille de polices. Donc, en gros, je vais copier cette ligne et je vais la coller ici. Et je vais configurer ce fichier. Après avoir configuré ce fichier, si je vous montre mon navigateur, vous pouvez voir le résultat. Donc, après avoir défini ce fichier, comme vous pouvez le voir, il applique Opensunspw Et de la même manière, si vous souhaitez modifier la police de l'en-tête d' une balise, oui, vous le pouvez. Supposons que je sélectionne le titre 1, H un, puis que l'intérieur du foie indique que je vais utiliser une famille, une famille polices, OpenSN. Si je définis ce fichier, vous pouvez voir le résultat Voici donc comment vous pouvez télécharger n'importe quel type de police et l' appliquer dans votre navigateur. C'est donc tout pour ce tutoriel. Dans le prochain tutoriel, nous allons apprendre les polices Google. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 29. Tutoriel CSS avec Google Fonts: Salut, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau CSS lié au tutoriel. Et dans ce didacticiel, nous allons apprendre pourquoi utiliser les polices Google dans nos pages Web ? Essayons maintenant de comprendre ce que sont les polices Google. Comme vous pouvez le voir, nous avons un serveur, et dans ce serveur, nous avons nos images CSS stables et nos polices Si le nombre de visiteurs de ce site Web augmente, temps de chargement de notre serveur augmente. Notre serveur met du temps à traiter la demande car il y a plusieurs visiteurs en même temps. Supposons qu'un visiteur ait essayé d'accéder à cette page et que notre serveur ait essayé de répondre à sa demande. Au même moment, deux autres visiteurs sont venus envoyer la demande. Dans ce cas, cela a augmenté le temps de réponse du serveur. Dans le même temps, ce serveur servira du TML, du CSS, des images et des polices Mais si nous utilisons des polices Google, devons réduire la charge de notre serveur , car nous utilisons alors directement le serveur Google pour diffuser la police. Cette fois, notre serveur va fournir des thèses et des images HTML. Mais pour les polices, cela va utiliser le serveur Google, ce qui réduira notre temps de chargement et ouvrira notre page plus rapidement que l'étape précédente. Cette fois, nous allons accéder à toutes les polices du serveur Google. Commençons maintenant par l'aspect pratique et voyons comment utiliser Google Fonts. Pour accéder à la police Google, vous devez vous rendre sur ce site Web, phons.google.com. Cela va vous rediriger vers cette page. Ici, vous pouvez voir de nombreuses polices de caractères. Et à partir de là, vous pouvez rechercher n'importe quel front que vous imaginez. Pour l'instant, j'aimerais utiliser MonsatFont afin de sélectionner cette police À partir de là, vous pouvez modifier la taille de la police . Voici les styles fournis par cette police. Pour accéder à cette police, vous devez cliquer sur ce bouton, Police Gate. À partir de là, vous pouvez télécharger cette police dans votre système local. Vous pouvez également l'utiliser depuis le serveur Google. Pour cela, vous devez cliquer sur Obtenir le code intégré. Oui, vous pouvez voir que cette police est disponible pour les appareils Web Android, appareils IOS et les applications Flutter Mais nous allons l' utiliser pour la vague. Si nous sélectionnons également Wave, vous pouvez voir que nous avons deux autres options, ink et Input. Pour l'instant, nous allons utiliser l' option Link car nous ne connaissons pas les règles de saisie, nous connaissons bien les balises de lien. Nous allons apprendre la méthode des règles de saisie dans nos prochains tutoriels. Donc, pour l'instant, j' aimerais utiliser les liens. Il vous suffit de copier ce code. Revenons ensuite au code de Visual Studio. Dans votre code Visual Studio, vous devez coller ce code dans la balise head. Donc, en dessous de la balise méta, je vais coller ce code, et je vais définir ce fichier. Nous pouvons maintenant utiliser cette police, et maintenant je vais utiliser cette police particulière pour la balise H one. Donc, en dessous de la balise de titre, je vais utiliser ici la balise de style. Et à l'intérieur de cette balise de vignette et à l'intérieur de cette balise de vignette, puis à l'intérieur de cette balise de vignette, je vais sélectionner cette balise H one, H un. Ensuite, ce cardia dit, d'abord, je vais utiliser la famille de polices du nom de propriété Famille de polices. Revenons ensuite au navigateur. Ici, vous pouvez voir la famille de polices, Monsor it sensory. Copiez donc cette section. Et revenons au code du studio. Et ici je vais transmettre cette valeur. Après avoir défini ce fichier et exécuté ce code, vous pouvez voir le résultat dans notre navigateur. Il a changé le titre d'un formulaire. Non seulement cela, vous pouvez également utiliser n'importe quelle police d'une valeur de 100 à 900. Voici donc comment vous pouvez utiliser les polices Google sur votre page Web. C'est un processus très simple. Voilà pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 30. Tutoriel de style de liste CSS: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons en apprendre davantage sur le style CSS Voyons maintenant ce qu'est le style et comment il fonctionne. Ce sont toutes des propriétés de style. Stylisez l'image, la position du style, le style t et la liste ty. Comme vous pouvez le voir, voici un exemple de liste. Et dans cette liste, nous avons un total de quatre éléments de liste. Mais si vous remarquez l'icône de style, c'est une image. Il ne s'agit pas d'une boîte à puces, sinon d'une boîte carrée. Vous pouvez utiliser n'importe quelle image en tant qu'image de style liste. Puis vient la position stylistique. Nous avons deux types de position à l'intérieur et à l'extérieur, et nous allons l' apprendre de manière pratique. Ensuite, notre propriété suivante est son type de style. Comme vous le savez, nous avons au total deux types d'éléments de liste, Wada et la liste Unwale Parlons maintenant de notre dernière propriété, qui est le style. Nous utilisons cette propriété comme un paquebot. Si vous ne souhaitez pas saisir ces trois propriétés, vous pouvez utiliser celle-ci. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ai ouvert mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Light Server, et j'ai déjà créé un index de nom de document TML point t. Et si vous remarquez que vous pouvez voir à l'intérieur la balise body, nous avons une balise d'en-tête Nous avons également une sous-liste et une Wadlelist. Et maintenant je vais styliser cette liste de médailles. Donc pour cela, je vais utiliser ici la balise Style. Mosaïque et insérez cette balise de style. Tout d'abord, nous devons sélectionner le nœud UL. Et n'oubliez pas que si vous souhaitez appliquer toutes les propriétés minimales, vous devez utiliser la balise UL, sinon la balise OL, et non les moindres éléments. Je ne veux pas dire les tags LI. Donc, ici, je vais utiliser UL. Insérez ensuite le renfoncement de couleur. Première propriété, je vais utiliser le type de style. Type de style inférieur. Type de style, je vais utiliser la valeur du cercle. Si je configure ce fichier, vous pouvez voir le résultat. Si vous le remarquez, vous pouvez voir dans mon navigateur que notre élément de liste est pointé ou encerclé. Et si vous souhaitez utiliser des boîtes carrées, oui, vous le pouvez. Juste pour taper carré. Si je configure ce fichier, vous pouvez voir le résultat. Et si vous ne voulez pas afficher de puce, vous pouvez également utiliser une valeur appelée none. Si je configure ce fichier, vous pouvez voir le résultat. Désormais, il n'y a pas de puce avant les éléments de la liste. Pour l'instant, j'aimerais passer au cercle V. Maintenant, parlons de la liste Wada Je vais donc dupliquer cette section, et je vais remplacer UL par OM. Le style Dal is list est différent de nodal ist. Si vous souhaitez utiliser l'alphabet, vous devez taper alpha supérieur Si j'utilise le Ea supérieur, comme vous pouvez le voir, un, deux, trois, quatre, remplacez-le par AVCD De même, si vous souhaitez utiliser un Alpha inférieur, diminuez un Alpha. Et ceci dans ce fichier, vous pouvez maintenant voir AVCD remplacé par un petit AVCD De plus, vous avez d'autres testaments, haut et en bas. Donc, si je tape Lower Roman et ceci dans ce fichier, oui, vous pouvez voir le résultat. Maintenant, les éléments de notre liste commencent par des chiffres romains. Et si je passe le roman supérieur, romain supérieur et que je configure ensuite ce fichier, vous pouvez maintenant voir le résultat. Et la valeur par défaut est décimale. Si je passe un nombre décimal puis que je définis ce fichier, vous pouvez voir le résultat Il s'agit de la valeur par défaut. C'est pourquoi il en imprime un, deux, trois, quatre. Ce sont donc les valeurs wardaïstes les plus populaires. Et si vous ne voulez rien montrer, vous pouvez n'en transmettre aucun ici puis envoyer ce fichier. Pour l'instant, je voudrais opter pour l' Alpha supérieur, donc HemotyPuper Et maintenant je vais parler de style et de position. Dans une propriété de position de style, nous avons un total de deux valeurs. Mais d'abord, je vais utiliser la bordure. Bordure par pixel, bordure pleine. Sur ce, notre bordure est rouge. Et je vais configurer ce fichier. Au début, je vais taper List style position, Last style position, et je vais passer à l'intérieur. Si je configure ce fichier, vous pouvez voir le résultat. Il a légèrement déplacé le moins d'objets à l'intérieur de cette boîte. Et si j'utilise en extérieur, dans ce fichier, vous pouvez voir le résultat ici. Après avoir utilisé la valeur interne, cela déplace notre élément de liste un peu vers la droite. C'est donc l'usage de cette propriété. Parlons maintenant d' une autre propriété, qui est une image de style liste. Donc, tapez une image de style liste en héros. Ensuite, vous devez utiliser ici la valeur de l'URL, l'URL. Ensuite, à l'intérieur de la cavité ronde, nous devons fournir le chemin du fichier URL est l'abréviation de Uniform Resource Locator. Et à l'intérieur de la cavité ronde, nous devons fournir le chemin du fichier image Téléchargeons maintenant une image depuis le site Web. Comme vous pouvez le voir sur votre écran, nous ouvrons ici un outil de recherche d'icônes pour les noms de sites Web. De là, vous pouvez télécharger l'icône OSP. Vous pouvez rechercher n'importe quel type d'icône et le télécharger. Donc, dans la barre de recherche, je vais taper la flèche droite. Après avoir recherché cette icône, vous pouvez voir le résultat. Il fournit les deux types d'icônes gratuits et premium. À partir de là, je vais sélectionner les versions gratuites. Ce sont donc toutes des icônes gratuites que vous pouvez télécharger. J'aimerais choisir celui-ci. Je vais donc cliquer sur cette icône. Après avoir cliqué sur cette icône, vous pouvez voir Hey propose différents types de formats, PNG, SVG et autres formats Pour cet exemple, je vais utiliser le format PNG. Vous pouvez également sélectionner votre propre résolution. Je ne veux pas d'icône plus grande. C'est pourquoi je vais utiliser une taille de 48 pixels, puis je vais cliquer sur le bouton Télécharger. Après avoir cliqué sur le bouton Télécharger, comme vous pouvez le voir, le téléchargement se fait dans notre dossier descendant. Déplaçons maintenant cette icône du dossier inférieur vers notre répertoire de travail actuel. Comme vous pouvez le voir dans mon répertoire de travail actuel, j'ai déjà déplacé cette image PNG dans mon répertoire, et j'ai renommé ce fichier arrow point PNG. Et maintenant, je vais utiliser ce fichier PNG dans ma section URL. Donc, dans cette barre d'URL, je vais fournir le chemin du fichier. Point fléché PNG. Après avoir sous-traité ce fichier, vous pouvez voir le résultat. Mais il y a un problème. Comme vous pouvez le constater, voler nos images plus grand que les puces, et il n'existe pas de moyen simple de résoudre ce problème. Oui, nous pouvons utiliser un sélecteur de combinateur, sinon nous pouvons créer du contenu vide pour l'aligner, sinon réduire la taille Mais en gros, nous n'en sommes qu'à la phase initiale. Je vais donc réduire la taille de l' image à l'aide de Photoshop. Comme vous pouvez le voir, j'ouvre cette image dans l'application Photoshop, et maintenant je vais réduire la taille de l'image. Je vais donc sélectionner cette section d'image et l' option Taille de l'image Heats here, et je veux la faire de 12 pixels par 12 Bigel Je pense que c'est une bonne chose. Sinon, je peux le faire 16 pixels. OK. Ensuite, je vais faire l'éloge de O. Et je vais définir ce fichier comme un fichier PNG exporté au format PNG. Je vais également remplacer cette image par cette image. Oui Et puis, encore une fois, je vais me lancer dans l'éditeur de code Visult Studio Si je configure ce fichier, vous pouvez voir le résultat. Il s'agit de la section de base du didacticiel. Nous ne connaissons pas encore le sélecteur avancé, ai donc pas pu vous montrer beaucoup d'exemples Dans nos prochains didacticiels et dans la section avancée, nous allons découvrir les différents types de sélecteurs Alors je peux vous montrer des exemples. C'est donc tout pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 31. Tutoriel d'image de fond CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons en apprendre davantage sur le CSS, propriété des images d' arrière-plan. Image d'arrière-plan, répétition de l' arrière-plan et position de l' arrière-plan. Essayons maintenant de comprendre ce qu'est l'image de fond. Si vous souhaitez définir une image en arrière-plan, vous pouvez utiliser cette propriété, image d'arrière-plan. Si vous souhaitez utiliser cette propriété, vous devez taper background hibadimage puis l'URL, vous devez transmettre le chemin du fichier image , quelque chose comme ça Supposons que vous ayez une image nommée JPG à un point et que vous deviez placer le chemin de ce fichier image sur cette section URL. Voyons donc comment nous pouvons l' utiliser dans la pratique. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Live Server, et je crée déjà un document TML nommé index point TML Donc, dans un premier temps, à l'intérieur de cette balise de style, je vais styliser la balise body. Donc je suis type body. Et à l'intérieur de cette balise corporelle, je vais appliquer l'image de fond. Et ici, je vais taper l' URL de l'image d' arrière-plan, slaver point JPG Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, cette image couvre tout le fond de notre page. De plus, il répète l'image d' arrière-plan encore et encore pour couvrir cet espace. Il s'agit de la première propriété. Parlons maintenant de la deuxième propriété, qui est la répétition en arrière-plan. probité de répétition en arrière-plan comporte six valeurs : répéter, ne pas répéter, répéter X, répéter Y, espacer et arrondir Répéter est la valeur par défaut. Et si vous n'utilisez pas de répétition, image ne se répétera pas encore et encore. Vous pouvez également répéter votre image dans la direction XX et également dans la direction x. Et si vous utilisez une valeur d'espace, cela fournira de l'espace entre cette image. Et si vous utilisez une valeur arrondie, cela va étirer votre image. Ce sont toutes des valeurs prédéfinies de la propriété de répétition en arrière-plan. Voyons maintenant comment nous pouvons l' appliquer dans la pratique. Donc, dans un premier temps, je vais utiliser cette propriété, répétition en arrière-plan, répétition en arrière-plan. Et ici, je ne vais pas appliquer de nouveau. Non, répétez. Si je règle cette page, comme vous pouvez le voir, maintenant, notre image ne se répète pas. Maintenant, il n'est apparu qu'une seule fois. Et maintenant, je veux répéter cette image dans la direction X. Je vais donc passer, répéter en arrière-plan, répéter X. Si je configure ce fichier, vous pouvez voir le résultat. De même, si vous souhaitez répéter la direction x de votre image, il suffit de répéter Y. Après avoir défini ce fichier, vous pouvez voir le résultat Et maintenant je vais utiliser la valeur suivante qui est l'espace. Espace de répétition en arrière-plan. Si je configure ce fichier, vous pouvez voir le résultat. Si j'augmente la largeur du navigateur, c'est maintenant clair pour vous. Vous pouvez maintenant voir qu'il laisse de l'espace entre les images. Si nous avons du contenu en ligne, cela fonctionnera également horizontalement et verticalement. Laissez-moi vous le prouver. Donc, pour réduire la taille du navigateur, je vais dupliquer cette case cinq fois , puis redéfinir ce fichier. Vous pouvez maintenant voir le résultat. Il s'agit de l'utilisation de la valeur spatiale. Maintenant, je vais supprimer tous les condiils inutiles. Mais c'est ainsi que fonctionne la valeur spatiale dans la propriété de répétition en arrière-plan. La prochaine valeur que je vais utiliser, qui est row. Donc ici, je vais remplacer l'espace par Run. Après l'étape de ce fichier, vous pouvez voir le résultat. Comme je vous l'ai dit, arrondissez la valeur pour étirer notre image. Parlons maintenant de la valeur de position d'arrière-plan. Ce sont toutes des valeurs prédéfinies de position d' arrière-plan, aptp, centre des lèvres, bas de la lèvre, haut droit , centre droit, droite, bas, centre central, centre, bas Vous pouvez également utiliser une valeur en pourcentage pour la propriété de position d'arrière-plan CSS. Avec cela, vous pouvez également transmettre valeur des pixels dans la diction YxS et dans la direction Xs Voyons donc comment nous pouvons l' utiliser dans la pratique. Donc, dans un premier temps, je vais utiliser une valeur de répétition en arrière-plan, pas de répétition. Non, répétez. Ensuite, je vais utiliser la propriété de position d'arrière-plan. Position d'arrière-plan. Si je définis ce fichier, par défaut, il arrive en position d'ordinateur portable. Je vais donc utiliser notre propriété supérieure, juste en haut. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il déplace notre image d'arrière-plan en haut de la page. C'est la bonne position de tête. Alors je vais utiliser le centre droit. Après avoir défini ce fichier, vous pouvez voir le résultat ici. Nous n'avons aucun upcontent. C'est pourquoi il rebondit vers le haut. Je vais donc dupliquer cette case de ligne, section 510. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Je pense que ce n'est pas un bon exemple. Je vais donc supprimer toutes les opérations. De plus, je vais supprimer le contenu de la tourbière. Ensuite, je vais styliser cette étape du blog en utilisant son identifiant, Hatag box Ensuite, à l'intérieur, le caliva dit : « Je vais le dire avec une hauteur de 100 % Hauteur 800 pixels. Ensuite, je vais ajouter une bordure. Bordure d'un pixel, pleine, et l'aquarelle, y. haut de ce fichier, comme vous pouvez le voir, c'est la taille de notre boîte Maintenant, je vais utiliser toutes ces propriétés dans cette boîte D. Et je vais supprimer le body tag. Si j'ai configuré ce fichier, c'est maintenant plus clair pour vous. Augmentons la largeur de la bordure. Le pixel. Aujourd'hui, nos frontières sont beaucoup plus visibles. Donc, comme vous pouvez le voir, nous l'utilisons au centre droit, et vous pouvez voir la position. Maintenant, je décide de déplacer notre image de fond en bas. Pour cela, nous devons utiliser la valeur inférieure droite. De même, nous avons laissé la valeur secondaire. Si vous voulez le déplacer d'un bond vers le bas, vous devez remplacer la droite par la gauche. Ensuite, vous devez définir ce fichier. Et si vous voulez le placer en position centrale, dans ce cas, vous devez remplacer la valeur inférieure par le centre. Et si vous utilisez la valeur du centre du tour, vous pouvez voir le résultat. De la même manière, nous avons la valeur centrale. Si vous souhaitez placer cette image au centre de cet élément profond, il suffit de passer au centre. Si je configure ce fichier, vous pouvez voir le résultat. Et si vous voulez appuyer dessus au centre, vous suffit de passer au centre en haut. Il va maintenant déplacer le centre de notre image en position supérieure. Vous pouvez également le déplacer au centre, en position inférieure. Non seulement cela, comme je vous l'ai dit, vous pouvez utiliser une valeur en pourcentage pour déplacer votre image d'arrière-plan. Je vais donc dupliquer cette section, et je vais commenter la ligne précédente. Et ici, je veux déplacer notre image en utilisant une valeur en pourcentage. À partir de XX, je veux le déplacer de 25 %. Et à partir du YxS, je vais le déplacer de 50 %. Si je configure ce fichier, vous pouvez voir la position. À partir de XX, il bouge de 25 %, et à partir de xs, il bouge de 50 % Vous pouvez également utiliser l'unité Pixel. Je vais donc dupliquer cette section et commenter la ligne précédente. Et cette fois, je vais utiliser Pixel Unit. À partir de XXs, je veux le déplacer de 300 pixels et à partir du YxS, je veux le déplacer de 200 Si j'ai configuré ce fichier, vous pouvez maintenant voir la position. À partir de Xs, il s'est déplacé de 300 pixels, et à partir de xs, il s'est déplacé de 200 pixels. De plus, vous pouvez utiliser plusieurs images d'arrière-plan à la fois. Pour cela, il suffit d' utiliser entre cette vague. Encore une fois, je vais taper URL, et dans l'URL, nous devons fournir un autre chemin de fichier. Donc, si je vous montre mon répertoire de travail actuel, vous pouvez y voir une autre image, man point JPH, je vais utiliser cette image Point principal JPG. Encore une fois, nous devons fournir une valeur de répétition en arrière-plan pour cette image. Encore une fois, je vais passer une virgule et ici je ne vais pas répéter Nous devons également définir la position. Je vais donc utiliser une virgule, et je vais définir le coin inférieur droit . À droite, en bas. Si je place ce fichier, vous pouvez voir l'image ici. En gros, notre image précédente se superpose à cette image C'est pourquoi je vais déplacer le coin ordinateur portable. Ordinateur portable. Donc, comme vous pouvez le voir, sur le même élément de base de données, nous utilisons ici des arrière-plans différents. En outre, nous pouvons fournir différentes propriétés de répétition d' arrière-plan et différentes propriétés de position d'arrière-plan. Ainsi, vous pouvez utiliser plusieurs images en arrière-plan. Et si vous souhaitez utiliser un raccourci pour les trois propriétés, il vous suffit de taper background Contexte. Ensuite, vous devez d'abord fournir le chemin du fichier UR. Donc, pour copier le chemin du fichier, vous devez fournir valeur de la propriété de répétition en arrière-plan, qui est ni répétition, ni répétition, et vous devez également définir la position. Et je vais passer le PTAF. Et je vais commenter toutes ces lignes précédentes. Si je définis ce fichier, si je définis ce fichier, vous pouvez voir le résultat. Non seulement cela, si vous souhaitez appliquer une couleur d'arrière-plan, oui, vous le pouvez. Il suffit d'intercaler les cheveux de couleur d'arrière-plan. Supposons que je veuille utiliser un fond doré, doré. Et puis définissez ce fichier, vous pouvez voir le résultat. Donc, dans le même temps, nous pouvons utiliser la couleur de fond. Nous pouvons également utiliser des images. J'espère donc que vous comprenez maintenant comment nous pouvons utiliser ces trois informations relatives à la propriété. Voilà pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût. 32. Tutoriel de pièce jointe en arrière-plan CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce didacticiel, nous allons découvrir une nouvelle propriété, à savoir pièce jointe en arrière-plan. Nous avons deux pièces jointes d'arrière-plan liées aux propriétés, scroll et fixed. La valeur par défaut est le défilement. Et si vous utilisez une valeur fixe, cela corrigera votre image d' arrière-plan et vous pourrez faire défiler vos prises autrement contenues sur l'image d'arrière-plan. Voyons donc comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Lip Server, et j'ai déjà créé un document STL, nommé index point TML Comme vous pouvez le voir dans ce code STML, nous avons une balise profonde avec une boîte de nom d'identification De plus, comme vous pouvez le voir dans notre body tag, nous utilisons un arrière-plan. Ici, nous utilisons un arrière-plan, une image de fleur. Et maintenant, je vais ajouter un texte factice dans cette boîte. Donc ici, je veux taper Lorem 1 000. Après avoir appuyé sur Entrée et défini ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir que nous avons une barre de défilement sur le côté droit. Et si je réduis la largeur du navigateur, laissez-moi vous montrer quelque chose comme ça. Maintenant, vous pouvez voir si je fais défiler ma barre de défilement vers le bas, notre image d'arrière-plan se déplace également avec la barre de défilement. Pour résoudre ce problème, nous devons utiliser la propriété de pièce jointe en arrière-plan. Utilisons donc la propriété. Donc, à la place du Carirass je vais utiliser le nom de la propriété, pièce jointe en arrière-plan, et je vais utiliser un champ fixe Si je définis ce fichier, encore une fois, revenez au navigateur et faites défiler le contenu, cette fois, vous pouvez voir le résultat différent. Vous pouvez maintenant voir, pour faire défiler ce contenu, comme vous pouvez le constater, que l'image de fond a pris sa propre place, notre contenu se déplaçant vers le haut et vers le bas. Et si vous utilisez une autre valeur, qui est le défilement, et que vous définissez ce fichier, et si je fais défiler ma page vers le bas, vous pouvez voir, à nouveau, notre arrière-plan se déplace avec le contenu car le défilement est la valeur par défaut. Pour corriger l'arrière-plan, vous devez utiliser une valeur fixe. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons découvrir la taille de l'arrière-plan. Merci donc d'avoir regardé cette vidéo. Restez à l'affût. 33. Tutoriel de taille d'arrière-plan CSS: Bonjour, les gars. Contente de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS. Et dans ce didacticiel, nous allons en apprendre davantage sur la propriété de taille d'arrière-plan CSS. Ce sont toutes des valeurs liées à la propriété de taille d' arrière-plan. Notre première valeur est Auto. La deuxième valeur est la longueur. Vous pouvez indiquer ici la valeur en pixels de la taille de votre arrière-plan. Ensuite, vous pouvez utiliser les pourcentages. Vous pouvez définir la taille de l'arrière-plan avec une valeur en pourcentage. Ensuite, venez en secret, et le dernier est contenu. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Lab Server, et je crée déjà un document SML nommé index point ATM Donc, comme d'habitude, nous avons un tag profond avec boîte d'identification. Vous pouvez voir la boîte, ici nous définissons une bordure et un arrière-plan, et nous définissons notre arrière-plan, pas de répétition. Et notre position de fond est un ordinateur portable. Pour l'instant, je vais supprimer la position d'arrière-plan, ordinateur portable. Je n'en ai pas besoin. Il s'agit donc de notre boucle d'image d' arrière-plan sans propriété de taille d'arrière-plan, mais je souhaite réduire la taille d'arrière-plan. Pour cela, je vais utiliser la taille de l'arrière-plan de la propriété, taille de l' arrière-plan, et ici je vais utiliser la valeur en pixels. Je vais dépasser les 150 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Cela a réduit la taille de l'image d' arrière-plan. Comme vous pouvez le constater, nous ne transmettons ici qu'une seule valeur. Cela signifie que pour les deux, l'axe va appliquer 150 pixels. Mais si je passe 200 pour YxS et que cela définit ce fichier, maintenant vous pouvez le voir, maintenant il s'applique à 150 pixels pour Xxs maintenant vous pouvez le voir, maintenant il s'applique et à 200 pixels pour YxS Vous pouvez donc contrôler différemment la taille XX et la taille YX de l'image d' arrière-plan . Comme vous pouvez le voir, la hauteur d'inclinaison de notre boîte est 800 pixels, alors passez 800. Après avoir défini ce fichier, comme vous pouvez le voir, nous augmentons la taille de l'arrière-plan dans la direction YxS Mais cette fois pour les excès de direction, je veux utiliser 100 % car pour cette largeur de boîte, nous utilisons une taille de 100 % Donc, après avoir défini ce fichier, vous pouvez maintenant voir le résultat. Maintenant, il couvre toute notre profondeur avec cette image de fond. Vous pouvez donc utiliser une unité fixe et une unité dynamique ensemble. Sinon, vous ne pouvez également utiliser que le pourcentage de cette valeur. Permettez-moi de vous en montrer quelques-unes pour dupliquer cette ligne et commenter la ligne précédente. Donc, dans les deux sens, je veux 100 % de hauteur pour cette image d'arrière-plan. Si je place ce fichier, vous pouvez voir le résultat ici. De même, si vous ne souhaitez utiliser que 30%, définissez ce fichier. Comme vous pouvez le constater, le résultat. Voici donc comment vous pouvez contrôler taille de l'image d' arrière-plan avec ces valeurs. Et maintenant je vais utiliser une valeur prédéfinie. Cette fois, je vais utiliser une valeur appelée cover. Si je configure ce fichier, vous pouvez voir le résultat. Si vous utilisez la valeur de couverture, cette image d'arrière-plan couvrira le trou en profondeur . Mais si vous remarquez, vous pouvez le voir depuis le côté droit, cela a découpé notre image. En gros, cette valeur redimensionne l'image d'arrière-plan pour couvrir l'ensemble du conteneur Même s'il faut étirer l'image ou couper un peu d' un côté de l'image. Parlons maintenant d'une autre valeur, qui est contain. Je vais dupliquer cette section et commenter la ligne précédente, et je vais remplacer cover par contain. Avant de configurer ce fichier, laissez-moi vous dire ce que cela va faire. En gros, il va redimensionner l'image d'arrière-plan pour s'assurer que l'image est entièrement visible Donc, si je définis ce fichier, vous pouvez maintenant voir que notre image est complètement visible. Et selon le ratio de l'image, comme vous pouvez le voir, notre partie inférieure n' est pas couverte par cette image. Il s'agit donc de l'utilisation de la propriété de taille d' arrière-plan. J'espère que c'est clair pour toi maintenant. C'est donc tout pour ce tutoriel. Dans le prochain tutoriel, nous allons en apprendre davantage sur l'origine de l'arrière-plan CSS. Merci donc d'avoir regardé cette vidéo, State. 34. Tutoriel sur l'origine de fond CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce didacticiel, nous allons apprendre la propriété d'origine de l' arrière-plan. Voyons maintenant quelles sont valeurs fournies par l'origine de l'arrière-plan. Ce sont donc toutes des valeurs que nous pouvons utiliser dans notre propriété d'origine d' arrière-plan, de remplissage, zone de bordure, boîte de contenu. Maintenant, vous vous demandez peut-être, qu'est-ce que cela signifie ? Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Permettez-moi donc de vous expliquer en termes pratiques. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code vis Studio et mon navigateur en utilisant l'extension de serveur if. Et là, j'ouvre un document stable nommé index point t. Donc, si vous remarquez dans cette case D, nous avons fixé à 60 % De plus, nous avons défini la hauteur, 800 pixels, avec cela, Hero utilise un rembourrage Rembourrage de 30 pixels de chacune des directions. De plus, nous avons une bordure de trois pixels, mais je vais la faire de 20 pixels. Et je vais configurer ce fichier. Et sa taille d'arrière-plan définie de 200 pixels utilise également la propriété d'arrière-plan comme ligne unique. Utilisons donc la propriété d'origine d'arrière-plan. Origine de fond. Comme je vous l'ai dit, cette propriété comporte trois valeurs, une remplissage, une zone de bordure et une zone de contenu. La case de remplissage est le testament par défaut. Si nous utilisons une boîte de rembourrage, notre image de fond part de ce rembourrage Mais si nous utilisons une zone de contenu, une zone de contenu, pour configurer ce fichier, vous pouvez maintenant voir notre image d'arrière-plan commencer par la zone de contenu parce que nous utilisons cette valeur. Donc, si j'augmente la taille de l' arrière-plan de 500 pixels, puis que je définis ce fichier, vous pouvez voir le résultat. Notre image d'arrière-plan commence par la zone de contenu. En gros, en utilisant cette probité, nous pouvons déclarer d'où je veux commencer notre parcours Cette valeur ne fonctionne que si nous n'utilisons aucune valeur répétée. Mais si nous supprimons la valeur de non-répétition , puis que nous définissons ce fichier, vous pouvez maintenant constater, une fois de plus, qu'il part de l'organisation en place. Je vais donc utiliser No Repeat Val. Passons maintenant à la valeur suivante, qui est la boîte de remplissage. Zone de remplissage, si j'utilise cette valeur puis que je définis ce fichier, vous pouvez maintenant voir notre image d' arrière-plan commencer à partir de la zone vous pouvez maintenant voir notre image d' arrière-plan de remplissage Mais si nous utilisons une zone de bordure puis que nous définissons ce fichier, vous pouvez maintenant voir notre image légèrement bouger à l'intérieur de la bordure. Cette fois, notre image d'arrière-plan commence par la zone frontalière. Si j'utilise le style de bordure , pointez-le, puis définissez ce fichier, maintenant c'est plus clair pour vous. Nous pouvons donc commencer notre image d'arrière-plan à partir de la zone de remplissage également à partir de la zone de contenu. C'est donc l'utilisation de la propriété d'origine d' arrière-plan. J'espère que c'est clair pour toi maintenant. Merci Merci d' avoir regardé cette vidéo. 35. Tutoriel de clip de fond CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce didacticiel, nous allons découvrir un nouveau contexte lié aux propriétés, le background them. Fondamentalement, cette propriété est liée à la couleur d'arrière-plan. Cette propriété est assez similaire à notre ancienne propriété, background origi Parlons maintenant des valeurs de cette propriété. Ce sont toutes des valeurs que je vais utiliser avec le clip d' arrière-plan, la zone de remplissage, la zone de bordure et la zone de contenu. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server, et je crée déjà un document d'estimation nommé index point DML Comme d'habitude, nous avons une balise profonde avec une zone de nom d'identification, et à l'intérieur de cette balise profonde, et à l'intérieur de cette balise profonde, nous avons du contenu textuel factice Et nous personnalisons déjà ce dip-tag en utilisant sa boîte de nom d'identification, Heist, avec 60 % de hauteur, 300 pixels, et je fournis également un rembourrage de 30 pixels, dans chaque direction Avec cela, nous avons une bordure en pointillés. Commençons donc par le nom de la propriété, qui est un texte d'arrière-plan clair en arrière-plan. Voici le premier val que je vais utiliser, qui est la boîte de contenu. Contient une boîte. Si je définis ce fichier, cela ne fonctionnera pas car nous ne fournissons aucune couleur de fond à cette boîte. Je vais donc passer la couleur de fond blanche. Donc, si je définis ce fichier, maintenant vous pouvez le voir, maintenant vous pouvez voir qu'il fournit une couleur d' arrière-plan blanche à la zone de contenu uniquement. Et maintenant, je veux couvrir la zone de rembourrage avec cette couleur de fond Ensuite, je veux juste passer une boîte de rembourrage. Après avoir défini ce fichier, vous pouvez voir le résultat ici. Ainsi, si vous souhaitez couvrir la zone de bordure avec la couleur d'arrière-plan, il vous suffit de transmettre la propriété de la zone de bordure. Boîte de bordure. Si je configure ce fichier, vous pouvez voir le résultat. C'est donc l'une des utilisations de cette propriété. Permettez-moi maintenant de vous montrer un autre exemple. Nous pouvons également utiliser cette propriété avec une image de fond. Maintenant, ajoutons une image d'arrière-plan à notre balise d'en-tête. Il va taper une image d'arrière-plan. Et je vais utiliser l'URL de l'image d' arrière-plan. Nous avons une image de fleur en arrière-plan, point de fleur JPG. Si je configure ce fichier, vous pouvez voir le résultat. C'est une image de fond de fleur sur notre étiquette auditive. Maintenant, je vais utiliser la taille de police, taper la taille de police, et je vais utiliser 150 pixels. Ensuite, je vais changer la famille de polices de type famille de polices, et je vais utiliser la police Impact, impact, uniquement l'impact. Je ne veux rien d'autre, et je vais configurer ce fichier. Une fois que j'ai configuré ce fichier, il ressemble à ça. Et si vous ne voulez pas répéter votre arrière-plan, il vous suffit de n'utiliser aucune valeur de répétition. Répétition en arrière-plan, pas de répétition. Pour l'instant, j'aimerais utiliser un arrière-plan répété, puis je vais utiliser la propriété background lip. Clip d'arrière-plan Et là, je vais passer un texto. Et je vais rendre ma couleur transparente. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir qu'il conserve parfaitement l'image de fond en fonction du texte du titre. Si je réduis la taille, si je fais en sorte que ce fichier soit de 100 pixels, vous pouvez maintenant le voir bien plus beau que le précédent. Si je fais en sorte que le fond du corps soit blanc, maintenant c'est beaucoup plus visible. Et une chose que j'ai oublié de parler, à propos propriété du clip d' arrière-plan, vient avec une autre valeur , qui est le texte, et cela ne fonctionnera que sur le texte. J'espère que vous savez maintenant comment utiliser la propriété du clip d'arrière-plan. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 36. Tutoriel sur les modes de couleur CSS: Salut, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et c'est la partie la plus importante de ce tutoriel. Dans ce didacticiel, nous allons découvrir les modes colorimétriques. Ici, nous allons apprendre comment attribuer couleur à un élément en utilisant un mode différent ? Le premier mode que nous avons est le nom de la couleur. Vous pouvez utiliser n'importe quel nom de couleur, supposons rouge, jaune , bleu, gris foncé, ce que vous voulez utiliser. Ensuite, nous avons le code hexadécial, et le troisième est la valeur RGV Argv signifie rouge, vert et bleu. De la même manière, nous avons le RGBA. A représente la valeur Alpha. En utilisant la valeur A, nous pouvons contrôler la transparence de cette couleur. Et puis nous avons la valeur HSL. HSL est l'abréviation de saturation des teintes et de luminosité. Et comme pour donner de la valeur, nous avons le HSLA. A représente la valeur Alpha. Parlons maintenant de la valeur du nom de couleur, façon dont nous pouvons utiliser la valeur du nom de couleur. Ce sont donc toutes les couleurs les plus populaires en CSS que nous utilisons, rouge, vert, bleu, orange, jaune, rose, mazina, marron, tomate, Vallet, Et il existe de nombreux noms de couleurs, que je ne définis pas ici. Vous pouvez le rechercher sur des sites Web. Il vous suffit de rechercher websubclor dans votre navigateur, puis il fournira tous les noms de Parlons maintenant du mode hexadécimal. Voici un exemple de mode hexadécimal. Les codes couleur hexadécimaux commencent par le caractère has. Ensuite, nous devons passer à six jours. Comme vous pouvez le voir, nous passons ici une valeur AF 0000. Ce code couleur représente la couleur rouge. Et dans l'exemple suivant, He, nous utilisons le hashtag 0000 AF, et ce code couleur représente la couleur bleue. Si vous recherchez la couleur websp avec un code hexadécimal, vous pouvez trouver les codes hexa de n'importe quelle Notre prochain mode couleur est le RGB. R représente le rouge, G le vert et B le bleu. abord, nous devons fournir la valeur rouge, et nous devons fournir la valeur 0-255, pas moins de zéro, pas plus de 255 Et c'est ainsi que nous pouvons créer n'importe quelle couleur. Et si je passe le code couleur exact, il renverra une couleur rouge car notre valeur verte est zéro. Notre valeur bleue est également zéro. Et pour la valeur rouge, nous utilisons la valeur la plus élevée 255. C'est pourquoi il va retrouver la couleur rouge parfaite. Ne t'inquiète pas. Je vais vous montrer l' exemple avec pratiquement. La valeur suivante est HSL. HSL est l'abréviation de H pour la saturation, L pour la luminosité. Dans Hue, vous pouvez ici transmettre une valeur comprise entre zéro, deux ou 360. Si vous passez zéro, la couleur rouge reviendra. Si vous dépassez 120, couleur verte sera renvoyée et la valeur suivante, la saturation, c' est l'intensité. Vous pouvez contrôler l' intensité de la couleur à l'aide de cette valeur. Vous pouvez contrôler la luminosité de cette couleur, sinon la matité de cette couleur à l'aide de cette Et notre prochaine valeur, la luminosité, que vous contrôlez la lumière de cette couleur. Et ici, vous pouvez transmettre une valeur comprise entre zéro et cent pour cent. Ne t'inquiète pas. Je vais vous montrer l' exemple avec pratiquement. Et nos deux dernières valeurs de couleur sont RGBA et HSLA. A représente la valeur Alpha. C'est une opacité moyenne de n'importe quelle couleur. Ici, vous pouvez passer la valeur 0-1. Si vous passez une valeur nulle, votre objet sera complètement transparent. Et pour fournir une couleur complète, vous devez transmettre une valeur. Et si vous voulez appliquer 50 % de couleur, sinon 50 % de transparence, vous devez passer 0,5 Wow. Donc, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons utiliser ces modes de couleur. Comme d'habitude, j'ouvre côte à côte mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Live Server. Donc, dans un premier temps, je vais colorier notre étiquette H one, titre 1. J'utilise donc ici la propriété de couleur. Comme vous le savez, notre premier mode de couleur est le nom de la couleur. Donc, ici, je vais fournir une couleur. Par défaut, il est livré avec une couleur noire. Donc je veux de la couleur rouge. Passez le nom de la couleur ROUGE. Si vous définissez ce fichier, vous pouvez voir le rouge. n'y a rien de spécial. Et maintenant, je vais utiliser un mode couleur différent dans notre étape de description. Je vais donc utiliser ici une propriété nommée couleur de fond. Je vais donc décommenter cette ligne, et dans un premier temps, je vais utiliser un nom de couleur appelé bleu Et je vais configurer ce fichier. Comme vous pouvez le voir, après avoir passé ce nom de couleur, il remplit notre case de couleur bleue. Si vous souhaitez utiliser la couleur or, l'or doré, vous pouvez voir le résultat. Il donne la couleur dorée. Vous pouvez également rechercher n'importe quel nom de couleur. Cherchons un nom de couleur, qui commence par A. Ici, vous pouvez voir un nom de couleur vert forcé. Si j'utilise cette couleur et que je définis ce fichier, vous pouvez voir le résultat. Ici, nous pouvons utiliser des centaines de noms de couleurs. Parlons maintenant de ce second mode, qui est un code décimal xa Pour utiliser une valeur décimale xa, tapez d' abord x qu'un code a. Alors je veux la couleur bleue. Pour la couleur bleue, nous devons utiliser ce code couleur, 0000 if if. Si j'utilise cette couleur, comme vous pouvez le voir, comme vous pouvez le voir cette fois, notre boîte est remplie de bleu. Et si nous utilisons du rouge, uniquement du rouge pur, vous devez le transmettre en commençant par FF puis 0000. Si je configure ce fichier, vous pouvez voir le résultat. Et si j'utilise le bleu et le rouge ensemble, je passerais FF 00 FF. Et voici ce fichier, il va retourner en rose. Si vous connaissez la roue chromatique, vous pouvez comprendre pourquoi elle est écrite en rose. Et si j'utilise la valeur FF pour la couleur verte, nous avons maintenant six F dans notre valeur hexadécimale. Il va retrouver une couleur blanc pur, car si nous mélangeons le RGV Advance à son plein potentiel, il retrouvera une couleur blanche Donc, en utilisant cette combinaison, nous pouvons utiliser de nombreuses couleurs. Notre studio visuel fournit la palette de couleurs. Si je fais glisser notre souris et que je change la valeur, comme vous pouvez le voir, cela fournit de nombreuses versions supplémentaires de cette couleur Supposons que je veuille utiliser la couleur verte. Ce sont donc toutes des variantes de couleur verte avec la valeur hexadéciale. Ici, vous pouvez voir la valeur Disial de la tête . Si j'utilise cette couleur et que je définis ce fichier, comme vous pouvez le voir, appliquez la couleur dans notre boîte Parlons maintenant de RGV Move. Je vais donc dupliquer cette section et commenter la précédente. Et cette fois, je vais associer le RGB. Ensuite, j'ai dit que le tour utilise d'abord la valeur R pour passer la valeur R stas pour le rouge Je vais donc utiliser 255. Et pour le vert, je vais passer zéro, et pour le bleu, je vais également passer zéro. Si je définis ce fichier, il retournera une couleur rouge pur. Mais si j'utilise la valeur 255 pour le bleu, encore une fois, il renverra une couleur rose. la même manière, si je passe 255 pour le vert, la valeur renverra la couleur blanche. Si j'ouvre cette palette de couleurs , fournie par l'éditeur de code Wiser Studio, vous pouvez voir ici la valeur RGV Si je fais glisser ma souris et que je sélectionne n'importe quelle couleur, sinon, n'importe quelle variante de couleur, vous pouvez voir ici la valeur RGV Si j'utilise ce code et que je définis ce fichier, comme vous pouvez le voir, il appliquera cette couleur exacte dans notre boîte. Parlons maintenant d'un autre mode couleur, le HSL. Je vais dupliquer cette section et commenter la ligne précédente, et je vais remplacer le RGB par saturation et la luminosité Hl Hue. Pour Hue, je vais dépasser les 120 ans. C'est pour la couleur verte, et pour la saturation, je vais utiliser 50 %. De plus, pour la légèreté, je vais utiliser 50 % de lumière. Si je définis ce fichier, comme vous pouvez le voir, il renvoie la couleur verte. Et si j'augmente la valeur, si j'augmente la valeur de saturation, alors vous pouvez voir que si je l'atteins à 100 %, cela redonnera une couleur verte pure. Mais si j'augmente la valeur de luminosité, supposons que je la porte à 100 %, alors la couleur blanche sera exactement rétablie, car si j'augmente la luminosité d' une couleur, elle devient blanche. Je dois utiliser moins de 100 %. Supposons que je vais en utiliser 90, 90 %. Maintenant, vous pouvez le voir, il utilise maintenant cette couleur vert très clair. Donc, si je change de couleur en utilisant cette palette de couleurs, vous pouvez voir la valeur HSL. À partir de a, vous pouvez utiliser n'importe quelle couleur. Si vous diminuez la valeur de luminosité de cette couleur, elle fournira la version la plus foncée de cette couleur. Et maintenant je vais passer 240, valeur 240. Cette variante de couleur étoile pour bleu. Si je sous-titre ce fichier, vous pouvez maintenant voir qu'il fournit une version plus foncée de la couleur bleue. Et si je le fais à 100 %. Et voici ce dossier. De plus, si je fais de la lumière , 50 %, vous pouvez voir le résultat ici. Maintenant, il fournit une couleur bleue exacte. Parlons maintenant de la valeur Alpha. Je vais utiliser la valeur Alpha avec la valeur RGV. Donc, dupliquez cette section et commentez la ligne précédente, et ici je vais passer le RGBA Comme vous le savez, pour les premiers cheveux, vous devez transmettre la valeur de couleur rouge. Pour la couleur rouge, je vais utiliser le rouge pur 255, et pour le vert, je vais utiliser zéro. De plus, pour le bleu, je vais utiliser zéro. Mais pour Alpha, pour le moment, je vais en utiliser un. Si je définis ce fichier, comme vous pouvez le voir, il fournit une couleur rouge pur. Maintenant, je vais joindre une image d' arrière-plan à la case D. Tapez donc l'URL de l'image d'arrière-plan, et je vais fournir une image d' automne ou de fleur. Si je configure ce fichier, vous pouvez voir le résultat. Désolé, nous devons utiliser cette image d'arrière-plan dans notre balise de démarrage, et non la limite de base de données. Je vais donc supprimer cette section. Et je vais le coller dans le guide corporel . Je souhaite configurer ce fichier. Maintenant, comme vous pouvez le constater, nous ne pouvons pas voir notre image de fond à travers cette étape de blog car notre DVD est rempli de rouge et n'est Mais si je veux le rendre complètement transparent, nous devons passer la valeur zéro à Alpha. Si je le mets à zéro, définissez ce fichier. Maintenant, vous pouvez voir que notre boîte est complètement transparente. Et si je veux diminuer le transfert C, nous devons augmenter la valeur une par une. Tout d'abord, je vais utiliser 0.1. Et ceci dans ce fichier maintenant vous pouvez le voir, maintenant vous pouvez voir que notre boîte est toujours transparente, mais vous pouvez voir une couche rouge. Et de même, si j'augmente la valeur, si j'en fais cinq, et ceci dans ce fichier, comme vous pouvez le voir, couleur de notre boîte est maintenant semi-transparente. C'est ainsi que vous pouvez contrôler la transparence. Si je passe neuf valeurs et ceci dans ce fichier, vous pouvez voir le résultat. De la même manière, les valeurs Hs A fonctionnent. Je vais donc dupliquer cette ligne et commenter la précédente. Et si je passe le Hs A, pour vous, je vais utiliser 120 degrés. Et pour la saturation, je vais utiliser 100 %. De plus, pour Lightnas, je vais utiliser 50 %. Et pour Alpha Velu, je vais en utiliser un. Si je définis ce fichier, comme vous pouvez le voir, il renvoie une couleur verte pure. Mais cette fois, notre boîte n' est pas transparente. Si je le mets à zéro puis que je place ce fichier, vous pouvez maintenant le voir complètement transparent. Et si j'augmente légèrement la valeur, 0,3, puis que je définis ce fichier, il est maintenant semi-transparent C'est ainsi que vous pouvez contrôler la transparence de n'importe quelle couleur. Voilà pour ce tutoriel. J'espère que vous comprenez maintenant comment utiliser un mode différent dans notre propriété colorée. Nous apprenons également ce qu'est la transparence. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 37. Tutoriel d'arrière-plan dégradé CSS: Salut, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons en apprendre davantage sur les dégradés de couleurs. Maintenant, la question est : qu'est-ce que le dégradé ? Si vous souhaitez appliquer plusieurs couleurs dans un seul élément, vous devez dans ce cas utiliser le dégradé. Essayons maintenant de parler des différents types de dégradés CSS. Dans combien de styles pouvons-nous appliquer un dégradé de couleur. Nous pouvons appliquer le dégradé dans un style linéaire. Nous pouvons également appliquer des dégradés radiaux, et nous avons également un dégradé linéaire répétitif et des dégradés radiaux répétés Essayons d'abord de comprendre ce qu'est le gradient linéaire. Voici un exemple de gradient linéaire. Le dégradé de couleurs linéaire s'écoule d' un côté à l'autre. Il peut s'agir d'un flux de haut en bas, d'un tour à droite, d'une droite à l'autre et de bas en haut. Comme vous pouvez le voir dans notre premier exemple, en haut, Herou utilise la couleur vert foncé, mais en bas, Herrow utilise la couleur vert clair De même, dans notre deuxième exemple, sur le côté gauche, nous utilisons le jaune foncé, et sur le côté droit, nous utilisons le jaune clair. Mais dans notre troisième exemple, sur le côté droit, nous utilisons la couleur bleu foncé sur le côté gauche, nous utilisons la couleur bleu clair. Et dans notre dernier exemple, en bas, nous utilisons la couleur rose foncé, et en haut, nous utilisons la couleur rose clair. Vous pouvez également indiquer que la diagonale et l'angle sont. Parlons maintenant du dégradé radial. Voici un exemple de gradient radial. Ce style de dégradé ne va pas commencer de n'importe quel côté. Il peut être démarré par le centre, également par le bas à droite, par le bas lèvre, par un ordinateur portable, etc. Si vous remarquez le quatrième exemple, comme vous pouvez le constater, nos dégradés de couleurs commencent dans le coin supérieur. Dans le coin supérieur de la lèvre, vous pouvez voir la variante foncée de cette couleur. Et dans le coin inférieur droit, vous pouvez voir la version plus claire de cette couleur. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons postuler. Comme vous pouvez le voir, côte à côte, j'ai ouvert mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Lip Server, et j'ai déjà créé un document Sal nommé index dot a table. Comme vous l'avez remarqué, dans notre étiquette corporelle, nous avons une étiquette profonde avec du verre nommée box. Et je stylise ce dip-tag dans notre section style. Ici, nous disons 90 % de largeur, et nous disons 600 pixels de hauteur, et nous définissons également un corps plein en pixels, et notre couleur de fond est le gris Donc, comme vous pouvez le voir dans cette boîte, nous n'appliquons qu'une seule couleur, qui est le gris, mais je souhaite appliquer plusieurs couleurs à notre arrière-plan. Pour cela, nous devons utiliser des mollets dégradés. Je vais donc supprimer cette ligne et appliquer cet arrière-plan de nom de propriété. Et je veux appliquer un dégradé linéaire. Dégradé linéaire. Comme je vous l'ai dit, le dégradé de couleur linéaire fonctionne de manière directionnelle. Il peut être déplacé des genoux vers le côté droit de haut en bas et de bas en haut, également du côté droit vers le côté des lèvres. Ici, vous pouvez appliquer plusieurs couleurs autant que vous le souhaitez, mais je voudrais commencer par deux couleurs. Notre première couleur est donc le rouge, et notre deuxième couleur est le jaune. Si je configure ce fichier, vous pouvez voir le résultat. Par défaut, il se déplace de haut en bas. Il applique une couleur rouge en haut et une couleur jaune en bas. Et maintenant, je veux donner l'orientation. Je veux le diriger vers la droite. Donc, ici, je vais lier la position de départ pour passer une virgule à droite Vous pouvez voir le résultat. Cela commence du côté de la lèvre et nous le dirigeons vers le côté droit. C'est pourquoi la couleur U apparaît sur le côté droit. Et si je passe Value à lap et que je définis ce fichier. Vous pouvez maintenant le voir expédié en couleur rouge sur le côté droit. Maintenant, il se déplace de droite à gauche. Vous pouvez également changer de direction. Vous pouvez le mettre en haut, sinon en bas. Mais maintenant, je vais vous montrer comment répartir la couleur en diagonale ? Supposons que je veuille définir la direction à ce coin. Pour cela, il faut passer en bas à droite. Laissez-moi vous montrer en bas à droite. Si je configure ce fichier, vous pouvez voir l'angle. Maintenant, les couleurs partent de ce coin et entrent dans ce coin. Et c'est ainsi que vous pouvez vous asseoir en haut à droite, lèvre supérieure, sur la lèvre inférieure , comme vous le souhaitez. Non seulement cela, vous pouvez également passer un angle particulier. Je vais donc dupliquer cette ligne et commenter la ligne précédente. Et cette fois, je vais passer sous un angle particulier. Supposons que je veuille passer le 45 D. Si je définis ce fichier, vous pouvez voir le résultat. Maintenant, notre dégradé de couleurs commence à partir d'un angle de 45 degrés. Ainsi, vous pouvez faire pivoter la couleur du dégradé linéaire dans n'importe quelle direction et vous pouvez également transmettre une valeur négative. Supposons que vous passiez -45 degrés. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il est indiqué la direction du gradient linéaire. Avec cela, comme je vous l'ai dit, nous pouvons appliquer plusieurs couleurs. Nous pouvons appliquer plus de deux couleurs. Je vais donc appliquer ici une autre couleur appelée vert. Si je configure ce fichier, vous pouvez voir le résultat. En gros, vous pouvez appliquer de la couleur autant que vous le souhaitez. Si vous souhaitez appliquer une couleur bleue à une couleur verte, oui, vous pouvez simplement transmettre la valeur. Après le coma, vous devez taper en bleu. Après avoir défini ce fichier, vous pouvez voir le résultat. Et n'oubliez pas que vous pouvez saisir n'importe quel type de valeurs de couleur. Pour l'instant, nous utilisons ici des noms de couleurs, mais vous pouvez appliquer une valeur hexa RV, sinon des couleurs transparentes Permettez-moi de vous montrer l'exemple. Donc, pour dupliquer cette ligne et commenter la précédente. Et cette fois dans un premier temps, je vais supprimer cette valeur de degré, et après la couleur rouge, je veux appliquer de la couleur en mode RGB, un peu de type RG BA Comme vous le savez, la valeur A représente Alpha. Pour le rouge, je vais taper 255. Pour le vert, je vais passer zéro, et pour le bleu, je vais encore passer 255. Et pour la valeur Alpha, je vais utiliser 0,0 0,5. C'est à dire semi-transparent. Si je configure ce fichier, vous pouvez voir le résultat. Oups, il y a une erreur de frappe dans mon code. Nous devons fermer le laiton brun. Si je configure à nouveau ce fichier, vous pouvez voir le résultat. Nous avons déjà découvert les différents modes de couleur dans notre précédent tutoriel. Notre couleur est donc semi-transparente. Mais si je ne passe que zéro, définissez ce fichier. Maintenant, vous pouvez voir que notre couleur est totalement transparente. Maintenant, vous ne pouvez voir que la couleur rouge. J'espère que c'est clair pour toi maintenant. Parlons maintenant des mollets à gradient linéaire répétés. Laissez-moi vous montrer comment nous pouvons l'utiliser. Je vais donc dater cette section et commenter cette ligne, et dans un premier temps, je vais changer le nom de la valeur. Pour cela, nous devons taper repetate linear gradient, en répétant le gradient linéaire, le rate, le vert et Je souhaite configurer ce fichier. En configurant ce fichier, vous pouvez voir le résultat. Maintenant, vous vous demandez peut-être quelle est la différence entre les deux ? Vous pensez peut-être que leur processus de travail est le même, mais ce n'est pas le cas. Mais ici, nous pouvons utiliser la valeur en pourcentage avec le c. Laissez-moi vous montrer. Supposons que pour le vert, je vais appliquer 10 %. De même, pour le bleu, je vais appliquer 20 %. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir que notre dégradé de couleurs se répète. C'est ce qu'on appelle un gradient linéaire répétitif. Vous pouvez également fournir des directives. Donc, ici, on passerait à 45 degrés. Si je configure ce fichier, vous pouvez voir le résultat. Parlons maintenant de la valeur du gradient radial. Je vais dupliquer cette section et commenter la ligne précédente, et je vais supprimer cette ligne. Et en tant que valeur, cette fois je vais taper gradient radial. Et je vais commencer à manger du rouge et du jaune bicolores. Si je place ce fichier, vous pouvez voir la résine. Ici, nous ne donnons aucune direction, et c'est la position par défaut. C'est pourquoi les dégradés radiaux partent du centre. En position centrale, il commence par une couleur rouge, puis il est pulvérisé en jaune dans les coins. Vous pouvez également fournir autant de couleur que vous le souhaitez. Supposons qu'avec du rouge et du jaune, je veuille appliquer la couleur verte. Et définissez ce fichier, vous pouvez voir le résultat. Non seulement cela, vous pouvez également définir le ratio de cette couleur. Supposons que je veuille appliquer une couleur rouge à 5%. Et pour le jaune, je vais utiliser 15 %. Et pour le vert, vous pouvez prendre n'importe quelle valeur. Je vais utiliser 60 %. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez également définir la forme de ce dégradé. Vous pouvez utiliser une ellipse ou cercle. Laisse-moi te montrer. Si je définis la hauteur de ma boîte de 300 pixels et que je définis ce fichier, vous pouvez maintenant voir que notre forme de dégradé est une ellipse C'est la forme par défaut, mais je ne veux pas d'ellipse Je veux un cercle. Pour cela, vous devez taper un cercle ici. Après l'étape, comme vous pouvez le voir, ce fichier applique maintenant la forme d'un cercle. Non seulement cela, vous pouvez également définir la taille du dégradé. Et pour définir la taille, nous avons un total de quatre valeurs. Notre première valeur est le coin le plus éloigné, et voici la valeur par défaut Ensuite, nous avons le côté le plus proche. Nous avons également le coin le plus proche et notre dernière vallée est le côté le plus éloigné Je vais donc appliquer tout cela un par un. Donc, d'abord, je vais dupliquer cette ligne et commenter la ligne précédente. Et dans un premier temps, je vais supprimer ce cercle de valeurs. La première valeur que je vais utiliser , c'est close sight. Jusqu'à ce que nous devions taper un mot clé, qui est un après cela, nous devons fournir la direction. Donc, pour ce qui est de l'orientation, je vais passer 50 % et 50 %. C'est moi au centre. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, je vais déplacer ce cercle sur le côté des lèvres. Je vais donc utiliser 20 %. Si je configure ce fichier, vous pouvez voir le résultat. Notre première valeur représente la direction et notre deuxième valeur représente la direction Y xs. Et si vous souhaitez le déplacer verticalement, vous devez modifier la deuxième valeur. Supposons que je veuille le déplacer à 90 %. Si je configure ce fichier, vous pouvez voir le résultat. De la gauche, je me déplace de 20 %, et du haut, ici je me déplace de 90 %. Et pour l'instant, je vais supprimer ce pourcentage de cette couleur. Je n'en veux pas. Et je vais reconfigurer ce fichier. Maintenant, je vais appliquer un autre côté, qui est loin de ce signe. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, vous pouvez voir que notre couleur peut se déplacer de ce côté autant que possible parce que celle que nous utilisons pour ce côté, mais la position du centre reste toujours la même, soit 20 % sur 90 %. Si je le fais 50 % par 50 % à partir du x et à partir du x, si je le fais 50 % par 50 %, vous pouvez voir le résultat. La valeur suivante est le coin le plus éloigné. Si nous utilisons le coin le plus éloigné et ceci dans ce fichier, notre couleur essaie d' atteindre le coin le plus possible Après avoir défini ce fichier, vous pouvez voir le résultat. De plus, nous avons le coin le plus proche. Donc, si nous remplaçons le plus éloigné par le plus proche, et qu'ils définissent ce fichier, désolé, le côté le plus proche, pas Donc, si je le mets de côté, ils ont créé ce fichier, vous pouvez voir le résultat. Si je le déplace de 20 % par 90 % et que je définis ce fichier, c'est ainsi que cela fonctionnera le plus près. Mais si je le place dans le coin le plus proche, puis que je définis ce fichier, la couleur essaie maintenant d' atteindre le coin le plus proche. Mais si je remplace le plus proche par éloigné et que c'est ce fichier, vous pouvez voir le résultat Maintenant, il essaie d'atteindre le coin le plus éloigné. C'est ainsi que ce dégradé fonctionne ensemble, et nous devons l'expérimenter. Parlons maintenant de la dernière valeur, qui est le gradient radial répété. Encore une fois, je vais dupliquer cette section et commenter la ligne précédente. Pour l'instant, je vais tout supprimer, et je vais associer le nom de la valeur au gradient radial répétitif et au demi-deux sur cette ligne Première couleur que je vais utiliser le rouge. La deuxième couleur, je vais utiliser le jaune. Et pour la troisième couleur, je vais utiliser le vert. Pour le vert, je vais appliquer 15 %, et pour le jaune, ici je vais appliquer 10 %. Si je configure ce fichier, vous pouvez voir le résultat. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons parler d' une autre propriété du gradient, qui est le gradient conique Merci donc d'avoir regardé cette vidéo. Restez à l'affût. 38. Tutoriel de fond de dégradé CSS: Contente de vous voir, les gars. Dans ce didacticiel, nous allons parler d' une nouvelle propriété de gradient, qui est le gradient conique Maintenant, vous pouvez savoir de quel type de dégradé il s'agit ? Un dégradé conique est un dégradé avec transition de couleur, pivoté autour du pot central Pour créer un dégradé conique, vous devez définir au moins deux couleurs. Définissons maintenant le gradient conique. Supprimons donc la couleur d'arrière-plan, et ici je vais utiliser une autre propriété, qui est l'image de fond. Et je vais appliquer un dégradé conique. Dégradé conique. Ensuite, nous devons utiliser du laiton rond. Dans un premier temps, je vais appliquer un dégradé conique à trois couleurs. Au début, je vais passer le rouge, et notre deuxième couleur est le jaune, et la troisième est le vert. Si je configure ce fichier, vous pouvez voir le résultat. Il s'agit d'un dégradé conique à trois couleurs. Maintenant, je vais appliquer deux autres couleurs. Ensuite, je vais appliquer le bleu et le noir. Si je sous-titre ce fichier, voici à quoi il ressemble. Non seulement cela, vous pouvez également définir le degré. Vous pouvez également définir le degré pour chaque couleur. Laisse-moi te montrer. Je vais donc dupliquer cette ligne et commenter la ligne précédente. Et je vais introduire deux couleurs. Supposons que pour la couleur rouge, je souhaite appliquer 90 degrés. Pour la couleur jaune, je veux également appliquer 90 degrés. Et pour la couleur verte, je vais appliquer 180 degrés. Si je sous-titre ce fichier, vous pouvez voir le résultat. Donc, comme vous pouvez le voir, combinez-le à 360 degrés. Créons maintenant un graphique à secteurs avec cela. Si je tape rayon de bordure, rayon de bordure 50 %, puis que je sous-traite ce fichier, il se transformera en graphique Pi. Non seulement cela, vous pouvez également spécifier l' angle de départ de cette couleur. Laisse-moi te montrer. Encore une fois, je vais dupliquer cette section et commenter la ligne précédente, et cette fois, je vais utiliser uniquement deux couleurs. Et aussi, je vais révoquer ces valeurs degrés. Et je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, nos couleurs partent de cette ligne d'état, de cet angle. Mais nous pouvons faire pivoter ce gradient. Laissez-moi vous montrer comment faire. Maintenant, je vais passer de 90 degrés. Si je place ce fichier, vous pouvez voir la résine. Nous le faisons pivoter jusqu'à 90 degrés. Si je passe les 45 ans, vous pouvez voir le résultat. Vous faites maintenant pivoter cet angle de 45 degrés. Non seulement cela, vous pouvez également modifier cette position centrale. Laissez-moi vous montrer comment faire. Encore une fois, je vais dupliquer cette section et commenter la ligne précédente. Et cette fois, je vais changer de position. Donc, ici, nous allons taper à 60 % à partir de XX et à partir de YxS, je vais utiliser 45 Si je configure ce fichier, vous pouvez voir le résultat. Voici donc comment nous pouvons utiliser un dégradé de couleur conique. En outre, il est livré avec une autre valeur, qui est un gradient conique répété Encore une fois, je vais dupliquer cette ligne et commenter la ligne précédente. Et cette fois, je vais appliquer un dégradé conique répétitif Je pense qu'il y a une faute d' orthographe répète le dégradé conique, et je vais appliquer à deux couleurs le rouge, 10 % et le jaune, 20 % Si je configure ce fichier, vous pouvez voir le résultat. Il s'agit donc de la nouvelle propriété de dégradé de couleur en CSS. Si vous voulez l'explorer, vous devez l'essayer vous-même. C'est donc tout pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 39. Tutoriel CSS Opacity: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons découvrir la nouvelle propriété d'ACS nommée opacity En gros, nous utilisons l'opacité pour rendre transparent n'importe quel élément ML. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon code Visual Studio et mon navigateur en utilisant l'extension Lip Server, et je crée déjà un document TML nommé index point TML Si vous avez écrit, vous pouvez voir nous avons un tag DIP et que nous avons également défini une boîte d'identification. Et à l'intérieur de ce DIP tag, nous avons une image, une oreille à taguer et un paragraphe. Et maintenant, je vais utiliser la propriété Opacity dans notre balise box. Donc, tapez le héros Opacity. Et ici, nous devons passer la valeur 0-1. Supposons que je passe 0,5. C'est à dire semi-transparent. Si je place ce fichier, vous pouvez voir le résultat ici. Maintenant, toute notre section d'immersion devient semi-transparente, et si vous la rendez totalement transparente, il vous suffit de réduire la valeur, 0,0. Sinon, directement zéro. Si je règle ce cinq, comme vous pouvez le voir, notre élément DIP n'est plus visible. Il est désormais totalement transparent. Et si vous voulez le rendre entièrement visible, vous devez en transmettre un ici. Si j'ai défini ce fichier, c'est la raison. Dans notre précédent tutoriel, nous avons découvert la valeur alpha du transfert de couleurs RGVAclor Cela va rendre nos couleurs d'arrière-plan transparentes. Mais si nous utilisons la propriété d'opacité, tout le contenu sera transparent, tout le contenu de cet élément de boîte Cela va rendre transparent l'image, le texte, tout. Maintenant, si vous souhaitez rendre cette image particulièrement transparente, il vous suffit d'utiliser la propriété d'opacité dans votre balise d'image Donc, dans la balise d'image, je vais taper Opacity, et je veux la rendre semi-transparente Je vais donc passer la 0,3. Si je configure ce fichier, vous pouvez voir le résultat. En gros, il n'y a rien de tel dans cette propriété, mais c'est une propriété très utile. C'est donc tout pour ce tutoriel. Merci d'avoir regardé cette statuette vidéo pour le prochain tutoriel 40. Mélange de fond CSS et mélange mixte: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec une nouvelle propriété CSS liée au tutoriel. Et dans ce didacticiel, nous allons découvrir une nouvelle propriété CSS, mode de fusion en arrière-plan. Maintenant, la question est : qu'est-ce que cela signifie ? Supposons que vous utilisiez en même temps une couleur d'arrière-plan dégradée, également une image d'arrière-plan, et que vous décidiez maintenant de mélanger les deux arrière-plans. Vous souhaitez mélanger l'image avec la couleur d'arrière-plan, et vous pouvez créer un effet différent avec elle. Et cela est possible grâce cette propriété, le mode de fusion d'arrière-plan Et ce sont toutes les valeurs du mode de fusion d' arrière-plan CSS, bord coloré normal, la teinte, le multiple, bun de couleurs, la couleur, l'écran, la lumière dure, la saturation, la superposition de lumière douce, etc. Arrêtons donc le côté pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Results Studio et mon navigateur en utilisant l'extension Lip Server, et je crée déjà un document ML nommé index point TML Si vous remarquez, vous pouvez voir que nous avons une balise Deep dans ce document. Et ici, nous utilisons dégradé de couleur de fond pour cette balise DIP avec la couleur d'arrière-plan dégradée, et maintenant je vais mettre une image avec cet arrière-plan. Pour cela, je vais utiliser la propriété de l'image d' arrière-plan, l'image du tableau de bord de fond. Donc ici, après la virgule, je vais utiliser l'URL Ensuite, à l' intérieur des ronds, à l'intérieur des codes uniques, je vais fournir le nom de l'image, flower point JPG Si je vous montre mon répertoire de travail actuel, vous pouvez voir le nom de l'image. L'application devrait donc être Capito. Après avoir défini ce fichier, vous ne pouvez pas voir l'image car avant d'utiliser l'image de la fleur, nous utilisons ici un arrière-plan dégradé. Maintenant, l'image de la fleur est un arrière-plan PhaniGradient. Je vais donc utiliser un arrière-plan de propriété puis un mode. Contexte. Mode fade. La première valeur que je vais utiliser, c'est l'écran. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir notre image, essayer de la faire correspondre à l'arrière-plan dégradé, et cet effet sera renvoyé si nous utilisons le mode de fusion d'écran Maintenant, je vais utiliser une autre valeur, donc je vais dupliquer cette ligne et commenter la précédente, et ici je vais utiliser la superposition Si je configure ce fichier, vous pouvez voir le résultat. Encore une fois, je vais dupliquer cette ligne et utiliser une autre valeur, qui est multiple. Si je configure ce fichier, vous pouvez voir le résultat. Ensuite, je vais utiliser Darken. Je vais donc commencer cette ligne et commenter la précédente, et ici je vais remplacer multiplier par darken Après avoir défini ce fichier, vous pouvez voir le résultat. Ensuite, je vais utiliser la valeur de couleur. Je vais donc commenter cette ligne, et je veux remplacer le noircissement par la couleur Après avoir défini ce fichier, vous pouvez voir le résultat. À chaque fois, le résultat sera différent. Et vous devriez essayer une par une toutes ces valeurs pour obtenir un résultat différent. Et n'oubliez pas que la valeur par défaut est normale. Vous pouvez également utiliser plusieurs images. Si vous ne souhaitez pas utiliser de dégradé de couleur et que vous souhaitez fusionner deux images, oui, vous le pouvez. Il vous suffit de transmettre deux images d'arrière-plan. Ensuite, vous pouvez appliquer les mêmes modes de fusion un par un. Parlons maintenant de l' autre propriété du mode aveugle, le mode aveugle mixte La différence entre le mode mixte et le mode fusion réside dans la propriété de l'arrière-plan puis du mode, nous devons utiliser la couleur d'arrière-plan et la propriété innée de l'image d'arrière-plan de la simulation Je tiens à dire que nous devons utiliser le dégradé de couleur inné de l'image et de l'arrière-plan. Mais en mode mixte, vous pouvez utiliser l'une des propriétés linéaires de la valeur Je veux dire, supposons que vous utilisiez dégradé de couleur et que vous souhaitiez mélanger la couleur d'arrière-plan avec un texte. Sinon, vous pouvez fusionner différents éléments DV à la fois. Parlons maintenant des valeurs. Ce sont toutes des valeurs que nous pouvons utiliser dans des ambiances de marque mixtes Alors, sans perdre votre temps, passons à l'aspect pratique. Pour l'instant, je vais dupliquer cette ligne et commenter la ligne précédente. Et cette fois, je vais utiliser uniquement l'image de fond. Je souhaite supprimer le dégradé de couleur, et je vais définir ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Je vais également commenter cette ligne. Et maintenant je vais mettre un texte dans cet élément profond. Donc ici, je vais utiliser H deux balises, H deux, et à la place du titre vers le tag, je vais taper hello world. Et je vais configurer ce fichier. Et maintenant, nous devons styliser cet élément H deux. Donc, ici, je vais sélectionner H deux et dans le renfoncement de couleur, première propriété, je vais utiliser l'arrière-plan, arrière-plan, et je vais utiliser le fond de couleur rouge Tarif. La deuxième propriété, je vais utiliser ligne de texte, la ligne de texte, Salton, et je vais définir la taille de la police, et je veux la faire 55 pixels Après avoir défini ce fichier, vous pouvez voir le résultat. Et aussi, je veux le placer au milieu, donc je vais ajouter une marge en haut. En fusionnant le haut, je veux attribuer 200 pixels Si je configure ce fichier, vous pouvez voir le résultat. Et aussi, si vous souhaitez modifier le style de police, oui, vous le pouvez. Juste dans les antennes de la famille de polices Tag Font Family. Et maintenant, je souhaite appliquer la propriété du mode mix blend dans notre élément HT. Mode Mix Blend. Je vais d'abord utiliser l'écran. Si je place ce fichier, vous pouvez voir le résultat ici. Ensuite, je vais appliquer une autre valeur, qui est la superposition Après avoir configuré ce fichier, vous pouvez voir le résultat. Ensuite, je vais utiliser une autre valeur. Je vais donc commenter les deux lignes, et cette fois, je vais appliquer la différence Si je sauvegarde ce fichier, vous pourrez voir le résultat. Donc, une par une, vous pouvez essayer toutes les valeurs, et cela vous donnera un effet différent. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons en apprendre davantage sur la propriété d'affichage. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 41. Tutoriel d'affichage CSS: Bonjour, les gars, c'est bon de vous voir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons apprendre une nouvelle propriété appelée display. La propriété display spécifie le comportement d'affichage d'un élément. Permettez-moi de le simplifier. La propriété display en CSS indique comment un élément d'estimation doit être affiché sur la page Web. Il définit le type de boîte de rendu utilisée pour l'élément, qui affecte sa disposition et positionnement par rapport aux autres éléments. Parlons maintenant des valeurs de cette propriété. Ce sont toutes les valeurs de cette propriété. Ici, vous pouvez voir que nous avons un total de 21 valeurs. Et dans ce didacticiel, je vais aborder ces cinq valeurs, non intégré, le bloc intégré et le dernier élément Et je crée une section plus sûre pour ces quatre valeurs, flax GET, inland flax et inland read. Alors ne t'inquiète pas pour ça. Dans notre prochain tutoriel, nous allons en apprendre davantage à ce sujet, et nous allons apprendre valeurs liées aux tables dans nos prochains didacticiels. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon code Visual Studio et mon navigateur en utilisant l'extension Live Server, et je crée déjà un document ML, nommé index point HTML. Donc, dans notre body tag, nous avons une liste d'objets non vendus, et dans cette liste, nous avons un total de cinq éléments de liste Nous allons donc commencer notre voyage avec dispbity. Donc, dans cette balise de vignette, je vais d'abord sélectionner H one tag, H one. Ensuite, à l'intérieur du Calverse, je vais utiliser l'affichage des tablettes Premier val que je vais utiliser, qui est Nun. En gros, Nun Value était utilisée pour masquer l'élément, NONE. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant le voir masquer le tag H one sur cette page. Si vous utilisez la valeur nun, l'élément sera complètement supprimé De même, si vous souhaitez masquer la liste ci-dessous, il vous suffit de créer un lien. abord, vous devez sélectionner cet élément, L, L, puis dans les versets de la voiture. Encore une fois, vous devez utiliser Display Probilty Display None. Si je définis ce fichier, comme vous pouvez le voir, il n'y a pas de liste de nœuds dans cette page Maintenant, il est complètement vide. N'oubliez pas que cet élément et balises sont toujours disponibles sur notre page. Juste aucune propriété, masquez cet élément. Si je sélectionne ce document et appuie sur la touche Ctrl, vous pouvez voir le résultat. Vous pouvez voir ici toutes les balises li. Vous pouvez également voir la balise d'en-tête. C'est une valeur très utile. Pourquoi ne pas utiliser Hort Efect sinon animation, ils n'utilisent jamais cette valeur Donc, pour l'instant, je vais supprimer cette valeur nn. Je n'en ai pas besoin. Parlons maintenant de notre prochaine valeur, qui est alignée. Donc, comme vous pouvez le voir, il y a une liste, et nous devons indiquer cinq éléments de liste. Et maintenant, je vais ajouter une bordure à tout cet élément de liste afin que vous puissiez comprendre clairement toutes les balises LI. Je vais donc taper AI, puis à l'intérieur du Colver, je vais ajouter une bordure Bordure d'un pixel, et je veux une bordure solide. Avec cette bordure, la couleur est rouge. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir que les éléments LI occupent toute la largeur de cet élément. Un seul objet prend toute la place. Pour l'effacer plus facilement, je vais ajouter le cadre dans notre étiquette UL Donc, pour copier cette propriété et cette valeur, je vais les coller ici, et cette fois, je vais utiliser la couleur noire ennuyée, le noir. Et je veux m'ennuyer à deux pixels. Après avoir défini ce fichier, comme vous pouvez le voir, la liste non ordonnée, consomme toute la zone, toute la zone vide. Donc, si je spécifie la largeur de cette balise maléfique, supposons qu'elle soit de 300 pixels. Définissez ensuite ce fichier. Vous pouvez maintenant voir que les éléments de notre liste consomment la largeur exacte de ce conteneur, spécifiée dans notre section de largeur de 300 pixels. Et maintenant, je veux montrer tous les éléments de la liste côte à côte. Je ne veux pas les montrer l'un en dessous de l'autre, nous devons donc afficher en ligne tous les éléments LI. Donc, à l'intérieur des articles LI, je vais utiliser la propriété d'affichage Affichage en ligne. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant le voir imprimer tous les éléments sur une seule ligne. C'est méchant côte à côte. Cette valeur intégrée est très utile pour les propriétés liées au texte, exemple la durée, les éléments de liste, etc. La plupart du temps, nous utilisons des valeurs intégrées aux balises et les coupons. Parlons maintenant de la valeur du blog. Pour cela, je vais utiliser une fausse balise span. Span. Et à l'intérieur de la balise span, je vais en taper une. Ensuite, je duplique cette balise span quatre fois. Et je vais numéroter cette balise span. Deux. Cinq. Avant de définir ce fichier, comme vous pouvez le voir, nous n' utilisons pas la propriété display pour la balise span. Donc, si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant le voir imprimer tous les éléments un par un sur une seule ligne. Si j'utilise le bloc de propriétés d'affichage, en gros, il jouera le rôle inverse de celui en ligne. Laisse-moi te montrer. Donc, si je sélectionne toutes les balises, que je fais un panoramique, puis que je passe à l'intérieur de la voiture, je vais utiliser l'affichage disboty, et je vais utiliser le bloc d'affichage Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant le voir imprimer tous les éléments sur une ligne différente. Si j'ajoute la bordure, quelqu'un pour copier cette ligne, la tester ici et définir ce fichier, vous pouvez voir le résultat. Maintenant, il joue le roll up opposé en valeur de ligne. En gros, cette troisième valeur de bloc convertit l'élément span en développement. Maintenant, ces éléments fonctionnent en tant que développement. Laisse-moi te montrer. Nous pouvons maintenant attribuer à W 300 pixels. Après avoir attribué la mauvaise herbe, vous pouvez voir le résultat. Mais quoi ? Si je supprime cette ligne, affectée par, vous pouvez maintenant voir que notre propriété With ne fonctionne pas correctement dans car span est une balise liée au texte Mais si vous utilisez le bloc de propriétés d'affichage, il le convertit, et maintenant il fonctionne comme un outil de développement. Parlons maintenant d' une autre propriété, qui est en bloc de prêt. Comme vous pouvez le voir, tous les éléments de la liste sont alignés sur une seule ligne car elle utilise la propriété en ligne, mais vous souhaitez attribuer W à cet élément Si vous utilisez une valeur intégrée, vous ne pouvez pas attribuer à ces éléments De plus, je souhaite attribuer un rembourrage et une marge dans toutes les directions. Si nous attribuons un rembourrage ou une marge, laissez-moi vous montrer un type de rembourrage de 20 pixels Si je définis ce fichier, il va attribuer un rembourrage du côté gauche au côté droit Il n'attribuera pas de rembourrage en haut et en bas. Si je configure ce fichier, vous pouvez voir le résultat. Si nous attribuons une marge à cet élément de liste, cela ne fonctionnera pas dans tous les sens. Cela ne fonctionnera que du côté gauche et du côté droit. Laisse-moi te montrer. Marge Je veux ajouter une marge de pH de cinq pixels. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, il fournit une marge de cinq pixels du côté gauche au côté droit, mais il ne fournit pas une marge de cinq pixels du haut et du bas. Pour résoudre ce problème, nous avons le bloc V intégré. Je souhaite imprimer tous les éléments sur une seule ligne Je souhaite également attribuer une marge. Ne t'inquiète pas pour cinq. Si j'augmente la largeur du navigateur, il est désormais aligné sur une seule ligne. Mais si nous utilisons la valeur lob en ligne, bloc en ligne, puis ce fichier, vous pouvez maintenant le voir fournir une marge de haut Vous pouvez maintenant le voir imprimer tous les éléments sur une seule ligne. Comme il fonctionne comme un élément de bloc. C'est pourquoi nous pouvons attribuer avec une marge, etc. Balise Span, balise LI, balises CAT, ce sont tous des éléments liés au texte. Par défaut, il ne fonctionne pas comme un accessoire. C'est pourquoi nous ne pouvons pas fournir de mauvaises herbes, de hauteur, de marge, etc. Mais nous pouvons convertir cet élément en tant que déilment en utilisant une propriété intérieure, propriété, une propriété de bloc en ligne, etc. Parlons maintenant la dernière propriété de ce didacticiel, qui est l'élément de liste. Comme vous pouvez le voir, dans notre balise span, nous utilisons un bloc d'affichage. Mais pour l'instant, je vais dupliquer cette ligne et commenter la ligne précédente. Et si nous convertissons un élément de liste, le dévaluons puis définissons ce fichier après avoir défini ce fichier, comme vous pouvez le voir, il n'y a aucun changement car l'élément de liste convertit ce stylo en éléments de liste Maintenant, cela fonctionne comme une liste d'éléments d'une balise UL. C'est assez confus. Permettez-moi de clarifier le concept par un exemple. Donc, ici, je vais créer une balise DIP. BF, et je vais attribuer un point au nom de classe, et le nom de classe est box. Et dans cette balise DIP, je vais prendre au total deux balises de paragraphe, P. Et dans cette balise de paragraphe, je vais utiliser spentag span par paragraphe, je vais utiliser un total de trois balises Spen je vais utiliser un total de trois balises Spen Je vais donc dupliquer le spentag deux fois. Voici Span One. C'est Span 2. Et voici l'envergure numéro trois. Ensuite, je vais dupliquer à nouveau toute la section. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Maintenant, je vais sélectionner toutes les balises de paragraphe contenues dans cette boîte. Donc, dans cette balise de vignette, je vais d'abord taper point BOX. Ne t'inquiète pas. Nous allons en apprendre davantage sur la sélection avancée dans notre prochain tutoriel. Pour l'instant, je vais vous montrer la boîte d'exemple, et je veux sélectionner tous les paragraphes qu'elle contient. Ensuite, à l'intérieur du Calibra, il est écrit : première propriété, je vais utiliser la couleur d' arrière-plan, la couleur de fond, je vais utiliser le bleu Propriété suivante, je vais utiliser un petit rembourrage, un rembourrage de dix pixels De plus, je vais utiliser une petite marge. Marge, 20 pixels. Enfin, je vais utiliser cette propriété. Afficher, et je veux le moins d'articles. Vous souhaitez définir ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat ici. Vous pouvez maintenant le voir fonctionner sous forme d'éléments de liste. De plus, si je commente cette section pour le moment, je n'en ai pas besoin et je vais la configurer à nouveau. Vous pouvez maintenant voir le résultat réel. Vous pouvez maintenant le voir convertir toutes les balises de paragraphe en un élément de liste. Et aussi, vous pouvez voir les points en laine. Mais vous remarquerez ici que nous n' utilisons aucune balise LI ou UL, juste pour utiliser une balise de paragraphe et une balise span, mais cela fonctionne toujours comme des éléments de liste. C'est le pouvoir du nom des éléments de liste. Et maintenant, nous pouvons appliquer toutes les propriétés des éléments de liste à ces éléments. Nous pouvons maintenant utiliser le style, la propriété de l'image, la position du style, etc. Laisse-moi te montrer. Je vais donc utiliser une propriété appelée ist tyle position. Position du style de liste. Par défaut, notre valeur est extérieure, je vais donc utiliser une valeur intérieure. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir les points de notre liste se déplacer vers l'intérieur de ce conteneur. C'est donc le pouvoir de cette valeur. Voilà pour ce tutoriel. Merci d'avoir visionné cette vidéo, restez à l'affût des prochains tutoriels. 42. Tutoriel de visibilité CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec une nouvelle thèse liée au tutoriel. Et dans ce tutoriel, nous allons découvrir une nouvelle propriété, à savoir la visibilité. Visibilité assez similaire avec la propriété Disbnun. Et ce sont toutes des valeurs liées à la propriété de visibilité, à l'effondrement caché visible. Je sais que vous connaissez déjà vidéo visible et cachée, mais la propriété de Cole fonctionnera avec les téléviseurs. Commençons donc la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ai ouvert mon éditeur de code Visal Studio et mon navigateur en utilisant l'extension Lifesaver, et j'ai déjà créé un document STL nommé Comme vous pouvez le voir dans notre balise body, nous avons une sous-liste et un paragraphe, et je vais utiliser propriété de visibilité dans notre balise de style. Donc, dans un premier temps, je vais utiliser Je vais sélectionner le tag UL. Ensuite, j'ai dit la propriété clrAssf, je vais utiliser display Vous vous demandez peut-être pourquoi j'utilise la propriété d'affichage. Laisse-moi te montrer. Valeur d'affichage et d'affichage de l' hémotype, nonne Si j'utilise display value nun puis que je définis ce fichier, comme vous pouvez le voir, je masque notre balise UL Il a complètement retiré l'étiquette UL. C'est pourquoi notre balise de paragraphe est déplacée vers le haut. Mais si je commente cette ligne et que j'utilise la visibilité, visibilité, le masquage et la densité de ce fichier. Maintenant, vous pouvez voir la différence. Comme vous pouvez le voir, cela masque notre étiquette UL, mais nous avons toujours la zone exacte dans cette section, et c'est la principale différence entre la propriété d'affichage et la propriété de visibilité. En gros, c'est très utile avec Hor Effect et les animations Parlons maintenant de notre dernière valeur, qui est le lapis. Pour cela, comme je vous l'ai dit, nous devons créer un tableau. Donc, ici, à l'intérieur de la balise body , en haut de la balise UL, je vais créer un tableau. Tableau. Et dans cette table, je vais créer deux données de table, TD. À l'intérieur du tableau, je vais d' abord créer une triple ligne PR et je vais créer un total de deux lignes de tableau Je duplique donc cette section, et à l'intérieur de cette ligne de tableau, je vais créer deux colonnes, donc tapez TD. Et ici je vais en taper une. Et je vais créer un autre tag TD. Je duplique donc cette section, et aujourd'hui je vais en taper deux. Il s'agit de la cellule numéro un, et voici la cellule numéro deux. Et je vais dupliquer toute cette section et en remplacer une par C, et deux par quatre. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le tableau, mais vous ne pouvez pas voir les cellules du tableau car ici nous n'utilisons aucune bordure. Donc, à l'intérieur de la balise du tableau, je vais utiliser une bordure. Border, et je vais utiliser Border One. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il ajoute une bordure à ce tableau. Comme vous pouvez le voir, nous avons au total deux lignes dans ce tableau et deux colonnes dans ce tableau. Et maintenant, je veux masquer la valeur des quatre colonnes de ce tableau. Pour cela, nous devons utiliser la propriété de visibilité. Je veux masquer le quatrième, donc je vais attribuer une classe à la classe T tag, et notre classe est quatre. Ensuite, vous définissez la balise de style, ramo type point quatre Ensuite, j'ai dit le Cairass. Je vais utiliser la visibilité du nom de propriété Visibilité égale à celle cachée. Si je configure ce fichier, vous pouvez voir le résultat. Après avoir défini ce fichier, comme vous pouvez le constater, il a réussi à masquer la cellule numéro quatre de ce tableau. C'est ainsi que vous pouvez masquer une cellule de ce tableau. Mais quoi ? Si vous devez masquer une ligne de ce tableau, laissez-moi vous le montrer. Supprimez donc cet exemple ou certains retirent ce verre. Ensuite, dans cette balise Tar, je vais attribuer une classe X. Vous pouvez attribuer n'importe quel nom de classe. Je vais donc sélectionner cette classe dans cette balise de style, X dans la visibilité de Cliras Cette fois, je vais utiliser cette valeur Caps. Et si je définis ce fichier, et si je définis ce fichier, cela ne fonctionne pas car ici nous n'utilisons pas Tau. Maintenant, si je définis ce fichier, vous pouvez voir le résultat. Il a réussi à surligner une ligne de ce tableau. Voici l'utilisation de cette valeur, collapse. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 43. Tutoriel de base de CSS Html: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons créer cette mise en page de base. Il s'agit d'une conception de mise en page très simple et basique, et je vais créer cette conception en utilisant les propriétés que nous avons apprises dans nos précédents tutoriels. Ici, je n'utiliserai aucune propriété CSS avancée. En gros, dans ce tutoriel, je vais résumer toutes les propriétés CSS que nous avons apprises dans nos tutoriels précédents. Comme vous pouvez le voir, dans cette mise en page, nous allons créer une section de titre, une section de menu, une section de contenu, une section barre latérale et une section de pied Commençons donc par la pratique et voyons comment utiliser les propriétés CSS de base pour créer la mise en page. Comme vous pouvez le voir, nous sommes dans mon codeateur Visual Studio nous allons essayer de créer une mise en page DML de base premier temps, je vais prendre un élément profond dans la balise body, D. Ensuite, dans cet élément de, je vais prendre au total cinq autres éléments div, Dev, et je vais le dupliquer pour le temps. Maintenant, je vais attribuer un identifiant à notre élément Deb parent, Bev ID, et je vais taper rapper Vous pouvez attribuer n'importe quel nom. Cela dépend de vous. Je vais également attribuer un identifiant à notre premier élément div, qui se trouve à l'intérieur du conteneur. Sinon, vous pouvez l'appeler rappeur. Il saisit un identifiant. Cet élément profond est destiné à la section d'en-tête, je vais attribuer un en-tête. Et dans notre deuxième élément div, je vais attribuer ID Min dans notre troisième élément div, je vais attribuer le contenu de l'identifiant. Et dans notre quatrième élément, je vais taper le mot secondaire ID. Il s'agit de la section des mots secondaires de notre cinquième élément profond. Ici, je vais attribuer un pied de page à l'identifiant Ensuite, à l'intérieur de l'élément profond de l' en-tête, je vais utiliser ici une balise head-one, H one. Ensuite, je vais taper, vous pouvez tout taper, donc pour le moment, je vais taper hello word. Sinon, vous pouvez saisir le nom de votre propre site Web. Pour l'instant, je vais taper hello world. Ensuite, je vais passer à la section du menu où je vais utiliser le tag UL. Dans la liste nodale, je vais utiliser le tag LI, I. Également dans le tag LI, je vais utiliser Cuttag Comme vous le savez, le tag NCT est utilisé pour les fuites. Tapez donc A, et dans cette balise C, nom de notre premier lien est H. Ensuite, je vais dupliquer cette section plusieurs fois et dans notre deuxième lien de menu, ici je vais taper à propos de nous. Dans notre troisième lien, ici je vais taper Galla et dans notre quatrième élément, je vais transmettre des contacts Ensuite, je vais passer à la section du contenu. Dans un premier temps, dans la section du contenu, je vais passer le titre au tag et le taper. Je vais taper la mise en page de conception de base. Disposition de conception de base. Ensuite, je vais taper dans le paragraphe factice. Donc ici j'utilise le tag P, et je vais taper euh 30 mots. Je vais également dupliquer cette section. Je passe ici deux paragraphes. Ensuite, je vais passer à la section de la barre latérale. Toujours dans cette section, je veux imprimer, je veux imprimer l'option de menu. Je copie le tag UL avec le tag LI. Ensuite, je vais le coller dans la section de la barre latérale. Ensuite, dans la section du pied de page, ici je veux taper un DammiTextoWise, vous pouvez Sinon, vous pouvez taper n'importe quel paragraphe, sinon vous pouvez créer une fuite. En gros, je vais taper mon site Web. Au copyright. 2024. Voici donc la structure TMS de base de notre site Web Et si je configure ce fichier et vous montre mon navigateur, laissez-moi vous le montrer. Maintenant, vous pouvez voir que notre site Web ressemble à ça, et cela semble très ennuyeux et inutile. Et maintenant, nous allons commencer la thèse. Commençons donc ce style par le rappeur tag. Désolé, rappeur Element. Je vais donc utiliser une balise de style dans le style de balise de tête. Ensuite, dans cette balise de style, je vais sélectionner le rappeur. Je souhaite sélectionner l'élément Dip parent et je vais utiliser le wrapper ID Vous copiez donc le nom de l'identifiant et je vais le coller ici. Ensuite, à l'intérieur de la couleur res se trouve, la première propriété que je vais utiliser border border. Je veux un pixel, une bordure solide. Avec cela, je veux une couleur noire boddblack. Je vais définir ce fichier Et je vais également attribuer du cannabis à ce contenant d'emballage, du weed, et je veux le définir avec 1 000 pixels Est-ce que ce fichier, si je vous montre mon navigateur, laissez-moi vous le montrer, il ressemble à ça. Je vais maintenant ouvrir mon site web et mon éditeur côte à côte. Ensuite, à l'intérieur du wrapper, je vais également utiliser une autre propriété appelée couleur de fond Fond et je veux définir la couleur blanche. N'oubliez pas que lorsque vous commencez à styliser votre page de tableau, vous devez commencer par le body tag. Dans un premier temps, je vais sélectionner le body tag. corps, puis à l'intérieur de la culivra, dit : je vais sélectionner la propriété de la famille de polices, la famille de polices, et je vais utiliser une police aérienne Réel. Je souhaite configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Cela change toutes les polices qui se trouvent à l'intérieur de la balise body, puis je vais attribuer une couleur d'arrière-plan à notre balise body. Génial fond de texte à l'intérieur de la balise body, puis je vais utiliser, et je vais utiliser un fond de couleur gris, gris. Je souhaite configurer ce fichier. Et ici vous pouvez voir le résultat. Et maintenant, je veux centrer cet élément profond dans cette page Web. Pour cela, je vais utiliser la propriété de marge. Laisse-moi te montrer. Donc, à l'intérieur de l'emballage, je vais taper margin. De haut en bas, je veux une marge de zéro pixel, zéro, et de gauche à droite, je veux une marge automatique. Automatique. Sous-classons le fichier et revenons au navigateur. Vous pouvez maintenant voir qu'il a correctement aligné le conteneur parent au milieu de cette page. De gauche à droite, il offre un espace égal. Et si vous remarquez, vous pouvez voir qu'il y a une marge depuis le haut, mais nous n'utilisons aucune marge entre le haut et le bas. Pour cela, insérez votre body tag, nous devons utiliser une autre propriété. Insérez donc le body tag her dans la marge de saisie. Marge, zéro. De plus, nous devons rendre la propriété du rembourrage nulle Et si je place ce fichier et que je reviens dans le navigateur, vous pouvez voir le résultat. Maintenant, nous n'avons plus d' espace depuis le haut. Et maintenant, nous allons concevoir la mise en page de l'intérieur. Revenons donc au code studio de l' utilisateur. Et maintenant, nous allons styliser la section d'en-tête. Je vais donc taper l'en-tête du hashtag. Ensuite, j'ai dit « calress Je vais utiliser une propriété appelée background, et je veux dire « couleur pourpre Crimson, je veux satisfaire. De plus, je souhaite dupliquer cette section et cette fois, cette fois, je veux définir la section du menu. Je vais taper Hateg menu. Ici, nous allons le dire couleur de fond, saumon clair. Et je veux configurer ce fichier. Et aussi, je vais utiliser la même couleur dans notre section de pied de page Je duplique donc à nouveau cette section, et cette fois, je vais sélectionner Pied Copiez donc le pied de page du nom de l'identifiant, et je vais le coller ici Nous plaçons le menu avec Footer. Et pour la barre latérale, je vais utiliser le bleu clair pour dupliquer cette section et remplacer le menu par la barre latérale Copiez le nom de l'identifiant et je vais le remplacer par Min Je veux définir ce fichier. Après avoir configuré ce fichier, si je vous montre mon navigateur, vous pouvez voir le résultat ici. Désolé, pour la section de la barre latérale, je souhaite utiliser le bleu clair Je vais donc remplacer la couleur saumon clair bleu clair. Et je vais configurer ce fichier. Après avoir défini ce fichier, ma mise en page ressemble à ça. Maintenant, dans un premier temps, je veux attribuer hauteur à notre section d'en-tête. Je vais donc taper dans la section d'en-tête, propriété height. Hauteur, et je vais attribuer une hauteur de 100 pixels, et je vais définir ce fichier. Ouvrons le navigateur et l'éditeur côte à côte. Une fois que j'ai fourni une hauteur de 100 pixels à la section d'en-tête, vous pouvez voir le résultat. Passons maintenant à l'option du menu. Ici, vous pouvez voir l' élément de menu sous forme d'élément de liste, et les éléments sont placés en dessous les uns des autres, mais je souhaite imprimer les éléments de menu en ligne Pour cela, nous devons utiliser la propriété display inline. Sinon, vous pouvez utiliser la propriété dp en ligne. Sélectionnons tous les éléments de la liste, qui se trouvent dans la balise de menu. Donc Herodotype, hashtag, menu, puis dans le menu, toutes les balises LI, puis à l'intérieur de la couleur, il est dit : «  Je vais utiliser l'affichage », et je vais utiliser «   inland gog Value Je souhaite configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Maintenant, il imprime la valeur côte à côte. Vous pouvez maintenant le voir imprimer les éléments les uns à côté des autres. Ces éléments sont maintenant organisés en ligne. En outre, il fonctionnera comme un élément de bloc. Je tiens à dire également que cela fonctionnera en tant qu'élément profond. Maintenant, ici, nous pouvons attribuer la marge de remplissage que nous voulons utiliser Je vais maintenant cibler toutes les balises Cut qui se trouvent dans le menu. Pour cela, je vais dupliquer cette section, et je vais sélectionner tous les LI dans la balise de menu, toutes les balises LI, puis dans la balise LI, je veux sélectionner toutes les balises NGA Ensuite, je vais utiliser la propriété dis just block. Je souhaite configurer ce fichier. Je vais maintenant fournir un peu de rembourrage à ces réservoirs d'ancrage Pour cela, je vais utiliser la propriété de rembourrage. En rembourrant de gauche à droite, je vais passer cinq pixels et de haut en bas, je vais passer dix pixels Si je configure ce fichier, vous pouvez voir le résultat. De haut en bas, je vais passer cinq pixels et de gauche à droite, je vais passer dix pixels. Après avoir configuré ce fichier, vous pouvez voir le résultat. Je pense que cela ne suffit pas, alors je vais augmenter la valeur. De haut en bas, je vais utiliser dix pixels et de gauche à droite, je vais utiliser 15 pixels. Après avoir configuré ce fichier, vous pouvez voir le résultat. Et maintenant, nous devons fournir de la largeur à cette zone de contenu. Nous devons également donner du poids à cette zone latérale. Comme vous le savez, la largeur totale de ce continu est de 1 000 pixels Donc, pour la zone de contenu, je vais utiliser 800 pixels, et pour la zone de barre latérale, je vais utiliser 200 pixels Donc, dans un premier temps, nous devons sélectionner la zone de contenu à l'aide de sa police DNameHzta. Ensuite, à l'intérieur des calibres, je vais attribuer du blé. Déchets, 800 pixels. Alors, dans le mot secondaire ? Comme je vais l'assigner, humide. 200 pixels à l'ouest. Si je définis ce fichier, il ressemble maintenant à ça, et maintenant nous devons déplacer la section de la barre latérale sur le côté droit Pour ce faire, nous devons utiliser propriété flottante et nous la connaissons déjà. Dans la section de contenu, je vais taper float, float, it. Pour la barre latérale, je vais utiliser la propriété float wt. Je souhaite configurer ce fichier. Après avoir défini ce fichier, il ressemble à ça. Comme vous pouvez voir notre contenu déborder du conteneur, vous pouvez également voir notre balise en bas de page, notre section de pied de page sous la section de la Maintenant, si vous vous en souvenez, dans nos didacticiels sur les flots flottants, nous allons découvrir une autre propriété nommée clear. Dans notre barre latérale d'éléments précédente, nous utilisons la propriété float. C'est pourquoi il va publier la section de pied de page sous la section de la barre latérale. Maintenant, nous devons effacer la section du pied de page. Fondamentalement, la propriété clear contrôle le flux à côté de l'élément flottant. Si j'utilise clear et que je vais utiliser clear les deux. Si je sous-titre ce fichier, vous pouvez voir le résultat. Nous avons déjà découvert cette propriété dans notre précédent tutoriel, je ne vais donc pas l' expliquer en profondeur. Maintenant, ajoutons du contenu à nos balises de paragraphe. Dans cette balise de paragraphe, encore une fois, je vais utiliser Lim. Lorem, cette fois, je veux ajouter 100 mots, et je vais faire de même pour notre prochain paragraphe Limite 100. Configurez ce fichier, vous pouvez voir le résultat. En gros, j'utilise le contenu supplémentaire pour toucher la zone de contenu, puis je vais attribuer un peu de rembourrage à notre section de pied de page Tapez donc rembourrage, et je vais utiliser le bout court. De haut en bas, je veux fournir cinq pixels et de gauche à droite, je veux fournir dix pixels. Et de gauche à droite, je vais fournir dix pixels. Configurez ce fichier, vous pouvez voir le résultat. Et si vous souhaitez déplacer ce contenu vers la droite, il vous suffit d'utiliser la propriété d'alignement du texte. Aligner le texte, à droite. Et vous devez définir ce fichier. Après avoir défini ce fichier, vous pouvez voir qu'il a déplacé le contenu sur le côté droit. Maintenant, si vous remarquez que notre section de barre latérale n' est pas très belle Donc, pour cela, je vais utiliser la propriété de hauteur minimale. Je vais également utiliser la propriété de hauteur minimale pour la zone de contenu. Je vais donc utiliser une hauteur minimale et je veux attribuer une hauteur minimale de 500 pixels. Ensuite, je vais copier cette section et utiliser la même valeur pour la section de la barre latérale, hauteur minimale, 500 pixels Si je configure ce fichier, il a maintenant l'air plutôt beau. Vous remarquerez maintenant qu'il y a un écart entre la section d'en-tête et la section minimale Cet écart est fourni par notre étiquette UL. La liste ByefulTunwal fournit cette lacune, et nous devons maintenant cibler le tag UL, qui se trouve à l'intérieur du Minutag qui se trouve Menu Hastag de type Hera Moo. Ensuite, dans définir le menu, je vais cibler le tag UL UL. Ensuite, à l'intérieur des cariverss, nous devons mettre à zéro la propriété de marge et la propriété de rembourrage Nous tapons la marge zéro. Nous devons également réduire le rembourrage à zéro. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez également voir la même chose pour la balise head-one. Il offre également une petite marge par le haut. Car nous devons le mettre à zéro. Il tape l'en-tête hastag, puis je vais sélectionner la balise H one qui se trouve à l'intérieur de la balise d'en-tête Ensuite, à l'intérieur du foie, il est dit : « Je vais taper margin property, margin zero ». De plus, je vais faire en sorte que le rembourrage soit nul. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, je veux supprimer tout le soulignement des balises d'ancrage, qui se trouvent dans le menu. Je vais sélectionner toutes les balises d'ancrage qui se trouvent dans le menu. Pour cela, nous devons utiliser la propriété de décoration de texte, la décoration de texte, aucune. Et je veux configurer ce fichier. Je souhaite également changer la couleur par défaut de cette balise d'ancrage. Par défaut, il fournit une couleur bleue, mais je veux une couleur noire pour cette police. Je vais utiliser la propriété de couleur, la couleur, le noir. Je vais configurer ce fichier. Nous devons également faire la même chose pour l' option de menu de la barre latérale Ici, je vais associer le hashtag, barre latérale, puis à l'intérieur de la barre latérale, je veux tous les cibler et les couper. Ensuite, l'intérieur du carnivore que je vais utiliser prend des propriétés décoratives Ça prend de la décoration, apprends aussi que je vais utiliser de la couleur. Couleur, je veux de la couleur noire. Je vais configurer ce fichier. Et maintenant, si vous remarquez, vous pouvez voir n' y a aucun écart entre le contenu et la barre latérale du navigateur Pour cela, je vais ajouter un petit rembourrage à cette section de contenu Passons donc à la section du contenu et je vais utiliser la propriété de remplissage Rembourrage, et je vais attribuer un rembourrage de dix pixels dans toutes les directions Avant de configurer ce fichier, je vais vous dire quelque chose. Si je définis ce fichier, cela augmentera la largeur réelle du conteneur. Parce que, comme je vous l'ai dit, si nous ajoutons du rembourrage dans toutes les directions, sinon côte à côte, cela augmentera la largeur de l'élément. Laisse-moi te montrer. Après avoir défini ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, il offre peu d'espace sur le côté gauche. Comme il offre peu d'espace sur le côté droit, notre structure d'estimation est complètement réorganisée Pour résoudre ce problème, nous devons utiliser la propriété box sizing, et nous l'avons déjà appris dans notre précédent tutoriel Taille de la boîte à cravate Hemo, et je vais utiliser la valeur de la zone de bordure. Si je configure ce fichier, vous pouvez voir le résultat. En gros, comme je vous l'ai dit, nous n'utiliserons que les propriétés que nous avons apprises dans nos précédents tutoriels. C'est pourquoi je ne vais utiliser aucune propriété avancée pour créer cette mise en page. Je n'utilise que les propriétés de base que nous avons apprises dans nos précédents tutoriels. Après avoir utilisé la taille des boîtes pour la puberté, nous pouvons ajouter autant de rembourrage que nous En gros, réduisez la zone de contenu et ajoutez le rembourrage autour de celle-ci Et maintenant, je voudrais changer l'ajout de couleur d'arrière-plan. Ici, j'utilise la couleur noire, mais je ne veux pas de couleur noire. Pour cela, je vais utiliser la couleur blanche. Je vais configurer ce fichier. Comme je vais y attribuer peu de marge. Donc, à partir du haut, je vais attribuer 40 pixels. Et à partir de la droite, je veux utiliser zéro pixel. À partir du bas, je vais également utiliser zéro pixel et à gauche, je veux attribuer 20 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Et maintenant, je veux ajouter un petit rembourrage à la section d'en-tête Ici, je vais taper attribuer le rembourrage par le haut. Je vais utiliser le rembourrage de la propriété. Haut rembourré, haut rembourré, je vais utiliser le pixel T. Je vais également réduire un peu la hauteur. Ici, je vais dépasser 80 pixels de hauteur, et je vais régler celle-ci. J'essaie juste de corriger l'alignement vertical de la balise head-one. Je vais donc augmenter le rembourrage top vedo. Je vais faire 30 pixels. Définissez ensuite à nouveau ce fichier. Je pense que 40 c'est parfait. Après avoir étudié ce dossier, vous pouvez voir le résultat. Oui, 40 c'est parfait. Ici, j'ai juste essayé de créer une mise en page de base avec cette propriété que nous avons apprise dans notre précédent tutoriel. Nous n'utilisons aucune propriété CSS avancée, et ce design n'est pas adaptatif. C'est juste un motif en tissu. Ici, nous n'appliquons aucune propriété de position. De plus, nous n' appliquons aucune animation, effet de survol, etc. car c' est la fin de la section CSS de base À partir du prochain tutoriel, nous allons passer à la section adverse. Nous allons en apprendre davantage sur la position, l'indice Z, les requêtes des médias, etc. Nous allons en apprendre davantage sur les unités, variables, les fonctions et bien d'autres choses encore. 44. Tutoriel CSS Position (absolu, relatif, fixe, collant) amélioré 90p: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons découvrir une nouvelle propriété, qui est la position CSS. En gros, cette propriété est livrée avec cinq valeurs, statique, relative , absolue, fixe et permanente. Pour utiliser correctement la valeur, nous devons utiliser certaines propriétés d' aide. Ce sont toutes des propriétés utiles que nous pouvons utiliser avec des propriétés de position. P à droite, en haut et en bas. Nous ne pouvons pas utiliser le lept et le droit ensemble, nous devons utiliser une propriété entre les deux. la même manière, de haut en bas, nous devons utiliser une propriété, et pour comprendre la position des genoux à droite et en haut et en bas, nous devons comprendre les Xs Xs et les YxS Supposons que vous souhaitiez déplacer l' élément vers la droite. Pour cela, vous devez utiliser des X, X positifs et si vous voulez le déplacer vers la gauche, dans ce cas, vous devez passer des valeurs négatives. De même, si vous fournissez une valeur Y xs positive, cela déplacera l'élément vers le bas, et si vous fournissez une valeur négative, cela déplacera l'élément vers le haut. Sans trop parler, commençons par l'aspect pratique et voyons comment nous pouvons le faire. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension if server, et je crée déjà un document d'estimation nommé index point HTML. Ainsi, comme vous pouvez le voir dans notre document d'estimation, nous avons une balise d'en-tête et deux balises de paragraphe. Et entre ces deux balises de paragraphe, nous avons une balise profonde avec ID taste, et dans notre section style, nous avons déjà mis en forme cet élément profond. Nous allons expérimenter avec la propriété de position. Dans un premier temps, je vais utiliser la valeur relative, la position relative. Position, relation. En gros, ici, je n'utilise qu'une seule propriété, la position relative, mais je n'utilise pas la valeur du haut et du bas. Si je configure ce fichier, cela ne changera rien. Laisse-moi te montrer. Après avoir séparé ce fichier, comme vous pouvez le constater, il n'y a aucune modification. Comme je vous l'ai dit plus tôt, pour utiliser la propriété position, nous devons utiliser une autre propriété de soutien. Je vais utiliser la propriété P. P et à partir des genoux, je vais le déplacer de cent pixels. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Cela déplace notre élément de 100 pixels depuis le côté gauche. De plus, je veux le déplacer par le haut. Je vais donc utiliser la propriété supérieure, les cent premiers pixels. Si je reconfigure ce fichier, vous pouvez voir le résultat. Il a déplacé l'élément à 100 pixels du haut. Position relative Déplacez l'élément de sa position exacte par rapport à l'élément. Si je passe à -100 pixels depuis le haut, puis que je définis ce fichier, vous pouvez maintenant voir le résultat C'est ainsi que fonctionne la position relative. Parlons maintenant de notre prochaine propriété qui est absolue. Dans un premier temps, je vais commenter les deux lignes, et je vais changer de position. Par rapport à l'absolu. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. En CSS, le positionnement absolu est une technique de mise en page qui permet de contrôler avec précision la position d' un élément par rapport à ses ancêtres de position les plus proches ou ceux qui le contiennent. Comme vous pouvez le voir, nous n' utilisons pas la propriété lit et top, juste pour utiliser la position absolue. Notre deuxième paragraphe, par défaut, passe derrière cet élément. Je vais maintenant utiliser la propriété top, la propriété top et la propriété lip. Son type à partir du haut, je veux attribuer 100 pixels. Si je définis ce fichier, il fonctionnera en fonction de la position absolue de cet écran. C'est la position absolue de notre fenêtre, elle va donc déplacer l'élément 100 pixels de cette position. Si je configure ce fichier, vous pouvez voir le résultat. Si je fais dix pixels et que je place ce fichier, maintenant vous pouvez voir que c'est plus clair pour vous. En gros, cela fonctionne selon l'élément Tarrant. De même, si j'essaie de le déplacer vers le haut, pour cela, je vais utiliser la valeur p, 20 pixels par tour. Désolé, 20 pixels, pas 200 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Comme je vous l'ai dit, cette position fonctionne en fonction de l'élément parent. Et comme vous pouvez le constater, dans notre cas, notre élément parent est le body tag. Tu dois juste te souvenir d'une chose. position relative fonctionne en fonction de la position exacte, mais la position absolue fonctionne en fonction de l'élément parent. Parlons maintenant de notre prochaine valeur, qui est la position fixe. Mais avant d'utiliser cette valeur, je vais dupliquer cette balise de paragraphe plusieurs fois. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir ici la barre de défilement. Si je fais défiler cette barre de défilement vers le bas, comme vous pouvez le voir, elle déplace notre élément profond avec cette barre de défilement. Mais si j'utilise une position fixe fixe, puis que je définis ce fichier, vous pouvez maintenant voir qu'il n'y a aucun changement. Mais si je fais défiler ma page vers le bas, comme vous pouvez le voir, notre élément est fixé à sa position. Notre élément ne bouge pas avec cette barre de défilement. C'est donc l'utilisation de la valeur fixe. Mais si vous utilisez une valeur absolue sinon relative, vous allez déplacer l'élément avec le défilement. Parlons maintenant de la valeur suivante, qui est celle du blocage. Mais avant, encore une fois, je vais dupliquer ce paragraphe plusieurs fois et définir ce fichier. Ensuite, je vais utiliser maintien de position et je vais définir ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Maintenant, vous pouvez voir avant l'élément, nous devons indiquer quatre paragraphes. J'utilise également la propriété éclairée du haut Pour l'instant, je vais modifier les valeurs. À partir du haut, je veux le coller de 50 pixels et à partir des genoux, je vais aussi le coller de 50 pixels, et je vais configurer ce fichier. Après avoir défini ce fichier, si je fais défiler cette page vers le bas, comme vous pouvez le voir, les éléments restent à la position exacte. Que mentionnons-nous dans notre section style, top 50 et le 50e tour Si j'essaie de faire défiler ma page vers le bas, comme vous pouvez le voir, elle ne bouge pas. La propriété position sticky en CSS est une position hybride entre position relative et position fixe. Jusqu'à ce qu'il obtienne la position de défilement spécifiée, que mentionnez-vous en utilisant les propriétés top et lip, il se comporte comme une position relative et fois atteint la position de défilement, il devient fixe Ce comportement est particulièrement utile pour créer des éléments tels que l' en-tête, la barre latérale et le pied Désolé, pas le pied de page. Nous ne l'utilisons pas comme pied de page. En gros, nous l'utilisons pour l'en-tête et la barre latérale. Chaque fois que les utilisateurs font défiler la page vers le bas, nous devons parfois coller la barre latérale et la section d'en-tête dans notre zone de point de vue. C'est pourquoi nous devons utiliser le sticker de position. Je vais maintenant vous montrer comment utiliser conjointement la valeur absolue et la valeur relative. Dans un premier temps, je vais effacer tous les éléments de notre body tag. Je vais tout supprimer. Donc pour l'instant, notre corps est complètement noir. Au début, à l'intérieur de la balise body, je vais l'attribuer à la balise de paragraphe en utilisant P, et je veux du texte factice 200 plus bas. Ensuite, après ce paragraphe, je vais créer une balise profonde et je veux attribuer une zone de nom de classe. Ensuite, à l'intérieur de cette balise profonde, je vais créer une balise profonde, case B point deux. Et maintenant, dans un premier temps, je vais styliser cet élément box def. S'agit-il d'une balise de style, je vais taper point box. Ensuite, à l'intérieur des couleurs, je vais d'abord attribuer une largeur de 500 pixels. Et aussi, je vais attribuer une hauteur, une hauteur de 500 pixels. Ensuite, je vais attribuer une couleur de fond. Contexte. Jaune, sinon, couleur rouge. Je vais configurer ce fichier. Donc, pour définir ce fichier, comme vous pouvez le voir, c'est notre élément profond, et c'est un élément profond parent Ensuite, je vais styliser l'élément box two, tot, box two. Ensuite, j'ai réglé les voitures. Première propriété, je vais utiliser W W 100 pixels. Ensuite, je vais utiliser la hauteur, hauteur 100 pixels et la couleur de fond est le rose. Mais je vais utiliser la propriété position, la position absolue. Et à partir du haut, je veux 50 pixels. Et au labo, je veux 50 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Comme je vous l'ai dit plus tôt, positionnement absolu fonctionne en fonction l'élément DIP parent, sinon, en fonction de l' élément parent, mais vous pouvez voir cela ne fonctionne pas en fonction de celui-ci. Pour résoudre ce problème, nous devons utiliser la propriété position dans notre élément box dip. Je vais taper position et nous devons rendre notre position relative. Si je définis ce fichier, il fonctionne maintenant en fonction de l'élément parent exact. Maintenant, si je déplace notre élément parent vers la gauche et vers la droite, il déplacera l'élément enfant en fonction de l'élément parentb. Laisse-moi te montrer. Du haut, je veux le déplacer de 100 pixels. Et depuis le labo, je veux le déplacer de 200 pixels. Après avoir défini ce fichier, vous pouvez voir le résultat. Il s'agit donc d'une position relative et d'une position absolue qui fonctionnent ensemble. N'oubliez pas que le positionnement absolu fonctionne en fonction de l'élément relatif immédiat. J'espère donc que vous comprenez maintenant comment fonctionne le positionnement en CSS. Merci donc d' avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 45. CSS Zindex: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons en apprendre davantage sur l'index CSS Z. Une propriété d'index dépend de la propriété de position du CSS. Et si vous n'utilisez pas la propriété position, vous ne pouvez pas utiliser la propriété d'index Z. Essayons donc de comprendre comment nous pouvons utiliser cette propriété. Je sais que vous connaissez déjà les Xxs et les YXs. direction verticale représente xs et la direction horizontale représente l'axe X. Essayons maintenant de comprendre ce qu'est l'indice Z. Sans Xxs et Yaxs, nous avons un autre axe, connu sous le nom de Zixis C'est assez similaire à l'ordre des piles. Comprenons-le avec cette image. Comme vous pouvez le voir, nous avons un élément à trois div, Di A, B et C. C'est le principal, abord nous créons Di A, puis nous créons D B et enfin nous créons profond C. C'est pourquoi il suit cet ordre, B est au-dessus de l'élément A et C est au-dessus de l'élément B. Et en utilisant la propriété position, nous l'organisons de cette façon, et maintenant je veux placer B au-dessus de B. Sinon, si je veux l'amener au-dessus de, dans ce cas, nous devons utiliser l'index Z. En une phrase, il peut contrôler l'ordre d'empilement des éléments positionnés sur une page Donc, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l' utiliser dans la pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Lip Server, et je crée déjà un document TML nommé index point HTML Ainsi, dans notre body tag, nous avons au total trois dim Db A, D B et deep C. De plus, nous attribuons ici un ID, une case un, une case deux et une case trois Et si je vous montre ma section style, comme vous pouvez le voir, dans notre body tag, nous utilisons la police Aerial. Ensuite, nous stylisons l'élément de base de données. Écoutez, nous attribuons une largeur de 200 pixels et une hauteur de 200 pixels, et nous définissons la position absolue. Ensuite, nous attribuons une bordure, une bordure pleine. Puis, une par une, nous dessinons les boîtes. Comme vous pouvez le voir, dans nos boîtes, Harrow utilise une couleur vert foncé De plus, nous définissons la position à partir du haut et du couvercle. En partant du haut, nous attribuons 100 pixels et à partir de p, nous attribuons 50 pixels. Ensuite, dans notre deuxième case, en partant du haut, nous attribuons 150 pixels et depuis le laboratoire, nous attribuons 100 pixels. Et dans notre deuxième case, nous attribuons 200 pixels à partir du haut et 150 pixels à partir du lit. Donc, en gros, je veux dire que nous disons trois positions différentes pour les trois éléments différents. Et comme je vous l'ai dit, nous devons utiliser la propriété position pour utiliser l'index Z. C'est pourquoi pour tous nos D, nous utilisons la position absolue. Et maintenant je vais utiliser la propriété d'index Z. Supposons que je veuille déplacer B au-dessus du. Pour cela, dans notre encadré deux, je vais utiliser la propriété d'index Z, l'index Z, et ici, je vais en transmettre une. Par défaut, la valeur de l'indice Z est automatique. Et si je place ce fichier, comme vous pouvez le voir, il déplace l'élément B au-dessus du R. De même, si vous voulez montrer A au-dessus du, pour cela, vous devez utiliser le même index Z. Je vais donc copier cet index Z et le supprimer. Ensuite, insérez la case, je vais la coller ici. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il déplace un élément au-dessus du R. Non seulement cela, mais vous pouvez également utiliser la valeur de l'indice Z en moins. Laisse-moi te montrer. Pour cela, je vais commenter cette ligne. Ensuite, dans notre deuxième boîte, encore une fois, je vais utiliser l'index Z. L'indice moins un. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, vous pouvez le voir, il s'est déplacé en ligne derrière le A et le C. Maintenant, je vais créer une autre boîte. Je vais donc faire en sorte que nous obtenions cette section et C avec B. Et je veux aussi changer l'identifiant, la case d'appel 4. De plus, nous devons utiliser le CSS pour cet élément Je vais donc dupliquer cette section et remplacer trois par quatre, et nous devons le positionner. Je vais donc modifier la valeur supérieure de l'étiquette Ici, je vais passer 250, et je vais également augmenter la valeur superposée, qui est de 200 Ensuite, je vais changer la couleur et la couleur orange qu'elle fixera. Et maintenant je vais configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Je vais maintenant commenter l'index Z de la boîte deux. Si je définis ce fichier, vous pouvez voir cet ordre de pile. Et maintenant, je veux placer A au-dessus du. Donc, dans notre boîte 1, je vais utiliser Zain dx one, et je vais configurer ce fichier Après avoir défini ce fichier, vous pouvez voir le résultat. Et maintenant, je veux placer B au-dessus du A. Pour cela, nous devons utiliser la propriété d'index Z. Valeur d'indice Z deux. Si je passe la valeur deux de l'index Z et que je définis ce fichier, vous pouvez voir le résultat. la même manière, je veux placer C au-dessus du A et du B. Pour cela, encore une fois, je vais utiliser propriété d'index Z et je vais passer la valeur trois de l'indice Z. Si j'ai configuré ce fichier, vous pouvez voir le résultat. De plus, je voudrais brnt la case 4 au-dessus du A B C. Donc, ici, je vais passer à la vidéo 4 de l'index Z Si je sous-titre ce fichier, vous pouvez voir le résultat. Voici donc comment vous pouvez organiser l'élément en utilisant la propriété d'index Z. J'espère que vous comprenez maintenant comment fonctionne l'indice Z. C'est donc tout pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 46. Tutoriel sur les requêtes médias CSS: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons apprendre une nouvelle propriété, qui est la requête multimédia. Fondamentalement, la requête multimédia est utilisée pour créer différents SS pour différentes plates-formes. Et si je parle des types de médias, ce sont tous des types de médias. Et ici, nous avons quatre types de médias, tous imprimés, écrans et vocaux, et tous les types de supports fonctionneront pour tout, ils fonctionneront pour l'impression, sérigraphie et la parole ensemble. Supposons que quelqu'un ait essayé d'imprimer votre site Web. Et à l'aide d'un support de type impression, vous pouvez contrôler le style d'impression de votre impression. Je tiens à dire que vous pouvez créer du CSS séparément à des fins d'impression, et le type de support le plus couramment utilisé est l'écran. Écran minimum, écran mobile, écran d' ordinateur, écran de tablette. Tous ces écrans d'appareils ont une résolution différente. Et pour que notre page web soit parfaitement responsive, nous devons suivre tous ces principes. Je tiens à dire que nous devons créer une audace différente pour l'écran mobile, l'écran d' ordinateur portable, sinon l'écran de la tablette Et le dernier est le discours de type multimédia. Les personnes aveugles ne peuvent pas lire nos pages Web. Ils utilisent donc des lecteurs d'écran et supports de type vocal pour lire le texte de votre site Web. Dans ce didacticiel en particulier, je vais me concentrer sur le type de support d'écran car le type d'écran est le plus populaire et le plus utile. Essayons maintenant de comprendre ce qu'est l'écran. Ici, vous pouvez voir le navigateur, et nous appelons le navigateur avec viewpot Pour les différents sites d'affichage, nous saisissons des différences. Supposons qu'il s'agisse d'une fenêtre et que sa résolution soit de 1920. De même, nous avons d'autres viewpots 14 40, 13 66, 1024 et 700-900 Il s'agit de la taille de fenêtre que nous utilisons le plus souvent pour les requêtes multimédia. 700-900, nous utilisons ce pot pour écran mobile. De plus, nous avons une résolution pour les téléphones bas de gamme , comprise entre 320 et 480. Pour que votre page Web soit parfaitement responsive, nous devons taper un sass différent pour toute cette résolution Voyons maintenant comment utiliser l'écran multimédia. Dans un premier temps, vous devez taper au rythme du média. Ensuite, comme vous le savez, nous allons utiliser pour l'écran. Donc, ici, vous devez taper screen. Ensuite, nous définissons ici la propriété de largeur maximale de 900 pixels. Dans une requête multimédia, nous passons ici à la condition en utilisant Qor. Le premier est l'écran et le second est la valeur que nous fournissons lors des courses en D. Cela passe par la condition où la largeur de notre écran est inférieure 900 pixels parce que nous parlons ici de largeur maximale de 900 pixels. 900 pixels, c'est le point de rupture de notre écran. Et nous pouvons créer un point d'arrêt différent pour une résolution différente pour un mobile, un ordinateur portable, pour une étiquette Voyons maintenant comment taper CSS dans cette requête multimédia. Si notre condition est vraie, si notre résolution est inférieure à 900 pixels, alors la classe de conteneur sera définie à 50 %. Voyons maintenant, sans cette condition de largeur maximale, combien d'options nous avons. Ce sont donc toutes des conditions que nous pouvons utiliser avec une requête multimédia. Comme pour la largeur maximale, nous avons une hauteur minimale, largeur minimale, une orientation, un scan, tout opin Non seulement cela, vous pouvez également utiliser largeur maximale et la largeur minimale ensemble. Et pour utiliser l'avance de conditions multiples, cela prend également en charge les opérateurs logiques et non sur moi. Supposons que vous vouliez dire CSS 600-900. Dans ce cas, vous pouvez utiliser un opérateur. Vous pouvez également utiliser l'opérateur not si vous ne souhaitez pas cibler les deux conditions. Il soutient également l'orientation, la résolution. Vous pouvez également cibler à l'aide de couleurs, etc. Donc, sans perdre votre temps précieux, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ai ouvert mon éditeur de code Serve Studio et mon navigateur en utilisant l'extension Lifesaver, et j'ai déjà créé un document estim nommé index Donc, dans notre document d'estimation, et à l'intérieur de l' étiquette corporelle, juste pour taper une étiquette auditive, il est indiqué qu'il y a des didacticiels sur les requêtes multimédia. Et ici, nous avons parlé de la couleur de fond du corps blanc et de l'antenne aérienne Heldica sensorielle de la famille éloignée Dans un premier temps, je vais vous montrer une démonstration de base du fonctionnement de l'écran multimédia. Mais avant, dans notre navigateur, je vais ouvrir section d' inspection et sélectionner cette option. Après avoir sélectionné cette option, comme vous pouvez le voir, elle fournit la largeur de la fenêtre d'affichage dans cette section R : il donne de la hauteur. À partir de là, nous pouvons contrôler la largeur de la fenêtre d'affichage Pour l'instant, la largeur de notre champ d'affichage est d'une résolution de 898. Si vous remarquez, vous pouvez voir que la couleur de fond de notre corps est le blanc. Maintenant, je veux définir une couleur d'arrière-plan différente dans une résolution différente. Pour cela, nous devons utiliser un écran multimédia. Voici donc du texte sur l'écran multimédia D. À l'intérieur des presses rondes, nous devons définir une condition. Et ici, je vais utiliser une propriété appelée vent maximal pour définir la condition. Largeur maximale maximale, deux points, 800, 800 pixels. Cela signifie que si la fenêtre w est inférieure à 800 pixels, cela déclenchera cette condition Donc, ici, je veux dire couleur de fond. abord, je vais sélectionner le tag, corps, puis à l'intérieur des carivors, sélectionner le tag body Le corps, puis l'intérieur du cardiosse. Je vais dire couleur de fond, arrière-plan, et je veux dire couleur rose. Rose. Ensuite, je vais dupliquer cette section. Cette fois, je vais dire largeur maximale, 600 pixels. Si le poids maximum est inférieur à 600 pixels, alors je vais dire couleur de fond, lisez. Et je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le constater, il n'y a aucun changement dans ma zone de vue. Il a quand même renvoyé une couleur de fond blanche car notre résolution est supérieure à 800 pixels, et maintenant je vais diminuer la largeur de cette zone d'affichage Comme vous pouvez le constater, nous réduisons largeur de cette zone d'affichage Maintenant que vous remarquez moins de 800 pixels, cela a déclenché cette condition et a indiqué que le fond était rose. Si je le réduis en dessous de 600, vous pouvez maintenant voir que notre couleur de fond devient rouge car notre résolution est maintenant de 584 pixels Comme je vous l'ai dit, on les appelle des points d'arrêt. Nous avons d'abord dit point d'arrêt à 800 pixels, puis nous avons dit point d'arrêt à 600 Maintenant, vous avez peut-être une question. Qu'est-ce que cela signifie ? À quoi sert réellement le produit ? Supposons que vous utilisiez une tablette et la résolution de votre écran soit supérieure à 800 pixels. Ensuite, vous pouvez voir que la couleur du corps de votre site Web est blanche. Et si vous utilisez la résolution d'écran 800-600, dans ce cas, sur votre mobile, vous pouvez voir que la couleur de votre arrière-plan est cochon Et si la résolution de votre appareil est inférieure à 600 pixels, dans ce cas, vous pouvez voir des différences. Maintenant, son arrière-plan devient rouge. Ajoutons maintenant un autre point d'arrêt. Je vais donc dupliquer cette section, et cette fois, je vais parler de point d'arrêt à 400 pixels Mais cette fois, je ne vais pas changer la couleur de fond. Ici, je vais utiliser une propriété différente. Je souhaite modifier la taille de police. Taille de police, et je veux qu'elle soit de 12 pixels. Et je veux configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le constater, il n'y a aucun changement car notre résolution d'écran est supérieure à 400 pixels. Mais si je diminue la résolution de l' écran, vous pouvez maintenant voir que cela a changé la taille de la police. Maintenant, la police de caractères est de 12 pixels. Et si je l'augmente, vous pouvez maintenant voir qu'il a augmenté la taille de la police. C'est ainsi que fonctionne la requête multimédia. Je vais maintenant ouvrir mon projet précédent, qui est une conception de mise en page TML de base Ainsi, dans notre précédent tutoriel, nous avons créé ce projet, appelé mise en page de conception TML de base Cette mise en page de conception TM n' est pas réactive. Nous n'utilisons aucune requête multimédia pour le rendre responsive. Si je réduis la résolution du navigateur, comme vous pouvez le constater, il n'y a pas de point de rupture et notre site Web est partiellement visible. Et vous pouvez également voir la barre de défilement horizontale. Et maintenant, je veux le rendre réactif en utilisant une requête multimédia. Si nous ne le rendons pas responsive, si quelqu'un essaie de l' ouvrir sur son téléphone portable, sinon sur sa tablette, dans ce cas, il doit utiliser la barre de défilement pour afficher cette Je vais donc utiliser une requête multimédia pour le rendre réactif. Revenons donc au code d'un studio. Dans un premier temps, je vais créer une requête multimédia pour le rappeur. Comme vous pouvez le voir dans notre section consacrée aux rappeurs, le voici avec 1 000 pixels. Donc, ici, je vais créer une requête multimédia. À la lecture, à l'écran multimédia et à l'intérieur de la ceinture, vous devez indiquer la condition Et là, je vais dire que c'est la largeur maximale. Largeur maximale maximale, Colon, et je dirais 1 000 pixels. Supposons qu'il y en ait plus de 1 000, soit 1020. Alors je veux changer de rappeur avec. Donc, dans cette section, j'ai défini le wrapper, cette balise. Copiez cette section et enveloppe d'hémorrotype l'enveloppe d'hémorrotype à l'intérieur de la carirasse avec laquelle je vais installer, et je vais configurer le rappeur avec 800 pixels Ensuite, je vais dupliquer cette section. Et cette fois, si notre point d'arrêt est 810, 800, dix, alors je vais faire en sorte que la largeur du rappeur soit 500 Je vais également créer un autre point d'arrêt. Je vais donc dupliquer cette section, et cette fois je vais dire « largeur maximale 510 », puis je vais dire « largeur du rappeur à ». Si j'utilise autovalu , cela prendra la largeur exacte de cette résolution Passons maintenant au sous-fichier et revenons au navigateur. Et maintenant je vais essayer de réduire la largeur du navigateur. Donc, si j'essaie de réduire la largeur du navigateur, comme vous pouvez le voir, cela active d'abord ce point d'arrêt Maintenant, notre navigateur mesure moins de mille et 20 pixels, et si je le réduis davantage, il est maintenant actif, ce point d'arrêt Maintenant, la taille de notre navigateur est inférieure à 810 pixels et sa largeur d'emballage est de 500 pixels Et si je le réduis davantage, moins de 510 pixels, vous pouvez maintenant voir que la largeur de notre emballage est égale à celle notre panneau d'affichage, car ici nous utilisons la valeur automatique Vous remarquerez maintenant que notre goût déborde de ce contenant, car à l'intérieur de cette immersion rapide, nous avons un élément profond où nous utilisons une hauteur et une largeur fixes C'est pourquoi vous pouvez voir la barre de défilement horizontale. En gros, notre objectif est de masquer cette barre de défilement. Maintenant, laissez-moi vous montrer la section du contenu. Comme vous pouvez le voir dans notre section de contenu, l' utilisation de Hero a été fixée à 800 pixels. Dans notre section de requêtes médias, nous devons donc contrôler le contenu avec. Je vais donc copier le sélecteur contenu, puis revenir à notre premier point d'arrêt Ensuite, je vais sélectionner la partie du contenu. Ensuite, au lieu de cela , je vais le dire avec une valeur avec, et je vais utiliser une valeur en pourcentage Je vais en utiliser 80 %. De la même manière, nous devons gérer la section de fraise latérale. Si je vous montre ma section de barre latérale, comme vous pouvez le voir, elle a utilisé un correctif de 200 pixels Je vais donc copier le sélecteur de barre latérale. Ensuite, dans notre premier point d'arrêt, je vais définir la barre latérale à l'intérieur de la résine Cari, que je vais utiliser Et ici, je vais prendre 20 %. Restons-en en dessous de 20 % parce que nous avons du rembourrage, des bordures, etc. Donc ici, je vais prendre 18 %. Maintenant, configurons le fichier et revenons au navigateur. Et cette fois, je vais ouvrir la section console, et je vais sélectionner le L. Comme vous pouvez le voir, maintenant notre navigateur en compte 3 080 Si je réduis la largeur du navigateur et que je la place en dessous de 1020, vous pouvez maintenant voir notre navigateur Ws 1002 Et cette condition correspond à notre premier point d'arrêt. C'est pourquoi il a réduit la largeur de l'emballage. Comme il a défini une nouvelle largeur pour notre section de contenu, également dans notre section de barre latérale De plus, nous devons gérer la section de contenu et la section barre latérale pour une résolution inférieure Revenons donc au code du studio, et je vais copier ces sections. Donc, si notre résolution est inférieure à 510, je veux rendre la largeur du contenu automatique. En outre, largeur de la barre latérale Auto. Et je vais configurer ce fichier. Si je vous montre cette section de la barre latérale, vous pouvez voir ici que nous utilisons float ProptFloatr C'est pourquoi je vais utiliser la valeur de la barre latérale 100%, pas Auto. De plus, je vais utiliser le contenu à 100 %. Il fera exactement la même chose que Auto. Nous devons également supprimer le flottant de cette section de contenu et de la barre latérale. Donc ici, je vais utiliser float property, float Nun. De plus, je vais utiliser la même valeur dans notre section de barre latérale. Copiez donc la valeur, et je vais la coller ici. Et je vais configurer ce fichier. Pour configurer ce fichier, si je vous montre mon navigateur et que j'essaie de réduire la zone du port du navigateur, vous pouvez maintenant voir en dessous de 800 pixels. Notre section de barre latérale n' est pas parfaite. Revenons donc au code «   C'est le studio », et je passe à la section de l'écran multimédia. C'est notre deuxième condition. Si notre écran multimédia est inférieur à 810 pixels, cela fait 500 pixels de notre emballage Mais nous devons également gérer la section de contenu et la section de la barre latérale Je vais donc copier la même valeur avec le sélecteur. Et voilà, je vais passer à l' étape suivante. Et je vais configurer ce fichier. Si je place ce fichier et que je reviens dans mon navigateur, comme vous pouvez le voir, cela ne résoudra pas le problème. Je vais donc augmenter la largeur de la section de la barre latérale. Donc, ici, je vais le faire à 25 %. Et aussi, je vais créer une section de contenu à 75 %. Et je vais configurer ce fichier. Configurez ce fichier, si je reviens à mon navigateur, pour configurer ce fichier, comme vous pouvez le voir, il ne fonctionne toujours pas parce que je pense avoir fait une erreur. Oui, j'ai changé la valeur dans notre première condition. Nous devons modifier la valeur à cette position. Donc ici, je vais taper 75 %. Et pour SDVar, je vais utiliser 25 %. Et dans notre première condition, je vais utiliser 80 % de largeur pour notre section de contenu et 18 % de largeur pour notre section de barre latérale Et je vais configurer ce fichier. Après avoir défini ce fichier, si je reviens dans mon navigateur, vous pouvez voir qu'il résout le problème. Nous avons maintenant un autre problème à ce stade. Si vous remarquez que la hauteur de notre barre latérale est limitée. Nous devons augmenter la hauteur de cette barre latérale. Je vais donc faire près de 800 pixels. Revenons donc à l'éditeur de code. Et cette fois, je vais utiliser une autre propriété. Hauteur Si je vous montre ma hauteur précédente pour la barre SD par défaut, sa hauteur est minimale de 500 pixels. Je vais donc modifier la hauteur minimale. Je copie donc cette propriété et valeur et je reviens à la requête multimédia. Et ici, je vais passer la hauteur minimale, 900 pixels. Si je place ce fichier et que je reviens dans mon navigateur, vous pouvez maintenant voir que cela fonctionne, parfait. Cette résolution est pour tablette. Maintenant, réduisons le navigateur Weav. Maintenant, je vais faire en sorte qu'il soit inférieur à 510 pixels. Après avoir fait moins de 510 pixels, comme vous pouvez le voir, maintenant notre rappeur prend de l'herbe pour 100 personnes. Maintenant, si je fais défiler ma page vers le bas, cela augmente la hauteur de la section de notre barre latérale car dans notre état précédent, nous utilisions 900 pixels Nous devons donc ajuster la hauteur. Revenons donc au code du studio de résultat, et cette fois, je vais dire hauteur minimale dans notre barre latérale, je vais définir une hauteur minimale de 300 pixels. Et je vais configurer ce fichier. Après avoir configuré ce fichier, si je retourne dans mon navigateur, vous pouvez voir le résultat. Cela prend quand même énormément de place. Utilisons la valeur. Je vais donc faire 150 pixels. Si je vous montre également mon navigateur, nous pouvons imprimer notre option de menu cybernétique en ligne. Nous devons également aligner le texte en pied de page au milieu. Alignons donc le texte en pied de page au milieu. Revenons donc au code de Visual Studio, et je vais sélectionner l'élément de pied de page Je vais donc copier le pied de page de cette section et le coller ici Ensuite, à l'intérieur de la Cass, je vais taper text align text align center. Et je vais configurer ce fichier. Et si je vous montre mon navigateur, comme vous pouvez le voir, maintenant c'est Align au milieu. la même manière, nous pouvons aligner texte de notre section d'en-tête au milieu. Encore une fois, je suis de retour dans mon éditeur de code Visual Studio, et cette fois je vais cibler cet élément, l' en-tête H one. Revenons ensuite à ma section média ici. Et ici, je vais taper dans l'alignement du texte de Calira. Centre. Après avoir configuré ce fichier, si je vous montre mon navigateur, vous pouvez voir le résultat. De plus, si vous ne souhaitez pas afficher menu de votre barre latérale sur Mobile Resolution, si vous souhaitez masquer cette section, vous le Vous pouvez notamment masquer cette section pour Mobile Resolution. Laisse-moi te montrer. Revenons-en au code du studio utilisateur. Et pour cette section de la barre latérale, je vais utiliser ici la propriété display none N'en afficher aucun. Si je configure ce fichier et que je commente toutes ces lignes inutiles parce que nous utilisons ici l'affichage , c'est pourquoi nous n' en avons pas besoin. Et revenons à mon navigateur, maintenant vous pouvez voir qu'il n' y a pas de section de barre latérale au-dessus de la section de pied de page Nous avons juste une section de contenu section de menu et une section d'en-tête. Mais si j'augmente la largeur du navigateur, laissez-moi vous le montrer. Après avoir augmenté le navigateur avec, il a créé une autre condition, je suis une vraie condition de version tablette. C'est pourquoi, encore une fois, il a renvoyé la section de la barre latérale. Mais si je réduis la résolution, vous pouvez voir, encore une fois, qu'elle élève la section de la barre latérale Voici donc comment vous pouvez contrôler différents CSS pour différentes résolutions. J'espère que vous comprenez maintenant comment nous pouvons utiliser les requêtes des médias. Dans notre prochain tutoriel, nous allons en apprendre davantage sur les requêtes multimédias avancées. Nous allons également en apprendre davantage sur la réactivité avancée C'est donc tout pour ce tutoriel. Merci d'avoir regardé cette vidéo Satune. 47. Tutoriel des propriétés de la table CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au style CSS. Et dans ce tutoriel, nous allons apprendre le style des balises de tableau. Nous allons apprendre tous les tableaux relatifs aux propriétés CSS. Voyons donc le nom des propriétés utilisé pour formater notre onglet. Ce sont donc toutes les propriétés que je vais utiliser dans ce tutoriel. Espacement des bordures, réduction , alignement vertical, côté légende, cellule vide et disposition du tableau À l'aide de ces propriétés CSS, vous pouvez contourner les attributs estimaux tels que le remplissage des cellules, l'espacement des cellules, l'alignement vertical Nous n'avons pas besoin d' utiliser cet attribut si nous utilisons ces propriétés. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ai ouvert mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server, et j'ai déjà créé un document STL nommé index point t. Et comme vous pouvez le voir dans mon navigateur, il créera un tableau Et dans ce tableau de la première ligne, nous créons un titre. Et dans cette rangée, nous avons un total de trois colonnes : prénom, nom de famille et économies. Vous pouvez également voir la structure du tableau sur notre page astable Dans cette balise de table, nous avons d'abord TR tables et dans notre première ligne de tableau, nous avons l'en-tête de table Ensuite, nous avons les données des tables. Comme vous le savez, la taxe Tia représente la ligne du tableau et le tag TD représente les données du tableau. Sinon, colonne de télévision. Voyons maintenant comment utiliser les propriétés CSS dans ce tableau. Donc, au début, comme vous pouvez le voir à l'intérieur de cette balise de vignette, nous avons Tavil et Tavildta et l'en-tête du tableau, et voici un boer plein d'un pixel et la couleur de notre bordure est le noir Donc, dans un premier temps, je vais utiliser notre première propriété, qui est l'espacement des bordures. Ici, je vais sélectionner la table tagnyme. Ensuite, à l'intérieur de la voiture ss, nom de notre propriété est l'espacement des bordures. Et je vais dire que c'est l'espacement des bordures, dix pixels. Si je place ce fichier, vous pouvez voir le résultat ici. Maintenant, vous pouvez voir dans mon onglet de tous les côtés qu'il ajoute de l'espace à notre bordure. Et si vous voulez plus d'écart, vous devez augmenter la valeur. Si je passe 20 et configure ensuite ce fichier, vous pouvez voir le résultat. De plus, vous pouvez spécifier différents espaces pour les colonnes et les lignes. Supposons que pour les colonnes je vais prendre un espace de dix pixels, et pour les lignes, je vais prendre un espace de 20 pixels Si je configure ce fichier, vous pouvez voir le résultat. Pour les colonnes, cela prend dix pixels, et pour les lignes, 20 pixels. Et si vous ne voulez pas afficher l'écart entre les colonnes, il suffit de le définir d'un pixel, puis de définir ce fichier pour voir le résultat. Mais pour l'instant, je vais ajouter même quantité d'espace dans toutes les directions. Je vais donc passer dix pixels dans toutes les directions. Parlons maintenant de notre prochaine propriété. Dans un premier temps, je vais commenter cette ligne, puis je vais utiliser border collapse. Border Under Scope s'effondre. Il s'agit d'une propriété liée à une table. Nous devons donc utiliser cette propriété dans le sélecteur de table Cette propriété est dotée de deux valeurs distinctes et d'un effondrement. La valeur par défaut est séparée. Je vais donc utiliser ici une valeur appelée collapse. Maintenant, si je définis ce fichier, comme vous pouvez le voir, il montre une seule bordure pour les cellules. Mais si j'utilise les valeurs différées séparément puis que je définis ce fichier, vous pouvez maintenant voir le résultat. Vous pouvez maintenant le voir ajouter une bordure supplémentaire à nos cellules. Vous pouvez maintenant le voir ajouter une bordure pour toutes les balises TD. Et si vous ne voulez pas afficher l'espace, vous devez utiliser la valeur de réduction, de réduction. C'est différent. Parlons maintenant de notre propriété suivante, qui est l'alignement vertical. Pour cela, nous devons ajouter des données supplémentaires dans nos cellules. De plus, nous devons attribuer un nous fixe à notre table. Je vais donc d'abord ajouter quelques données factices. Donc, selon Mohan, je veux ajouter wim et je veux ajouter cinq mots factices, et je vais définir ce fichier Après avoir défini ce fichier, ici, je vais ajouter fixed we à ce tableau. Je vais donc passer à 300 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Ajoutons un peu plus de données dammi pour cet exemple. Encore une fois, je vais ajouter Lim ten, et je vais redéfinir ce fichier. Vous pouvez maintenant voir plus de données dans ce tableau, cela augmente la hauteur des lignes et aligne les données de la deuxième colonne au milieu Par défaut, verticalement, il alignait les données au milieu. Et maintenant je veux le déplacer vers le haut. Pour cela, nous avons un attribut stable, qui est V align. Mais comme je vous l'ai dit, nous n' allons utiliser aucun attribut stable. Nous allons utiliser du CSS. Passons donc à cette balise de style. Dans un premier temps, nous devons cibler toutes les données de la table, donc HemotypeTD Ensuite, c'est au niveau de la résine de Cali que je vais passer une propriété, l'aligner verticalement Et ici, je vais utiliser la propriété appelée alignement vertical, et je veux l'aligner en haut, donc je vais passer en haut. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant le voir aligner nos données en haut. Cette propriété comporte trois valeurs : haut, bas et milieu. Et si vous voulez le placer en bas, il suffit de le passer en bas. C'est ça. J'espère donc que vous comprenez maintenant comment fonctionne l'alignement vertical. Parlons maintenant du rembourrage. Si vous vous souvenez, en HTML, nous utilisons essentiellement le rembourrage des cellules Et si vous ne vous en souvenez pas, laissez-moi vous montrer l'attribut. En ce qui concerne la balise table, je vais utiliser l'attribut appelé « cell padding Rembourrage des cellules, et je vais attribuer dix pixels. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir dans chaque cellule de toutes les directions, qu'elle ajoute un rembourrage de dix pixels Et maintenant je vais faire la même chose en utilisant du CSS, sans utiliser cet attribut. Je vais donc supprimer cette ligne. Et si vous voulez faire la même chose, il vous suffit d'utiliser un rembourrage Supposons que dans les cellules de données de notre tableau, je souhaite ajouter le rembourrage, mais pas dans l'en-tête de notre tableau Ici, je vais utiliser un rembourrage de dix pixels. Et si je configure ce fichier, vous pouvez voir le résultat. Je n'ajoute pas de remplissage dans notre première ligne parce que notre première ligne était constituée de données TH, qui sont l'en-tête du tableau, qui sont l'en-tête du tableau, et nous attribuons un rembourrage aux données de notre tableau, des balises TD C'est pourquoi il faut commencer par le rembourrage à partir de la deuxième rangée. Et si vous souhaitez cibler le tag TH, il vous suffit de passer le pH. Et si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il ajoute du rembourrage à nos étiquettes à en-tête de tableau. Passons maintenant à la propriété suivante, qui est celle du sous-titre. Mais avant, laissez-moi essayer de vous expliquer ce qu'est une légende. Dans notre balise de table, nous avons une balise nommée caption. Laisse-moi te montrer. Balise de légende. Et dans cette légende, je vais taper employer. Et si je pose ce terreau, vous pouvez voir la légende au-dessus du tableau employer. C'est la table des employés. Nous pouvons modifier la position de cette légende. Je vais donc sélectionner dans la balise de style, je vais sélectionner la légende, la balise de légende. Légende du type de son. Ensuite, vous avez dit les calices Je vais utiliser notre propriété qui s'appelle site de sous-titrage, site sous-titrage, et elle a un total de deux valeurs, en bas et en haut Par défaut, il est livré avec la valeur supérieure, je vais donc utiliser la valeur inférieure. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir la capture et le fond. Parlons maintenant de notre prochaine propriété, qui est une cellule vide. Si vous remarquez que dans notre tableau, dans chaque cellule , nous avons des données, je vais maintenant supprimer l'une des données de notre cellule. Je vais donc en retirer 150. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Maintenant, tu as le choix. Soit vous pouvez afficher la vente stable, soit masquer cette vente stable. Je vais donc utiliser, et dans la balise table, nous devons utiliser la propriété appelée D sell. Cellules vides, sa valeur Taoi totalise deux, masquez et affichez. Afficher est la valeur par défaut, je vais donc utiliser masquer. Après avoir défini ce fichier, comme vous pouvez le voir, cela ne change rien car Hero utilise la valeur de réduction de la bordure. Mais si j'utilise le mode séparé, laissez-moi vous le montrer. Définissez ensuite ce fichier. Vous pouvez maintenant voir le résultat. Maintenant, vous pouvez voir qu'il avait la cellule en question. C'est donc l'utilisation de la propriété de cellule vide. Notre prochaine et dernière propriété est qu'ils vont aménager. Je vais donc utiliser cette propriété. Après une cellule vide, je vais taper la mise en page du tableau, cette propriété est livrée avec un total de deux valeurs automatique et fixe. Tout d'abord, je vais utiliser la valeur automatique. Après l'étape de ce fichier, vous ne pouvez voir aucune modification, mais laissez-moi vous montrer. Supposons que dans notre deuxième ligne de tableau, dans notre première colonne, je souhaite ajouter un gros mot. Après nob, je voudrais ajouter un peu de B. Si je définis ce fichier, vous pouvez voir le résultat Mais si vous vous souvenez de la flèche, utilisez un désherbage fixe sur ce tableau, 300 pixels, tout en allongeant notre tableau. Cela augmente la largeur de ce tableau. Ainsi, en fonction de la taille des données, il peut augmenter le fixe avec. Mais si j'utilise la mise en page de table corrigée et qu'ils définissent ce fichier, vous pouvez maintenant voir le résultat. Cela déborde les données de la cellule, mais n'étend pas le Tavy Donc, si j'utilise la valeur automatique, qui est la valeur par défaut, alors j'ai ce fichier, puis encore une fois, il correspond à l'ancienne situation. Ce sont donc toutes des propriétés qui seront restaurées dans ce didacticiel. J'espère que vous savez maintenant comment utiliser ces propriétés avec les cellules d'un tableau. Merci donc d'avoir regardé cette vidéo. Restez connectés pour le prochain tutoriel. 48. Tutoriel de redimensionnement CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons découvrir une nouvelle propriété, redimensionnement du CSS En gros, cela vous donnera la possibilité de modifier la taille de la profondeur par l'utilisateur. Vous pouvez modifier la hauteur et la largeur en utilisant Dragon Drop. Parlons maintenant des valeurs, du nombre de valeurs que nous avons dans cette propriété, horizontale, verticale, les deux et aucune, aucune étant la propriété par défaut. Commençons par l'aspect pratique et voyons comment utiliser ces valeurs. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code isalstudio et mon navigateur en utilisant l'extension Lifesaver, et je crée déjà un document d'estimation nommé De plus, vous pouvez la voir créer un élément profond, et nous disons 300 pixels de hauteur et 500 pixels de poids. Si j'essaie de le redimensionner en utilisant Kurzar, non, cela ne fonctionnera pas Je vais donc utiliser la propriété resis, mais si je n'utilise que la propriété recise, cela ne fonctionnera pas Pour cela, nous devons utiliser une autre propriété d'aide. Ici, redimensionnez le motif. Redimensionner verticalement. Si je configure ce fichier, comme vous pouvez le voir, il n'y a rien. Nous ne pouvons pas redimensionner le DV verticalement. Pour utiliser la propriété recise, nous devons utiliser la propriété overflow Ici, je vais taper overflow. Automatique. Je vais maintenant configurer ce fichier. Configurez ce fichier, comme vous pouvez le voir dans le coin, nous avons une option de redimensionnement Nous pouvons maintenant le redimensionner verticalement. Nous pouvons le redimensionner dans le sens vertical. Pour mieux comprendre, ajoutons un paragraphe factice dans cette case D. Je vais taper la balise P, puis à l'intérieur de cette balise P, je vais taper low et je veux ajouter 300 mots. Je vais configurer ce fichier. Configurez ce fichier, comme vous pouvez le voir, nous avons une barre scolaire verticale. Mais si j'augmente la taille de la boîte, vous pouvez maintenant constater que la barre d'école verticale a été supprimée la barre d'école verticale parce que nous n' avons pas de données de dépassement Nous augmentons verticalement la hauteur de profondeur, et maintenant augmentons la largeur de profondeur. Pour cela, vous devez ici transmettre une valeur horizontale, redimensionner l'horizontale Si je définis ce fichier, nous avons maintenant la possibilité d'augmenter la largeur profonde, mais nous ne pouvons pas redimensionner la hauteur de profondeur car cette fois nous passons une valeur horizontale, et si vous voulez la redimensionner dans les deux sens, pour cela, vous devez utiliser les deux Redimensionnez les deux. Si je définis ce fichier, vous pouvez cette fois redimensionner l'élément profond dans les deux sens Comme vous le savez, sous forme d'estimation, nous avons une balise appelée zone de texte et, par défaut, la zone de texte supporte le redimensionnement Laisse-moi te montrer. Ici, je vais taper cette balise DIP. Sinon, en dehors de cette zone de texte du DIP tag. Je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir ici la zone de texte. Par défaut, il est livré avec une fonction de redimensionnement. Mais si vous voulez arrêter ce redimensionnement, vous pouvez utiliser resize nun Value pour cela . Laissez-moi vous montrer comment faire. Ici, je vais d'abord sélectionner la zone de texte. Ensuite, à l'intérieur de la résine ronde, puis à l'intérieur des calices, je vais passer resize, none, et définir Configurez ce fichier, vous pouvez maintenant voir qu'il n'y a pas d'option pour redimensionner la boîte Resize Nun Value, car Hero utilise le redimensionnement C'est tout pour ce tutoriel. J'espère que maintenant c'est là pour vous, comment pouvons-nous utiliser le redimensionnement de Paperty Merci donc d'avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 49. Tutoriel CSS Cursor: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons découvrir une nouvelle propriété appelée curseur CSS. Comme vous pouvez le voir à l'intérieur du carré rouge, nous avons un Kursel Vous pouvez voir le curseur à l'intérieur du carré rouge, et si vous souhaitez modifier le style Kazar, vous devez utiliser CarsAlpProperty Ce sont toutes des valeurs utilisées pour modifier le style de Kazar. Comme vous pouvez le constater, nous avons presque 36 valeurs par défaut, nun, menu contextuel, santé, pointeur, progression, poids, seuil, etc. Commençons donc par la pratique et voyons comment nous pouvons utiliser ces valeurs. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Results Studio et mon navigateur en utilisant l'extension Lifesaver, et j'ai déjà créé un document ML nommé index point Vous pouvez donc voir ici que dans ce navigateur, nous créons déjà un élément profond. Je vais maintenant utiliser la propriété appelée curseur. Vous avez donc dit cette boîte. Je vais taper le curseur du nom de la propriété. CurZR et moi voulons attribuer une valeur d'enfer. Bon sang, si j'ai défini ce fichier et le mien sur cet élément profond, maintenant vous pouvez voir qu'avec l'érosine, nous avons un quotient C'est méchant, ça indique l'enfer. Ensuite, je vais dupliquer cette ligne et commenter la ligne précédente. Cette fois, je vais modifier la valeur. Ici, je vais changer CursRponter. Si je place ce fichier et que je passe mon curseur sur cet élément profond, vous pouvez voir le résultat Il remplace maintenant l' arosine par un pointeur sinusoïdal. Et la prochaine valeur que je vais utiliser, c'est le progrès. Je vais donc dupliquer cette section, commenter ligne précédente et remplacer le pointeur par la progression. Si je place ce fichier et que je place mes voitures sur cet élément profond, vous pouvez voir le résultat. Vous pouvez voir avec la flèche que nous avons un cercle, un cercle de chargement. Cela indique une progression. Ensuite, je vais utiliser un autre style de voiture. Je vais dupliquer cette ligne nouveau et commenter la ligne précédente. Cette fois, je vais utiliser le menu contextuel. Je vais remplacer progress par context Minu si je place ce fichier et que je place ma carte sur cet élément profond, vous ne pourrez rien voir Aucune modification n'est apportée après avoir utilisé le menu du concours. C'est comme une valeur par défaut. La prochaine valeur que je vais utiliser Auto. Encore une fois, je vais dupliquer cette ligne, commenter ligne précédente et remplacer le menu du concours par Auto. Si je place ce fichier et que mes cartes sont sur cet élément, vous pouvez voir ce qui ressemble à une valeur par défaut. Ensuite, je vais passer à une autre valeur, qui est le poids. Encore une fois, je vais dupliquer cette ligne commenter la précédente et remplacer auto par poids. Si je place ce fichier et que mes cartes sont sur cet élément profond, comme vous pouvez le voir, c'est assez similaire au chargement, sinon à la progression. C'est pour le signe du poids. Encore une fois, je vais commencer cette ligne commenter la précédente et remplacer weight par sell. Si je place ce fichier et que je passe mon curseur sur cet élément profond, vous pouvez voir le résultat Il y avait un signe positif. Cela ressemble maintenant à un signe d'addition. Et si vous ne voulez pas montrer votre curseur lorsque vous le placez dans cet élément profond, vous devez utiliser Nun vd Encore une fois, je vais dupliquer cette ligne, présager ligne précédente et remplacer L par la valeur Nun Aucune. Si je place ce fichier et que je passe mon curseur dessus, vous pouvez le voir masquer mon curseur car cette fois nous utilisons nun Vd Il est donc très difficile de montrer toutes les valeurs une par une. Je crée ce fichier pour vous et j' applique ici toutes les valeurs une par une au texte du paragraphe. Donc, si vous entendez vos voitures sur les points du paragraphe, vous pouvez voir les différents résultats. Crosshair, par défaut, E Resize, EW resize, grab, grabbing help move, N resize, N resize, no drop, none, not allow, tout cela Vous pouvez donc expérimenter par vous-même et vérifier la valeur une par une. Voilà pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 50. Tutoriel sur les unités CSS 1: Bonjour, les gars. C'est bon de te revoir. Il s'agit du premier tutoriel lié au CSS avancé, et nous allons commencer par l'unité de mesure CSS. Si vous souhaitez attribuer une hauteur maximale à un objet, vous devez savoir combien de types d'unités nous avons dans CS. Ici, vous pouvez voir une liste des unités que nous allons apprendre dans ce didacticiel, Pixel PercentiSEM, REM, viewpoard Je sais que vous connaissez déjà certaines unités comme le pixel, le PercentiSem Dans la plupart des cas, nous utilisons le pixel et le pourcentage. Donc, sans celles-ci, nous avons d' autres unités très utiles. Dans ce didacticiel, nous divisons les unités en deux parties. Le premier concerne les unités absolues, le second les unités relatives. Il s'agit de la liste des unités absolues, des centimètres, millimètres, des pouces, des pixels, des points, etc. Les unités absolues sont des unités fixes, et la plupart du temps, nous utilisons des unités de pixels. Il est très populaire. Il est très populaire en CSS. Sans cela, nous avons des unités relatives. Ces unités relatives dépendent des autres objets parents. pourcentages EM, REM, VH sont tous des unités relatives très populaires Donc, une par une, je vais essayer d' explorer toutes les unités dans ce tutoriel. Commençons donc par la pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Live Server, et j'ai déjà créé un document ETL nommé index point HTML. Et dans ce document ETL, à l'intérieur de la balise body, nous avons une balise d'en-tête, et ici à t unités CSS. Ensuite, à l'intérieur de la balise body, nous avons une balise profonde avec une boîte de nom d'identification. Ensuite, je coiffe cette partie du corps. Tout d'abord, j'attribue une famille de polices Area Helvetica. Et je stylise également cette boîte en utilisant son nom d'identification. Tout d'abord, je fournis une bordure, une bordure pleine de deux pixels. Ensuite, je fournis une couleur de fond. De plus, je fournis la largeur et la hauteur. Avec 600 pixels et une hauteur de 300 pixels. Ici, nous utilisons l'unité absolue, et le pixel est une unité absolue fixe. Maintenant, la question est de savoir ce que cela signifie. Quelle est la signification de « fixe » ? Si je réduis la largeur du navigateur, comme vous pouvez le voir, notre forme ne change pas en fonction de la semaine du navigateur. Vous pouvez voir la barre de défilement sous le navigateur. Si je déplace cette barre de défilement sur le côté droit, vous pouvez voir la forme complète du rectangle. Il s'agit d'une unité fixe, elle ne changera donc pas la hauteur et le poids en fonction de la hauteur du navigateur et du wi. C'est pourquoi nous l' appelons unité absolue. Passons donc à la position précédente de ce navigateur. Maintenant, je vais utiliser une valeur relative. Je vais donc utiliser une valeur en pourcentage. Donc, tapez Hemo à 100 % avec 100 %. Et je vais configurer ce fichier. Pour configurer ce fichier, comme vous pouvez le voir, pouvez voir ici que notre boîte occupe 100 % de la largeur de ce navigateur. Si j'augmente la taille du navigateur, comme vous pouvez le voir, en fonction de la largeur du navigateur, cela augmente la largeur. De même, si je réduis la largeur du navigateur, maintenant vous pouvez le voir, cela réduit également la largeur de la boîte en fonction du navigateur. Cela signifie qu'il faudra utiliser 100 % du navigateur. De même, si je passe 50 % ici, puis ce fichier, vous pouvez maintenant voir qu'il occupe 50 % du navigateur. Voici donc l'exemple de l'unité relative. Ce type de valeur dépend élément Die parent, sinon de Window R La question est de savoir comment cela fonctionne avec le parent D. Permettez-moi de vous montrer un exemple Donc, dans cette boîte, je vais prendre un autre élément DV, DV, et je vais également attribuer un identifiant, une Et je veux déplacer notre ancienne boîte au plus profond de cette profondeur, donc je vais changer cette boîte de nom d'identification profonde. Maintenant, la première boîte est celle de nos parents et la boîte celle de l'enfant. Donc, pour un style aussi profond. Copiez donc le nom de l'identifiant et son type I'm tape a marqué notre case de nom d' identification une. Ensuite, insérez les couleurs, je vais utiliser les propriétés de la même manière Copiez donc les propriétés CSS, et je vais en coller une dans cette boîte. Je vais d'abord changer la couleur de fond. Je ne veux aucune couleur de fond. Ensuite, je veux attribuer une largeur absolue à ce D. Je vais donc attribuer 600 pixels et une hauteur 300 pixels. Si je définis ce fichier, vous pouvez maintenant voir comment l'élément enfant p occupe 50 % de la largeur de ce conteneur parent. Donc, comme je vous l'ai dit, la valeur relative fonctionne relativement en fonction de la taille du parent. Donc, si je réduis ou que j'augmente la hauteur et la largeur du navigateur, cela n'aura aucun effet sur notre boîte car nous avons dit valeur absolue à ses parents. Alors laisse-moi te montrer. Je vais donc réduire le navigateur. Pour réduire la largeur du navigateur, comme vous pouvez le voir, vous pouvez le voir ici, nous avons une barre de défilement Mais notre boîte ne change rien à la largeur. De même, si j'augmente la largeur du navigateur, vous pouvez également voir le même résultat car maintenant cela fonctionne en fonction du conteneur parent. Mais si je supprime le conteneur parent, cette boîte va changer de largeur. Mais si je supprime le parent deep means box 1, alors la forme changera en fonction de la fenêtre du navigateur. Ensuite, il faudra supprimer 50 % de la fenêtre du navigateur. Ici, nous utilisons 50 %. Cela signifie que cela va prendre 300 pixels parce que nous disons boîte 1 de 600 pixels. De même, si je passe 20 % et que je définis ensuite ce fichier, maintenant vous pouvez voir qu'il faut 20 % de 600 pixels. Mais si je retire la case, vais vous montrer ce fichier, ainsi que celui-ci. Maintenant, la fenêtre devient le parent de cette fenêtre d. Window signifie la balise body. Et maintenant, je vais parler d'EM et de REM ID. Les unités EM et REM fonctionnent essentiellement avec la taille de police. Laissez-moi vous montrer comment faire. Donc, dans un premier temps, je vais augmenter l'opération. Je vais prendre 80 % Ensuite, je vais prendre une propriété nommée taille de police. Taille de police. Taille de police 1 EM. Et à l'intérieur de cette balise profonde, je vais ajouter ici un paragraphe factice Herm type um 100. Et je vais configurer ce fichier. Nous ajoutons donc ici un paragraphe factice de 100 ou, et nous avons dit taille de police 1 h 00 du matin à 1 h 00 du matin. La valeur fonctionne relativement parce que c'est une unité relative et que le parent de la boîte Et comme vous pouvez le constater, dans notre body tag, nous n'utilisons aucune taille de police. Utilisons donc la taille de police. Taille de police, et je vais utiliser la taille de police 13 Bigel, je vais définir ce fichier Après avoir défini ce fichier, vous pouvez maintenant voir à l'intérieur de la boîte notre taille de police est réduite. Maintenant, 1 h 00 du matin, devenez 13 pixels. Mais si j'utilise 2 h du matin , je vais changer le Vin Two EM. , je vais changer le Vin Two EM Ensuite, je vais configurer ce fichier. Maintenant, vous pouvez voir qu'il en a l'air et qu'il a également été survolé vers ce conteneur Disons ici que nous utilisons deux valeurs temporelles de 13 pixels, car dans notre balise parent, nous utilisons ici une taille de police de 13 pixels, et deux fois plus, 13 pixels font 26 pixels. C'est pourquoi notre police devient 26 pixels. De même, si vous voulez prendre la moitié de la valeur de cette paire D, dans ce cas, il suffit de la prendre pour passer 0,5 pixel 0,5 h du matin Si je définis ce fichier, nos polices deviennent trop petites car c'est le hub qui en fait la valeur. Notre taille de police devient donc de six pixels. Mais si je fais un commentaire, sinon, supprimez la taille de police de l' élément parent, et ici j'utilise la valeur 1 h 00 pour définir ce fichier. valeur 1 h 00 pour définir ce fichier Vous pouvez maintenant voir qu'il y avait une valeur par défaut pour cette police. La question est maintenant de savoir quelle est la valeur par défaut de 1 h 00 du matin. La valeur par défaut d' un M est de 16 pixels Si je vous montre les paramètres de mon navigateur puis que je passe à l'apparence, vous pouvez voir la taille de la police. Si j'ouvre cette taille de police, vous pouvez maintenant voir, par défaut, qu'elle indique 16 pixels. Mais si j'augmente la taille, supposons que j'utilise 28 et que je reviens à ma fenêtre, maintenant vous pouvez voir que notre valeur de police d'un M devient 28 pixels. De même, si je réduis la valeur, elle devient si petite. Maintenant, une valeur M devient neuf pixels car ici nous disons neuf pixels. Il faut donc prendre la valeur par défaut de la taille de police du navigateur. Et la plupart du temps, le navigateur utilise 16 pixels. Et maintenant, parlons de l'unité REM. Ici, je vais taper REM. Et je vais arrêter ce dossier. REM est l'abréviation de relative EM. C'est assez similaire à EM, mais cela ne fonctionne pas selon les parents. Vous pouvez maintenant voir la taille de police par défaut, qui est de 16 pixels. Mais si j'assigne une taille de police à notre corps, certains tapent une taille de police, et je vais attribuer huit pixels. Et si je définis ce fichier, comme vous pouvez le voir, cela ne réduit pas la taille de la police. Je ne travaille pas selon Pan. Cette RMU est liée à root. Si j'augmente la taille de police du navigateur, laissez-moi vous montrer la taille de police d' apparence. Je vais donc utiliser une taille de police de 28 pixels, puis revenir à la fenêtre, maintenant vous pouvez voir, maintenant vous pouvez voir notre RM Valcal 28 pixels Corrigons maintenant la vague par défaut, qui est de 16 pixels. Et si j'utilise deux RAM et que, comme vous le savez, cela prendra 32 pixels. Et il existe un autre moyen de manipuler l'unité RM à l'aide de la balise root. Et comme vous le savez, notre étiquette racine est T Milton. Donc, si je stylise le type de son HTML TML, vous définissez la propriété calvss je vais utiliser la taille de police Taille de police, et je vais définir la taille de police de dix pixels. Il s' agit du testament par défaut. Et si je définis ce fichier, vous pouvez maintenant voir que nos polices sont passées 20 pixels car ici nous utilisons deux RM. Cela représente le double de la taille de la police racine en. Donc, si j'utilise un RM puis que je définis ce fichier, vous pouvez voir nos polices atteindre dix pixels, car maintenant notre taille de police root est dix Bexl et maintenant je vais définir l'unité EM deux Je vais donc prendre une taille de police EM et nous avec un EM. Si je configure ce fichier, il prendra huit pixels. De plus, il faudra une police de huit pixels. Laissez-moi vous le montrer car, comme je vous l'ai dit, largeur de travail EMV dépend du parent Donc, si je configure ce fichier, vous pouvez voir le résultat. Il faut huit pixels de largeur de boîte car Henry a défini la taille de police de huit pixels. Vous prenez également une taille de police de huit pixels. valeur AM prend donc la taille de police du parent et applique la taille de police à la largeur de l'enfant. Et de la même manière, si j'utilise REM Value, REM et REM et que je définis ce fichier, notre taille de police devient maintenant de dix pixels. De plus, notre largeur devient dix pixels car elle s'enracine bien. J'espère maintenant que vous comprenez pourquoi nous utilisons EM et RMW uniquement avec les polices, et non avec la hauteur et l'identifiant. Voici donc la première partie de ce didacticiel Dans la prochaine partie du tutoriel, nous allons parler de VH et VW Merci donc d'avoir regardé cette vidéo, restez connectés. 51. Tutoriel sur les unités CSS 2: Bonjour, les gars. C'est bon de te revoir. Il s'agit d'une autre unité CSS liée au didacticiel. Et dans ce tutoriel, nous allons commencer par View boot height et Viewboard With Commençons donc par Viewbard With. Vous pouvez voir ici une fenêtre de navigateur sur votre écran. Et nous appelons la largeur totale du navigateur Viewboard Weav et la largeur du viewpot, divisée par cent Si nous utilisons 50 VW , il faudra utiliser le hub de ce navigateur. De la même manière, nous avons la hauteur du belvédère. Il est également divisé par 100. Et si nous utilisons 50 VH, cela occupera 50 % de cette fenêtre Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, nous sommes dans un éditeur de code studio, et je crée déjà un autre document HTML nommé Idextdt TML Donc, d'abord, je vais changer l'unité with. Ici, je vais utiliser 100 VW, et pour la hauteur, je vais utiliser 100 VH. Pour l'instant, je ne veux pas de taille de police. Je vais donc le supprimer. Après l'étape, comme vous pouvez le constater, ce fichier occupe complètement hauteur du navigateur et le navigateur. Mais il y a un problème. Vous pouvez voir le mot « W M » en bas de la page. C'est un problème. Je vais donc supprimer les rubriques d h one Je vais également dire marge zéro. Et aussi, je vais supprimer la bordure de bordure avec zéro pixel, et je vais définir ce fichier. Si je configure ce fichier, jusqu'à ce qu'il soit configuré, vous pouvez voir qu'il supprime la barre de défilement de la fenêtre et qu'il occupe complètement la hauteur et la largeur de cette fenêtre. Si je réduis la largeur, vous pouvez également voir qu'il n' y a pas de barre de défilement. Et cette unité fonctionne également pour la hauteur. Et maintenant je vais réduire l'unité Vale. Pour cela, je vais dépasser 50 ou 50 VW pour la hauteur, ça reste tel quel. Après avoir défini ce fichier, vous pouvez voir le résultat. Maintenant, la largeur devient la moitié de cette fenêtre de navigateur. Comme vous le savez, ce sont toutes des unités relatives. C'est assez similaire pour les pourcentages, mais il y a une différence entre pourcentage, le viewpod et la hauteur de vue La valeur en pourcentage fonctionne en fonction de l'élément parent. Si nous définissons la largeur de l'élément parent, 600 pixels, puis que nous utilisons la largeur de l'élément enfant, 50 %, alors la valeur sera définie sur 300 pixels, mais la largeur du viewpod et la hauteur de la fenêtre d'affichage ne fonctionneront pas comme ça Cela fonctionne toujours en fonction de la taille de la fenêtre. Laisse-moi te montrer. Je vais donc essayer de le mettre dans un nous fixe. Encore une fois, je vais prendre un contenant parent. Au plus profond de la balise DIP, je vais attribuer un identifiant. Boîte d'identification numéro un. Ensuite, je vais déplacer ce dip à l'intérieur de ce dip-tag parent Maintenant, je vais styliser la case 1, le hashtag, la case 1, et à l'intérieur du caliss, notre première propriété est Je vais utiliser cette même valeur, pas de pixel, bordure pleine. Ensuite, je vais dire hauteur et nous largeur, 600 pixels, hauteur 300 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Ainsi, dans la balise parent, nous utilisons une valeur absolue, et dans une balise enfant, nous utilisons ici une valeur relative, mais ici, nous utilisons la hauteur de la fenêtre et le désherbage du pot d'affichage Et comme je vous l'ai dit, la hauteur et le champ de vision ne fonctionnent pas par rapport au conteneur parent Cela fonctionne relativement à la taille de la fenêtre. Donc, si je réduis la largeur de ce navigateur, comme vous pouvez le voir, il fonctionne relativement avec la fenêtre, pas avec le conteneur parent. Mais si j'utilise la valeur en pourcentage ici, je vais utiliser 50 %. Et puis définissez ce fichier. Vous pouvez maintenant voir qu'il en faut 50 % avec ce conteneur parent. J'espère donc que vous comprenez maintenant quelle est la différence entre la valeur de la fenêtre d'affichage et le pourcentage Les deux unités sont des unités relatives, mais leur méthode de travail est différente. Parlons maintenant de nos deux dernières unités, V max et min. Vmax signifie Vpot maximum et min signifie viewpot Commençons donc par la pratique. Mais avant de commencer la pratique, je voudrais effacer les unités Vmax et Win Sur votre écran, vous pouvez voir une fenêtre de navigateur, la hauteur de la fenêtre Droser est de 300 pixels et la fenêtre D du navigateur est de 400 pixels . C'est ici que nous avons créé DV dans cette fenêtre de navigateur Et nous spécifions également un ID pour cet élément Dp, qui est de 50 Vmax. Cela signifie qu'il faudra 50 % d'ilop par semaine dans un navigateur , soit 200 pixels Maintenant, vous pourriez penser que c'est assez similaire avec l'unité de pourcentage, sinon, avec l'unité VW, mais ce n'est pas le cas. L'unité Vmax prendra toujours la valeur maximale du navigateur. Maintenant, la question est : qu' est-ce que cela signifie ? Comme vous pouvez le constater, la largeur de notre navigateur est supérieure à la hauteur du navigateur . Il faudra donc prendre la valeur de la largeur du navigateur, et 50 VMX de 400 pixels font 200 pixels C'est pourquoi il est dit largeur D 200 pixels. Mais quoi ? Si je réduis la largeur de la fenêtre du navigateur, laissez-moi vous le montrer. Dans l'exemple suivant, comme vous pouvez le voir, je réduis ici le navigateur avec. Maintenant, notre navigateur passe à 250 pixels et la hauteur du navigateur est de 300 pixels. Désormais, la hauteur du navigateur est supérieure à celle du navigateur. Donc, cette fois, l'unité VMx prendra la hauteur en 300 pixels, et la hauteur maximale de 300 pixels sera prendra la hauteur en 300 pixels, de 150 pixels Il va définir l'objet avec 150 pixels car l'unité Vmax sélectionne toujours la valeur maximale Et au contraire, nous parlons de travail unitaire. Commençons donc par la pratique et clarifions le concept. Dans un premier temps, je vais retirer l'élément Paren Dip, case. Je n'en ai pas besoin. Ensuite, je vais également supprimer de cette section de style. Et ici, je vais changer le avec 50 Vmax. Et voilà, je vais m'asseoir aussi bien. Maintenant, la question est de savoir quelle est la signification de V max. Et aussi, je vais changer la hauteur pour mieux le comprendre. Donc ici je vais passer les 50 H. VMAX va prendre le maximum Il va vérifier la hauteur et utiliser les deux et il va prendre le plus grand w. Je tiens à dire qu'il va comparer la hauteur du point de vue et le désherbage du viewpo et que la valeur la plus élevée sera choisie Et en fonction de la valeur la plus élevée, il fixera le poids. Laissez-moi vous montrer comment faire. Vous pouvez voir ici en quoi la hauteur de la fenêtre est supérieure à celle de la fenêtre. C'est pourquoi j'en prends le centre. Et selon le hub de cette valeur, elle s'est réglée. Supposons que la largeur de notre fenêtre d'affichage est de 200 pixels, mais que la hauteur de notre fenêtre d'affichage est de 300 Ensuite, il faudra 50 valeurs VMX de cette hauteur, pas de la largeur, et notre hauteur est de 300 pixels, donc elle va être réglée sur 150 pixels C'est pourquoi vous pouvez voir ici que nous utilisons 50 VMX, mais cela ne prend pas les 50 % de la largeur du navigateur Il occupe 50 % de la hauteur du navigateur. Mais quoi ? Si nous augmentons le navigateur et le rendons plus grand que la hauteur du navigateur, laissez-moi vous le montrer. Maintenant, je vais augmenter le nombre de mauvaises herbes du navigateur. Vous pouvez maintenant voir que la largeur de notre navigateur est supérieure à la hauteur du navigateur. Donc, cette fois, je vais prendre le navigateur avec. Et selon le navigateur avec Value, il faut 50 VMX, soit un hub de la largeur du navigateur Vous pouvez maintenant remarquer que la largeur de notre conteneur occupe 50 % des mauvaises herbes du navigateur. Mais si je réduis la largeur du navigateur, il n'occupe plus 50 % de la largeur du navigateur. Parce que la hauteur du navigateur est supérieure à sa largeur. Alors maintenant, il définit le avec 50 % de la hauteur du navigateur. Voici donc l' utilisation de l'unité Vmax. Pour une mise en page responsive, c'est très utile et à l'inverse, nous avons une autre unité, qui est moi. Je vais donc dupliquer cette ligne et commenter la précédente. Ensuite, je vais configurer ce fichier et retourner dans mon navigateur. Maintenant, je vais changer le nom de l'unité. 50 signifie le minimum d'affichage du tableau, et je vais redéfinir ce fichier. Puis je reviens au navigateur. Vous pouvez maintenant voir le résultat différent. Cette unité est complètement opposée à l'unité Vmax. Vous pouvez maintenant remarquer que largeur de notre navigateur est plus courte que l'indication du navigateur. C'est pourquoi il va prendre un navigateur avec Win, et selon le navigateur avec VRU, il va régler l'aile vide de la fenêtre W 200 pixels, puis il va définir une largeur de boîte de 100 pixels parce qu'ici nous utilisons 50 % de la zone de visualisation. Mais si j'augmente la largeur du navigateur, laisse-moi entrer. Et maintenant je vais augmenter le navigateur Wi Après avoir augmenté la largeur du navigateur, vous pouvez voir que la hauteur du navigateur est maintenant plus courte que la largeur du navigateur. C'est pourquoi il était écrit «   Avec » de cette case, 50 % de la hauteur du navigateur. Si je réduis la hauteur du navigateur, comme vous pouvez le constater, largeur de notre boîte devient si petite qu'elle occupe maintenant 50 % de cette hauteur. Si la hauteur est de 100 pixels, largeur de cette boîte est définie à 50 pixels. Voici donc comment fonctionnent le Vmax et l'unité de tissage. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons apprendre les variables CSS. Merci donc d' avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 52. Variables CSS: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS avancé, et dans ce tutoriel, nous allons apprendre les variables CSS. Avec cela, nous allons également apprendre où fonctionnent les choses. Voyons d'abord, sans variables, comment nous pouvons gérer notre travail. Ensuite, nous allons apprendre comment utiliser les variables pour nous faciliter la tâche. Et nous pouvons siroter notre précieuse cravate. Sur le côté droit de votre écran, vous pouvez voir un navigateur. Dans ce navigateur, nous avons une mise en page Web de base, un en-tête, une manœuvre, un pied de page, une barre latérale, un contenu, un titre, etc. Ici, vous pouvez voir la couleur de notre en-tête et celle du pied de page sont similaires De plus, lorsque j'ouvre ma voiture sur ces éléments de navigation, vous pouvez voir que la couleur de fond est également similaire. En gros, nous réutilisons trois fois la même couleur. Si je vous montre mon SDML comme vous pouvez le voir, couleur de fond de notre en-tête est le gris De plus, notre manœuvre sur la couleur de fond est le gris. Avec cela, la couleur de fond de notre pied de page est le gris. Au total, nous utilisons le gris trois fois. Supposons maintenant que nous devions changer la couleur grise. Je veux remplacer la couleur grise par la couleur verte. Pour cela, nous devons changer le nom de la couleur trois fois depuis l'intersection de la barre de navigation et depuis le pied de page, ce qui prend beaucoup de temps. Pour résoudre le problème, CSS introduit des variables CSS, et pour créer ces variables, vous devez utiliser une racine de nom de classe Posido Aperclon, vous devez taper root. Ensuite, à l'intérieur des calices, vous devez déclarer les variables et vous pouvez utiliser ces variables dans tout ce site Web Comme vous pouvez le voir, comment nous créons une variable nommée couleur principale. Et dans cette variable, nous lui attribuons une valeur et le nom de notre valeur est la couleur rouge. Vous pouvez utiliser n'importe quel type de valeur, valeur de pixel, valeur de chaîne, valeur de couleur, valeur de couleur, etc. Ensuite, nous devons appeler cette variable ensemble de notre site Web. Et si vous devez changer de couleur, nous devons le changer une fois. Nous devons modifier notre section des variables. Supposons que je veuille une couleur verte. Ensuite, je vais remplacer le rouge par vert et vous allez appliquer la couleur verte à toute cette section. N'oubliez pas que pour déclarer une variable, devez d' abord taper deux tirets, puis le nom de la variable. Entre les variables, vous pouvez utiliser un tiret sinon un trait d'union souligné, mais vous ne pouvez pas mais vous Je crée une variable, et maintenant je veux utiliser cette variable. Supposons que je veuille l'utiliser dans la classe A. Pour cela, et dans les couleurs ici, nous déclarons une couleur de nom de propriété. Ensuite, nous devons appeler were function. Ensuite, à l'intérieur du rond ss, nous devons appeler le nom de la variable pour appliquer le Val, puis automatiquement, il va placer la couleur rouge à cette position. De même, je souhaite appliquer la même couleur pour l'arrière-plan. Dans la classe B, j'utilise une propriété nommée couleur de fond. Ensuite, j'appelle la fonction variable et j'applique ce cull et j'appelle cette variable dans main cull Dans le même temps, nous pouvons modifier la couleur de police et la couleur d'arrière-plan, et nous pouvons créer plusieurs variables dans notre balise racine. N'oubliez pas qu'il s'agit d'une pseudo-classe et que nous pouvons appeler cette variable autant que nous le voulons. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server, et j'ai déjà créé un document d'estimation nommé index point HTM. Et comme vous pouvez le voir dans mon navigateur, il existe une mise en page de site Web BSI Ici, nous utilisons la couleur grise trois fois dans la section d'en-tête, dans la section voisine au-dessus de la section et dans la section de pied Donc, pour cette couleur, je veux créer une variable. Donc, d'abord, je vais taper une classe Posito et le nom de notre classe Posito est Rob Rube. Ensuite, le carnivore est et notre varim est multicolore Ensuite, deux points et je taperais un V et notre euh est gris. Et le point-virgule 210 sur cette ligne. Il s'agit de notre première variable nommée couleur principale, et je vais copier le nom de la variable, couleur principale. Ici, nous avons correctement défini la variable dans notre balise racine. Il s'agit d'une portée mondiale. Maintenant, appelons cette variable. Pour cela, comme vous le savez, nous utilisons la fonction. Dans notre arrière-plan d'en-tête, je vais taper were function. Ensuite, dans les robes rondes, nous devons passer le nom de la variable et notre nom de variable est la couleur principale. Le point-virgule, cette ligne. Si je définis ce fichier, comme vous pouvez le voir, le résultat est le même. Ici, vous pouvez voir si la croissance change l'appel en arrière-plan. De même, je vais copier cette fonction, et maintenant je veux appeler cette variable dans notre section Her, NebBahor Dans notre section menu, je vais appeler à nouveau la variable. Nous sommes la couleur principale. Ouvre le fichier Comme vous pouvez le constater, il n' y a aucun changement si je fais appel à mon casar sur ces éléments du menu Ensuite, je vais appeler la même variable dans notre section de pied de page Pour l'arrière-plan, la couleur principale et le préréglage de ce fichier, vous pouvez voir le résultat. Nous devons maintenant changer cette couleur dans les sections. Pour cela, il n'est pas nécessaire de faire le même travail trois fois. Je veux juste accéder à la session variable où nous déclarons la variable et à partir de cette section, je vais changer la couleur. Ici, je vais taper la couleur verte. Après avoir défini ce fichier, vous pouvez voir le résultat. Dans le même temps, modifiez la couleur d'arrière-plan et la couleur de surplan à différents endroits. Il était temps. De même, vous pouvez créer une variable pour n'importe quelle valeur. Cette fois, je vais créer une variable for for famine. Donc, la couleur principale, type Imo, tiret, tiret, forme principale. Et je veux la police principale, Georgia. Dans notre body tag, elle utilise la zone familiale de polices. Maintenant, je veux changer la famille de police du headtag ici à l'intérieur de cette balise head, je vais utiliser la famille de polices, donc je vais appeler la variable Dans la fonction, je vais jouer en tant que de variable et notre nom de variable est la police principale. Puis le point-virgule deux dans cette diapositive. Après avoir défini le fichier, vous pouvez voir le résultat. Cela a changé la famille de polices de notre section d'en-tête. Il s'agit de l'utilisation de variables. Et nous devons utiliser deux méthodes pour créer des variables. Lorsque nous utilisons root postitoclass pour déclarer des variables, cela définit la portée globale de C'est principal, vous pouvez utiliser ces variables n'importe où sur votre site Web. Mais si vous souhaitez utiliser des variables dans une zone limitée, nous devons pour cela attribuer une portée locale à notre variable. Voyons donc comment créer une variable de portée locale. Comme vous pouvez le voir, dans notre classe A, elle crée une variable, la couleur principale. Ensuite, dans la même classe, nous appelons la variable en utilisant la fonction were. Maintenant, cette variable devient une variable de portée locale car nous ne pouvons pas utiliser cette variable en dehors de la classe A. Supposons que nous devions styliser la balise d'ancrage dans la classe B A. Pour cela, nous pouvons également utiliser cette variable car Hey appelle cette variable dans la classe B A. Maintenant, la portée de la variable devient une portée locale. Commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir dans notre section de contenu, nous avons un paragraphe, nous avons un titre deux, nous avons également un intestin dix. Est-ce que c'est dans la section de contenu je vais déclarer une variable, et le nom de notre variable est T color. T coloré et je souhaite l' attribuer à ce taux variable. Cette ligne est similaire. Maintenant, notre variable devient une variable de portée locale, et je veux changer le degral maintenant je veux changer la couleur de la police du contenu. Je veux la couleur rouge. Mais ici, il faut appeler la fonction où, à l'intérieur du laiton rond, je veux la couleur T. De même, je souhaite changer le titre en couleur, qui se trouve à l'intérieur de la partie contenu. Tapez Heald là où je veux utiliser la couleur T. Sur ce, je vais également appliquer cette même couleur dans notre balise nga, qui se trouve à l'intérieur du contenu Dans la section couleur, je vais appeler la variable T color. Ouvrez ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, il a correctement appliqué la couleur rouge ou la partie du contenu. Mais si j'appelle cette variable en dehors de la section de contenu, laissez-moi vous le montrer. Comme vous pouvez le constater, nous avons une barre latérale et des tags coupés. Je souhaite appliquer cette variable dans la barre latérale et couper les balises. Ici, je dois appeler la fonction re, où j'ai dit variable, je veux utiliser la couleur T. Comme vous pouvez le voir, il ne change pas notre barre latérale et ne coupe pas les couleurs techniques Parce qu'ici, nous utilisons une variable de portée locale et la couleur T est une variable de portée locale de contenu. Nous ne pouvons pas l'utiliser en dehors de la section de contenu. Mais si j'appelle une variable de portée Glover, laissez-moi vous montrer. Ici, je veux utiliser la couleur principale et je veux définir ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, nous avons changé avec succès notre barre latérale et les couleurs techniques C'est ainsi que fonctionnent les variables. J'espère que vous comprenez maintenant comment nous pouvons l'utiliser. Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 53. Fonction Calc(): Alors je suis bonjour, les gars. C'est bon de vous y voir. Il s'agit de la première fonction CSS liée au didacticiel. En fait, ça ne l'est pas. Nous avons déjà abordé notre fonction dans notre précédent tutoriel. Fonction Calf, utilisée physiquement pour les calculs mathématiques Maintenant, la question est : pourquoi devrions-nous utiliser des calculs mathématiques ? Allons voir un examen. Donc, comme vous pouvez le voir, dans la classe A, son set avec 100 % moins 18. C'est l'un des exemples de fonction du mollet, dans l'exemple suivant, Hero utilise 100 % divisé par deux Sa largeur principale devient maintenant 50 %, et dans l'exemple suivant, insérez la position d'arrière-plan, elle déclare la position XX et la position YxS, mais nous utilisons la fonction calf Ici, j'utilise 100 % -50 pixels, également 100 % -20 pixels pour YxS Nous pouvons également utiliser la fonction mollet avec des couleurs. Laisse-moi te montrer. Comme vous pouvez le constater, couleur de fond du héros en mode HSL, Heid passe la teinte, la saturation et la foudre Et pour la saturation, j'utilise fonction calf pour multiplier par 25 % Cela signifie que cette valeur est passée à 50 %. J'espère donc que maintenant la façon dont nous pouvons utiliser la fonction calf est claire. Maintenant, je vais vous montrer quels types d' opérateurs arithmétiques nous pouvons utiliser dans la fonction calf Ce sont donc tous des opérateurs arithmétiques que nous pouvons utiliser dans la fonction calf, l' addition, la soustraction, la multiplication et la division Commençons par la pratique et voyons comment nous pouvons l'utiliser en ligne réelle. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Light Server. Et à l'intérieur de cette page d'estimation, je crée ici une profondeur. Et à cette profondeur, nous avons fixé à 500 pixels et à 300 pixels de hauteur. Et à l'intérieur de cette profondeur, nous avons un texte factice. Et maintenant je vais changer d'unité. Ici, je vais utiliser l'unité de pourcentage, 100 %. Comme vous pouvez le voir, ce fichier occupe 100% de la largeur du navigateur Et maintenant, je vais ajouter un peu de rembourrage à cela. Rembourrage de 20 pixels. À la hauteur de ce style. Comme vous pouvez le constater, cela augmente un peu notre largeur. Et aussi, vous pouvez voir le barreau d'école que nous utilisons. Une autre question est de savoir pourquoi cela s'est produit. Il n'utilise aucun fixeur. Pourcentage d'utilisation de la herse en. Alors pourquoi devons-nous utiliser la barre de défilement pour voir le D entier ? Parce que Hay utilise du rembourrage. Nous ajoutons du rembourrage dans toutes les directions. Il va donc ajouter du rembourrage du côté droit. Il va ajouter un rembourrage de 20 pixels depuis le côté droit et de 20 pixels depuis le côté gauche C'est pourquoi nous voyons la barre de défilement ci-dessous. Et maintenant nous devons le faire et maintenant nous devons le réduire. Pour cela, nous devons utiliser la fonction calf. Sono, tapez CALC. Ensuite, dans les presses rondes, je vais d'abord passer la valeur en pourcentage, qui est de 100 %. Moins du côté droit, je veux -20 pixels. Et du côté gauche, encore une fois, je vais passer à -20 pixels. Et puis, comme vous pouvez le voir, nous ajoutons ici des bordures venant de toutes les directions. Vous devez donc réduire la bordure d'un pixel. De gauche à droite, un pixel. Bien sûr, sur ce fichier, vous pouvez maintenant voir le SMS. Cela supprime notre barre de défilement, et il faut aussi 100 % de mauvaises herbes. Oui, il faut 100 % de largeur et à partir du 100 % herbe, Hero -42 pixels Si je vous montre tout mon écran, vous pouvez voir le th Si j'augmente, sinon je diminue la fenêtre du navigateur, comme vous pouvez le constater, il n'y a pas de barre de défilement dans notre navigateur. De plus, vous pouvez voir jusqu'à 100 % de mauvaises herbes, un rembourrage de 20 pixels dans toutes les directions C'est donc l'une des bonnes utilisations de la fonction du mollet. Et maintenant je veux centrer cette boîte verticalement et horizontalement. Pour cela, nous devons utiliser une valeur fixe. Je vais donc dupliquer cette ligne et commenter la précédente. Et ici, je vais utiliser une valeur fixe. Valeur fixe, 500 pixels. De plus, je vais supprimer toutes les données contenues dans cette balise profonde. À partir de là, je vais supprimer toutes les données. Ensuite, en dehors de la balise profonde, je vais prendre une balise de paragraphe, P. Et à l'intérieur de cette balise de paragraphe, je vais taper près de 1 500 foutus textes Gagnez 1 500. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Maintenant, activons le skin complet pour le comprendre un peu. Et maintenant, je veux faire de Deep Position un absolu. De plus, nous devons le placer au horizontal et vertical. Pour cela, passons à l'édition du code du studio Viger. Donc ici, je vais utiliser la position absolue. Et en partant de la gauche, je vais prendre 50 %. En partant du haut, je vais prendre 50 %. Définissez ce fichier, vous pourriez penser qu'il va au centre ou au fond, mais ce n'est pas le cas. Si je vous montre mon navigateur, comme vous pouvez le voir, il n'est pas centré en profondeur. Parce que si je trace une ligne entre cette position cette position et que je divise notre navigateur en deux parties, vous pouvez maintenant voir nos 50 % commencer par cette position. Du haut vers la gauche, c' est le point central. Il s'agit de la position de 50 %. C'est pourquoi nous avons débuté en profondeur à cette position. Donc, pour qu'il soit aligné horizontalement et verticalement, nous devons réduire la moitié de la largeur de cette profondeur par rapport aux 50 %. Passons donc au studio visuel Ici, je vais utiliser la fonction calf El 50% moins, comme vous pouvez le voir, notre largeur est de 500 pixels. Donc, à partir de là, je vais passer à -250 pixels. De même, vu d'en haut. Copiez donc la valeur. Donc, à partir du haut, je veux -150 pixels. Et à partir de là, nous devons également réduire le rembourrage de -20 pixels Et aussi, je vais réduire un pixel botel moins un pixel Et je vais faire de même avec notre meilleur établissement. Je vais donc copier cette section et je vais la coller ici. Et cette fois, il faut moins 150 pixels. Parce que nous avons défini une hauteur de 300 pixels. Donc, après avoir configuré ce fichier, si je vous montre mon navigateur, comme vous pouvez le voir, nous en ferons parfaitement le centre. Et si je réactive notre écran, comme vous pouvez le voir, il passe automatiquement au centre. Après avoir redimensionné notre fenêtre, elle centre automatiquement verticalement et horizontalement notre élément de base de données C'est donc l'un des exemples de fonction du mollet. Maintenant, permettez-moi de vous montrer un autre exemple. Et maintenant je vais réparer une profondeur sans utiliser de position fixe. Mais je vais aussi assouplir notre mise en page. Pour cela, nous devons en parler à trois amens profonds. Permettez-moi de résumer. Je n'ai donc plus besoin de ce paragraphe, je vais donc le supprimer . Et c'est le numéro un profond, et je vais définir un en-tête de nom d'identification. Ensuite, j'ai creusé ce D pour le taper. Et c'est notre deuxième profondeur, et je vais dire ici qu'il s'agit d'un contenu d'identification. Dans notre dernière analyse, je vais définir l'identifiant, pied de page. Et je vais dire ceci. Et je vais également commenter toute cette section. Ici, je commente toute la section sur l'heure du box. Et aussi, je vais taper du texte. Est-ce cet élément profond. Pour la section d'en-tête, je vais taper header. En-tête, pour le contenu, je vais taper contin. Et pour le pied de page, je vais taper footer. Donc, dans un premier temps, je vais styliser la section d'en-tête, l'en-tête Haztag Au lieu de cela, je vais ajouter une bordure au transporteur. Bordure, un pixel. Et je veux une bordure solide. Solide et noir. Ensuite, je vais définir la couleur de fond. Fond vert. Et je vais prendre 100 % et une hauteur de 100 pixels. Et pareil pour la partie contenu, je vais dupliquer cette section et Hemo pour passer la couleur de fond rouge Et aussi, je vais prendre 100 % de nous et pour la taille, je vais utiliser la fonction mollet Je vais donc d'abord modifier le nom de l'identifiant contenu. Ensuite, je vais styliser le fut comme une section. Jusqu'à quatre étiquettes. Et je veux la couleur bleue. Configurons donc le fichier et revenons au navigateur. Vous pouvez donc voir ici trois éléments de l'élément profond, et je vais supprimer ce texte. Je vais donc commenter cette balise H one et définir ce fichier. Revenons au navigateur, et maintenant je veux attribuer à cet élément de contenu profond l'espace restant. Pour cela, nous devons utiliser la fonction calf. Donc, dans notre section de contenu, je vais ici associer 100 VH à la hauteur de l'iPod Si je définis ce fichier, comme vous pouvez le voir, notre section de contenu prend une hauteur de 100 % sur eBoard, mais elle comportait une barre de défilement Je ne veux pas cette barre de défilement. Je veux un en-tête et un pied de page fixes. Pour cela, nous devons réduire la hauteur de l'en-tête et du pied de page à partir de cette barre de contenu. Passons donc au studio des visas C. Dans un premier temps, je vais supprimer toutes les frontières. Je fais donc des commentaires sur les frontières. Je n'en ai pas besoin. Alors je vais prendre Marzin zéro. Donc, à partir du body tag, je vais taper margin zero. Après cela, je vais taper ici la fonction Cal. À l'intérieur du rond, la résolution est de 100 VH moins je veux deux moins la hauteur de l'en-tête, et la hauteur de l'en-tête est de 100 pixels De plus, je veux diminuer la hauteur du pied de page, et notre hauteur de pied de page est de 100 pixels Après l'étape de ce fichier, si je vous montre mon navigateur, oups, j'ai fait une stupide mistic. Si je vous montre mon éditeur de code, comme vous pouvez le voir, nous utilisons ici la fonction cal in. Nous devons utiliser la fonction cal en hauteur. Je vais donc copier cette section. En gros, je vais couper cette section et je vais taper à 100 %. Je veux 100 %. Donc, à notre taille, je vais utiliser la fonction mollet J'appuie sur ce fichier, si je vous montre mon navigateur, vous pouvez voir le résultat. Ici, vous pouvez voir notre section de contenu occuper l'espace restant. De plus, nous n'avons pas de barre de défilement. Si je le rends réactif, comme vous pouvez le voir, notre section d'en-tête et de pied de page est fixe, mais notre partie de contenu changera de hauteur en fonction de l'espace restant C'est donc l'un des bons exemples de fonction cal. J'espère que tu comprends. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochaine vidéo. 54. Tutoriel de parcours de clips CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons apprendre une nouvelle propriété, qui est le chemin du clip CSS. Cette propriété comprend un total de quatre valeurs : cercle, ellipse, encart et polygone Voyons donc comment utiliser cette valeur et créer une forme différente. Dans un premier temps, nous allons commencer par le cercle. Pour créer un cercle, nous avons besoin d'une image. Maintenant, dans cette image, nous devons créer ce cercle. En gros, nous devons supprimer la partie sombre de cette image. Nous devons montrer qui se trouve à l'intérieur de cette partie du cercle. Pour créer le cercle, nous avons besoin de trois éléments. Tout d'abord, nous avons besoin du rayon. En utilisant le rayon, nous pouvons définir la taille du cercle. Ensuite, nous devons définir la position où nous devons créer ce cercle. Pour cela, nous devons fournir des Xxs et des YXs. Comme vous pouvez le voir, nous plaçons ce cercle au milieu. Pour cela, nous pouvons prendre XX 50 % et YxS 50 %. Ensuite, une fois que j'ai fourni cette valeur, chemin de notre clip ressemble à cela. Commençons donc par la pratique et voyons comment nous pouvons l'appliquer. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Live Server, et j'ai déjà créé un document TML nommé InExoteTM Comme vous pouvez le voir, à l'intérieur du body tag, on insère ici une image. Maintenant, je veux appliquer le tracé du clip en forme de cercle à cette image. Pour cela, il faut aller dans la section style. Style. Et dans cette balise de style , je vais d' abord sélectionner une image. Ensuite, à l'intérieur de la voiture, je vais appliquer le clip path Trajectoire du clip, cercle Clippath. Comme je vous l'ai dit, pour créer ce cercle, nous devons d'abord définir le rayon. Donc ici, je vais prendre 30 %. Vous pouvez également prendre une valeur en pixel, puis nous devons définir la position où nous voulons placer notre cercle. Je vais donc taper à 50 %, je veux le placer au milieu. C'est pourquoi je transmets la valeur de 50 % pour Y xs et 50 % pour X xs, et je vais définir le fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Et si vous voulez augmenter la taille de ce cercle, vous devez jouer avec cette valeur. Supposons que je passe les 60 %. Si je configure ce fichier, vous pouvez voir le résultat. Et de la même manière, si vous souhaitez diminuer la valeur, passez simplement 10 %. Vous pouvez voir le résultat. C'est ainsi que cela fonctionne. De plus, si vous souhaitez modifier la position de ce cercle, oui, vous pouvez simplement jouer avec les valeurs X et Y Xs. Supposons qu'à partir de ss, je veuille le placer à 70%. Et à partir de XS, je veux le placer à seulement 30 %. Si je configure ce fichier, vous pouvez voir le résultat. À partir de XX, il faut 70 %. À partir de YXS, il faut 30 %. Et si vous voulez créer une forme de cercle central, laissez-moi vous montrer. Ici, je vais passer que YX est 50 % et XX est 0 %. Définissez ce fichier en haut, vous pouvez voir le résultat. Maintenant, il crée une forme de cercle central. Et si vous voulez placer le coin de l'ordinateur portable Skip Path, vous devez indiquer que x est zéro et que YX est zéro. Définissez ce fichier en haut, vous pouvez voir le résultat. J'espère donc que vous comprenez maintenant comment utiliser la valeur du cercle. Parlons maintenant de la forme de l' éclipse. Je vais donc dupliquer cette ligne et commenter la ligne précédente. Mais avant, laissez-moi vous expliquer comment nous pouvons créer cette forme. Voici donc l'exemple de la forme d'ellipse. Pour créer cette forme d'ellipse, nous devons dire quatre choses abord, nous avons besoin d'un rayon horizontal, un rayon vertical, puis nous avons besoin de Xxs et d'une position YxS Appliquons maintenant cette valeur pour créer cette forme. Dans un premier temps, je vais remplacer l'ellipse circulaire en forme de roïde. Ellipse, vous devez d'abord fournir la valeur horizontale. Pour la valeur horizontale, je vais prendre 10 % et pour la valeur verticale, ici je vais prendre 40 %. Ensuite, je veux placer la forme d'ellipse au centre. Ici, je vais passer 50 % pour Xxs et 50 et 50 % pour YxS Après avoir défini ce fichier, vous pouvez voir le résultat. Augmentons maintenant la valeur horizontale. Je vais faire en sorte que ce soit 20 %. Après avoir défini ce fichier, vous pouvez voir la forme ovale parfaite. Et si vous voulez créer cette forme d' Ellipe horizontalement, remplacez simplement ces vannes Portez ce chiffre à 40 % et celui-ci à 20 %. Définissez ensuite à nouveau ce fichier. Vous pouvez voir le résultat et en changeant les XX et les Yx, vous pouvez modifier la position de ces Parlons maintenant de la valeur suivante, qui est un insecte. En gros, cette valeur va créer une forme rectangulaire, et pour créer cette forme, nous devons bien tquatre. En haut, à droite, en bas et soulevez. Commençons par l'aspect pratique et voyons comment créer cette forme. Je vais dupliquer cette ligne et commenter la ligne précédente. Ici, je vais taper encart. Ensuite, dans un premier temps, je vais supprimer toutes les valeurs et je vais d'abord fournir la valeur la plus élevée en partant du haut. À partir du haut, je vais prendre 10 %. Et de la droite, je vais prendre 20 %, du bas, je vais prendre 15 % et de la gauche, je vais prendre 10 %. Si je configure ce fichier, vous pouvez voir le résultat. C'est ce qu'il crée. Et pour que ce soit plus clair, changeons la valeur. partant du haut, je vais prendre 25 %, et en partant de la droite, je vais prendre 30 %. partant du bas, je vais prendre 35 personnes, et en partant de la gauche, je vais prendre 40 %. Si je configure ce fichier, vous pouvez voir le résultat. À l'aide de cette valeur, vous pouvez créer un rectangle, sinon n'importe quelle forme carrée. Parlons maintenant de la forme la plus importante de cette propriété, à savoir le polygone En utilisant la valeur polygonale, vous pouvez créer n'importe quel type de forme. Comme vous pouvez le voir, elle créera un triangle. Vous pouvez également créer une forme d'étoile, tout type de forme géométrique. Comme vous pouvez le voir dans cet exemple, il va créer une forme de rectangle. Pour créer la forme du rectangle, nous avons besoin de trois points au total. Et pour définir chaque point, nous avons besoin d'une valeur excédentaire et d'une valeur YXS Nous avons donc besoin d'un total de trois paires d'excès et d'une valeur YxS. Nous allons donc commencer ce rectangle à partir de ce point, le point rouge. Ensuite, nous allons créer ce point bleu, puis nous allons sauter dans le point jaune. Commençons donc par la pratique et voyons comment créer cette forme. Donc, d'abord, je vais dupliquer cette ligne, commenter précédente et redéfinir ce fichier. Et je vais remplacer l' encart par un polygone. Pour créer le triangle, nous devons ici émousser trois points. Dans un premier temps, je voudrais partir de ce point. Donc, pour les Xxs, je vais passer 50 % et pour les YX, je vais passer 0 Ensuite, je veux créer un autre point dans le coin inférieur droit. Nous devons donc fournir une virgule , puis à partir des deux x, nous devons prendre 100 % À partir de Xxs, je vais réussir à 100 % et à partir de YxS, je vais réussir à Coma, puis je vais créer un point entre la lèvre et le coin inférieur. Donc, pour les Xxs, je vais prendre 0 % et pour les YX, je vais prendre 100 Si je configure ce fichier, vous pouvez voir le résultat. Il crée une forme de triangle parfaite. Maintenant, je vais créer une autre forme géométrique en utilisant la même valeur, polygone Je vais être cette ligne et commenter la précédente. Et encore une fois, je vais supprimer toutes les valeurs et définir ce fichier. Donc, dans un premier temps, je vais m' attarder sur cette position. Encore une fois, je vais passer des X, je vais passer 50 % et des Y xs, je vais passer 0 %. Virgule. Cette fois, je vais réussir quatre victoires, puis je veux marquer un point à cette position. Donc, à partir des XX, je vais passer 100 %, et à partir des Y, je vais passer 50 % Ensuite, je tiens à souligner cette position. Donc, pour les XX, je vais passer 50 % et pour les YX, je vais passer Ensuite, je vais souligner cette position. Donc, à partir des XX, je vais passer 0 % et à partir des YX, je vais passer 15 Si je configure ce fichier, vous pouvez voir le résultat. Cette fois, je crée ce type de forme géométrique en utilisant cette forme polygonale Maintenant, je vais créer un autre exemple. Ici, je vais créer un signe d'ajout. Pour cela, je vais dupliquer cette ligne et commenter la précédente supprimer nvals et définir ce fichier Donc, pour créer le signe d'addition, je veux partir de ce point. Ici, je vais passer à 40 % direction X et à 0 % dans la direction YxS C'est notre premier point. Au deuxième point, je vais passer 60 % XX et 0 % dans la direction YxS Au point suivant, je vais créer un autre point, et je veux le créer à cette position. Donc, pour le XXX, je vais encore prendre 60 % et pour le YX, je vais prendre 40 % Ensuite, je vais créer un point à cette position. Pour cela, encore une fois, je vais passer 100 % en position X et 40 % en position YxS Ensuite, je vais passer 100 % en position X et 60 % en position YxS Ensuite, je vais passer 60 % XX, 100 % la position YxS Ensuite, je vais passer la position Xxs de 40 % uniquement pour supprimer cette virgule inutile car nous avons besoin d'espace entre ces deux valeurs 40 % dans la direction excessive et 100 % dans la direction YxS. Ensuite, je vais prendre 0 % dans la direction ss, et dans la direction X, je vais prendre 60 %. Enfin, je vais prendre 40 % de direction excessive, et 40 %, YX est la direction. Sauvegardons le fichier et voyons ce qu'il crée. J'espère que cela va créer le signe d'ajout. Non, il ne s'agit pas de créer le signe d'addition. Je pense que j'ai fait une erreur. Ici, je ne crée pas ce point, mais quand créer ce point. Je pense que j'ai oublié de mentionner certains points. L'objectif principal est d'utiliser cette valeur, vous pouvez créer différents types de formes géométriques. Il vous suffit de mentionner les bons points en utilisant les valeurs XX et YXS C'est tout pour ce tutoriel. J'espère que vous comprenez maintenant comment appliquer Keep path. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 55. Tutoriel extérieur CSS Shape: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec une autre thèse liée au tutoriel. Et dans ce tutoriel, nous allons apprendre une nouvelle propriété appelée shape outside. En gros, nous utilisons cette propriété pour le formatage du texte. Mais nous allons utiliser cette propriété avec le clip path. Cette propriété comporte quatre valeurs : cercle, ellipse, encart et Je vais maintenant vous montrer pourquoi nous utilisons cette propriété. Supposons que nous créions un cercle en utilisant la trajectoire du clip. Vous pouvez également créer le même cercle en utilisant le rayon de bordure. Mais le problème est de créer ce cercle, il occupe toujours la zone de texte, mais je veux utiliser cet espace blanc comme ceci. Pour cela, nous devons utiliser la forme extérieure à la propriété. Après avoir utilisé cette propriété, nos prises s'ajustent en fonction de la forme. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Salt Studio et mon navigateur en utilisant l'extension if server, et je crée déjà un document TML, nommé index point TML Ainsi, comme vous pouvez le voir dans notre balise body, nous avons une balise image, puis nous avons un paragram Et j'ai réglé la lecture du flux d'image. Et puis dans un premier temps, je vais appliquer un clavier à cette image Je vais donc utiliser cette propriété, clip path. Cercle Key Path. Tout d'abord, nous devons définir le rayon. Je vais utiliser 30 %. Nous devons également définir la position Je vais donc établir l' égalité entre 50 % et 50 %. Je vais configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Cela crée parfaitement notre cercle, mais le problème est que vous pouvez voir les espaces blancs inutiles. Nous devons remplir cet espace blanc inutile avec le texte. Nous devons couvrir cet espace blanc. Pour cela, je vais utiliser une forme d'appel propriétaire à l'extérieur Forme extérieure et elle, je vais utiliser la valeur. Et ici, je vais transmettre la valeur exacte de la forme du cercle. Donc, pour copier cette valeur. Et je vais le coller à Shape Outside. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il est bon de régler en fonction de la forme. Maintenant, déplaçons un peu ce cercle avec le côté des lèvres. Donc Hemo pour passer Xs 20 %, également pour modifier cette valeur X est de 20 % Après avoir configuré ce fichier, vous pouvez voir le résultat. Sinon, vous pouvez atteindre 30 % pour un résultat parfait. Ça a l'air bien. Comme vous pouvez le voir, cette fois notre paragraphe essaie de l'ajuster en fonction de la forme ronde. Vous pouvez maintenant voir un autre problème. Notre texte s'attache presque à cette forme. Ici, nous devons prévoir une petite marge. Ici, je vais passer Shape, margin, 20 pixels. Nous devons utiliser en particulier cette propriété, la marge de forme. Après avoir défini ce fichier, vous pouvez voir le résultat. Maintenant, je vais rediriger vers un site Web, qui est nfili.com À partir de là, nous pouvons créer différentes formes en utilisant Keep Path. Nous pouvons créer n'importe quelle forme. Après avoir créé cette forme, à partir de là, nous pouvons copier la propriété du chemin clé et la valeur. Je vais copier la valeur de la forme du polygone. Ensuite, je vais remplacer la Kipath par cette valeur Ensuite, je vais le remplacer dans notre section extérieure en forme. Si je place ce fichier et que je reviens dans mon navigateur, vous pouvez voir le résultat ici. À partir de ce site Web, vous pouvez obtenir différents types de forme : flèche droite, signe fermé, ellipse, hexagone, pentagone, tout ce que vous souhaitez Ce site Web est un très bon site Web. À partir de là, vous pouvez extraire n'importe quel type de forme avec la valeur. C'est tout pour ce tutoriel. Merci d'avoir regardé cette vidéo, Situne pour le prochain tutoriel 56. Tutoriel sur le filtre CSS partie1: Bonjour, les gars. C'est bon de te revoir. Il s'agit de la première animation CSS liée au didacticiel, et nous allons commencer ce didacticiel en utilisant la propriété du filtre CSS. À l'aide d'un filtre, nous pouvons modifier les effets d'image, et nous avons 12 effets que nous pouvons utiliser dans notre image. Le nom de notre premier effet est none. Si vous ne souhaitez utiliser aucun effet, vous pouvez utiliser cette propriété. Et en utilisant la propriété floue, vous pouvez flouter votre image Et en utilisant la valeur Tess, vous pouvez réduire ou augmenter la luminosité Et pour le contraste, vous pouvez utiliser la valeur de contraste, et la valeur Rp Shooter fonctionne comme une ombre de cette image. En utilisant la valeur rascal, nous pouvons mettre en noir et blanc notre image. Et en utilisant la rotation, vous pouvez sentir une couleur différente avec un angle différent, et notre prochaine valeur est l'inversion Si vous vous souvenez de l' ancienne règle du caminar, vous pouvez comprendre l'effet très facilement, et notre prochaine valeur est En utilisant la valeur d'opacité, nous pouvons contrôler la transparence de cette image Si vous souhaitez contrôler la saturation de cette image, vous pouvez utiliser une valeur saturée. Si vous souhaitez que votre image soit plus colorée ou moins colorée, vous pouvez utiliser cette valeur. Notre prochaine valeur est Cipia et notre dernière valeur est URL Cette valeur RL fonctionne avec les images SVG. Dans ce tutoriel, je vais aborder les six effets. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon coetor Visual Studio et mon navigateur en utilisant l'extension de serveur if J'ai déjà créé un document d' estimation dans mon répertoire de travail actuel. Comme vous pouvez le voir dans mon navigateur, il y a une image, et j'insère déjà cette image en utilisant Imgtag. Comme vous pouvez le voir dans ma section de style, nous avons défini un poids de 600 pixels pour cette image et une hauteur automatique Je vais utiliser tous ces filtres dans cette image. Les effets jouent un rôle très important dans l'animation CSS. C'est pourquoi je commence ce tutoriel avec les effets CSS. Dans un premier temps, je vais utiliser la propriété du filtre. Filtrez, et notre première valeur est zéro. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement, il n'y a aucun changement dans cette image car il s'agit de la valeur par défaut de cette propriété et notre valeur suivante est flou, donc tapez, flou Supposons que je veuille ensemencer cette image jusqu'à quatre pixels. Si je mets cette image, vous pouvez voir le résultat ici. Si vous voulez produire plus sang, vous pouvez augmenter la valeur. Supposons 20 pixels. Si je configure ce fichier, vous pouvez voir le résultat. La valeur par défaut de cette propriété de flou est zéro. Si j'utilise une valeur nulle puis que je définis ce fichier, vous pouvez voir le résultat ici. Maintenant, notre image est clairement visible et il s'agit l'utilisation de la valeur de flou et notre valeur suivante est la luminosité 100 est la valeur de luminosité par défaut, 100 %. Et cette valeur fonctionne avec un pourcentage. Si je configure ce fichier, vous pouvez voir qu'il n'y a aucun changement, et maintenant je veux réduire la luminosité de 20 %. Si je configure ce fichier, vous pouvez voir le résultat. Cela a réduit la luminosité de cette image. Et si vous voulez atteindre la luminosité normale, vous devez dépasser 100. Si je règle, vous pouvez voir le résultat. Et si vous souhaitez augmenter la luminosité de cette image, vous devez transmettre une valeur supérieure à 100%. Supposons que je passe les 300 %. Si je configure ce fichier, vous pouvez voir le résultat. Si nous passons à 0 % de luminosité et que nous réglons le fichier, vous pouvez voir qu'il est complètement noir. Passons à la valeur suivante, qui est le contraste. Je vais taper le contraste. 100 est la valeur de contraste par défaut, 100 %. Si je configure ce fichier, vous pouvez voir le résultat. Si vous souhaitez augmenter le contraste de cette image, vous devez transmettre la valeur supérieure à 100 %. Supposons 200 %. Si je définis ce fichier, vous pouvez maintenant voir le contraste Si vous voulez le diminuer, vous devez passer en dessous de 100 %, soit 50 %. Si je configure ce fichier, vous pouvez voir le contraste. Si nous passons une valeur de 0 % puis que nous définissons le fichier, vous pouvez maintenant voir qu'il n'y a aucun contraste dans cette image. Si nous passons à 0%, comme vous pouvez le voir, notre image devient grise. Notre valeur suivante est Drop Shadow. Mais avant d'utiliser cette valeur, je vais réduire l'image. 400 pixels. Cette valeur est similaire à la propriété box shadow. Tout d'abord, nous devons fournir une ombre horizontale. Je vais fournir dix pixels. C'est pour la direction XX. Ensuite, nous devons fournir une ombre verticale. Pour YxS, je vais passer dix pixels une fois de plus, puis je vais passer le flou de cette ombre, qui est de qui est Ensuite, nous devons passer la couleur de l'ombre. Je vais utiliser la couleur verte. Si je définis ce fichier, vous pouvez voir ici le résultat et vous pouvez également modifier le flou de cette ombre Si je passe à zéro pixel puis que je définis le fichier, vous pouvez maintenant le voir agir comme une ombre solide. De plus, vous pouvez utiliser valeur négative dans ce paramètre. Supposons que je veuille cette ombre moins la direction YxS. Si je configure ce fichier, vous pouvez voir le résultat. Il s'agit de l'effet d'ombre Go Drop du Royaume-Uni, et notre dernière valeur est l'échelle de gris. Laisse-moi te montrer. Échelle de gris. Grâce à cet effet, nous pouvons convertir notre image en couleur en image en noir et blanc. 0 % est la valeur par défaut de ce paramètre d'échelle de gris. Si je configure ce fichier, vous pouvez voir qu'il n'y a aucun changement. Mais si j'utilise 100% puis que je configure le fichier, vous pouvez maintenant voir que cette image a complètement transformé cette image en noir et blanc. N'oubliez pas que nous devons transmettre une valeur comprise entre zéro et cent pour cent, pas plus de 100 %. Vous pouvez utiliser n'importe quelle valeur entre ces valeurs. Supposons que je veuille passer les 70 %. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, l'image est remplie de 70 % de gris et de 30 % de couleur. C'est tout pour ce tutoriel. Dans le prochain tutoriel, je vais aborder filtres restants, à savoir la rotation en U, l'inversion de l'opacité, la saturation, le CiPia et l'URL Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 57. Tutoriel de filtre CSS Part2: Bonjour, les gars. C'est bon de te revoir. Il s'agit de la deuxième partie du didacticiel sur les filtres CSS. Dans ce tutoriel, nous allons aborder les six filtres. Huh, rotation, inversion, opacité, saturation, spia et URL. Commençons par l'aspect pratique et voyons comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon Visual Studio Corator et mon navigateur à l'aide de l'extension Lifesaver, et j'ouvre mon précédent document d' estimation pour Dans un premier temps, je vais appeler la propriété du filtre « filter ». Notre première valeur est Hu Rotate. Et ici, vous pouvez utiliser 023 Vdo à 60 degrés. Je vais passer un DAG à 150 degrés puis définir ce fichier, ici vous pouvez voir le résultat. Si je passe les 100 degrés, je règle ce fichier, vous pouvez voir le résultat différent. En utilisant cette valeur, vous pouvez essayer une combinaison à 360 degrés. Si je configure ce fichier, vous pouvez voir le résultat. Il n'y a aucun paramètre négatif pour cette valeur. Passons à la valeur suivante, qui est l'inversion. Bientôt, plongez à l'envers. Si je définis ce fichier, vous pouvez le voir ici complètement inverser l'image, et nous pouvons passer le paramètre zéro, 200% Supposons que je veuille dépasser les 0 %. Si je définis ce fichier, vous pouvez voir ici qu'il s'agit de la valeur différée de cette propriété. Si je passe 50 % puis que je définis le fichier, si j'utilise une valeur de 50 %, il est maintenant complètement transformé en gris. Si j'augmente la valeur 70% et que je définis ce fichier, vous pouvez maintenant voir le résultat. Cela revient toujours à inverser notre image, mais vous pouvez voir la couche grise dessus De même, si je réduis la valeur en dessous de 50 %, quelque chose de 20 %, puis que je définis le fichier, comme vous pouvez le voir, cela n'inverse pas complètement l'image Il s'agit de l'utilisation de la valeur inversée. Notre valeur suivante est l'opacité. Comme vous pouvez le constater, notre image est maintenant entièrement visible et je veux la rendre transparente. Pour cela, nous devons utiliser la valeur d'opacité. Si je définis ce fichier, comme vous pouvez le voir, il n'y a aucun changement car nous ne fournissons aucun paramètre dans cette valeur. Maintenant, je veux rendre cette image semi-transparente. Je veux fournir 50 %. Si je configure ce fichier, vous pouvez voir le résultat. Et si vous rendez cette image complètement transparente, vous devez passer 0 %. Si je définis ce fichier, les images existent toujours à cet endroit, mais nous l'avons rendu complètement transparent. Et si vous rendez cette image complètement visible, vous devez transmettre une valeur de 100 %. J'espère donc que vous pouvez maintenant comprendre cette valeur, comment elle est portée. J'espère que vous pouvez maintenant comprendre valeur de l'opacité, comment elle est portée Ou la valeur suivante est saturé. Cette valeur va donner de la force aux pixels colorés. Je vais taper saturate. À l'aide de cette valeur, vous pouvez contrôler l'intensité de cette couleur, et 100 est la valeur par défaut de cette propriété, 100 %. Si je définis ce fichier, vous pouvez voir qu'il n'y a aucun changement, et maintenant je veux saturer cette couleur Je vais passer les 200 %. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez voir le changement de couleur, et si vous voulez la désaturer, vous devez transmettre une valeur inférieure à 100 %, soit 70 %. Si je définis ce fichier, vous pouvez maintenant voir la couleur de l' image très terne. Si je passe une valeur de 0 % puis que je définis le fichier, vous pouvez maintenant voir que cette image complètement transformée en une image en niveaux de gris, c'est-à-dire une image en noir et blanc J'espère que vous comprenez maintenant ce qu'est saturé. Notre prochaine valeur est Cipia. Quelqu'un à qui attacher Ciphia. Ce filtre vous donne le look vintage de cette image. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez passer un paramètre compris entre zéro et cent pour cent. Si je passe 0 % puis que je définis ce fichier, vous pouvez maintenant voir l'image réelle. Si j'augmente la valeur de 50 % puis que je définis le fichier, vous pouvez voir ici qu'il applique un effet Ciphia sur cette image, et 100 est la valeur la plus élevée de cette propriété n'y a aucune valeur négative ni valeur en pixels pour cette propriété, et notre dernière valeur est URL. Pour cela, vous devez connaître les images SVG. Et si vous n'avez pas de connaissances de base animation SVG ou en image AVG, vous pouvez consulter mon cours, est disponible sur cette plateforme Accédez simplement à mon profil d'instructeur et vous trouverez ce cours. Dernière chose que je veux dire, supposons que vous souhaitiez appliquer plusieurs effets à cette image. Supposons que vous souhaitiez d'abord utiliser un effet de flou sur cette image Certains pour taper du flou au pixel. Et puis je veux appliquer l'effet SPI à cette image. Espion 50 %. Si je configure ce fichier, vous pouvez voir le résultat. Et maintenant je veux augmenter la luminosité de cette image. Luminosité, 200 %. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez donc ajouter autant d'effet que vous le souhaitez. J'espère donc que le concept du filtre CSS est maintenant clair pour vous. Dans le prochain tutoriel, nous allons comprendre ce que sont les transitions CSS. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 58. Tutoriel de transition CSS: Bonjour, les gars. C'est bon de te revoir. Dans ce tutoriel, nous allons apprendre un nouveau CSS lié aux propriétés, la transition CSS. Il s'agit de l'une des propriétés les plus importantes de l'animation CSS. La question qui se pose maintenant est la suivante : qu'est-ce que la transition ? La transition est synonyme de douceur. Supposons que vous souhaitiez modifier la position d'un objet. Dans le cas contraire, vous souhaiterez augmenter la largeur de l'objet. Permettez-moi de vous montrer l'exemple. Comme vous pouvez le voir dans mon document d' estimation, nous devons tourner trop profondément, et je veux augmenter la largeur lorsque je passe le curseur sur mon objet rouge Et je vois déjà une transition dans cet objet. Si je passe le curseur sur cet objet, vous pouvez voir le résultat Et vous pouvez voir que lorsque notre conteneur augmente la largeur, vous pouvez constater un effet de douceur. Si nous n'utilisions pas l'effet de transition, le travail serait effectué en une seule fois. Ensuite, vous ne pouvez pas voir le lissage lorsque vous augmentez la largeur C'est pourquoi nous devons utiliser la transition. De même, pour notre prochain objet, nous réduisons les boerras au-dessus de l' Laisse-moi te montrer. Comme vous pouvez le constater, il y a une belle transition. Et si nous n'utilisons pas cette transition, elle se fera en une seule fois. Cela se ferait en un clin d'œil. Donc, pour des raisons de fluidité, nous devons utiliser cette transition Parlons des propriétés. Fondamentalement, la transition comporte cinq propriétés : transition, propriété de transition, durée de transition, délai de transition et fonction de synchronisation de transition En gros, notre première propriété est à la limite de toutes ces propriétés. Si vous souhaitez utiliser ces quatre propriétés sur une seule ligne, dans ce cas, vous ne pouvez utiliser que la propriété de transition. Fondamentalement, notre première propriété est la propriété de transition. À l'aide de cette propriété, nous pouvons spécifier pourquoi nous voulons utiliser ces transitions. Supposons que je veuille utiliser cette transition pour le rayon de bordure. Dans le cas contraire, nous. Dans ce cas, nous devons déclarer le nom de la propriété. Quelque chose comme la propriété de transition, le rayon d'eau, sinon, la propriété de transition Width. Notre prochaine propriété est la durée de transition. Dans cette propriété, vous pouvez spécifier la durée pendant laquelle vous souhaitez exécuter l'animation. Notre prochaine propriété est le délai de transition. Nous utilisons cette propriété pour déterminer quand la transition va commencer, et notre dernière propriété est la fonction de temporisation de la transition. Cette propriété comporte des effets intégrés, et à l'aide de ces effets, vous pouvez contrôler la fluidité de cette transition. C'est ça. Étudions la pratique et voyons comment cela fonctionne. Ici, vous pouvez le voir côte à côte, j'ouvre mes visuels avec Coretor et mon navigateur en utilisant l'extension if server, et j'ai déjà créé un document TML nommé index Et ici, vous pouvez voir un DV dans ce document. Et la hauteur du DV est de 200 pixels et est également de 200 pixels. Je n'utilise aucun effet Hover dans cette profondeur. Et maintenant je veux augmenter la largeur de cette division. Je vais donc d'abord utiliser la propriété de transition. Propriété de transition. Comme je vous l'ai dit, je souhaite augmenter la largeur. Je vais appeler la propriété width. Avec cette propriété, nous devons utiliser une autre propriété. Nous devons utiliser la propriété de durée de transition , la durée de transition. En utilisant cette propriété, nous pouvons déclarer la durée pendant laquelle nous voulons exécuter cette transition et je souhaite exécuter notre animation pendant deux secondes. Je vais taper deux a. Vous pouvez prendre votre propre valeur, sinon vous pouvez également utiliser la milliseconde Lorsque je survole mon curseur dans ce d, je souhaite augmenter la largeur du conteneur. Je vais utiliser psutocls point one colon hover. Ensuite, à l'intérieur de la voiture je veux augmenter la largeur du conteneur , en tapant 400 pixels. Si je définis ce fichier, si je le place et que je passe mon curseur dans ce creux, vous pouvez voir la transition et vous pouvez voir la fluidité de cette De même, si je survole mon curseur, vous pouvez également voir le lissage Voyons ce qui se passe si je supprime la transition. Je vais donc commenter ces deux propriétés. Si je place ce fichier et que plus de mes cures sont dans cette case, vous pouvez voir le résultat Il n'y a pas de lissage quand on augmente la largeur. Il suffit d'un clin d'œil terminer la transformation C'est pourquoi nous devons utiliser la propriété de transition car elle donne un bel effet de fluidité à cette transformation Et comme vous pouvez le constater, nous appliquons simplement cette transition dans notre largeur. Mais si j'augmente la hauteur dans notre sélecteur Her, hauteur 350 pixels Et puis définissez ce fichier. Et si je passe mon curseur, comme vous pouvez le voir, en un clin d'œil , cela augmente la hauteur Mais vous pouvez toujours voir l' effet de lissage dans votre largeur Et si vous souhaitez ajouter le même effet pour la hauteur, vous devez taper le nom de la propriété height après la largeur . Vous devez également déclarer la durée de cette transformation. Je veux donc utiliser trois secondes. Si je place ce fichier et que je passe mon curseur sur ce DV, vous pouvez voir le résultat Ou avec une transformation terminée en deux secondes, mais notre transformation de hauteur terminée en trois secondes. Non seulement cela, nous pouvons appliquer le même effet pour la couleur de fond. Fond de type Soto, vert. Nous devons également appeler cette propriété background, height , background. Pour le contexte, je veux utiliser quatre secondes. Si je place ce fichier et que je passe mon curseur dans ce D, vous pouvez voir qu'il a fallu quatre secondes pour changer de couleur. Il s'agit donc de l'utilisation de la propriété de transition et de la durée de transition. Et maintenant je veux utiliser toute cette valeur sur une seule ligne. Je vais donc commenter ces deux lignes, et maintenant je vais parler uniquement de transition. Et maintenant je vais utiliser toute la valeur sur une seule ligne. Je vais donc copier les valeurs et les coller ici. Et aussi, je vais copier les valeurs de durée, et après un espace, je vais les coller. Si je définis ce fichier et HoberMKarr dans ce Dev, vous pouvez voir tous les En utilisant cette propriété, nous pouvons en faire une doublure. C'est le bout court de toute cette propriété. Dans un premier temps, vous devez déclarer les noms des propriétés de transition, puis vous devez déclarer la durée de la transition. Supposons maintenant que vous souhaitiez utiliser durée de transition de deux secondes pour l'ensemble de cette transformation. Dans ce cas, vous pouvez tout taper ici, un Dowlin ne doit également être passé qu'une seule durée, deux secondes Il va maintenant appliquer l'effet de transition, toutes ces propriétés. Si je place ce fichier et que mon curseur et mon curseur se trouvent dans ce D, vous pouvez voir le résultat Dans le même temps, il s'appliquait à lisser cela en hauteur, en largeur et en arrière-plan. Si vous souhaitez utiliser la même durée pour tous ces effets, vous pouvez utiliser ce raccourci C'est tout pour ce didacticiel Dans notre prochain tutoriel, nous allons parler de la fonction de synchronisation des transitions. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 59. Tutoriel de la fonction de synchronisation de transition CSS: Bonjour, les gars. C'est bon de te revoir. Dans ce tutoriel, nous allons parler de la fonction de synchronisation des transitions. Grâce à cette fonction, vous pouvez contrôler la fluidité de cette transition Et voici quelques valeurs courantes liées à la fonction de synchronisation de transition. Linéaire, c'est dedans, c'est dehors, c'est dedans. Basilic cubique. Et nous avons également une autre valeur, mais celles-ci ne sont pas si importantes. Notre première valeur est qu'il s'agit d'une valeur par défaut. Spécifiez un effet de transition avec un début lent, puis d'abord, puis une fin lente. Notre valeur suivante est linéaire. Spécifie un effet de transition à la même vitesse du début à la fin. Du début à la fin, il conserve la même vitesse. Notre prochaine valeur est dans. Spécifiez un effet de transition avec un démarrage lent, et notre valeur es out correspond à l'endroit où se trouve le roll up opposé. Spécifiez un effet de transition avec une fin lente, et notre prochaine valeur temporelle est eso. Spécifiez un effet de transition avec un début et une fin lents, et notre dernière valeur est un bézier cubique Vous permet de définir vos propres valeurs dans une fonction de Bézier cubique Vous pouvez donc définir vos propres valeurs de chronométrage. Sans ces six valeurs, nous avons une autre valeur, début de l'étape, la fin de l' étape et les étapes. Elles ne sont pas si importantes, mais il est bon de les connaître. Voyons comment cela fonctionne dans la pratique. Ici vous pouvez voir, j'ouvre un site web, qvhypenwzia.com. Vous pouvez voir ici un exemple en temps réel de ces valeurs. Es linéaire, est en entrée, en sortie et en sortie. Dans un premier temps, je vais augmenter la durée, la durée à une seconde. Ensuite, je vais commencer cet exemple avec la valeur par défaut. Si je clique sur le bouton Go, vous pouvez voir le résultat. Notre valeur suivante est linéaire. Si je clique sur le bouton Go, vous pouvez voir le résultat. valeurs linéaires maintiennent la même vitesse du début à la fin, et c'est ainsi que si je clique sur le bouton Go, vous pouvez voir le résultat De là, c'est ainsi. Si je clique sur le bouton Go, vous pouvez voir le résultat. Notre dernière valeur est désormais simple. Spécifiez donc facilement l' effet de transition avec un démarrage lent et lent. Permettez-moi de vous donner un autre exemple. Comme vous pouvez le voir, il existe cinq DV différents et j'utilise cinq valeurs de fonction de chronométrage différentes pour eux. Si je prends mes voitures ou tous ces articles, vous pouvez voir le résultat. C'est pour le linéaire, et c'est pour faciliter, c'est pour es in. C'est pour es out et c'est pour Easy out. J'espère que vous comprenez la différence. Passons donc au Results Studio Eator et voyons comment nous pouvons l'utiliser Comme vous pouvez le voir sur votre écran, j'ouvre côte à côte mon Visual Studio Creator et mon navigateur en utilisant l'extension Lifesaver, et j'ai déjà créé un document STML nommé index Et comme vous pouvez le voir, j'ai déjà créé D pour cet exemple. Dans notre précédent didacticiel, nous allons en apprendre davantage sur la propriété et la durée de la transition. Mais dans ce tutoriel, nous allons apprendre la fonction de synchronisation des transitions. Je vais donc appeler cette fonction de synchronisation de transition de propriété. Commençons par la pratique avec la valeur par défaut, qui est E. Some to tape E. Si je place ce fichier et que je place mon curseur sur ce div, vous pouvez voir le résultat. Cet effet de transition commence par lent, puis d'abord, puis se termine par lent. Il s'agit de la valeur par défaut et la valeur suivante est linéaire. Certains à taper, linéaires. Si je place ce fichier et que je passe mon curseur sur ce div, vous pouvez voir le résultat. Cet effet de transition maintient la même vitesse du début à la fin, et notre valeur suivante est in. Donc, tapez is in, je place ce fichier et je passe mon curseur sur le DV pour spécifier un effet de transition avec un démarrage lent De même, nous avons une valeur opposée qui est sortie. Sum Rotive est éliminé. Si je définis ce fichier et que les courbes Hoberm se trouvent dans cette case, comme vous pouvez le voir, spécifiez un effet de transition avec une fin lente Notre prochaine valeur est « in out ». Le motif de la somme est sorti. Si je place ce fichier et que, encore une fois, courbes de Hobermi sont dans ce D, vous pouvez voir le résultat Cela permet de spécifier un effet de transition avec un début et une fin lents. Parlons d'une autre valeur, à savoir les étapes. Bientôt à taper, Steps. Ici, nous pouvons terminer notre transition par étapes. Supposons que je veuille effectuer cette transition en deux étapes, je souhaite donc en passer deux ici. Si je place ce fichier et que j'insère mes voitures dans ce DV, vous pouvez voir le résultat Comme vous pouvez le voir, la transition est terminée en deux étapes, et si je retire mon curseur, vous pouvez voir le même effet. En deux étapes, il termine la transition. Maintenant, je veux terminer cette transition en cinq étapes. Si je place ce fichier et que je mes voitures dans cette case, vous pouvez voir le résultat. Il complète la transition en cinq étapes. Il s'agit donc de la valeur USKaso Steps. La plupart du temps, nous essayons d'éviter cette valeur. Nous n'utilisons pas cette valeur. Mais à des fins éducatives, vous devez avoir des connaissances à ce sujet. Notre valeur suivante est le démarrage par étapes. Je vais donc taper, étape, commencer. Si je place ce fichier et que je passe mon curseur sur ce div, vous pouvez voir en une seule étape qu'il termine l'animation. Mais si j'utilise la valeur de fin d'étape, enregistrez la fin et définissez ce fichier. Si j'ouvre mon curseur , mon animation démarrera pendant deux secondes maximum. Laisse-moi te montrer. Je vais donc passer mon curseur dans cette profondeur. Comme vous pouvez le voir, deux secondes plus tard, il lance l'animation et termine la transition en une seule étape. Il s'agit donc d'un UCs de la valeur de fin d'étape. Passons à la dernière valeur, qui est Qubic Bezier Certains tapent Qubic Bézier. Dans Cubic Bezier, vous pouvez réaliser l'animation en quatre étapes Pourquoi ne pas utiliser la valeur du pas dans notre transition, il n'y a pas de fluidité. Mais dans le basilic cubique, nous pouvons maintenir la douceur de cette transition Supposons que pour notre première étape, je vais prendre 0,5 seconde, pour notre deuxième étape, je vais prendre 0,6 seconde, et pour notre troisième étape, je vais prendre 1 seconde. Et pour notre quatrième étape, je vais prendre 0,1 seconde. Si je place ce fichier et que mes cartes sont dans le div rouge , vous pouvez voir le résultat. Vous commencez par « lent », puis vous terminez en premier. Pour notre premier sf, cela a pris 0,5 seconde et pour notre deuxième étape, cela a pris 0,6 seconde, et pour notre troisième sf, cela a pris 1 seconde, et pour notre dernier tf, il a fallu 0,1 seconde. Il s'agit d'une valeur de site UKSope V. Vous pouvez modifier la durée comme vous le souhaitez. J'espère que vous comprenez maintenant ce qu' est la propriété de la fonction de synchronisation de transition. Dans notre prochain tutoriel, nous allons parler de la propriété du délai de transition. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 60. Tutoriel sur le retard de transition CSS: Bonjour, les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons apprendre ce qu'est la propriété du délai de transition. En gros, cela veut dire, après combien de temps souhaitez-vous commencer la transition ? Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur de studio visuel et mon navigateur à l'aide extension de serveur Lip et j'ouvre mon précédent document d' estimation. Utilisons la propriété du délai de transition. Je vais lier le délai de transition, et je vais passer une valeur de trois secondes, trois S. Si je définis ce fichier et que les Obermcurs sont dans ce D, comme vous pouvez le voir, après trois secondes, vous commencez la De même, si je retire mon curseur, comme vous pouvez le voir, trois secondes plus tard, transition est complète. Vous pouvez régler à tout moment comme vous le souhaitez. Il s'agit d'une fonction uTS de délai de transition, et maintenant je vais utiliser une version abrégée de toutes ces Comme vous pouvez le constater, le total utilise quatre propriétés de transition : propriété de transition, durée de transition, fonction de synchronisation de transition et délai de transition. Je veux en faire une doublure. Pour cela, je vais d'abord commenter ces quatre propriétés de transition. Ensuite, je vais parler de la transition. Dans un premier temps, vous devez déclarer le nom de la propriété. Dans notre cas, avec du son à coller ici. Ensuite, nous devons transmettre la valeur de durée de transition, qui est de deux secondes deux a, puis la fonction de synchronisation de transition, qui est E. Et notre dernière valeur est la valeur du délai de transition, qui est de deux secondes. Maintenant, nous n'avons pas besoin d'utiliser ces quatre propriétés. Vous devez juste vous rappeler que nous devons suivre cette séquence. abord, vous devez transmettre la propriété, puis vous devez transmettre la durée, puis vous devez transmettre la fonction de chronométrage. Enfin, tu dois passer le délai. Donc, si je place ce fichier et le curseur Hoberm dans ce DV, vous pouvez voir l'animation démarrer pendant deux secondes Comme vous pouvez le constater, cela a parfaitement fonctionné. Maintenant, je voudrais vous dire une chose importante. Il n'est pas nécessaire que nous utilisions la transition uniquement avec son sélecteur Vous pouvez utiliser cette transition lorsque vous chargez votre page. a aussi une chose à retenir si nous ne déclarons pas la propriété dans notre cas, je vais donc faire un commentaire à ce sujet. Et puis définissez ce fichier. Comme vous pouvez le constater, cela ne fonctionnera pas correctement. Nous devons donc déclarer la propriété avant de l'utiliser dans notre sélecteur de Hobart, et vous devez vous en souvenir Et maintenant je vais utiliser cette transition avec différents pseudosélecteurs Tapez donc actif. Supprimons d'abord la valeur du délai. Ensuite, je vais configurer ce fichier. Si je survole ma voiture dans cette division, comme vous pouvez le voir, cela ne fonctionne pas car notre pseudo sélecteur est actif Nous devons appuyer sur un clic de souris pour exécuter cette animation. Laisse-moi te montrer. Comme vous pouvez le voir, je continue d' appuyer faiblement sur ma souris, je lance juste mon animation. Lorsque notre mouseti est actif, il va exécuter l'animation Sinon, ça ne marche pas. C'est tout pour ce tutoriel. J'espère que toutes les propriétés de transition sont maintenant claires pour vous. Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 61. Introduction de la transformation 2D dans CSS: Bonjour, les gars. C'est bon de te revoir. Dans ce tutoriel, nous allons apprendre une nouvelle propriété , la transformation. Et en gros, nous allons nous concentrer sur la retransformation. Dans un premier temps, voyons un exemple : qu'est-ce qu'il faut transformer ? Vous pouvez voir ici deux exemples. Il s'agit d'un élément normatif, et cet élément profond est pivoté dans le sens des aiguilles d'une montre, de 20 degrés. En utilisant la transformation de Kuri, nous pouvons faire pivoter n'importe quelle profondeur dans le sens des aiguilles d'une montre, sinon De même, nous avons un autre exemple. Il s'agit d'une normalité et cet élément profond est incliné 20 degrés le long du Xxs et de dix degrés le long du YxS Nous pouvons donc incliner notre élément, faire pivoter notre élément, redimensionner notre élément et bien d'autres choses encore Voyons quelles sont les valeurs d'une transformation en deux D. Comme vous pouvez le constater, nous avons un total 11 valeurs à transformer. Translate, translation X, translation Y, rotation, mise à l'échelle, échelle X, échelle Y, skew, skewx, skewx, skew Y, et notre dernière Et nous avons une autre valeur qui est la valeur par défaut, qui est none. Et en utilisant la propriété matrix, vous pouvez utiliser toute cette valeur sur une seule ligne. Dans ce tutoriel, je vais aborder ces quatre valeurs. Traduisez, traduisez Translate Y et écrivez-le. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon Visual Studio Creator et mon navigateur en utilisant l'extension de serveur Lip, et j'ai déjà créé un document TML nommé index point TML Comme vous pouvez le voir, dans ma structure d'estimation, j'ai déjà créé un élément Dev. J'ai dit 200 pixels de largeur et 100 pixels de hauteur. Et je dis aussi couleur de fond et moderne. Dans un premier temps, je vais commencer cette transformation par la valeur de rotation, type de son, la propriété de transformation. Je vais utiliser la valeur de rotation. Entre parenthèses, nous devons passer le paramètre de degré. Supposons que je veuille faire pivoter cet élément de 40 degrés. Je vais passer le 40 DG. Si je configure ce fichier, vous pouvez voir le résultat. De même, si je passe à 90 degrés puis que je définis ce fichier, comme vous pouvez le voir, notre élément profond pivote de 90 degrés. Notre valeur pivotée fait partie de la titransformation. Il ne fait pas que faire pivoter notre élément, il fait également pivoter notre contenu. Non seulement cela, vous pouvez également utiliser une valeur négative. Supposons que je veuille le faire pivoter de -60 degrés à -60. Si je configure ce fichier, vous pouvez voir le résultat. Et si vous voulez inverser cette profondeur, vous pouvez utiliser moins 180 degrés, sinon 180 degrés. Si je définis ce fichier, vous pouvez voir qu'il s'agit d'un élément de préalimentation. Il s'agit donc de l'utilisation de la valeur de rotation. Parlons de notre prochaine valeur, qui est la traduction. Je veux donc taper «   traduire » ici. Je vais configurer ce fichier. Comme vous pouvez le constater, il n'y a aucun changement. Maintenant, la question qui se pose est la suivante : quel est le sens de traduire ? La méthode translate déplace un élément par rapport à sa position actuelle. Comme vous pouvez le voir, il s'agit la position actuelle de cet élément, et je veux déplacer cet élément, 100 pixels dans la direction X et 200 pixels yx dans la direction. Dans ce cas, nous devons utiliser cette valeur, traduire. Au début, nous devons passer dans la direction XX, puis nous devons passer dans la direction x. Donc, dans un premier temps, je veux déplacer cet élément dans une direction de 100 pixels. Je vais passer les 100 pixels. C'est pour le paramètre XX. Ensuite, je veux déplacer cet élément de 50 pixels dans la direction yxs. Je vais dépasser les 50 px. Si je définis ce fichier, comme vous pouvez le voir, il a déplacé l'élément de sa position actuelle en fonction du paramètre donné pour les Xxs et YxS 100 pixels dans le sens SS et 50 pixels dans le sens YxS. Passons à la valeur suivante, qui est translate X, Summer type translate X. C'est la parenthèse, nous devons transmettre le seul paramètre, qui est le paramètre XX Cette fonction déplace l' élément le long de l'axe X. Si je définis ce fichier, comme vous pouvez le voir, c'est la position exacte de cet élément car nous ne passons aucun paramètre ici. Et maintenant, je veux déplacer cet élément direction Xxs de 200 pixels. Je vais passer 200 ici PX. Si je configure ce fichier, vous pouvez voir le résultat. De même, nous avons une autre valeur pour la direction YxS. Je vais taper, traduire Y. Comme vous pouvez le voir, c'est la position exacte de cet élément Maintenant, je veux déplacer cet élément 100 pixels dans la direction YxS. Entre parenthèses, je vais passer 100 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Il déplace notre élément de 100 pixels dans la direction YxS. C'est tout pour ce tutoriel. Dans le prochain tutoriel, je vais aborder ces propriétés d' échelle, échelle X, échelle Y. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel 62. Échelle 2D de transformation CSS: Bonjour, les gars. C'est bon de te revoir. Il s'agit du deuxième didacticiel relatif à la transformation. Dans ce didacticiel, nous allons apprendre cette échelle à trois valeurs, l'échelle X et l'échelle Y. Essayons de comprendre ce qu' est la mise à l'échelle et comment elle fonctionne Supposons qu'il s'agisse de notre élément DV, ce soit la direction excessive et que ce soit la direction YxS. Si vous souhaitez diminuer ou augmenter la taille de cet élément, vous devez dans ce cas utiliser une valeur d'échelle. Augmentons la taille de cet élément Pour augmenter la taille de cet élément, nous avons besoin de deux paramètres. Paramètre excédentaire et paramètre YxS. Cette méthode d'échelle augmente ou diminue la taille d'un élément. Voyons donc comment nous pouvons l' utiliser dans la pratique. Comme vous pouvez le voir sur votre écran, côte à côte, j'ouvre mon créateur de studio visuel et mon navigateur à l'aide de l'extension Lifesaver, et j'ai déjà créé un document d' estimation nommé index two dot Essayons donc d'augmenter l'élément profond de deux V, deux fois sa largeur d'origine et trois fois sa hauteur d' origine. Donc, d'abord, je vais appeler notre nom de propriété transform. Transformez l'échelle. Au début, nous devons passer la valeur de direction dans le sens excessif, je veux redimensionner cet élément deux fois. Je veux en passer deux ici et dans le sens des X, je veux le redimensionner trois fois, donc je veux en passer trois ici. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, il redimensionne notre élément et il redimensionne également notre texte à l'intérieur de cet élément. De la même manière, vous pouvez réduire l'élément. Revenons à la position normale. Si je définis ce fichier, il aura la taille normale de cet élément, et maintenant je veux diminuer l'élément profond pour qu'il atteigne sa largeur et sa hauteur d'origine Pour la direction de x, je vais passer 0,5, pour la direction de YxS, également, je vais passer 0,5 Si je configure ce fichier, vous pouvez voir le résultat. C'est le cas d'utilisation de la valeur d'échelle et notre prochaine valeur est l'échelle x. Laissez-moi vous montrer. Revenons à la taille par défaut, je vais appeler scale X, et je vais définir ce fichier. La méthode KX augmente ou diminue la largeur d'un élément Supposons maintenant que je veuille augmenter deux fois la largeur de l'élément profond. Dans ce cas, nous ne devons transmettre que la valeur XX, et je veux l' augmenter deux fois. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, la largeur augmente deux fois. Si vous souhaitez diminuer la largeur, vous devez passer une valeur comprise entre 0,1 et 0,9. Passe sonore 0,5. Si je configure ce fichier, vous pouvez voir le résultat. Cela diminue la largeur de cet élément. Revenons à la taille par défaut de cet élément. Maintenant, notre méthode suivante est l'échelle Y. Je vais taper l'échelle Y. Cette méthode d'échelle Y augmente ou diminue la hauteur d'un élément Je veux augmenter la hauteur trois fois par rapport à sa taille d'origine, donc je veux en passer trois ici. Si je configure ce fichier, vous pouvez voir le résultat. Et de la même manière, si vous souhaitez diminuer la hauteur, vous devez transmettre une valeur comprise entre 0,120 et 0,9 Ici, je vais passer 0,6, 0,6. Si je configure ce fichier, vous pouvez voir le résultat. Il a été réduit à la hauteur de cet élément. C'est le cas d'utilisation de la valeur d'échelle. J'espère que vous comprenez maintenant comment cela fonctionne. Dans le prochain tutoriel, nous allons apprendre ces trois valeurs, skew x et skew Y. Mais avant, nous allons apprendre une autre propriété, qui est la transformation d' qui est Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 63. Angle de la transformation CSS 2D: Bonjour, les gars, c'est bon de vous revoir. Il s'agit de la troisième transformation d'une histoire CSS liée à une vidéo. Dans ce didacticiel, nous allons apprendre ces trois propriétés, skew, skew x et skew y. Cette méthode utilise un élément le long des axes X et Y selon les angles donnés Au lieu de cela, nous devons transmettre des angles. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon Visual Studio Creator et mon navigateur en utilisant l'extension lifesaver, et je crée déjà un document TML nommé index Nous devons donc d'abord appeler le nom de propriété transform sum en type transform. Dans un premier temps, je vais commencer ce tutoriel avec une valeur x oblique Je vais passer l'inclinaison X. À l'intérieur de cette parenthèse, nous devons transmettre la valeur de l'angle En utilisant cette valeur, nous ne pouvons changer que la direction XX. Si nous utilisons cette valeur à partir de ce point, cela changera l'angle. Supposons que je passe les 20 degrés. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, à partir de ce point, il faut un angle de 30 degrés. De même, vous pouvez également utiliser une valeur négative. je passe à -20 degrés puis que je place ce fichier, comme vous pouvez le voir, à partir de ce point, il pivote dans le bon sens. Comme notre angle de rotation est de 20 degrés, mais dans ce cas, de -20 degrés. Comme vous pouvez le constater, cette rotation se déplace uniquement dans la direction X, et non dans la direction YX. Passons à la position par défaut, et je vais utiliser skew Yo skew Y. Maintenant, la rotation fonctionne dans le sens vertical Si je passe 20 degrés, 20 DG et que je configure ce fichier, vous pouvez voir le résultat. À partir de ce point, il s'est déplacé de 20 degrés dans la direction YxS. En gros, il est descendu. Si vous souhaitez le déplacer vers le haut, vous devez transmettre une valeur négative. Si je passe à -20 degrés puis que je définis ce fichier, vous pouvez voir le résultat. J'espère que vous comprenez maintenant comment fonctionnent les propriétés X et Sky. Parlons de notre prochaine valeur, qui n'est que faussée. Dans un premier temps, je reviens à la position par défaut, et je vais taper uniquement SQ. Dans cette méthode, dans notre premier paramètre, nous devons passer angle X, puis nous devons passer l'angle YX. Au début, je vais passer un angle Xs de 30 degrés. Ensuite, je vais passer un angle YX de 20 degrés. Si je configure ce fichier, vous pouvez voir le résultat. Non seulement cela avec une valeur positive, vous pouvez également utiliser une valeur négative. Supposons que je veuille passer à -20 degrés dans la direction Y xs. Si je configure ce fichier, vous pouvez voir le résultat. C'est à vous de décider comment utiliser ces valeurs ? Parlons d' une autre propriété liée à la transformation, le nom de cette propriété est transform origin. La question qui se pose maintenant est la suivante : quel est l'Ukage de la propriété transform origin ? C'est à moi de changer la position de l'élément de transformation. Qu'est-ce que cela signifie ? Supposons qu'il s'agisse de notre élément DV Si vous vous souvenez de la valeur de rotation, vous pouvez également vous souvenir du point de rotation, qui est le centre de cet élément. Ce point de rotation est au centre de XX, également à YxS, mais je ne veux pas faire pivoter mon élément à partir du point central Je souhaite modifier le point de rotation. Je veux faire pivoter cet élément à partir de point, cela signifie le coin de l'ordinateur portable. De même, si je veux effectuer une rotation à partir de ce point, alors c'est notre coin inférieur droit et c'est le coin inférieur de notre tour de table. C'est également notre coin supérieur droit. Vous pouvez prendre le point par son nom. Sinon, vous pouvez prendre une valeur en pourcentage ou en pixels. Si vous voulez prendre le point de rotation à l'intérieur de cet élément profond, quelque chose dans cette position, oui, vous le pouvez. Selon la position du point blanc, vous devez prendre 20 % dans la direction excessive et 30 % dans la direction YxS Juste une chose dont vous devez vous souvenir en utilisant cette propriété, que vous pouvez modifier la position de l'élément de transformation. Passons au créateur de Visual Studio et voyons comment cela fonctionne. Comme vous pouvez le voir, c' est notre ty normal, et je fais pivoter ce dp à partir de la position centrale de 20 degrés. Mais si je change la position de l' origine de la transformation à partir de ce point, le son devient t transform origin. Et je vais passer de la position des lèvres de XX à la position YxSTP Le son passe en haut. Avant de configurer ce fichier, je souhaite revenir à cette profondeur dans la position normale. Je vais commenter ces deux lignes. Si je place ce fichier, il revient à sa position normale. Maintenant, je vais supprimer ces lignes, et maintenant je vais définir ce fichier, concentrez-vous simplement sur ce coin Si je configure ce fichier, vous pouvez voir le résultat. À partir de ce coin , il se déplace de 20 degrés. Augmentons la valeur de rotation. Je vais taper 80 degrés. Si je configure ce fichier, vous pouvez voir ce résultat. À partir de ce point, il pivote de 80 degrés. Revenons à la position par défaut. Encore une fois, je vais changer le point de rotation. Je vais donner un pourboire en bas. Maintenant, à partir de maintenant, il va faire pivoter notre élément. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, la rotation ou le point correspond à ce point. Revenons à la position par défaut. Encore une fois, je vais modifier la rotation ou je suis en position. Mais cette fois, je n' utiliserai aucun coin. Maintenant, je veux faire pivoter quelque chose à cet endroit. Dans la direction XX, je vais passer 20 % pour la direction YxS, je vais prendre 40 % Si je configure ce fichier, vous pouvez voir le résultat. À partir de ce point, il fait pivoter l'élément de 80 degrés. Si je passe XX, c'est la valeur zéro et la valeur YX 100 , puis que je définis le fichier. Je vais également modifier l'angle de rotation 20 degrés, puis redéfinir ce fichier. Comme vous pouvez le constater, notre point de rotation se situe maintenant coin inférieur du tour, car dans le sens X, nous utilisons une valeur nulle, mais dans le sens YxS, nous utilisons une valeur de 100 % C'est pourquoi notre point de rotation se situe dans le coin inférieur du tour. Maintenant, la question est de savoir quel est le cas d'utilisation de cette propriété ? En gros, cette propriété est utilisée pour l'animation. Comme vous le savez, il s'agit de notre tutoriel d'animation CSS. C'est pourquoi nous devons en apprendre davantage à ce sujet. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons découvrir notre prochaine valeur. Nous allons apprendre notre dernière valeur, qui est la matrice. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 64. Matrice 2D de transformation CSS: Bonjour, les gars. C'est bon de te revoir. Il s'agit du dernier tutoriel relatif à la transformation. Et dans ce tutoriel, nous allons apprendre la valeur de la matrice. Maintenant, la question est : qu'est-ce que la matrice ? La méthode matricielle, combine toutes les méthodes de transformation tui en une seule Cette méthode prend un total de six paramètres, contenant une fonction matricielle qui vous permet de faire pivoter, de redimensionner , de déplacer et d'incliner des éléments Surtout si on n' utilise pas trop cet élément. Voyons donc comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon Visual Studio Coator et mon navigateur en utilisant l'extension de serveur if, et je crée déjà un document d'estimation nommé Idexfo Dans un premier temps, je vais appeler le nom de propriété transform, et je vais appeler notre matrice de valeurs. Dans un premier temps, nous devons passer la valeur de l'échelle X. Je vais donc en adopter un. Dans notre direction excessive, je ne veux pas l'étendre. C'est pourquoi je passe une valeur, et ensuite, nous devons transmettre une valeur Y asymétrique, et je vais passer -0,3 Ensuite, nous devons transmettre une valeur x asymétrique, et ici je vais passer zéro Ensuite, nous devons transmettre la valeur de l'échelle Y, et ici je vais en transmettre une. Maintenant, nous n'avons que deux paramètres lay translate X et translate Y. Pour translate X, je vais passer zéro, et pour translate Y, je vais passer zéro Si je définis ce fichier, comme vous pouvez le voir, cela fait simplement incliner notre élément profond de -0,3 degré Et si vous souhaitez redimensionner cet élément deux fois, vous devez passer à l'échelle X deux et à l'échelle Y deux. Si je configure ce fichier, vous pouvez voir le résultat. Avec Skew, cela permet également de redimensionner notre élément. C'est le cas d'utilisation de cette méthode matricielle. Maintenant, utilisons toutes les valeurs de transformation ti une par une avec l'effet Her et essayons de créer une animation Je vais commenter cette ligne, et dans un premier temps, je vais créer le pseudo sélecteur, D, colon-hover Ensuite, dans le Calibra, il est indiqué que je vais utiliser la propriété transform et que je vais taper transform Dans un premier temps, je vais utiliser la valeur d'échelle, et je veux redimensionner cet élément deux fois. Je vais passer ici. Si je place ce fichier et que je passe mon curseur sur cet élément de, vous pouvez voir le résultat. Comme vous pouvez le constater, la transition est terminée en une seule étape. Pour que cette transformation soit fluide , nous devons utiliser la propriété de transition Je veux taper transition. Ici, nous devons d'abord déclarer le nom de la propriété et notre nom de propriété est transform. Ensuite, nous devons déclarer le temps de transition, qui est de 1 seconde. Si je place ce fichier et que je passe mon curseur dans cet élément de, vous pouvez voir la fluidité de cette transformation Mais dans cet exemple, notre élément profond est redimensionné à partir de la position centrale. Mais maintenant, je veux changer la position d'origine de la transformation. Donc, pour taper, transformez Aisin. Top tardif. Si je définis ce fichier et façon dont mes cailloux se trouvent dans cet élément profond, comme vous pouvez le voir, à partir de maintenant, cela redimensionnera notre élément profond Utilisons notre prochaine propriété de transformation en deux D, qui est translate. Donc, pour dupliquer cette ligne, je voudrais commenter la précédente. Ici, je vais taper « traduire ». Et je veux déplacer notre élément profond, excessive de 200 pixels et la direction YxS de 150 pixels Si je place ce fichier et Her Mikers dans cet élément profond, vous pouvez voir le résultat Il déplace notre élément profond, 200 pixels en excès de direction et 150 pixels YX en direction Utilisons la valeur suivante, qui est asymétrique. Encore une fois, je vais dupliquer cette ligne et commenter la précédente. Ici, je vais taper skew. Et dans le sens XX, je veux le faire pivoter de 20 degrés et dans le sens x, je veux le faire pivoter de dix degrés. Si je place ce fichier et Obermkurs est dans cette profondeur, vous pouvez voir le résultat Comme vous le savez, l' origine de notre transformation est une perte de temps. Ainsi, lorsque I Obermkers s'intéresse à cette plongée, vous pouvez voir le résultat J'espère que vous comprenez maintenant ce qu'est transformation en deux D et comment nous pouvons l'utiliser dans notre animation. Merci d'avoir regardé cette vidéo. Dans notre prochain tutoriel, nous allons apprendre la transformation en trois D. Restez à l'affût pour notre prochain tutoriel. 65. Tutoriel de transformation 3D CSS: Bonjour, les gars. C'est bon de te revoir. Dans ce tutoriel, nous allons apprendre cette méthode à quatre traductions. Traduisez, traduisez Y, traduisez Z et traduisez trois D. Nous avons déjà découvert ces deux VLU dans notre précédent tutoriel Mais ici, je vais l' utiliser avec une transformation en trois D. Voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon Visual Stereo Creator et mon navigateur en utilisant l'extension Lifesaver, et j'ai déjà créé un document TML nommé index Comme vous pouvez le constater, à l'intérieur du contenant à brevets, nous avons une boîte contenant Utilisons notre premier VLU, mais avant d'appeler la propriété transform Certains pour taper transform. Notre première valeur est translate X, someone to tape, translate X. Entre parenthèses, je vais passer 200 pixels Si je place ce fichier et le curseur Hobermi dans cet élément, vous pouvez voir le résultat Cela déplace mon élément de 200 pixels dans le sens XXL. Et si vous voulez le déplacer dans la direction opposée, dans ce cas, vous devez passer à -200 pixels Si je place mon fichier et curseur Hobermi dans cette case, vous pouvez voir le résultat Nous l'avons déjà appris dans notre tutoriel précédent Faisons cette transition en trois D. Je voudrais passer une autre valeur, qui est prospective, prospective de 200 pixels Je veux aussi transmettre la valeur de rotation Y, la rotation, Y ici je vais passer à 30 degrés. Si je place ce fichier et que je passe mon curseur dans cet élément de, vous pouvez voir le résultat Comme vous pouvez le voir, il déplace notre élément profond, il fait également pivoter notre élément profond. Vous savez, nous utilisons la prospective, c'est pourquoi elle vous donne un look en trois D. Parlons donc de notre prochaine valeur, qui est translate Y. Donc, pour utiliser, traduisez Y. Ici, je vais utiliser une valeur positive Si je place ce fichier et que je place mon curseur sur cet élément, vous pouvez voir le résultat Permettez-moi d'utiliser la valeur de rotation x. Donc, pour taper, faites pivoter X. Si je place ce fichier et Obermicursor sur ce DP, vous pouvez voir qu'il a maintenant l'air plus attrayant et plus dynamique Utilisons notre propriété suivante, qui est translate Z, someone to tape, translate Z. Si je passe 200 pixels, puis que je définis ce fichier j'ai le curseur Hoberm sur ce div, comme vous pouvez le voir, cela ne fonctionne pas Mais j'ai déjà dit de traduire cette valeur lors de cette plongée. Utilisons une autre valeur avec cela. Je vais utiliser la valeur de rotation avec ça, rotation, y 60 degrés. Si je place ce fichier et le curseur Hobermi sur ce DV, vous pouvez voir Mais cela ressemble beaucoup à Translate X, mais ce n'est pas le cas. Laisse-moi te montrer. Permettez-moi d'utiliser la valeur prospective avec cela. SMTyppSpective, perspective de 900 pixels . Si je place ce fichier et le curseur Hobermi sur ce DV, vous pouvez voir Laissez-moi vous montrer la vraie démonstration, alors vous pourrez la comprendre correctement. Supposons qu'il s'agisse de notre élément de développement. Au début, je vais faire pivoter ce DVlement si nous utilisons la valeur transls Z, alors il se déplacera comme suit J'espère que vous comprenez maintenant comment fonctionne la traduction des valeurs z. Parlons de notre dernière valeur, qui est translate trois D. Certaines pour taper, traduire trois D. Ici, traduire trois D. Ici nous devons passer un total de trois valeurs, XX YxS et Zaxs Supposons que pour XX je passe 50 pixels et pour xs, je passe 50 pixels, et pour Zexs, je passe zéro Si je configure ce fichier et ouvre mon Carter sur ce DV, vous pouvez voir le résultat Et si j'augmente la valeur Translate Z, supposons que je tape 40 pixels, puis que je place ce fichier et que je passe mon curseur sur ce développement, vous pouvez voir le résultat. En même temps, il se déplace sur XX dans la direction, dans la direction YxS et dans la direction Z xs J'espère que vous savez maintenant ce qu'est la valeur des trois D du transit. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons aborder ces deux valeurs, échelle trois D et échelle Z. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel 66. Échelle de tutoriel de transformation 3D CSS: Bonjour, les gars. C'est bon de te revoir. Il s'agit d'un autre didacticiel lié à la transformation en trois D. Dans ce didacticiel, nous allons apprendre ces quatre méthodes, scalX scale Y, scale Z et skill three D. Nous avons déjà découvert scalX et la méthode scale Y dans nos précédents Mais encore une fois, je vais répéter cette méthode dans ce tutoriel. Mais la méthode la plus importante pour les trois D est l'échelle. Elle définit une transformation à trois niveaux D en donnant une valeur pour les Zs et notre dernière méthode est l'échelle trois D. En utilisant cette méthode, nous pouvons utiliser trois valeurs différentes à la fois. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon coordinateur Visual Studio et mon navigateur en utilisant l'extension p server, et je crée déjà un document TML nommé index point HTML Donc, d'abord, je vais utiliser le nom de propriété transform, sum to type, transform ici. Notre première valeur est SkxuTyp scale x ici, skill X. Je veux redimensionner cet élément deux fois dans la direction x, donc je vais passer à Si je place ce fichier et que je place mon curseur dans cet élément D, vous pouvez voir le résultat De même, nous pouvons utiliser la valeur Y de l'échelle. Je vais changer l'échelle Y. Si je place ce fichier et que je place mon curseur sur cet élément, vous pouvez voir le résultat Comme nous ne fournissons aucun point d'origine de transformation, c'est pourquoi il se trouve au milieu de l'échelle de cet élément. Il s'agit d'une position d'origine par défaut. Mais si vous utilisez la valeur d'origine de transformation avec cela, laissez-moi vous montrer puis définissez ce fichier et cartes Hobermi sont sur ce développement, vous pouvez voir le résultat différent Parlons de notre valeur la plus importante, les compétences informatiques. Mais d'abord, je vais commenter cette ligne. Je vais taper scales a ici. S'adapte au temps. Si je définis ce fichier et cartes Hobermi sont impliquées dans ce développement, comme vous pouvez le constater, il n'y a aucun changement car cette valeur ne fonctionne qu'avec une transformation en trois D, nous devons lui attribuer trois D L. Je vais commenter cette ligne, et je vais utiliser cette valeur avec une perspective et faire pivoter Y. Je vais également décommer Si je place ce fichier et que je passe mon curseur sur ce développement, vous pouvez maintenant voir le résultat. Si j'augmente la valeur définie sur l' échelle , que je tape sept ici place ce fichier et que je passe mon curseur sur ce développement, vous pouvez maintenant voir la différence, comment cela fonctionne. De même, si je diminue la valeur de l'échelle, somme au type 0,5 place ce fichier et que je passe le curseur sur ce développement, vous pouvez voir le résultat. J'espère que vous comprenez maintenant comment fonctionne la méthode Scalet Parlons de notre dernière méthode, qui est l'échelle trois D. Type de somme : échelle trois D ici, échelle trois D. En utilisant cette méthode, nous devons passer ici un total de trois valeurs : échelle X, échelle Y et échelles. En utilisant cela, nous pouvons utiliser trois valeurs différentes à la fois. Donc, pour les XX, je veux le redimensionner deux fois. Pour YxS, je veux le redimensionner trois fois et pour Xxs , je veux le redimensionner cinq Si je place ce fichier et que je passe mon curseur sur cet élément, vous pouvez voir le résultat premier temps, il a redimensionné cet élément deux fois dans le sens excessif, puis trois fois dans le sens de Y x, puis cinq fois dans le sens de Xerox Il s'agit de l'utilisation de la valeur 3D de l' échelle 3. J'espère que c'est clair pour toi maintenant. C'est tout pour ce tutoriel. Dans le prochain tutoriel, nous allons découvrir une nouvelle propriété, qui est prospective. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 67. Tutoriel 3D de rotation de la transformation CSS: Bonjour, les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons commencer une transformation en trois D. Dans notre chapitre précédent, nous avons découvert la transformation en deux D. Mais dans ce chapitre, nous allons apprendre la transformation en trois D. Sans transformation en trois D, nous ne pouvons pas imaginer l'animation. Voyons donc les valeurs associées à une transformation en trois D. Comme vous pouvez le voir, nous avons un total de dix transformations en trois D liées à la valeur. Rotation X, rotation Y, rotation Z, rotation trois D, translation Z, translation trois D, échelle trois D, échelle Z, prospective et matrice trois D. Dans la méthode de rotation X, nous devons transmettre la valeur de l'angle. De même, nous devons transmettre la valeur de l' angle pour la rotation Y, mais pour la méthode de rotation en trois D, nous devons transmettre un total de quatre paramètres, X Y Z, et la valeur de l'angle. Dans ce didacticiel, nous allons donc aborder ces quatre méthodes, faire pivoter x, faire pivoter Y, faire pivoter Z et faire pivoter trois D. Voyons comment les méthodes fonctionnent dans un exemple réel Comme vous pouvez le constater, nous devons identifier éléments profonds de notre document, et j'ai dit qu'il y avait une valeur enracinée différente pour cet exemple. Si je survole mon curseur et fais pivoter un élément profond, vous pouvez voir la transformation. De cette façon, la rotation en X fonctionne. Ici, nous utilisons la valeur rotatx avec le prospect. Si nous utilisons une valeur de rotation, elle trace une ligne dans la direction X de ce point à ce point. Permettez-moi de vous montrer le véritable exemple. Supposons qu'il s' agisse d'un élément profond, et si j'utilise la valeur rotatx, cela créera une ligne allant de ce point à ce point Il s'agit de notre gamme Transform Origin. Si je passe une valeur positive, quelque chose de 40 degrés, alors fera pivoter notre élément de cette façon. Si je passe à -40 degrés, fera pivoter cet élément de cette façon Tu peux voir mon visage ? Absolument pas Mais si j'utilise un angle de 90 degrés, il va faire pivoter cet élément comme ceci. Maintenant, l'élément n'est pas correctement visible. Mais si je le fais pivoter de 180 degrés, vous pouvez maintenant voir la partie opposée de cet élément. De cette façon, la rotation se réchauffera. Parlons de notre prochaine valeur, qui est la rotation Y. Si je survole mon curseur dans ce DV, vous pouvez voir De plus, nous utilisons la valeur prospective avec cela, afin que vous puissiez facilement comprendre cette valeur. Si nous utilisons la valeur Y de rotation, elle trace une ligne de ce point à ce point. Direction moyenne YxS. C'est pourquoi nous l'appelons rotation Y. En utilisant la valeur de l'angle, vous pouvez le tourner du côté gauche, sinon du côté droit Voyons l'exemple de la façon dont cela fonctionne. Si nous utilisons la valeur Y de rotation, cela tracera une ligne entre ce point et ce point signifie la direction YxS Il s'agit de notre ligne d'origine et, par défaut, elle est toujours au centre. Si je passe un périmètre positif de 40 degrés, fera pivoter cet élément de cette façon. De même, si je passe à -40 degrés, cet élément fera pivoter cet élément de cette façon Si je fais pivoter cet élément de 90 degrés, l'ensemble de l'élément est maintenant moins visible et vous pouvez voir mon visage. Si je le fais pivoter de 180 degrés, vous pouvez voir la partie opposée de cet élément. Notre valeur suivante est la rotation Z. Si je place le curseur sur cette plongée, vous pouvez voir le résultat Il définit trois rotations en D le long des Z. Voyons comment cela fonctionne. Voici l'exemple de rotation de Zexis. Il définit trois rotations en D le long de l'axe Z. Par défaut, point d' analyse est toujours centré, et en utilisant une valeur positive ou négative, nous pouvons le faire pivoter de cette façon, sinon de cette façon Notre dernière et dernière valeur est rotation trois D. Elle définit une rotation complète en trois D. Si je passe le curseur sur ce div, vous pouvez voir le résultat. À la fin de cet exemple, je vais vous montrer comment cela fonctionne. Commençons par l'aspect pratique en faisant pivoter la valeur des œufs. Comme vous pouvez le voir, côte à côte, j'ouvre mon Visual Studio Creator et mon navigateur en utilisant l'extension if server, et je crée déjà un document d'estimation nommé demo point TML Comme vous pouvez le constater, à l'intérieur d'un contenant parent, je crée un contenant en boîte, et j'ai dit que la hauteur et la largeur étaient similaires pour notre contenant parent et pour notre contenant enfant Pour le contenant parent, j'ai dit une couleur de fond gris, et pour le contenant pour enfant, je dis une couleur de fond chocolat Appelons la propriété transform et utilisons la valeur rotate eggs. Donc, pour appeler transform rotate X. Ici, nous devons transmettre un paramètre d'angle de rotation, je vais donc taper 40 degrés. Si je place ce fichier, vous pouvez voir le résultat ici. C'est normal, mais vous ne pouvez pas trop sentir le changement. Pour cela, je vais utiliser la prospective et la transition que vous pouvez comprendre très facilement. Je vais l'utiliser avec Her selector, point, box, colon, Her À l'intérieur des étalonnages, je vais appeler cette propriété. Et je vais appeler transition property pour plus de fluidité. Transition et le nom de notre propriété est transform et notre durée de transition est de 1 seconde. Si je dis ce fichier et passe mon curseur sur cet élément profond, vous pouvez voir comment il fonctionne, mais ce n'est pas clair du tout. C'est pourquoi je vais utiliser un autre vdo prospectif Cela va vous donner les trois ou deux, et je ne vais pas expliquer comment fonctionne la prospective. Pour des raisons prospectives, je vais vous donner une vidéo séparée. Utilisons la valeur prospective. Tapez donc prospectif. Et entre parenthèses, nous devons transmettre la valeur et notre valeur est de 200 pixels Si je place ce fichier puis que je passe mon curseur sur cet élément, vous pouvez voir le résultat, comment cela fonctionne. Supposons qu'il crée une ligne entre ce point ce point signifie la direction Xx. En utilisant cette valeur, vous pouvez la tourner vers le haut, sinon vers le bas. Il s'agit de la valeur use du code de rotation. Changeons l' angle de rotation de 90 degrés. Si je place ce fichier et que je passe mon curseur sur cet élément, vous pouvez maintenant voir le résultat. Il est désormais totalement invisible. Si vous voulez l'inverser complètement, vous devez passer une valeur de 180 degrés à 180 degrés. Si je place ce fichier et que je passe mon curseur sur cette plongée, vous pouvez voir le résultat. Comme vous pouvez le voir, il fait pivoter notre élément deve de 180 degrés. Non seulement cela, vous pouvez également modifier la position d'origine de la transformation. Laisse-moi te montrer. Je vais appeler transform origin property. Transformez l'origine. Maintenant, je ne veux pas faire pivoter cet élément au milieu de cet élément. Je veux le faire pivoter depuis ce coin. Dans ce cas, nous devons utiliser la valeur du bas à droite, du bas à droite. Avant de définir ce fichier, je vais également modifier l'angle de rotation, qui est de 30 degrés. Si je place ce fichier et que je place mon curar sur cet élément, comme vous pouvez le voir, depuis le coin inférieur droit, il pivote de 30 degrés J'espère que vous comprenez maintenant comment fonctionne la valeur rotative. Passons donc à la valeur suivante, qui est la rotation Y. Mais avant, je vais commenter cette ligne Et là, je vais taper rotate Y. Si je place ce fichier et le curseur Obermi sur cet élément, vous pouvez voir le résultat Comme vous pouvez le voir, divisez notre élément et tracez une ligne de ce point à ce point. C'est la direction moyenne du YX. Et à partir de cette ligne, vous pouvez la tourner du côté gauche, sinon du côté droit en fonction de la valeur de l'angle. Tout est similaire à la rotation de la valeur x. Tracez simplement une ligne et divisez cet élément de ce point à ce point dans la direction YxS C'est pourquoi nous l'appelons rotation Y. Passons à notre prochaine méthode, qui consiste à faire pivoter Z. Sound rot, rotate Z. Si je place ce fichier et que je passe mon curseur sur Deep, vous pouvez voir Il trace une ligne dans Zdaxs. Je veux dire le milieu de cet élément DV. Permettez-moi de vous montrer un exemple et de voir comment cela fonctionne. Et tu peux voir une photo. Si vous utilisez la rotation x, elle trace une ligne entre ce point et ce point. À l'aide de cette valeur, vous pouvez faire pivoter votre élément vers le haut ou vers le bas. Si vous utilisez la valeur Y de rotation, vous pouvez faire pivoter votre élément, du côté droit ou de la lèvre. Si vous utilisez la valeur Z de rotation, laissez-moi vous montrer comment cela fonctionne. J'espère que vous comprenez maintenant comment fonctionne la rotation de cette valeur Parlons de notre dernière valeur, qui est la rotation de trois D. Voyons d'abord la vraie démonstration. Si j'utilise la rotation en trois D, nous pouvons utiliser toutes les valeurs de rotation en même temps. Cette ligne est pour la ligne de rotation XXS, et celle-ci est pour YxSt, c'est notre ligne Zxs Maintenant, je vais le faire pivoter dans le sens S. En même temps, je vais la faire pivoter dans le sens YxS, cette ligne est dans le sens Xxs, même temps, nous pouvons la faire pivoter dans le sens zxs En gros, il est défini une rotation en trois D. Au début, je vais appeler la valeur, faire pivoter le CD. Ensuite, entre parenthèses, vous devez passer un total de quatre paramètres, XX YxS Zaxs Vous pouvez spécifier l' accès à la rotation en utilisant un nombre pour les trois premiers arguments Mais pour le quatrième argument, vous devez spécifier la valeur de l'angle. Pour Xs, je vais passer deux virgules pour YxS, je vais passer moins un moins un De même, pour Zaxs, je vais passer moins un. Mais dans notre quatrième paramètre, nous devons transmettre la valeur de l'angle, une partie doit être saisie à 45 degrés. Si je place ce fichier et Robert mycar sur cet élément, vous pouvez voir C'est le Royaume-Uni de la méthode de rotation en trois D. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, je vais aborder ces deux valeurs. Traduisez Z et traduisez trois D. Merci d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 68. Tutoriel CSS Perspective: Bonjour, les gars. C'est bon de te revoir. Dans ce tutoriel, nous allons apprendre une nouvelle propriété, qui est CSS prospective. Dans nos précédents tutoriels, nous l'avons déjà appris. Mais dans ce tutoriel, nous allons l'utiliser individuellement. Mais avant de passer à la pratique, voyons quelques exemples. Ici, vous pouvez voir que c' est l'exemple de la rotation et c'est aussi l'exemple de la rotation Mais la différence, c'est que pour cet élément, nous utilisons la prospective. C'est pourquoi il fournit trois D L. De même, voici l'exemple de rotation YXS Pour notre premier exemple, nous n'utilisons pas de prospective, mais pour notre second exemple, nous utilisons du prospectif. C'est pourquoi il fournit trois D L. Si vous utilisez la prospective, vous pouvez voir clairement la rotation, et si vous n' utilisez pas la prospective, vous ne pouvez pas comprendre la rotation. Essayons de le comprendre avec plus de détails. Supposons que vous regardiez un écran de projecteur à partir de ce point. On peut dire que la distance et l' angle de vue sont dits prospectifs. Il paraîtra plus grand si vous le regardez plus près et si vous le regardez de loin, il paraîtra plus petit. Laissez-moi vous montrer la vraie démonstration. Supposons qu'il s'agisse de notre élément div. Si vous le regardez de près, il paraîtra plus grand, et si vous le regardez de loin, il paraîtra plus petit. C'est ce qu'on appelle le prospective. Il semble petit et grand même s'il n'est pas redimensionné. J'espère que maintenant c'est clair pour vous, prospect s' accompagne d'une autre propriété dont l'origine est prospective. Par défaut, il est livré avec un centre, mais vous pouvez modifier le prospect où vous le souhaitez. Essayons de comprendre l'origine potentielle en détail. Supposons que ce soit votre chambre. Si vous le regardez depuis le centre, vous pouvez voir clairement tous les murs et le sol. C'est votre dernier étage, c'est votre dernier étage. Voici votre mur latéral droit, voici mur latéral de votre lèvre et voici votre mur d'arrière-plan. Mais si vous regardez votre chambre depuis le coin de l'ordinateur portable, je veux dire que depuis ce coin, vous ne pouvez pas voir le dernier étage et le dernier étage plus tôt. De même, si vous regardez votre chambre depuis cette position qui signifie position supérieure, vous ne pourrez pas voir le dernier étage plus tôt. Vous pouvez voir le rez-de-chaussée, le mur d'arrière-plan, le mur latéral droit et le mur latéral gauche car votre position d'origine potentielle est en haut. De même, si vous regardez votre pièce depuis le coin supérieur droit, vous ne pouvez pas voir le bon mur et votre dernier étage est à peine visible ou non. Parce que votre origine potentielle est la bonne. Mais si vous regardez votre chambre du côté droit, par erreur, je tape le bon mot en position de levage. Si vous utilisez l'origine potentielle du côté droit, vous ne pouvez pas voir correctement le mur droit. Vous pouvez voir l'arrière-plan, vous pouvez voir le rez-de-chaussée, vous pouvez voir le dernier étage et vous pouvez également voir le mur latéral du rebord. Mais votre paroi latérale droite n'est pas visible. Si vous utilisez l'origine prospective en bas à droite, vous ne pouvez pas non plus comprendre le bon mur. Comme vous pouvez le voir, le mur droit n'est pas non plus visible. De ce fait, le rez-de-chaussée est rarement visible. De même, si vous regardez votre pièce depuis le bas, vous ne pouvez pas voir correctement le rez-de-chaussée. Si vous regardez votre chambre depuis le coin inférieur de votre ordinateur portable, vous ne pouvez pas voir le clapet. De plus, vous ne pouvez pas voir complètement le rez-de-chaussée. Si vous n'avez utilisé que Lap Prospective Origin, vous ne pouvez pas voir le lip al. Vous pouvez voir le val droit, vous pouvez voir l'arrière-plan L, vous pouvez voir le rez-de-chaussée, vous pouvez également voir le dernier étage, mais vous ne pouvez pas voir le bout des lèvres. Ce sont toutes des valeurs d'origine. Vous pouvez également utiliser une valeur en pourcentage avec cela. Avec le prospect, vous pouvez modifier l'origine du prospect. Commençons par l'aspect pratique et essayons de comprendre comment nous pouvons utiliser la propriété d'origine potentielle et potentielle. Comme vous pouvez le voir, côte à côte, j'ouvre mon cœur de Visual Studio et mon navigateur en utilisant l'extension if server, et je crée déjà un document TML nommé index point Comme vous pouvez le constater, il existe un élément de base de données. Maintenant, je veux faire pivoter ce DVelement lorsque je place mon curseur sur Donc ici, je vais utiliser la propriété transform, donc tapez transform. Transformez, faites pivoter, faites pivoter X, et je veux le faire pivoter jusqu'à 50 degrés dans le sens Xxs. Si je place ce fichier et Hobermkaza sur cet élément profond, vous pouvez voir Comme vous pouvez le voir, cela fait pivoter notre élément, mais ce n'est pas clair car nous n'utilisons aucune valeur prospective. Dans nos didacticiels précédents, nous utilisions la valeur prospective comme valeur de transformation, mais maintenant je vais utiliser la propriété potentielle, et nous devons utiliser cette propriété potentielle dans notre conteneur de base, et non dans le sous-continent. Ici, nous devons lier les perspectives. Je vais passer Prospective 800 pixels. Si j'ai défini ce fichier et que Hobermcur se trouve sur cet élément, vous pouvez maintenant voir l'apparence des trois D. Dans nos précédents tutoriels, nous avons utilisé la prospective comme valeur de transformation. Vous devez juste vous rappeler que la perspective donne à l'élément un aspect en trois D. Vous devez également vous rappeler que si vous utilisez une propriété potentielle individuellement, vous devez l'utiliser dans le conteneur parent, non dans le conteneur enfant. Modifions maintenant la valeur potentielle. Supposons que je passe les 100 ans. Comme je vous l'ai dit plus tôt, diminuer la valeur du prospect fera paraître les choses plus grandes. Si je passe le curseur sur cet élément, vous pouvez voir la différence. Maintenant, il paraît plus grand parce que nous surveillons cet élément de très près. C'est pourquoi il paraît plus grand. Dans le cas contraire , si nous augmentons la valeur potentielle de 1 200 pixels , puis que nous définissons ce fichier et passons le curseur sur cet élément, vous pouvez voir le résultat. Vous pouvez maintenant voir le plus petit objet. Parce que nous savons qu' un objet paraît petit lorsqu'on le regarde de loin. Comme vous pouvez le constater, la distance est maintenant de 1 200 pixels. Pour l'instant, je vais taper 800 pixels prospectifs. Parlons de l' origine prospective et de son fonctionnement. Donc, dans un premier temps, je vais appeler cette propriété, qui est origine prospective, origine prospective. Par défaut, centre de valeur S et centre de valeur YxS. Donc, tapez la racine, centre et centre ici, centre au centre. Si je définis ce fichier et voitures Hobermi sont sur ce développement, comme vous pouvez le voir, à partir du point central, cela fait pivoter notre élément Comme vous pouvez le constater, il n'y a aucun changement car il s'agit de la position centrale. Dans un premier temps, je vais utiliser la valeur. Origine prospective, c'est vrai. Si je définis ce fichier et qu'Obermicars travaille sur ce développement, vous pouvez voir le résultat Comme vous pouvez le constater, notre élément ne déborde pas du bon côté car notre perspective est désormais du bon côté C'est pourquoi nous ne pouvons pas voir le bon niveau. De même, si nous utilisons la valeur lift p et définissons ce fichier et bermca sur cet élément de, vous ne pouvez plus voir le niveau des lèvres tel que vous pouvez le voir Notre élément ne déborde pas du côté de la lèvre, mais il déborde du Si nous utilisons une forme de cube, vous pouvez la comprendre correctement. Vous pouvez essayer toutes les valeurs d'origine une par une. Non seulement cela, vous pouvez également utiliser une valeur en pourcentage. Nous allons apprendre tout cela lorsque nous travaillerons sur de vrais projets. C'est tout pour ce tutoriel. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 69. Tutoriel de style de transformation CSS: Bonjour les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons apprendre une nouvelle animation CSS liée aux propriétés, et le nom de la propriété est transform style. En gros, ce document fonctionne avec transform Property. Apprenons-en plus à ce sujet. La propriété de style de transformation spécifiait la manière dont les éléments devaient être affichés dans un espace à trois D. Fondamentalement, cette propriété a deux valeurs. Notre premier valorem est plat. J'ai précisé que l'élément enfant ne conservera pas sa position en trois D, il s'agit de la valeur par défaut. La valeur principale et importante est préservée en trois D. Spécifie que les éléments enfants conserveront leur position en trois D. En gros, je veux dire que si nous utilisons une valeur de trois D préservée dans l'élément parent, alors notre élément parent fonctionne comme un objet à trois D. Permettez-moi de vous montrer l'exemple. Ici, vous pouvez voir que nous avons animé un élément enfant, comme vous pouvez le voir, le plus petit élément dV passant par le plus grand élément DV Comme vous le savez, un dv ou un élément parent plus grand. Si nous utilisons une valeur de trois D préservée, nous pouvons réaliser ce type d'effets à trois D. Si nous n'utilisons pas la valeur des trois D préservée, laissez-moi vous le montrer. Vous pouvez maintenant voir que notre élément parent n'agit pas comme un élément en trois D et que notre élément enfant ne peut pas passer par l'élément parent. Il s'agit donc de la propriété de style use cage of transform. Permettez-moi de vous donner un autre exemple. Ici, vous pouvez voir un parent Deb, et à l'intérieur du parent Deb, nous avons un enfant en profondeur, et je fais pivoter notre enfant à 40 degrés à la duction YxS. Par défaut, notre style de transformation au stylo était basé sur une valeur plate C'est pourquoi notre parent Deep ne se comporte pas comme un objet à trois. Mais si nous utilisons la propriété de style de transformation et que nous utilisons la valeur de conservation des trois D, notre profondeur d'arrière-plan agit comme un objet à trois, et notre enfant qui se déplace en profondeur traverse l'élément d'arrière-plan. Alors, sans perdre votre temps, passons à l'aspect pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon Visual Studio Creator et mon navigateur en utilisant l'extension de serveur Lip, et je crée déjà un document SML nommé index point HTML Ici, vous pouvez voir un total de deux éléments div, l'élément parent et notre élément enfant. Comme vous pouvez le constater, nous faisons déjà pivoter notre élément enfant de 50 degrés dans la direction Xxs, et j'utilise déjà la propriété potentielle dans notre élément parent Je dis valeur potentielle 800 pixels maintenant je veux faire pivoter l'élément DIV parent. Je vais utiliser la propriété transform dans notre conteneur parent. Transformer. Faites pivoter Y, et je veux le faire pivoter de 30 degrés dans la direction YX, 30 degrés. Si je configure ce fichier, vous pouvez voir le résultat. Oui, il fait pivoter notre élément, mais il n'a fourni aucune boucle en trois D car nous n'utilisons aucune propriété de style de transformation Je vais donc utiliser la propriété de style de transformation, le style de transformation. Par défaut, cette propriété est fournie avec une valeur plate, mais je vais utiliser trois valeurs D préservées. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Vous pouvez maintenant voir notre élément enfant passer par l'élément parent. N'oubliez pas que vous devez utiliser cette propriété dans votre conteneur parent, non dans le conteneur enfant. Si j'active la barre d'outils de mon développeur et que je sélectionne cet élément, comme vous pouvez le voir, notre valeur X de transformation et de rotation est de 50 degrés. Salut, c'est notre élément enfant. Si j'augmente l'angle de rotation, vous pouvez voir la transformation. Si je diminue l'angle de rotation, vous pouvez également voir la transformation. Faisons pivoter le conteneur parent. Je vais donc sélectionner le conteneur parent, et je vais faire pivoter ce conteneur parent. Si je fais pivoter le conteneur parent, vous pouvez voir l'apparence des trois D. Vous pouvez maintenant clairement voir notre élément enfant passer par l'élément parent. Il s'agit de la propriété de style use cage of transform. Maintenant, changeons l'origine de transformation de notre élément enfant. Alors tapez, transformez l'origine, et je tape bottom. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. En partant du bas, il fait pivoter notre élément enfant de 50 degrés. Laissez-moi vous le montrer clairement. Si j'augmente la valeur de rotation ou l'élément parent, vous pouvez le voir clairement. Comme vous pouvez le voir, depuis le bas, il fait pivoter notre élément. C'est tout pour ce tutoriel. J'espère que vous comprenez maintenant à quoi sert la propriété du style de transformation. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 70. Tutoriel de visibilité du backface CSS: Bonjour, les gars. Bon retour. Encore une fois, je vous propose un nouveau tutoriel et dans ce didacticiel, vous allez apprendre une nouvelle propriété, à savoir visibilité de la face arrière Vous devez utiliser cette propriété avec la propriété transform. Avant de passer à l'aspect pratique, essayons de comprendre ce qu' est la visibilité de la face arrière La propriété de visibilité de la face arrière définit si la face arrière d'un élément doit être visible face à l'utilisateur Maintenant, la question est : qu'est-ce que le backface ? La face arrière d'un élément est une image miroir de la face avant affichée. Supposons qu'à l'intérieur de cet élément de, vous tapez hello world. Si je le fais pivoter de 180 degrés, vous pouvez voir la face arrière d'un élément Comme vous le savez, il reflète votre élément. Comme vous pouvez le voir, le texte se reflète. Cette propriété est utile lors de la rotation d'un élément. Il vous permet de choisir si l'utilisateur doit voir le verso ou non Supposons que vous ne souhaitiez pas afficher la face arrière d'un élément À l'aide de cette propriété, vous pouvez la contrôler. Et notre propriété de visibilité de la face arrière comporte deux valeurs, visible et masquée Permettez-moi de l'expliquer avec un objet en trois D. Comme vous pouvez le voir sur votre écran, voici un cube en trois D. Si vous utilisez une valeur cachée, vous ne pouvez pas voir la partie opposée de ce cube. Mais si vous utilisez une valeur visible, vous pouvez voir l'autre partie à travers ce cube. C'est la principale différence entre ces deux valeurs. Permettez-moi de vous donner un autre exemple. Comme vous pouvez le voir sur votre écran, il y a deux éléments div, et j'utilise la propriété transform, tous deux de ces éléments. Comme vous pouvez le voir, nous utilisons la valeur Y de rotation. Si je passe mon curseur sur notre premier élément div, vous pouvez voir, vous pouvez voir la face arrière de notre premier Comme vous pouvez le constater, il reflète notre texte, mais je ne veux pas montrer le verso lorsque je fais pivoter notre élément Dans cet élément, nous utilisons la propriété de visibilité du backfat. Si je passe le curseur, vous ne pouvez plus voir la face arrière de cet élément Parce que nous utilisons une valeur cachée pour celui-ci. Commençons par la pratique et essayons de comprendre comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon Visual Studio Coor et mon navigateur en utilisant l'extension Lifesaver, et je crée déjà un document TML nommé Comme vous pouvez le voir dans mon navigateur, nous avons au total deux éléments de développement, continuer et box. Comme je vous l'ai dit plus tôt, si vous souhaitez utiliser la propriété de visibilité de la face arrière, vous devez également utiliser la propriété de transformation Dans le sélecteur Hober, je vais taper transform Transformez, faites pivoter, Y, et je veux le faire pivoter de 180 degrés. Si je définis ce fichier et courbes Hoberm se trouvent sur cet élément, vous pouvez le voir faire pivoter notre Vous pouvez également voir le texte en miroir. Je vais maintenant utiliser notre nouvelle propriété, qui est la visibilité de la face arrière Je vais taper back phase visibility. Tout d'abord, je vais utiliser la valeur visible. Si je place ce fichier et que les cursus Obermi se trouvent sur cet élément, vous pouvez voir le verso Mais si j'utilise une valeur cachée, laissez-moi vous montrer et définir ce fichier et sur mica sur cet élément Deve, No ne peut pas voir la face arrière de C'est le cas d'utilisation de la propriété de visibilité de la face arrière. C'est tout pour ce tutoriel. le prochain tutoriel, nous allons apprendre les animations CSS. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 71. Tutoriel d'animation CSS partie1: Bonjour, les gars. C'est bon de te revoir. Enfin, nous allons apprendre l'animation CSS. Vous pouvez animer n'importe quel élément SML à l'aide de l'animation CSS. Voyons un exemple. Comme vous pouvez le constater, il existe un élément DV. Il s'anime automatiquement sans survol de la souris. Il convertit le rectangle en cercle, puis le cercle en rectangle. Voici un petit exemple d'animation. Cela fonctionne automatiquement. Vous n'avez besoin d'aucun effet de survol. Voyons quel type de propriété nous avons en CSS pour créer cette animation. Comme vous pouvez le constater, nous avons un total neuf propriétés liées à l'animation CSS. Notre premier nom de propriété est le nom de l'animation. À l'aide de cette propriété, vous pouvez définir un nom pour l'animation. De là vient la durée de l'animation. À l'aide de cette propriété, vous pouvez définir la durée pendant laquelle vous souhaitez exécuter cette animation. D'où la propriété du délai d'animation. Elle spécifie un délai pour le début d'une animation. D'où le nombre d' itérations d'animation. Elle spécifie le nombre de fois qu'une animation doit être jouée. Notre propriété suivante est la direction de l'animation. Il précisait si une animation devait être jouée en avant, arrière ou en cycles alternés Et puis vient la fonction de chronométrage des animations. Il définit la courbe de vitesse de l'animation. Notre prochaine propriété est le mode film d'animation. Il spécifie un style pour l'élément lorsque l' animation n'est pas jouée. Nous allons le découvrir dans nos derniers tutoriels. Notre propriété suivante est l'état de la phase d' animation. Elle indique si l' animation est en cours d'exécution ou en pause, et notre dernière propriété est l'animation. Il s'agit de la propriété abrégée. Vous pouvez utiliser toutes ces valeurs de propriétés à la fois en utilisant cette propriété. Nous allons apprendre toutes ces propriétés une par une. Maintenant, pour utiliser toutes ces propriétés d'animation, vous devez créer un sélecteur le nom est Addd Dans un premier temps, vous devez taper Aderate keyframes, puis fournir un nom d'animation Vous devez juste vous rappeler de ne pas laisser d' espace dans ce nom. Vous pouvez fournir un trait d'union, vous pouvez également utiliser un trait de soulignement ou un étui en forme de chameau, mais ne laissez aucun espace Ensuite, à l'intérieur des calices, vous devez fournir deux mots clés différents de et deux Cela signifie à partir de l'endroit où vous souhaitez démarrer l'animation et en utilisant deux mots clés, vous devez fournir le point de terminaison de l' animation. À l'intérieur des calices, vous pouvez utiliser n'importe quelle propriété CSS. Supposons que vous souhaitiez modifier la largeur du conteneur. Oui, tu peux. Il existe une autre méthode que vous pouvez utiliser. Vous pouvez utiliser un pourcentage pour le même travail. Vous pouvez remplacer la position de départ par 0 % et de même, vous pouvez remplacer la position finale par 100 %. Ces deux déclarations vont donner le même résultat. Mais ici, vous pouvez utiliser n'importe quelle valeur de pourcentage comprise entre 0 et 100. Supposons que vous souhaitiez changer la couleur au point de départ de l'animation et que vous souhaitiez également changer la couleur à 20 %. Vous pouvez fournir plusieurs valeurs si vous utilisez cette méthode. Donc, sans perdre votre temps, étudions la pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur de studio isalts et mon navigateur en utilisant l'extension de serveur t. Comme vous pouvez le voir, j'ai déjà créé un document TML nommé index point TML Comme vous pouvez le voir, il existe un élément profond et le nom de la classe est box. Et je stylise déjà cet élément de avec 250 pixels, hauteur 200 pixels, et j' aligne également cet élément profond au milieu de cette page Web. Maintenant, je veux animer cette profondeur. Je veux transformer ce rectangle en cercle. Avec cela, je souhaite également changer la couleur sans utiliser son sélecteur Je vais utiliser différentes propriétés d'animation CSS. Dans un premier temps, je vais créer un sélecteur d'images-clés au tarif de Keyframe Après le sélecteur d'images clés, nous devons fournir un nom d' animation Pour notre animation, je vais prendre un exemple. Ensuite, dans le fichier arise, nous devons utiliser deux mots clés from et deux, from, puis je vais en utiliser deux. point de départ, je veux dire rayon de bordure zéro, propriété du rayon de bordure quelque temps. Rayon de bordure 0 %. À la fin de cette animation, je souhaite modifier le rayon de bordure 50 %. Rayon de bordure 50 %. Si je définis ce fichier, il n'exécutera pas l'animation car nous devons lier le nom de cette animation à cette boîte. Pour cela, je vais prendre une propriété, qui est le nom de l'animation, le nom notre animation est un exemple. Grâce à cette méthode, vous pouvez utiliser cette image-clé plusieurs fois et vous n'avez pas besoin de créer cette animation encore et encore. Maintenant, avec le nom de l'animation, nous devons également déclarer la durée de l' animation. Je vais appeler une autre propriété, qui est la durée de l'animation. Et pendant 2 secondes, je veux lancer cette animation. Ici, vous pouvez également utiliser une valeur de seconde ou de milliseconde. Donc, si je définis cette page, vous pouvez voir l'animation ici, mais elle exécute notre animation une seule fois et cela prend deux secondes pour terminer cette animation. Maintenant, je décide de lancer cette animation cinq fois. Pour cela, nous devons utiliser une autre propriété, qui est le nombre d' itérations d'animation Donc, l'animation, le nombre d'itérations, et je veux l'exécuter cinq fois. C'est pourquoi j'en passe cinq ici. Donc, si je définis ce fichier, comme vous pouvez le voir, il exécutera notre animation cinq fois. Trois, quatre et cinq. Une fois le terme terminé, il arrête d'exécuter notre animation. Et si vous voulez exécuter cette animation indéfiniment, vous devez transmettre une valeur infinie ici, une certaine valeur t infinie. Si je définis ce fichier, comme vous pouvez le voir, il exécute maintenant notre animation pour toujours. Je ne veux pas exécuter cette animation indéfiniment, donc je veux transmettre trois valeurs ici. Je veux le lancer trois fois. Maintenant, comme vous pouvez le voir, une fois l'animation terminée, revenez à la position précédente en une seule étape. Lorsqu'il revient de la valeur finale à la valeur de départ, comme vous pouvez le voir, il n' y a pas de transition. En une seule étape, il termine l'animation. Pour fournir une base lisse, nous devons utiliser une autre propriété, qui est la direction de l'animation, St animation direction. Et je vais utiliser une valeur alternative. Si je règle ce fichier, vous pouvez maintenant voir le lissage lorsqu'il revient à sa position normale Si je le lance indéfiniment, vous pouvez voir sa fluidité. Comme vous pouvez le constater, quand on revient à la position de départ, il y a une douceur. Parlons maintenant de la propriété de direction de l'animation. Fondamentalement, la direction de l'animation était livrée avec quatre valeurs, inverse normal alterné alterné inverse inverse. Normal est la valeur par défaut. L'animation est jouée normalement. Je travaille vers l'avant. Dans le cas contraire, les inverses fonctionnent à l'envers. Si vous utilisez une valeur inverse, l'animation est jouée dans le sens inverse. Puis vient la valeur alternative. Si vous utilisez une valeur alternative, elle est d'abord jouée vers l'avant, puis vers l'arrière. Notre dernière valeur est l'inverse alternatif. Dans ce cas, l'animation est d' abord jouée en arrière, puis en avant. Vous avez déjà découvert la valeur alternative. Il passe de la position de départ à la position finale, puis revient à la position de départ. Notre valeur suivante est inversée. Laisse-moi te montrer. Si j'utilise cette valeur puis que je définis ce fichier, comme vous pouvez le voir, l'animation part d'un cercle puis est convertie en carré. Parlons de notre dernière valeur, qui est l'inverse alternatif. Si j'utilise une valeur inverse alternative puis que je définis ce fichier, comme vous pouvez le voir, l'animation est d' abord jouée en arrière, puis en avant. C'est donc le cas d'utilisation de la propriété de direction d'animation. Pour l'instant, je vais utiliser une valeur alternative. Si j'ai configuré ce fichier, vous l'avez déjà appris. C'est tout pour ce tutoriel. Dans le prochain tutoriel, je vais vous montrer les différentes méthodes de création d'images-clés Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 72. Tutoriel d'animation CSS Part2: C'est bon de vous voir, les gars. Dans ce tutoriel, je vais vous montrer la deuxième méthode pour exécuter l'animation. Dans notre précédent tutoriel, nous avons utilisé « from » et deux mots clés. Mais dans ce tutoriel, nous allons utiliser la valeur en pourcentage. Sans perdre votre temps, revenons au codificateur Visual Studio Comme vous pouvez le voir, côte à côte, j'ouvre mon coréateur Visual Studio et mon navigateur à l'aide de l'extension Lifesaver, et j'ouvre mon précédent Comme vous le savez, from est notre position de départ. Je vais réprimer avec 0 %, 0 %. Vous connaissez deux mots clés ou deux positions finales. Je vais réprimer deux mots clés à 100 %. Donc, si je sauvegarde ce fichier, comme vous pouvez le voir, c'est ou de la même manière. Et maintenant, je veux changer la couleur d'arrière-plan à la position finale, donc je vais utiliser la propriété d' arrière-plan, arrière-plan, notre couleur d' arrière-plan est le rouge. Si j'ai configuré ce fichier, comme vous pouvez le voir, avec une transformation de forme, cela a également changé de couleur. Comme vous pouvez le constater, pour cette animation, nous utilisons au total quatre propriétés d'animation CSS différentes : le nom de l' animation, la durée de l' animation, nombre d'itérations de l'animation et la direction de l'animation Je vais maintenant vous montrer comment utiliser 410 de cette animation. Je veux dire, comment pouvons-nous utiliser ces quatre valeurs de propriété sur une seule ligne ? Pour celles-ci, nous devons appeler une autre propriété d'animation , à savoir l'animation. Animation. Dans un premier temps, nous devons transmettre le nom de l'animation. Comme vous pouvez le voir, le nom de notre animation est un exemple. Donc, copiez le nom et collez-le ici. Ensuite, nous devons dépasser la durée de l' animation. Comme vous pouvez le constater, la durée de notre animation est de deux secondes, le son passant à une seconde N'oubliez pas que vous devez suivre cette séquence, puis je vais passer la valeur du nombre d'itérations, qui est infinie Ensuite, je vais transmettre la valeur de direction de l'animation , qui est alternative. Pour l'instant, ces quatre lignes supplémentaires ne sont pas nécessaires. Je vais commenter ces lignes et je vais configurer ce fichier. Comme vous pouvez le constater, cela a parfaitement fonctionné. Cela fonctionne de la même manière. Je vais maintenant parler d'une autre nouvelle propriété, à le délai d'animation. Pour cela, je vais commenter cette ligne et décommenter celles-ci Après la propriété duration, je vais taper animation delay. Ici, je vais passer trois, c'est gagner trois secondes. Vous pouvez également prendre une valeur en millisecondes. Cela signifie que si je supprime ce fichier, notre animation sera mise en vedette pendant trois secondes maximum Permettez-moi de vous en montrer quelques-unes pour configurer ce fichier. Comme vous pouvez le voir, au bout de trois secondes, notre animation démarre. C'est donc le cas d'utilisation de la propriété de retard. Enfin, je vais utiliser une autre propriété, qui est la fonction de chronométrage des animations. Mais avant, je vais vous montrer les valeurs de la fonction de chronométrage des animations CSS. En gros, nous devons exécuter six valeurs si linear is in is out, is in out Q weg bezier Si vous utilisez la valeur E, elle spécifie une animation avec un démarrage lent, puis d'abord, puis une fin lente. Il s'agit de la valeur par défaut. Notre valeur suivante est linéaire. Je spécifie une animation avec la même vitesse du début à la fin. Puis vient notre troisième valeur, qui est in, spécifiez l'animation avec un démarrage lent. Dans le cas contraire, nous avons une autre valeur. Oui, spécifiez une animation avec une fin lente. Notre cinquième valeur est e in out, spécifiez une animation avec un début et une fin lents et notre dernière valeur est un Bzier cubique Vous pouvez définir vos propres valeurs dans une fonction de type cubique. Permettez-moi de vous montrer le véritable exemple de leur fonctionnement. Vous pouvez voir ici les éléments avec différentes valeurs de fonction de chronométrage. Le linéaire est en entrée est en sortie et e en sortie. Comme vous pouvez le constater, nous utilisons la durée de l'animation pour tout cela Mais comme vous pouvez le constater, le travail est différent. Leur vitesse n'est pas la même. Comme vous pouvez le constater, le linéaire maintient la même vitesse du début à la fin, puis vient notre prochaine valeur, qui est la facilité. Comme vous pouvez le voir, cela a commencé lentement, puis d'abord et s'est terminé lentement. Et puis entrez. Il a spécifié l'animation avec un démarrage lent. Et puis arrive IO. Il spécifie l'animation avec une fin lente et notre dernier défaut est EEO Il spécifie une animation avec un début et une fin lents. C'est donc la différence entre toutes les valeurs de la fonction de chronométrage. Je vais donc vous montrer comment nous pouvons l'utiliser dans la pratique. Je vais donc appeler notre propriété sous le nom fonction de chronométrage de l'animation. Animation, fonction de chronométrage. Au début, je vais utiliser sa valeur, invoquer pour taper est Si je définis ce fichier, comme vous pouvez le voir, il commence par lent, puis d' abord et se termine lentement. Et il s'agit de la valeur par défaut. Je vais utiliser notre prochaine valeur, qui est linéaire. Type d'invocation, linéaire. Si je configure ce fichier, comme vous pouvez le voir, il conserve la même vitesse. Vous ne pouvez pas comprendre la différence dans cet exemple. Vous pouvez le comprendre correctement lorsque nous commençons notre exercice et notre projet. Ensuite, je vais utiliser notre autre valeur, qui est EN. Si je définis ce fichier, comme vous pouvez le voir, il spécifie une animation avec un démarrage lent. Nos prochaines valeurs sont connues. Le type Sum est sorti. Si je définis ce fichier, comme vous pouvez le voir, il spécifie une animation avec une fin lente. Nos valeurs de luxure sont entrantes, somme à taper est sortante. Si je définis ce fichier, comme vous pouvez le voir, il spécifie l'animation avec un démarrage lent et une fin lente. Maintenant, je vais utiliser notre valeur de luxure qui est Bzier cubique. Je vais taper Cubic Bzier ici, vous devez transmettre un total de quatre valeurs, pas plus de quatre valeurs, pas moins de quatre valeurs Au début, je vais prendre une valeur de 0,1 , puis je vais prendre une valeur de 0,4. Ensuite, je vais prendre une valeur de 1,0. Viennent ensuite la valeur 0,1. Il va couvrir l' animation en quatre étapes. Pour notre première étape, cela va prendre 0,1 seconde. Pour notre deuxième étape, cela prendra 0,4 seconde, pour notre troisième étape, cela prendra 1 seconde, et pour notre dernière étape, cela prendra encore une fois 0,1 seconde. Donc, si je configure ce fichier, vous pouvez voir le résultat. Au bout de trois secondes, vous pouvez voir le schéma d'animation. Avec cette valeur, vous pouvez terminer votre animation en quatre étapes. Comme vous pouvez utiliser toutes les étapes comme raccourci. Pour cela, vous devez utiliser cette valeur en troisième position. abord, vous devez transmettre le nom de l'animation puis la durée, la fonction de synchronisation, la valeur du délai, le nombre d'itérations, puis la direction de l'animation. Ne t'inquiète pas pour ça. Nous allons apprendre tout cela lorsque nous démarrerons nos projets. Je vais maintenant changer de couleur à 50 % de l'animation. Je veux dire que 50 % de la position de l'animation, 50 % à l'intérieur du Caris, je veux changer la couleur de fond Fond bleu. Si je place ce fichier, comme vous pouvez le voir, à la position de 50 % de l'animation, cela change de couleur. Tout d'abord, il convertit la couleur chocolat en couleur bleue, puis il convertit la couleur bleue en couleur rouge. Nous pouvons utiliser autant de valeur que vous le souhaitez ici. Voilà pour ce tutoriel. Dans notre prochain tutoriel, nous allons apprendre ce qu'est mode film d'animation et ce qu' est le mode animation plâtré Ne manquez donc pas notre prochaine vidéo. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 73. Tutoriel de mode de remplissage d'animation CSS: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre une nouvelle animation CSS liée aux propriétés et le nom de notre propriété est CSS Animation Fl Mode. Mais maintenant, la question qui se pose est qu'est-ce que le mode film d'animation ? La propriété du mode film d'animation spécifie style de l'élément lorsque l'animation n' est pas en cours de lecture. Nous pouvons l'utiliser avant qu'il ne commence. Nous pouvons également l'utiliser après. Sinon, nous pouvons l' utiliser à la fois comme condition. En même temps, nous pouvons l'utiliser avant l'animation et en haut de l'animation. Parlons maintenant valeurs liées au mode film d'animation. Cette propriété a un total de quatre valeurs, aucune, en avant, en arrière et les deux None est la valeur par défaut. L'animation n' appliquera aucun style à l'élément avant ou après son exécution. Notre prochaine valeur est la valeur future. L'élément conservera les valeurs de style définies par la dernière image-clé. En gros, cela dépend de la direction de l'animation et du nombre d'itérations de l'animation Notre valeur suivante est rétrograde. L'élément obtiendra les valeurs de style définies par la première image-clé et les conservera pendant le délai d'animation Sinon, nous pouvons utiliser notre dernière valeur, qui est les deux. L'animation suivra les règles à la fois pour l' avant et pour l'arrière, étendant les propriétés de l'animation dans les deux sens Nous allons utiliser cette valeur des quatre modes de film dans ce didacticiel. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir côte à côte, j'ouvre mon créateur de studio de résultats et mon navigateur à l'aide de l'extension Lifesaver, et j'ai déjà créé un document HTML nommé index point STML . Vous pouvez également voir un Et j'ai défini une largeur de 150 pixels et hauteur de 100 pixels dans cet élément de développement Maintenant, je vais animer cet élément profond et je vais également lui donner une couleur différente Je vais augmenter la largeur de cet élément. Et comme vous pouvez le voir, j'ai déjà créé l'image-clé pour cette animation, et le nom de notre image-clé est À l'intérieur des couleurs, je vais nouer. Au début, je vais prendre 0 %. À l'intérieur des couleurs, je vais d'abord changer la couleur de fond, l' arrière-plan Je vais mettre de la couleur jaune. Comme je vais augmenter la largeur de l'élément, somme de la largeur W, comme vous pouvez le voir, notre largeur précédente était de 150 pixels, et maintenant je vais mettre 200 pixels. Je vais également dupliquer cette ligne trois fois. 0 %, puis enfin 50 %, 100 %. Dans 50 % des animations, je vais augmenter la largeur à 50 pixels. Et aussi, je vais changer la couleur de fond. Couleur de fond rouge. Et à 100 %, je vais dire article de 300 pixels, et je vais également changer de couleur. Cette fois, je vais utiliser la couleur bleue. Donc, en gros, nous créons une image-clé d'animation simple. Utilisons cette image-clé dans cette boîte. Pour le premier, je vais prendre la propriété de l'animation, l'animation. Le nom de notre animation est un exemple. Ensuite, nous devons passer la durée de l' animation, et je veux terminer cette animation en 2 secondes. Ensuite, je vais transmettre la valeur du délai d'animation et je veux retarder cette animation de trois secondes. Si je place ce fichier, comme vous pouvez le voir, il exécute notre animation pendant trois secondes au maximum. Une fois l'animation terminée, elle revient à sa position initiale. Je vais maintenant utiliser la propriété du mode film d'animation. Nous pouvons l'utiliser après la valeur de durée, sinon nous pouvons appeler le nom de la propriété. Je vais appeler la propriété Animation field mode. Comme vous le savez, cette propriété comportait quatre valeurs. Dans un premier temps, je vais utiliser la valeur rétrograde à l'envers. Si j'utilise le mode retour en arrière, cela passe directement dans le 0 % de cette animation. Permettez-moi d'augmenter le temps de temporisation de l' animation. Je vais utiliser cinq secondes pour cet exemple. Si j'ai défini ce fichier, comme vous pouvez le voir, il est déjà passé à zéro. Cela commence par zéro personne, puis 50 %, puis 100 %. Une fois l'animation terminée, elle revient à sa position normale. Laissez-moi vous le montrer encore une fois. Si je définis ce fichier, il démarre l'animation à partir de zéro, puis retarde de 5 secondes, puis exécute notre animation. Comme vous le savez, si nous utilisons une valeur rétrograde, l'élément obtiendra les valeurs de style définies par le premier Crefon et les conservera pendant le délai d'animation Passons à la valeur suivante, qui est forward. Quelqu'un à attacher ici. Si nous utilisons cette valeur, exécutons simplement notre animation, mais à la fin, elle ne revient pas à son état initial. Laisse-moi te montrer. Si je configure ce fichier, comme vous pouvez le voir, bout de 5 secondes, il exécutera notre animation. Comme vous pouvez le constater, ne revenez pas à l'état initial. Comme vous le savez, l' élément conservera les valeurs de cette vignette définies par l'image-clé Lust Comme vous pouvez le constater, notre iframe Lust est 100% et sa couleur de fond est Dans cette position, nous avons défini l'élément avec 300 pixels. Passons à la valeur suivante, qui est les deux. Si j'utilise cette valeur, les deux, notre animation démarrera à 0 % et, une fois l'animation terminée, elle restera en position de cent pour cent. Si je définis ce fichier, comme vous pouvez le voir, il commence à 0 %. Puis, après un délai de cinq secondes, il démarre notre animation. Comme vous pouvez le voir une fois l'animation terminée, l'état initial de cet élément n'est pas revenu à son état initial. Si nous utilisons cette valeur, elle suivra la règle à la fois pour l'avant et pour l'arrière C'est le cas d'utilisation des deux propriétés. Parlons maintenant de notre dernière valeur, qui est aucune. Certains types, aucun ici. Si je configure ce fichier, comme vous pouvez le voir, rien ne se passera ici. Au bout de cinq secondes, lancez simplement notre animation. C'est donc le cas américain de non-valeur. C'est tout pour ce tutoriel. J'espère que ce tutoriel vous plaira. Vous savez maintenant ce qu' est le mode film d'animation. Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 74. Tutoriel de mode de jeu d'animation CSS: Bonjour, les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons apprendre une nouvelle animation CSS liée aux propriétés, et le nom de notre propriété est Animation Place State Moon. La question qui se pose maintenant est la suivante : qu' est-ce que l'état du lieu d'une animation ? La propriété animation place state indique si l'animation est en cours d'exécution ou en pause. Vous pouvez exécuter votre animation, sinon vous pouvez la suspendre avec cette propriété. En gros, cette propriété deux valeurs, pause et running. Si vous utilisez la valeur de pause, il est spécifié que l'animation est en pause, et l'exécution est la valeur par défaut de cette animation. Sans perdre votre temps, étudiez simplement pratique et essayez de comprendre ce qu'est l'état de jeu d'une animation. Comme vous pouvez le voir, côte à côte, j'ouvre mon cœur de Visual Studio et mon navigateur en utilisant l'extension p server, et j'ouvre mon précédent document TML Maintenant, je veux arrêter mon animation lorsque j'ouvre mon Kara sur cet élément profond. Pour cela, nous devons utiliser la propriété d'état de la place d' animation. Comme vous pouvez le constater, nous retardons notre animation de 5 secondes. Si je configure ce fichier, vous pouvez voir qu'au bout de cinq secondes, il exécute notre animation. Maintenant, je veux arrêter cette animation pendant qu'elle est en cours d'exécution. Pour arrêter l'animation, je vais cliquer sur Her my cursor. Dans un premier temps, je vais créer un sélecteur de survol pour cette boîte Je vais taper point, boîte, survoler dans le Cariss, je vais utiliser l'état de jeu de notre animation de propriétés Au début, je vais utiliser la valeur de pause, donc je vais taper pause ici. Si je configure ce fichier, comme vous pouvez le voir, bout de cinq secondes, il exécutera notre animation. Mais je vais placer mon curseur sur cet élément. Comme vous pouvez le voir, cela arrête notre animation. Je n'exécute pas complètement l' animation. je retire mon curseur, comme vous pouvez le voir, il termine l'animation. Permettez-moi de vous montrer l' exemple une fois de plus. Mais avant, je vais réduire le délai. 1 seconde. Si j'ai configuré ce fichier, comme vous pouvez le voir, une fois de plus, il a exécuté notre animation. Mais lorsque je passe le curseur sur cet élément, l'animation s' arrête Mais maintenant je vais supprimer le curseur de cet élément. Comme vous pouvez le voir, l'animation est maintenant terminée. Revenez ensuite à l' état normal de cet élément. Mais maintenant, je veux lancer cette animation lorsque je place mon curseur sur cet élément. Pour cela, je vais copier cette propriété. Et collez-le ici. Par défaut, je souhaite suspendre cette animation. Mais lorsque j'interrogerai mon soignant sur cet élément, je veux lancer cette animation Donc, dans notre sélecteur Hober, je vais taper animation play State running Si je place ce fichier, comme vous pouvez le voir, une fois de plus, l'animation ne fonctionne pas, mais si je mets mon cara sur cet élément, comme vous pouvez le voir, une fois de plus, cela lancera notre animation C'est le cas d'utilisation de l' animation PlayTatepProperty. J'espère que vous comprenez maintenant comment cela fonctionne. Merci d'avoir regardé cette vidéo Restez connectés pour notre prochain tutoriel. 75. Tutoriel de montage d'objet CSS: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons apprendre une autre propriété CSS, qui est l'ajustement à l'objet. Cette propriété d'ajustement de l'objet CSS est utilisée pour spécifier la manière dont une image ou une vidéo doit être redimensionnée pour s'adapter à son conteneur Cette propriété indique au contenant de le remplir de différentes manières, par exemple en préservant le ratio attendu ou en l'étirant et en prenant le plus d'espace possible. Cette propriété a une valeur totale de cinq. Sentez le contenu, couvrez, raccrochez et réduisez la taille. Commençons par la manière pratique d'appliquer ces valeurs. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Lifesaver, et j'ai déjà créé un document TML nommé index Comme vous pouvez le voir, à l'intérieur de cette balise body, nous avons une image et la résolution par défaut de l'image est de 600 x 450 pixels. Mais ici, je vais attribuer la hauteur et le poids des poissons à cette image Donc, à l'intérieur de l'étiquette principale, je vais utiliser une balise de style. Style et à l'intérieur de la balise de style, je vais sélectionner l'image IMG. Ensuite, à l'intérieur des clivuss, je vais définir la hauteur. Largeur, je vais attribuer 200 pixels. De plus, je vais attribuer une hauteur, une hauteur, 300 pixels. Si je définis cette image, comme vous pouvez le voir, l'image est comprimée pour s'adapter au conteneur, et la taille du conteneur d'image est de 200 x 300 pixels. Maintenant, le problème est que le rapport hauteur/largeur d'origine est complètement détruit et ici, propriété de l'objet qui entre en jeu. Je vais appliquer la propriété de l'objet. Je vais taper object fit et je vais commencer par cover value cover. Si je configure ce fichier, vous pouvez voir le résultat. Si nous utilisons la couverture du flux d'objets, l'image conserve son ratio attendu d'origine et, selon le ratio exact de l'objet, elle prend la dimension donnée. Comme vous pouvez le constater, notre largeur est 200 pixels et notre hauteur de 300 pixels. Ainsi, en fonction de la dimension, sans modifier le rapport hauteur/largeur, il s'adapte à l'image. Maintenant, notre image n'a pas l'air compressée. Parlons maintenant de la valeur suivante, qui est contain. Je vais dupliquer cette ligne et commenter la ligne précédente. Et cette fois, je vais utiliser contain value, contain. Après avoir défini ce fichier, vous pouvez voir le résultat. Si vous utilisez l'ajustement à l'objet, contenez l'image, conservez son rapport hauteur/largeur, mais elle est redimensionnée pour s'adapter à la dimension donnée Et comme vous pouvez le constater, notre dimension est de 200 pixels par 300 pixels. Alors maintenant, vous pouvez voir qu'il ne change pas le rapport hauteur/largeur de cette image, mais qu'il correspond à la dimension donnée. Et si vous utilisez le son de la valeur du champ, dupliquez cette ligne et commentez ou commentez une précédente, comme je vous l'ai dit, le champ est la valeur par défaut Remplissez, puis définissez ce fichier, vous pouvez voir le résultat. Maintenant, il a compressé l'image. De plus, si j'utilise une valeur non valable. Encore une fois, je vais dupliquer cette ligne, commenter précédente placer fill with none et définir ce fichier. Maintenant, vous pouvez le voir, ne comprimez pas l'image. Et la dernière valeur que je vais appliquer est réduite. Je vais donc dupliquer cette ligne commenter la précédente et en remplacer aucune par une réduction. Définissez ce fichier en haut, vous pouvez voir le résultat. C'est assez similaire avec la valeur du contenu, sinon avec la valeur nun Si vous utilisez un flux d'objets, réduisez la taille, les images seront redimensionnées jusqu'à la plus petite version , sans contenu ou sans contenu. C'est ainsi que fonctionne Object Fit Property. Maintenant, laissez-moi vous montrer le véritable exemple de la raison pour laquelle nous devons utiliser la valeur du flux d' objets. Ainsi, comme vous pouvez le voir dans cet exemple, nous avons un total de deux images côte à côte, et comme vous pouvez le voir, nous avons réglé à 100 % et réglé la hauteur à 400 pixels. La hauteur du conteneur est de 400 pixels et la largeur est de 100 % Dans nos images, comme vous pouvez le voir, nous utilisons un style intégré Nous utilisons un flotteur, un élévateur et un réglage à 50 % et une hauteur de 100 %. Nous utilisons la même valeur CSS pour notre image suivante. Maintenant, le problème est que si j'essaie redimensionner la fenêtre du navigateur, supposons que je veuille réduire la largeur de la fenêtre du navigateur Maintenant, vous pouvez voir qu'il a compressé les deux images. Cela détruit donc le rapport hauteur/largeur réel de ces images. Mais si j'utilise la propriété object fit Suppose Object fit, cover Je vais également utiliser dans notre image pour ajuster, couvrir, puis définir ce fichier. Après avoir défini ce fichier, comme vous pouvez voir après avoir rechargé ce navigateur, le problème est Comme je vous l'ai dit, la valeur de couverture conserve rapport hauteur/largeur de la résolution de l' image tel qu'il est. De plus, il permet de sentir l'image dans une dimension donnée. C'est pourquoi nous devons utiliser la propriété object fit. J'espère que c'est clair pour toi maintenant. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 76. Tutoriel de sélection de l'utilisateur CSS: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec une autre thèse liée au tutoriel. Et dans ce didacticiel, vous allez apprendre une nouvelle propriété, qui est la sélection par l'utilisateur. Fondamentalement, l'utilisateur sélectionne le travail en tant que sécurité. Je n'autorise pas les utilisateurs à copier les données de votre site Web, et c'est la principale raison pour laquelle nous utilisons User Select. Cette propriété comporte quatre valeurs : auto, none, text et all. Auto est la valeur par défaut. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Lifesaver, et je crée déjà un document HTML, nommé index point Ainsi, comme vous pouvez le voir dans notre balise body, nous avons une boîte de classe de balises profonde. Et dans cet élément DIP, nous avons un texte factice Maintenant, si j'essaie de le copier, sinon, sélectionnez ce faux texte, oui, nous le pouvons Mais je ne veux pas autoriser l' utilisateur à copier le texte. Dans le cas contraire, sélectionnez le texte. Nous devons donc utiliser la propriété user select. Donc, pour taper user select. Comme vous le savez, la valeur par défaut est automatique. Si j'utilise la valeur automatique, que je définis ce fichier et que j'essaie de sélectionner ce texte, oui, nous pouvons sélectionner le texte. Mais si j'utilise une valeur non value, une partie pour remplacer auto par none, puis que je définis ce fichier, cette fois si j'essaie de copier le texte, sinon sélectionne le texte, nous ne pouvons pas car cette fois il n'autorisera pas à copier ou à sélectionner parce que nous utilisons ici la propriété user select, none. Mais nous pouvons sélectionner le texte du titre, mais nous ne pouvons pas sélectionner le texte contenu dans ce développement. Le prochain que je vais utiliser, c'est du texte. C'est assez similaire à la valeur automatique. Si j'utilise cette valeur, comme vous pouvez le voir, nous pouvons maintenant sélectionner le texte. Ensuite, nous avons une autre valeur, c'est-à-dire que je vais remplacer le texte par A. Si je définis ce fichier, il permettra de copier, sinon sélectionnez le texte. Il suffit de cliquer une fois dans notre section de texte. Après un clic, tout le contenu sera automatiquement sélectionné . Il s'agit de l'utilisation de la valeur. Au lieu de cliquer, il a permis de sélectionner le texte en un clic. C'est la principale différence entre toutes les valeurs. C'est tout pour ce tutoriel. Merci d'avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 77. Pause décoration de boîte CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons apprendre une nouvelle propriété, rupture décorative de Bob. Il est utilisé pour la décoration et le style du texte, et il est livré avec un total de deux valeurs, slice et plow Passons maintenant à l' aspect pratique et voyons comment utiliser la valeur et créer différents effets. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server, et je crée déjà un nom de document TML dans Exotst Donc, dans notre balise body, nous avons une balise de titre et une balise span, et je stylise la balise span, la couleur d'arrière-plan de Hearst et je définis la taille de police 21 pixels, avec une hauteur de ligne de 32 pixels Et maintenant, je vais ajouter une balise break à l'intérieur de cette balise span. Donc, dans cette phrase, je vais utiliser ici un break tag BR BR. BR. BR break and break tag, et je vais en ajouter un autre, BR. Je vais siroter ce fichier. En configurant ce fichier, vous pouvez voir le résultat. Il divise la phrase en plusieurs lignes. Et maintenant, je vais ajouter une bordure à cette balise span. Bordure par pixel, et je veux une bordure solide. Avec cela, la couleur de notre bordure est le noir. Si je place ce fichier, vous pouvez voir la résine. Vous pouvez maintenant remarquer que vous pouvez voir ou délimiter, partir de cette position et terminer à cette position. Je vais également ajouter un rayon de bordure. Rayon de bordure de cinq pixels. Après avoir défini ce fichier, vous pouvez voir le rayon de la bordure, mais je veux le rayon de la bordure sur chaque ligne. Je ne le veux pas au début et à la fin. Je le veux à chaque ligne. Pour résoudre le problème lorsque vous utilisez Box Degradation Break. Donc hématite, boîte, décoration, rupture. Et comme je vous l'ai dit, il deux valeurs au total, slice et clone. Slice est la valeur par défaut, elle utilise donc la valeur Clone. Après avoir défini ce fichier, comme vous pouvez le voir, il ne fonctionne pas car ici j'utilise le navigateur Chrome. Le navigateur Chrome ne prend pas en charge cette propriété. Pour utiliser la propriété dans un navigateur Chrome, vous devez utiliser un préfixe Dupliquons donc la ligne et utilisons le préfixe. Internet. Si j'ai défini ce fichier, cette fois vous pouvez le voir, maintenant il ajoute un rayon de bouteille à chaque mot. Cela nous permet maintenant d'attribuer un rembourrage à chaque section. Donc, si je transmets le rembourrage et que je veux ajouter rembourrage de dix pixels dans toutes les directions, puis que je dix pixels dans toutes les directions, définis ce fichier, vous pouvez voir Augmentons la hauteur de la ligne pour une meilleure visibilité, 50 pixels. Avant de configurer ce fichier, vous pouvez voir le résultat. Cette fonctionnalité n'est possible que grâce cette propriété, boîte, décoration, pause. J'espère que c'est clair pour toi maintenant. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 78. Tutoriel des citations CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS. Et dans ce didacticiel, vous allez apprendre une autre nouvelle propriété, les codes. Cette propriété ne fonctionne avec aucune balise TML. Pour cela, vous devez utiliser une balise spéciale, qui est le code Q. Qtag est l' abréviation de quote tag Commençons par la pratique et voyons l'exemple. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server et je crée déjà un index de nom de document TML (point d'index HTML Comme vous pouvez le voir sur la balise body, nous avons une balise Q utilisée comme balise de citation. C'est pourquoi vous pouvez voir la phrase dans cette citation. Fondamentalement, en utilisant la propriété COTS, nous pouvons remplacer le guillemet par n'importe quel autre caractère Supposons que, sans utiliser de codes je veuille montrer le signe du dollar. Je vais utiliser la propriété Quotes. Codes, alors ici, nous devons utiliser le double code sin et à l'intérieur des codes doubles, je vais passer le signe du dollar. C'est pour commencer le sinus. Je vais également transmettre un autre personnage. Ici, je vais passer et pour cent. Après avoir défini ce fichier, vous pouvez voir le résultat. Maintenant, il remplace les codes par le signe du dollar et remplace également les codes par un sinus. Cela commence par le signe du dollar et se termine par le signe de la personne. Vous pouvez remplacer le devis par n'importe quel signe. Supposons que si vous voulez utiliser une valeur inférieure au sinus et une valeur supérieure à la valeur sinusoïdale , vous pouvez voir le résultat dans ce fichier. Si vous effectuez une recherche entre guillemets Google, vous verrez différents sites Web proposant différents types de devis. Vous pouvez copier le devis et l'appliquer ici. Si j'ouvre le site Web de Wikipédia, vous pouvez voir de nombreux guillemets. À partir de là, vous pouvez copier le signe de citation. Supposons que je veuille utiliser ce signe entre guillemets, celui-ci. Amusez-vous à copier ce signe de citation et à le remplacer par celui-ci. Si je place ce fichier et que je reviens dans mon navigateur, vous pouvez voir le résultat. De cette façon, vous pouvez utiliser n'importe quel type de caractère d'Imogs comme guillemet C'est tout pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 79. Tutoriel d'image de bordure CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS. Et dans ce tutoriel, nous allons apprendre la propriété des images de bordure. Vous connaissez déjà couleur de bordure, la propriété de bordure avec propriété, la propriété de rayon de bordure, mais en utilisant la propriété d'image de bordure, nous pouvons attribuer des images à notre bordure. Nous pouvons également attribuer un dégradé de couleur à nos bordures. Avant de commencer les travaux pratiques, permettez-moi de vous donner quelques exemples. Vous pouvez voir ici que nous avons un développement et que dans ce développement, nous avons une frontière, mais cette frontière n'est pas solide Il est fait à partir d'images. Cela ressemble à un cadre d'image. En gros, dans ce didacticiel, nous allons apprendre comment créer une bordure à l'aide d'images en utilisant la propriété de l'image de bordure. Commençons donc par la pratique. Nous avons au total six propriétés liées à l'image de bordure. Source de l'image de bordure, tranche d'image de bordure, largeur de l'image de bordure, image de bordure, début, répétition de l'image de bordure et image de bordure. Notre dernière image de bordure de propriété fonctionne comme une seule ligne. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code studio et mon navigateur à l'aide de l'extension Live Server. Et j'ai déjà créé un document TML nommé index point HTML Donc, dans notre étiquette corporelle, nous avons une case D. Et dans cette boîte, nous avons du texte factice Si vous avez écrit, vous pouvez voir comment nous utilisons la bordure, la bordure pleine, et la couleur de notre bordure est le noir et la largeur de notre bordure est de 30 pixels. Et maintenant, nous devons remplacer la bordure noire pleine par une image. Si je vous montre mon répertoire de travail, nous avons quelques images, et je vais utiliser cette image, 05. Si vous voyez, vous pouvez voir que cette image est vide au milieu et qu'elle est recouverte de formes géométriques. Nous allons utiliser cette image comme image de bordure, et il s'agit d'une image PNG. Revenons à l'éditeur de code. Dans un premier temps, je vais utiliser une propriété qui est la source de l'image de bordure. Type de son : bordure, source d'image. Ensuite, nous devons fournir le chemin de l'image, l'URL. Donc Hemo tape URL, puis tu définis les versets arrondis pour fournir le chemin du fichier image, qui est un PNG à 05 points Maintenant, définissons le fichier et voyons ce qu'il renvoie. Définissez ce fichier en haut, vous pouvez voir les images, mais vous pouvez voir l' image dans les coins. En outre, vous pouvez remarquer qu'il a supprimé la couleur unie de la bordure noire. Passons donc à la valeur suivante, qui est border Image slice. J'utilise cette propriété parce que je souhaite montrer cette forme géométrique de chaque côté. Mais avant de comprendre ce qu'est le tranchage. Passons au subtare de Photoshop. Comme vous pouvez le voir dans notre photosphère, nous ouvrons ici une image. À l'aide de la technique de découpage, vous pouvez définir la partie de votre image que vous souhaitez afficher dans votre bordure Supposons que je veuille afficher cette superficie dans ma section de bordure. Cette quantité de surface contient la forme géométrique complète. C'est pourquoi je veux montrer cette zone. Si je sélectionne à nouveau cette zone, vous pouvez remarquer dans la section d'informations la quantité de zone que nous sélectionnons. la même manière, je souhaite sélectionner une zone de cette image car nous allons appliquer cette image comme image de bordure. À partir de là, je souhaite sélectionner cette quantité de surface. Après avoir sélectionné la zone, vous pouvez voir le résultat ici. Si je sélectionne à nouveau cette zone, vous pouvez maintenant voir dans notre section d'informations qu'elle renvoie la superficie que nous avons sélectionnée. Il revient avec la hauteur, 28 par 28. Je veux dire, 28 pixels. Revenons maintenant au co-éditeur. Ici, je vais passer la tranche 28 de l'image de bordure. Pixel. Nous n'avons pas besoin de mentionner l'unité, nous devons transmettre le numéro. Maintenant, définissons le fichier et voyons ce qu'il renvoie. Après avoir configuré ce fichier, vous pouvez voir le résultat. C'est ce qu'il a renvoyé. Vous pouvez maintenant voir la forme géométrique aux quatre coins et pour la bordure, elle a étiré l'image. De même, si vous voulez montrer l'image du hub, je veux dire que si vous voulez montrer la zone géométrique du hub, laissez-moi vous montrer, si vous voulez montrer cette quantité de surface, vous devez transmettre cette valeur, pixel par 15 pixels. Laisse-moi te montrer. Si je réussis, si je remplace 28 par 15 et que je présente ce fichier, vous pouvez maintenant voir un design différent. Mais pour l'instant, j' aimerais en choisir 28. Je veux couvrir l'ensemble de la zone géométrique de notre frontière. Et si vous souhaitez supprimer la zone d'étirement pour cela, vous devez utiliser une autre propriété, à répétition de l'image de bordure. Ce sont toutes des valeurs que nous pouvons utiliser avec les propriétés de répétition, repeat, stretch, round et space de l'image de bordure . Ici, je vais utiliser la troisième propriété appelée border Image repeat. Bordure, image, répétition. Et ici, je vais passer la valeur appelée repeat. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant vous pouvez voir, maintenant horizontalement et verticalement, répéter la forme géométrique, et si je l'étire et que je définis ce fichier, vous pouvez voir que c'est assez similaire ancien résultat et qu'il y a une autre valeur. Mais avant de montrer la valeur, revenons à taper repeat. Répétez la configuration de ce fichier. Vous pouvez voir dans le coin qu'il n'est pas parfaitement aligné. Pour cela, nous devons utiliser une autre valeur appelée round. Je vais dupliquer cette ligne et la commenter ou la précédente et remplacer repeat par round. Si je place ce fichier, cette fois, vous pouvez voir qu'il n'y a aucun problème au coin de la rue. De plus, vous pouvez définir différemment les valeurs horizontales et verticales. Laisse-moi te montrer. Encore une fois, je vais dupliquer cette ligne et commenter la précédente. Et cette fois, à l'horizontale, je vais utiliser la valeur de répétition, et pour la verticale, je vais utiliser la valeur d' étirement, l'étirement. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il répète la forme géométrique des Xxs et étire la forme dans la direction YxS. C'est ainsi que vous pouvez définir les valeurs de répétition des images. Et si vous souhaitez redimensionner la taille de la bordure autrement, réduisez la taille de la bordure, juste pour modifier la valeur Supposons pour l'instant que la largeur de notre bordure soit de 30 pixels. Si je fais 20 pixels puis que je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, la largeur de la bordure est maintenant réduite. Si je réduis ou augmente la largeur de la bordure, cela n'aura aucun effet sur l'image. Selon la largeur de la bordure, elle va être réduite, sinon, agrandissez l'image. Par exemple, si j'augmente la taille, si je fais 50 pixels et que je définis ce fichier, vous pouvez voir le résultat. Donc pour l'instant, je veux le faire à 30 pixels. Et maintenant, je vais vous montrer une autre propriété, qui est Border Image Starth. Type Hemo, image de bordure, début. À l'aide de cette propriété, vous pouvez contrôler la distance à laquelle vous souhaitez afficher l'image en dehors de la zone de bordure. Mais pour mieux comprendre, je souhaite ajouter une couleur de fond à cette boîte. Fond, je vais utiliser la couleur violette. Je vais utiliser une couleur violet moyen. Je vais taper du violet moyen. Après avoir défini ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant remarquer que notre image de bordure se trouve à l'intérieur de la zone de la boîte. Il ne s'agit pas de sortir de la zone prévue. Maintenant, utilisez cette propriété, nous pouvons déplacer l' image de bordure en dehors de la zone de la boîte. Supposons que je veuille le déplacer de 20 pixels vers l'extérieur. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il a déplacé le pixel boerimage en dehors de cette boîte. Ensuite, je vais utiliser une autre propriété qui est la largeur de l'image de bordure. Après la découpe de l'image, je souhaite utiliser cette propriété head. Certains types de largeur d'image de bordure. En utilisant cette valeur, nous pouvons contrôler la largeur de l'image de bordure. Si je passe à 15 pixels, sinon à dix pixels, maintenant l' image sera définie avec dix pixels. Désolé, nous devons transmettre l'unité de pixels. Si je configure le fichier, vous pouvez voir le résultat. Cela réduit la taille de l'image. la même manière, si je passe 20 pixels, puis que je définis ce fichier, vous pouvez voir le résultat. En gros, nous utilisons cette propriété pour redimensionner l'image, sinon pour réduire la taille de l'image. Nous utilisons donc déjà les cinq valeurs. Je vais maintenant utiliser la dernière valeur, qui est l'image de bordure Comme je vous l'ai dit, il fonctionnera comme un one-liner. Si vous utilisez cette valeur, nous devons d'abord transmettre la source de l'image, puis nous devons transmettre la zone de la tranche, puis nous devons attribuer le poids, puis nous devons fournir la valeur extérieure et enfin, nous devons fournir la valeur de répétition. Commençons par l'aspect pratique et voyons comment appliquer celui-ci. Dans un premier temps, je vais commenter toutes les lignes, y compris la source de l'image. Ensuite, je vais utiliser la propriété, qui est une image de bordure. Dans un premier temps, nous devons transmettre ici le chemin source. Je vais copier cette URL et je vais la coller ici. Ensuite, après l'espace, nous devons fournir la surface de la tranche, qui est de 28. Ensuite, nous devons transmettre la largeur de l'image, qui est de 20 pixels et entre la valeur de la tranche et la valeur de la largeur, nous devons utiliser une barre oblique C'est nécessaire. Encore une fois, je vais utiliser une barre oblique, et cette fois je vais passer, et ici, nous devons transmettre la valeur de départ, et je vais utiliser quelque chose de dix pixels, et enfin, nous devons transmettre la valeur de répétition, et je veux utiliser la valeur ronde Round Réglons le fichier et voyons s' il fonctionne correctement ou non. Après avoir défini ce fichier, je pense avoir fait une erreur Oups. Quand vous n'avez pas besoin de cette barre oblique après l'avant-dernière valeur. Si je définis ce fichier, il fonctionne parfaitement maintenant. Vous pouvez voir le résultat. Il s'agit de l'abréviation de la propriété de l'image de bordure. abord, nous devons fournir la source, puis nous devons fournir la zone de tranche. Ensuite, nous devons fournir la largeur de l'image. Ensuite, nous devons fournir une valeur de départ et enfin, nous devons fournir la valeur de répétition. Maintenant, je ne veux pas montrer l'image de la bordure. Je souhaite afficher un dégradé de couleurs. Pour cela, nous pouvons réutiliser cette propriété. Je vais être cette ligne et commenter la précédente et cette fois, je vais utiliser un dégradé de couleur linéaire. Je vais conduire en linéaire. Dégradé. Ensuite, à l'intérieur des rondelles, il y a la couleur rouge et bleue Rouge, et la couleur suivante est le bleu. Nous pouvons également définir la direction du dégradé. Hemo type 2, c'est vrai. Oups, il y a une erreur d'orthographe dans l'ingrédient DENT. De plus, si vous voulez fournir une valeur de tranche, supposons que je vais trancher 25 pixels, 25 Si je définis ce fichier, encore une fois, cela ne fonctionne pas. Je pense que j'ai fait une erreur. abord, je vais supprimer cette direction, puis redéfinir ce fichier. Maintenant, c'est du travail. Si je dépasse la direction, laisse-moi réessayer. Heitize deux à droite Après avoir défini ce fichier, encore une fois, il ne fonctionne pas. Oh, oups, nous devons fournir la virgule. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Maintenant, cela fonctionne parfaitement. C'est ainsi que nous pouvons utiliser les propriétés d'image de Ber. J'espère que c'est clair pour toi maintenant. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 80. Sélecteur de combinateur CSS: Et à partir de ce tutoriel, nous allons lancer les sélecteurs avancés CSS J'espère que vous savez déjà que les identifiants de classe N sont des sélecteurs, mais les CSS proposent des sélecteurs plus avancés, et nous allons en apprendre davantage à ce sujet dans nos prochains Parlons maintenant des catégories de sélecteurs CSS. Ici, vous pouvez voir un total de quatre types de catégories de sélecteurs CSS Le premier est un sélecteur simple. Viennent ensuite le sélecteur combinateur, le sélecteur d' attribut, le sélecteur de classe posito, le sélecteur Et dans ce tutoriel, nous allons apprendre un sélecteur simple et un sélecteur de combinateur Voyons maintenant quel type de sélecteur de symboles nous avons. Comme vous pouvez le constater, nous devons distinguer quatre types de sélecteur de symboles, le sélecteur de type, le sélecteur de classe, le sélecteur ID et le sélecteur universel Et je sais que vous connaissez déjà nos trois premiers sélecteurs, sélecteur de type, sélecteur de classe et sélecteur d'ID Si vous ne connaissez pas ces sélecteurs, vous ne pouvez pas apprendre les sélecteurs avancés Et si cela ne vous est pas familier, laissez-moi vous en dire un peu plus sur E. Vous pouvez voir c'est un exemple de sélecteur de type Dans le sélecteur de type, nous devons utiliser le nom du tag. Dans notre cas, nous utilisons ici la balise paragraph means P. Ensuite, au Cal Resist, nous devons utiliser la propriété et Val. De même pour le sélecteur de verre, nous devons utiliser le nom de la classe, et pour sélectionner le nom de la classe, nous devons utiliser point sin, point le nom de la classe Ensuite, définissez les calibrages, nous devons transmettre la propriété et V. Et nous avons également un sélecteur simple, qui est un sélecteur d'identification Pour le sélecteur d'ID, nous devons d'abord taper has tag, puis prendre le nom de l'ID Dans notre cas, boîte. Ensuite, dans les calibrages, nous devons utiliser la propriété et V. Je sais que vous le connaissez déjà, mais le sélecteur principal que je vais utiliser est le sélecteur universel Nous représentons ce sélecteur en utilisant le sinus des étoiles. Ce signe astrologique est utilisé pour cibler toutes les balises eSTIML de votre document Comprenons avec un exemple réel. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant plusieurs extensions, et je crée déjà un document d'estimation nommé index point TML Et dans ce document d'estimation, créez une mise en page Web de base. Nous avons une section d'en-tête, une section netbur, une section contenu, une section barre latérale et une section de pied de page Nous allons donc utiliser ici notre sélecteur universel. Donc, en haut de la balise de style, je vais utiliser le sélecteur L'étoile à l'intérieur de la couleur résiste. Ici, je vais utiliser une propriété nommée color. Couleur, y. Après avoir inséré cette bobine, comme vous pouvez le voir, toutes les couleurs de police de notre navigateur sont converties en rouge. Mais acceptez la barre latérale car dans notre barre latérale, nous utilisons déjà la propriété color. Et maintenant, je veux ajouter une bordure à chaque élément. Pour cela, dans notre sélecteur universel, je vais taper border Bordure d'un pixel, et je veux une bordure solide, et notre couleur de bordure est verte. Ouvrez ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir qu'il y avait une bordure pour chaque balise de notre page Web. Il y avait une bordure pour notre balise d'en-tête, balise de paragraphe, nos balises li, etc. Voici donc l'exemple d'une étiquette universelle. Et maintenant, je vais vous expliquer quelle est la limite. Et je vais configurer ce fichier. Et maintenant, je veux cibler toutes les balises qui se trouvent dans le contenu Deep. Pour cela, après la balise de contenu, je vais lier le contenu de la balise. Ensuite, je vais utiliser le sélecteur universel, étoile. Ensuite, à l'intérieur de la résistance aux couleurs cela signifie tous les éléments contenus dans la balise de contenu, puis je vais utiliser la propriété CSS. Je souhaite changer la couleur de police de couleur. Taux de couleur. Et je veux configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Voici donc l'utilisation du sélecteur universel. Et la véritable utilisation pratique de ce sélecteur est de masquer la marge et le rembourrage de la page Web. Laisse-moi te montrer. Je voudrais donc commenter cette section, définir ce fichier et revenir au sélecteur universel Et ici, je vais taper la marge zéro. De plus, je vais taper padding zero, et je vais définir ce fichier En gros, cela va supprimer toute la marge et le rembourrage par défaut de nos balises En gros, cela vous fait gagner beaucoup de temps et vous n'avez pas besoin de supprimer les marges et le rembourrage de chaque type Je vais maintenant parler de combinator selectd. Mais avant, je vais commenter les lignes. Nous avons quatre types de sélecteur combinateur, sélecteur de descendant, sélecteur direct d'enfant, sélecteur de frère adjacent, sélecteur de frère ou sœur général Nous allons donc d'abord parler des sélecteurs de descendants Dans cet exemple, comme vous pouvez le voir, nous utilisons ici un sélecteur de combinateur Nous utilisons d'abord une classe, puis un nom de balise P. Vous pouvez créer une combinaison de plusieurs balises, des classes avec des balises, etc. Dans cet exemple, je souhaite cibler le paragraphe qui est d' insérer la classe box. Pour cela, nous devons d'abord sélectionner le parentag et sélectionner le tag parent en utilisant son nom de classe Ensuite, nous sélectionnons le tag. Dans l'exemple suivant, je souhaite cibler la balise span, qui se trouve à l'intérieur de la balise de paragraphe. Nous passons donc d'abord la balise parent et la balise parent est la balise de paragraphe. Ensuite, après l'espace, nous devons passer la balise who, je veux sélectionner dans la balise de paragraphe et je veux sélectionner la balise span. Et maintenant, il y a peut-être beaucoup de paragraphes dans notre page Web, et nous avons également beaucoup de balises span dans nos paragraphes. Je souhaite donc sélectionner le paragraphe d' élément profond en question. Pour cela, dans notre troisième exemple, nous utilisons ici une balise profonde particulière. Ensuite, je souhaite sélectionner tous les paragraphes. Et à l'intérieur des paragraphes, je veux sélectionner toutes les balises span. En gros, je veux sélectionner toutes les balises span qui se trouvent à l'intérieur du paragraphe, et notre paragraphe provient également d'une balise profonde particulière. Voici donc l'exemple des sélecteurs de descendants. Et n'oubliez pas qu'ici, nous pouvons prendre plusieurs balises enfant, sinon plusieurs balises parents. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, encore une fois, nous sommes dans mon codiateur Visual Studio et je crée déjà une page eSTIML nommée index two dot Et à l'intérieur de la page stimal, nous avons une balise de paragraphe et une balise profonde Et à l'intérieur de cette balise profonde, nous devons également ajouter un paragraphe. Et ici, je vais utiliser des sélecteurs de descendants. abord, je vais cibler la balise de paragraphe, P. Ensuite, dans la couleur contre, je vais taper la couleur. Et je veux de la couleur, je veux lire. Si je définis ce fichier, il applique une couleur rouge à toutes les balises de paragraphe et également à celles qui se trouvent à l'intérieur de la balise profonde, mais je souhaite cibler mais je souhaite cibler les paragraphes qui se trouvent dans la zone ID. Pour cela, le type de héros a une étiquette, notre nom d'identification est box. Si je définis ce fichier, cette fois, vous pouvez voir colorer les balises de paragraphe, qui se trouvent à l'intérieur de l'élément de boîte. Et maintenant, je veux attribuer une couleur à nos balises span. Donc, voici la couleur de la cardiose. Vert. Après avoir sous-traité ce fichier, comme vous pouvez le voir, il colore à la fois cette balise pan, mais je veux colorier uniquement cette balise span particulière. Pour cela, nous devons sélectionner les éléments parents. Notre premier élément parent est donc dip tag, Dev et notre deuxième élément parent est Paragraptag. Je veux donc cibler les balises span qui se trouvent à l'intérieur la balise de paragraphe et paragraphes qui se trouvent à l'intérieur de la balise Dep Si je définis ce fichier, comme vous pouvez le voir, il s'applique maintenant à cette balise span particulière, qui se trouve à l'intérieur de la balise de paragraphe. Notre sélecteur combinateur suivant est le sélecteur direct pour enfants. Parfois, il est connu sous le nom de sélecteur d'enfants. Ce symbole du sélecteur direct d'enfants est supérieur au péché. Ici, nous sélectionnons toutes les balises LI qui proviennent directement de la balise UL, et ici nous sélectionnons également la balise de paragraphe, qui provient directement de l'élément de boîte. Passons donc au code de Visual Studio et commençons par l'aspect pratique. Encore une fois, je suis dans mon éditeur de code Visual Studio, et je crée déjà un document TML, indexe du HTML à trois points Et vous pouvez voir dans mon document que nous avons une étiquette UL, et à l'intérieur de cette étiquette UL, nous avons une autre étiquette UL. Donc, à l'intérieur de cette étiquette UL, nous avons une API directe, puis nous avons une autre étiquette UL. Maintenant, si je cible au moins un type a une balise, l'est et toutes les balises LI à l'intérieur au moins. À l'intérieur de la résine colorée, je veux une couleur verte Couleur verte. haut de ce fichier, comme vous pouvez le voir, il convertit toutes les balises LI en vert, qui se trouve le moins à l'intérieur Il a appliqué la couleur à l'enfant direct, également au petit-fils. Je vais donc dupliquer cette section, et ici je vais utiliser un sélecteur d'enfant direct, à l'est et tous les enfants directs contenus dans la moindre balise Ensuite, je veux attribuer une couleur rouge. Et je veux configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, il applique toutes les balises LI, qui sont l'enfant direct de l'élément de liste. Permettez-moi de vous montrer un autre exemple d'enfant direct. Ici, vous pouvez voir que nous avons une balise profonde, et à l'intérieur de cette balise profonde, nous avons une balise de paragraphe. Et à l'intérieur de cette boîte profonde, nous avons une autre profondeur nommée boîte deux. Et dans cette profondeur, nous avons une autre balise de paragraphe. Et maintenant, je veux appliquer la couleur de police bleue, qui se trouve à l'intérieur de la balise box dans nos paragraphes. Pour cela, ici, je vais sélectionner le hashtag, la case, et je veux sélectionner les paragraphes, qui se trouvent à l'intérieur de la balise box Et puis dans la couleur de la classe. Et je veux la couleur bleue. Si vous testez ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, il applique la couleur bleue à tout le paragraphe, qui se trouve à l'intérieur de la case D, et il a également appliqué la couleur bleue, qui se trouve à l'intérieur de la boîte deux Deep. Mais je ne veux pas appliquer de couleur bleue dans notre encadré de deux paragraphes profonds. Pour cela, nous devons utiliser ici le sélecteur direct d'enfants. Type Som box, supérieur à P. Désactive ce fichier, maintenant tu peux voir le résultat. Maintenant, il ne sélectionne que le paragraphe enfant de la case D. Voici donc l'exemple du sélecteur direct d'enfants Parlons maintenant des sélecteurs frères adjacents. Maintenant, la question est : qu'est-ce qu'un frère ou une sœur ? Simply est votre frère et à côté signifie le signe plus. Il s'agit de la balise de paragraphe suivante de cette balise profonde. De même, il s'agit de la balise de paragraphe suivante de cette balise UL. Donc, pour que les choses soient plus claires, commençons par le côté pratique. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Light Server, et j'ai déjà créé un document TML nommé indexfod point Dans ce document, nous avons une balise UL, et au-dessus de cette balise UL, nous avons une balise de paragraphe. ne s'agit pas d'une seule balise de paragraphe, nous avons plusieurs balises de paragraphe. Et maintenant, je veux sélectionner le premier paragraphe jusqu'à la balise URL. Pour cela, je dois appuyer sur UL, et nous devons utiliser le signe adjacent, qui est le signe plus, plus la balise de paragraphe. Ensuite, vous dites les couleurs, je veux appliquer de la couleur. Couleur rouge. Après l'étape de ce fichier, vous pouvez voir le résultat. Il applique une couleur rouge à notre balise de paragraphe, qui est la prochaine balise UL. Et si vous voulez cibler les autres balises de paragraphe, je veux voir la balise de paragraphe suivante, alors nous pouvons l'appeler balises sœurs généralisées Il s'agit d'un exemple de sélecteurs généralisés pour frères et sœurs. Ici vous pouvez voir un panneau en forme de pédale. Cela représente le général Simons, et vous pouvez voir le signe sur votre clavier au-dessus du bouton de tabulation Cela va cibler toutes les balises de paragraphe situées au-dessus de la balise profonde. De même, il ciblera toutes les balises de paragraphe situées au-dessus de la balise UL. Permettez-moi de vous montrer l'exemple. Je vais donc commenter la première ligne, puis je vais taper le signe général des frères et sœurs UL Ensuite, je vais cibler tous les paragraphes. Montez le tag UL. Ensuite, à l'intérieur des intercalaires, je vais appliquer de la couleur Couleur rouge. Après avoir configuré ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, il cible tous les paragraphes situés après le tag UL. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons en apprendre davantage sur les sélecteurs d'avis Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 81. Sélecteur d'attribut: Bonjour, les gars. C'est bon de te voir. Encore une fois, je suis de retour avec un autre sélecteur avancé lié au tutoriel Et dans ce tutoriel, nous allons aborder le sélecteur d' attributs Dans notre précédent tutoriel, nous avons déjà appris le sélecteur de combinateurs Dans notre précédent tutoriel, nous avons parlé de quatre types de sélecteurs : le sélecteur simple, le sélecteur combinateur, le sélecteur d' attribut, le sélecteur d'éléments Posidoglass et le sélecteur d'éléments Posido Posido Et dans ce tutoriel, nous allons apprendre le sélecteur d' attributs Ce sont donc tous des sélecteurs d' attributs, et nous devons indiquer sept types de sélecteur d'attributs Comme vous pouvez le voir, elle utilise un tag. Si vous souhaitez utiliser un autre tag, oui, vous le pouvez. Et maintenant, vous pouvez voir attribute et Val. ATTR signifie attribut, et well signifie valeur Ici, vous pouvez voir que nous utilisons une étiquette d' estimation, qui est tabilag. Et dans ce tag TV, vous pouvez voir un mot de couleur orange avec une bordure qui s'étend sur un repli, un repli sur un enchevêtrement. Ce sont tous des attributs. Et vous pouvez également voir qu'à l'intérieur du double cours, tout cela a de la valeur. Valeur de ces attributs. Un autre exemple que vous pouvez voir sur la balise image, vous pouvez voir la source ou le titre avec, ce sont tous des attributs de la balise image. Nous allons donc cibler cette image en utilisant le nom de ses attributs, et non le nom de classe ou d'identifiant. Un autre exemple que vous pouvez voir, nous avons une balise d'entrée. Nous avons une valeur de nom d'ID de type. Ce sont tous des attributs de la balise d'entrée. Voyons donc ce que nous pouvons faire pour utiliser notre premier sélecteur d'attributs Cela signifie l'élément dont l'attribut est spécifié. Voyons donc comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mes visuels dans votre éditeur de code et dans mon navigateur, et je crée déjà un document télévisé nommé index point t. Et vous pouvez voir dans mon navigateur que nous devons doubler deux images, et entre ces images, nous avons un paragraphe Et dans mon paragraphe, nous avons indiqué un total de trois voies. Et enfin, nous avons un formulaire de base simple. Nous allons donc en apprendre davantage sur le sélecteur d'attributs. Commençons donc notre premier sélecteur d'attributs. Je veux cibler l'image, l'image avec un attribut impair. Comme vous pouvez le voir, nous devons faire deux images, une image de chat et une image de tigre. Dans notre image de tigre, nous n'avons pas d'attribut, mais dans notre image de chat, nous avons l'ancien attribut. Je veux donc sélectionner les images qui ont cet attribut. Et pour le cibler, nous devons d'abord passer le tagnyme et le nom du tag est image IMG, puis nous devons utiliser square sis Et à l'intérieur du carré se trouve, et maintenant je veux sélectionner images qui ont l'attribut alt Je copie donc le nom de l'attribut impair et je vais le coller dedans. Ensuite, à l'intérieur de la résistance C, je vais ajouter une bordure. Bordure, je veux une bordure trois pixels, et je veux une bordure solide. Avec cela, la couleur de notre bordure est le rouge. Si je configure ce fichier et relaie mon navigateur, vous pouvez voir le résultat Comme vous pouvez le voir, c'est à la limite de notre image de chat. Mais sur l'image suivante, nous n'avons pas de bordure. Mais quoi ? Si j'utilise le tag Al dans notre image suivante, je vais donc copier le tag Al, et je vais le mettre dans notre image suivante. Après cela, je vais le coller ici, et ici je vais taper l'image de Tiger. Après avoir défini ce fichier, comme vous pouvez le voir, si je supprime mon navigateur, les deux images ont maintenant la même bordure, une bordure pleine de trois pixels Et maintenant je veux sélectionner les images qui ont un attribut title. Comme vous pouvez le voir, dans notre image de tigre, nous avons l'attribut title, mais dans notre catimage, nous n'avons pas d'attribut title Je vais donc copier le nom de l'attribut, et je vais le coller ici. Je vais configurer ce fichier. Si je désactive mon navigateur, vous pouvez voir le résultat C'est une bordure dans notre image de tigre, pas dans l'image du chat. Il s'agit donc du premier exemple de sélection d'attributs. Dans l'exemple suivant, je vais cibler les ancres qui ont l'attribut target. Je vais donc taper et obtenir tang A. Ensuite, dans la base carrée, nous devons passer le nom de l' attribut, et notre nom d'attribut est target. Je vais donc copier le nom de l'attribut et le coller ici. Ensuite, dans la base de couleurs, je vais utiliser une propriété et nom de notre propriété est color. Color y. Et je vais configurer ce fichier. Après avoir défini ce fichier, si je décharge mon navigateur, comme vous pouvez le voir, dans notre paragraphe, nous avons une balise NCat, la balise enga avec l'attribut target La couleur de ce texte a donc été modifiée. Parlons maintenant de notre prochain sélecteur d'attributs. Dans ce sélecteur d'attribut, nous devons spécifier le nom de l'attribut Nous devons également spécifier le nom de la valeur. Si la valeur et l' attribut correspondent, cet élément sera sélectionné. Commençons donc par la pratique. Je vais donc d'abord commenter les deux sélecteurs. Ensuite, comme vous pouvez le voir dans ma section de saisie, nous utilisons quatre balises d'entrée, et à l'intérieur de la balise d'entrée, nous utilisons l'attribut type. Mais nos types de saisie sont différents. Dans notre première saisie, nous utilisons du texte. Ensuite, lors de la saisie suivante, nous utilisons le bouton radio, et dans notre troisième entrée pour l'adresse, nous utilisons également du texte, et pour le mot de passe, nous utilisons le mot de passe. Et maintenant, je veux sélectionner les balises d'entrée qui ont un attribut type. De plus, leur valeur est du texte. Donc, dans la balise de style, je vais taper le nom de l'élément et le nom de l'élément est saisi. Ensuite, à l'intérieur de l'évidement carré, le nom de notre attribut est type Et à l'intérieur des codes doubles, sinon, vous pouvez utiliser des codes simples. Nous devons transmettre le nom de la valeur. La valeur est du texte. Ensuite, à l'intérieur de la niche de la voiture, nous devons utiliser les propriétés. Et ici, je veux taper border. Bordure de trois pixels, et je veux une bordure solide, solide, et je veux un fond rouge coloré. la bordure rouge. Après l'étape de ce fichier, si je recharge mon navigateur, vous pouvez voir le résultat Comme vous pouvez le voir, il contenait quelles sont ces sections de saisie qui ont un attribut type. De plus, quelle valeur est du texte. Et maintenant je veux cibler l'image avec leur source et leur source Val. Pour cela, je dois copier l'une des sources. Je veux cibler l'image du chat. Copiez donc la source et le. Ensuite, Hamer tape image puis insère le carré ss, je vais passer le nom de l' attribut et la valeur Ensuite, à l'intérieur du Cariss, je veux ajouter une bordure. Je veux ajouter la même bordure, donc je copie la propriété et la valeur et je vais les coller ici. J'ai collé ce dossier. Si je recharge mon navigateur, vous pouvez voir le résultat. Cette fois, nous sélectionnons l'image avec un nom d'attribut particulier et une valeur particulière. Vous pouvez également sélectionner l'image avec d'autres attributs, comme le titre, etc. Voici donc l'exemple d' attribut avec sélecteur de valeur. Encore une fois, je vais commenter cette section. Parlons maintenant de notre prochain sélecteur d'attributs. Il s'agit d'un autre sélecteur d'attributs. Dans ce sélecteur, nous devons passer le nom de l'attribut, puis nous devons utiliser ce signe Vous pouvez trouver ce signe après avoir appuyé sur forme, et vous devez appuyer sur six, puis sur égal à, et vous devez passer la vague. Cet attribut commence par le chemin. Ici, nous devons transmettre le mot clé ou la valeur de départ . Laisse-moi te montrer. Pour cet exemple, je vais sélectionner ce code, et je vais le coller ici. Si je configure ce fichier et que je réécrit mon navigateur, vous pouvez le voir en bordure de l'image de notre chat Mais si je supprime un caractère de cette valeur, ils définissent ce fichier et associent ce navigateur. Maintenant, vous pouvez voir qu'il n'ajoute aucune bordure à notre image de chat car la valeur est incomplète. Mais à notre image, notre valeur commence par le chat. Cette fois, j'utilise l'attribut source, mais dans nos différentes sélections, nous ne passons que les mots clés de départ, CAT. Donc, si j'utilise ce signe, ce signe de départ pour cela, nous devons féliciter Sheep , synchroniser, puis configurer ce fichier et réinitialiser mon navigateur, vous pouvez voir le résultat. Encore une fois, cela ajoute une bordure à cette image particulière. Parce que dans notre image, nous utilisons l'attribut source et aussi notre image, commencez par CAT. Parlons maintenant de notre quatrième sélecteur d'attributs. Dans ce sélecteur, nous devons utiliser un attribut avec opérateur. L'attribut commence par une valeur ou est le premier IA d'une liste séparée. Ce sélecteur d'attributs, ou lorsque nous avons des sinus, sinon moins , commence par une valeur ou est la première liste innée des séparés Voyons donc l'exemple. Dans un premier temps, je vais copier cette ligne et la commenter . Alors je vais le coller ici. Cette fois, je vais utiliser dd. Je vais utiliser l' attribut Odd, copier et coller. Si je définis ce fichier et que je recharge mon navigateur, cela ne fonctionnera pas car notre attribut value n'est pas sûr, et maintenant je vais utiliser ce signe d'opérateur Ou si je définis ce fichier et que je redirige mon navigateur, cela ne fonctionnera pas non plus. Mais quoi ? Si j'utilise le signe du tableau de bord. Donc, dans notre ancienne valeur, je vais utiliser ici le signe du tiret, sinon, le signe moins. Si je configure ce fichier et que je redirige mon navigateur, vous pouvez maintenant voir le résultat Cela ajoute de la bordure à notre image CAT car nous avons le signe tiret dans notre section des valeurs Tout d'abord, il correspondait au nom de notre attribut. Ici, nous utilisons l'ancien. Après avoir utilisé cette condition, nous passons une image texte. Coupez cette portion. Ce n'est pas le sélecteur le plus utilisé. Parlons maintenant de notre prochain sélecteur d'attributs. Notre prochain sélecteur d'attributs avec le signe dollar, attributs se terminent par une valeur Commençons donc par la pratique et voyons comment utiliser ce sélecteur Pour cela, je vais d'abord dupliquer cette section et commenter la précédente. Et ici, je vais utiliser le signe du dollar. Et dans cette image, nous utilisons ici tag, et la valeur d de notre image se termine par Image of CAT. Je vais donc copier les trois derniers caractères, CAT, copier, et je vais le coller ici. Après avoir configuré ce fichier, si je désode mon navigateur, vous pouvez voir le résultat Il n'y a aucun changement dans ce résultat. De même, comme vous pouvez le voir sur l'image suivante, nous avons une balise de titre. Cette fois, je vais copier le titre de cet attribut. Donc ici pour taper le titre. Titre égal à, et nos titres se terminent par GER. Je vais donc remplacer le chat par le GER. Après avoir défini ce fichier et chargé mon navigateur, vous pouvez voir le résultat. Maintenant c'est à Bar, à côté de notre image liée. Maintenant, cette fois, je veux sélectionner les balises d'ancrage qui ont la balise HRF et l' extension JPG dans leur puits Pour cela, je vais passer le test HRM. Je copie le nom de l'attribut et je vais le coller ici, en HD, et je veux sélectionner ces balises d'ancrage Je vais donc supprimer l'image, et je vais transmettre NCN A. Avec cela, nous devons transmettre la valeur finale et notre valeur ensuite point JPG Copiez la valeur, et je vais la coller dans le double code. Et je veux changer la couleur de police de ce fil. Je vais donc supprimer cette bordure, et là, je vais taper de la couleur. Couleur rouge Après avoir configuré ce fichier, si je recharge mon navigateur, vous pouvez voir le résultat Oups, notre HRF se termine par GER, ou notre HRDF se termine par un point JPG Je vais utiliser cette extension sous le nom point JPG. Si je configure ce fichier et que je recharge à nouveau ce navigateur, vous pouvez voir le résultat Comme vous pouvez le constater, cela ajoute de la couleur rouge à cette gata. Voici donc le sélecteur de fin par W. Parlons maintenant de notre prochain sélecteur d'attributs Voici notre sélecteur de six attributs. Ici, nous pouvons utiliser le sinus des étoiles. Si la valeur apparaît n'importe où dans l'attribut, cet élément sera sélectionné. Permettez-moi donc de vous montrer l'exemple. Donc, d'abord, je vais dupliquer cette section et commenter la section précédente. Et ici, je vais utiliser le signe astrologique. Et cette fois, je veux cibler les balises NCat qui ont un attribut target Donc, pour copier l' attribut nommé target, je vais le coller ici. Et maintenant, je ne veux transmettre que deux caractères dans cette section de valeur, et je veux transmettre AN et je vais définir ce fichier. Après avoir défini ce fichier, si je recharge mon navigateur, vous pouvez voir qu'il était rouge dans notre deuxième balise NGA car si la valeur de notre attribut cible contenait un caractère dans sa valeur, alors il sélectionnera cette balise Nga Je tiens à dire que si ce caractère est disponible n'importe où dans cette valeur, il sélectionnera cette balise d'ancrage. C'est donc l' usage de Star Sin. Passons maintenant à la balise ou au dernier attribut sélectionné. Encore une fois, je vais dupliquer cette section et commenter la précédente. Et dans notre sélecteur d'attributs de liste, nous devons utiliser la valeur de retour TRidlsgee qui correspond à l'attribut dans Cela signifie que quelle que soit la valeur que vous transmettez, doit avoir un espace avant et après. Passons donc au code de Visual Studio pour le rendre plus clair. Encore une fois, je suis dans mon code Visual Studio, et ici je vais utiliser le TRidLsig Et maintenant je vais cibler l'image. Je vais donc copier la balise d'image, et je vais la coller ici. Et à partir de l'image, je vais sélectionner l'attribut t. Donc, tapez Hemo Et ici, je vais passer un nom de valeur. Pour A. Si vous remarquez, vous pouvez voir qu'avant l'opération, nous avons de l'espace, et en haut de l' opération, nous avons également de l'espace. Donc, si je définis ce fichier, je recharge mon navigateur, Uter définit ce fichier, comme vous pouvez le voir, il ne fonctionne pas à cause de la façon dont nous utilisons les propriétés colorées Nous devons utiliser Boer Border, et je vais taper trois pixels, et je veux une bordure solide Avec cela, la couleur de notre bordure est réelle. Et je vais commenter notre ancien nom de P Barty, Cull Si je configure ce fichier et que je recharge à nouveau mon navigateur, vous pouvez voir le résultat car nous avons des espaces avant et après la désactivation. De même, si j'utilise le même tag Al dans notre image suivante, je copie le tag All, et je vais le coller ici. Et cette fois, je vais taper l'image du tigre. Et configurez ce fichier et chargez mon navigateur. Vous pouvez également le voir ajouter une bordure à l' image de nos pneus. Mais quoi ? Si je supprime l'espace en haut du caractère, je souhaite redéfinir ce fichier. Et préviens mon navigateur. Et après avoir alerté mon navigateur, comme vous pouvez le voir, il supprime le plaisancier de l'image du tigre car nous devrions avoir de l'espace avant et après le personnage Voici donc comment nous pouvons utiliser ces sélecteurs d'attributs. J'espère que c'est clair pour toi maintenant. Vous connaissez donc déjà le sélecteur simple, le sélecteur combinateur et le sélecteur d'attributs À partir du prochain tutoriel, nous allons commencer les cours de poseido et les éléments positifs Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 82. Tutoriel des sélecteurs de Pseudo Classes CSS partie 1: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS avancé. Et dans ce tutoriel, nous allons apprendre les classes CSS poseido Dans notre didacticiel de préchauffage, nous expliquons quel type de sélecteur, de sélecteur simple, de sélecteur de combinateur, de sélecteur d' attribut, de classes postuto et d'éléments posto Et nous en savons déjà plus sur le sélecteur simple, le sélecteur combinateur et le sélecteur d'attributs Dans ce tutoriel, je vais aborder les cours de possuo. Voyons donc combien de positoglss nous avons en CSS. Ici, vous pouvez voir un total de 32 verres Poseido. Il inclut nos anciennes classes posto, ainsi que les classes posto avancées , introduites dans CSS 3 Commençons le didacticiel avec le verre Poseido du premier et du dernier enfant Et n'oubliez pas que pour utiliser la classe posto, nous devons utiliser le signe de colonne Alors, sans perdre votre temps, passons à l'aspect pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Lip Server, et je crée déjà un document stable nommé index point M. Et dans notre document, comme vous pouvez le voir, nous avons d'abord une liste de désordres, puis trois paragraphes Encore une fois, nous avons une liste nodale. Nous avons également deux paragraphes. À partir de là, nous allons commencer notre premier et dernier prositoclass pour enfants Et maintenant, je veux cibler le premier tag LI qui se trouve à l'intérieur du tag UL. Je veux cibler le premier enfant. Pour cela, je vais lier LI, puis nous devons utiliser deux points et après deux points, souvenez-vous que nous n'avons pas besoin de fournir d'espace après deux points. Sinon, on nourrit le côlon. Ensuite, nous devons transmettre le nom de Posidocla, qui est le premier enfant Ensuite, dans les cartes, je vais utiliser ici une propriété CSS nommée color. Couleur y. Si je définis ce fichier, comme vous pouvez le voir, nous avons le total à décommander dans notre document Il s'agit de la première liste nodale et de la deuxième liste de désorbement. Nous avons le total du premier enfant dans notre liste de personnes décommandées. Si j'ai configuré ce fichier, vous pouvez voir ici qu'il a changé la couleur de fond jusqu'au premier enfant de la liste Unwaal abord, il a coloré le premier élément de la liste 1, puis il colore le premier élément de la liste deux. Si vous le remarquez, vous pouvez voir notre étiquette LI à l'intérieur de l'étiquette UL. Le tag I est le premier enfant du tag UL. De même, si je dois récupérer cette section et commenter la ligne précédente, je vais maintenant changer le tag neuf. Ici, je vais passer P signifie balise de paragraphe. Comme vous pouvez le constater, nous avons plusieurs balises de paragraphe dans notre document. Si je définis ce fichier, il n'y a aucun changement. Je ne change pas la couleur de la balise de paragraphe du téléphone, mais la question est de savoir pourquoi ? Parce que notre balise de paragraphe n' est pas le premier enfant. Ici, nous utilisons directement la balise de paragraphe à l'intérieur de la balise body. Sinon, nous n'utilisons aucune étiquette DIP à aucun autre moment. C'est pourquoi Paragraph n'est pas notre premier enfant. Mais si je déplace la balise de paragraphe à l'intérieur de la balise profonde, dans ce cas, cela fonctionnera. Laisse-moi te montrer. Ici, je vais taper Deep tag. D. Je vais réserver ces trois paragraphes dans cette balise profonde. Configurez ce fichier, vous pouvez maintenant voir le résultat. Il a maintenant coloré le premier élément enfant de notre balise de paragraphe, qui se trouve à l'intérieur de la balise profonde. Dans le cas contraire, nous avons le dernier élément enfant. Si je tape les derniers cheveux de l'enfant, puis que je définis ce fichier, vous pouvez maintenant voir un résultat différent. Maintenant, il sélectionne le dernier enfant de cet élément profond, qui est un paragraphe. la même manière, si je passe une balise ici, puis que je définis ce fichier, vous pouvez maintenant le voir cibler élément de luxure à la fois dans la liste unwodal Maintenant, je veux sélectionner l' élément luxure parmi le dernier. Comme vous pouvez le voir, le dernier enfant sélectionne l'élément de liste dans la liste unwodale Mais cette fois, je souhaite sélectionner le dernier élément de la première liste d'exceptions Pour cela, nous devons transmettre ici l'identifiant de la liste. Je vais donc dupliquer cette section et commenter les lignes précédentes. Ici, je vais taper un hashtag, notre liste un IDNMe est Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Vous pouvez maintenant le voir cibler le dernier élément LI de la liste. J'espère que vous savez maintenant ce qu'est dernier enfant et ce qu' est le premier enfant. Maintenant, parlons d'un enfant et du neuvième dernier enfant. À partir de là, je vais supprimer le dernier enfant et le remplacer par N enfant. Ensuite, nous devons utiliser les bretelles rondes. Dans le premier sélecteur d'enfant et le dernier sélecteur d'enfant, nous pouvons cibler uniquement le premier, sinon le dernier Mais dans notre sélecteur NHLD, nous pouvons cibler celui que vous spécifiez Supposons que je veuille cibler le troisième enfant. À l'intérieur de la cavité ronde, vous devez en passer trois. Si je configure ce fichier, vous pouvez voir le résultat. Nous sélectionnons donc ici l'enfant en question en utilisant le numéro d'index. De même, si vous voulez cibler le cinquième , oui, nous le pouvons. Il suffit d'elle pour passer cinq et définir ce fichier, et vous pouvez voir le résultat. Non seulement cela, dans la robe ronde, vous pouvez effectuer des calculs Supposons que je passe deux N. En gros, N représente le numéro de série comme un, deux, trois, quatre, cela signifie qu'il va multiplier deux par zéro, deux par un, deux par deux, de cette façon. Après cette lecture, vous pouvez voir le résultat. Elle cible une après l'autre. abord, il va multiplier deux par zéro et deux par zéro égal à zéro. C'est pourquoi vous ne sélectionnez pas le premier. Puis deux en un, deux en un égal à deux. C'est pourquoi il sélectionne le second. Ensuite, deux sur deux et deux sur deux égaux à quatre. C'est pourquoi vous sélectionnez le quatrième. Donc, de la même manière, on va sélectionner les éléments enfants. Comme vous pouvez effectuer d'autres calculs de base. Si vous voulez expérimenter cela, oui, vous le pouvez. Maintenant, parlons du dernier enfant. Je veux récupérer cette section et commenter la précédente. Et je vais le taper le dernier enfant. Cela fonctionne également comme dans Gil, mais cela va commencer par le dernier point de cette liste. Laisse-moi te montrer. Ici, je vais en taper deux puis définir ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, il sélectionne l'avant-dernier élément de notre liste. En gros, je veux dire que cela vient de la direction opposée. J'espère que vous savez maintenant ce qu' il y dans l'enfant et dans le dernier enfant. Maintenant, je vais parler du dernier type et du type IO. Ici, je vais dupliquer cette section et commenter la précédente. Je vais taper au moins N de Ti. Puis, à l'intérieur des rondelles, j'en croise deux. Cette fois, je veux faire une sélection dans le paragraphe. Ici, je vais taper P. Après avoir ouvert ce fichier, comme vous pouvez le voir, il sélectionne d' abord le deuxième élément enfant, qui se trouve dans la balise deep. Ces paragraphes ont leur balise parent. Mais quoi ? Si je fais défiler un peu la page vers le bas, vous pouvez voir que dans nos deux derniers paragraphes, nous n'utilisons aucune balise parent, mais que notre ème type sélectionne également le dernier paragraphe. Mais notre sélecteur de type enthrop peut sélectionner les paragraphes qui n' ont pas En gros, je veux dire qu'il peut sélectionner un élément à partir de l'élément parent. En outre, il peut sélectionner les éléments qui n'ont pas d'élément parent. Pour mieux comprendre, je vais supprimer le deep tag. Si je définis ce fichier, maintenant, nos balises de paragraphe n' ont aucun élément parent. Donc, si je place cette pile, comme vous pouvez le voir, elle sélectionne le deuxième paragraphe de notre document principal. Vous devez juste vous rappeler qu'il peut sélectionner un élément sans parent. Parlons-en maintenant du type de dernier arrêt. Encore une fois, je vais dupliquer cette section. Et commentez la section précédente et HemotyPen en dernier. En gros, il va sélectionner un élément dans la direction opposée. Après l'étape de ce fichier, vous pouvez voir le résultat. Je sélectionne l'avant-dernier paragraphe de notre document. Maintenant, parlons d'un autre cours positif sur les enfants. Ce sélecteur fonctionne lorsque vous n'avez qu'un seul enfant dans votre élément parent. Laisse-moi te montrer. Encore une fois, je vais sélectionner cette section, dupliquer cette section et commenter les lignes précédentes. Et je vais taper sur les balises LI, je vais lancer notre nouveau sélecteur positif, qui est enfant unique Si je définis ce fichier, comme vous pouvez le voir, il ne sélectionne aucun élément de notre liste car nos balises LI ne sont pas seulement des enfants dans nos balises UL, mais quoi ? Si je supprime tout ça. Maintenant, vous pouvez voir que nous n'avons qu' un seul enfant dans notre balise UL, puis définissez ce fichier, vous pouvez voir le résultat. Maintenant, il sélectionne parfaitement notre élément car nous n'avons qu'un seul enfant sur au moins un. Mais si je tape quelque chose dans cette balise UL, supposons que le type de héros est pan tag, puis que je définis ce fichier. Maintenant, vous pouvez voir que vous ne définissez pas l'enfant car cela ne fonctionne qu' avec un seul enfant. C'est l'usage de l'enfant unique. Si cet enfant a un frère ou une sœur, cela ne marchera pas J'espère que c'est clair pour toi maintenant. C'est tout pour ce tutoriel. Je ne veux pas que cette vidéo soit trop longue. Donc, dans la partie suivante de ce tutoriel, je vais aborder le type Ono, premier du type, le dernier du type, vide, et non le décalage. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 83. Sélecteur de cours CSS Pseudo partie 2: Bonjour les gars, c'est bon de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au sélecteur de classe Css Poseido Et nous allons commencer notre tutoriel à partir de ce sélecteur, uniquement sur le type Op Dans notre précédent tutoriel, nous avons déjà découvert certains sélecteurs de Poseido Sans gaspiller votre texte, commençons par l'aspect pratique. Comme vous pouvez le voir côte à côte, j'ouvre mes sels à votre codaor et à mon navigateur à l'aide de l'extension Lip Server, et j'ouvre mon ancienne estimation Dopomin index Nous allons commencer uniquement avec le type Op. Il ne tape que du type. Si je configure ce fichier, vous ne pouvez rien voir. Maintenant, la question est de savoir quelle est la signification du seul type Op ? Supposons que dans notre liste, nous ayons plusieurs balises LI. Je vais commenter la plupart des tags LI. Nous n'avons maintenant qu'une seule balise LI dans cette liste. Après avoir configuré ce fichier, vous pouvez voir le résultat. Il s'agit de sélectionner le tag LI qui se trouve dans notre première liste de commandes. Vous pourriez penser que c'est assez similaire avec Only Child Selector, mais ce n'est pas Dans Only Child Selector, si vous utilisez une autre balise telle que span tag, span, hemo type P. Ensuite, vous définissez ce fichier, il ne fonctionnera pas Mais avec uniquement le type up, si vous configurez ce fichier, cela fonctionnait également. Comme vous pouvez le constater, nous n'utilisons ici que le type Op avec étiquette Ali, et dans notre balise UL, nous n'en avons aucune. Nous n'avons qu'un seul tag LI. Mais si nous obtenons cette ligne puis que nous définissons ce fichier, cela ne fonctionnera plus car nous avons maintenant plusieurs balises LI. Si le tag LI est uniquement de type O dans cette URL, dans ce cas, il sera sélectionné. Donc, si je supprime à nouveau cette ligne puis que je définis ce fichier, vous pouvez voir le résultat. Il s'agit maintenant de sélectionner notre élément de liste. De même, si vous l'utilisez avec la balise span, laissez-moi vous le montrer. Je veux remplacer l'IA par le span. Envergure. Avant de définir ce fichier, encore une fois, je vais dupliquer cette balise span et définir ce fichier. Maintenant, vous pouvez voir que nous devons créer deux balises span, mais aucune n' en a été sélectionnée. Mais quoi ? Si je supprime une balise span, si je supprime une balise span de cette liste puis que je définis ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant le voir sélectionner la balise span. Il s'agit de l'utilisation du seul type de sélecteur. Parlons maintenant premier sélecteur de type et du dernier sélecteur de type Cela signifie le même type de tag en premier et en dernier. Commençons par le côté pratique. Dans un premier temps, je vais consulter cette section et commenter les lignes précédentes. Et ici je vais taper Foptype. Si je définis ce fichier, comme vous pouvez le voir, il sélectionne la balise span, mais maintenant je veux l'utiliser avec la balise LI. Je vais donc taper I. Après avoir défini ce fichier, vous pouvez maintenant le voir sélectionner le premier tag LI de notre liste dans le sens inverse, le dernier type fonctionne. Si je fais cette ligne et que je commente la section précédente, je veux remplacer la première par la dernière. Ensuite, ouvrez ce fichier, vous pouvez voir le résultat. Maintenant, il faut sélectionner le dernier, et dans notre liste, nous n'avons qu'un seul tag li. C'est pourquoi celui-ci est également considéré comme le dernier et le premier. Parlons maintenant de notre prochaine lettre qui est vide. Il est utilisé pour sélectionner l' élément vide. Laisse-moi te montrer. Donc, d'abord, je vais découvrir ces lignes demander cette section et commenter la section précédente. Et ici, je vais créer un élément profond avant celui de la liste. D. Non seulement cela, je vais en créer plusieurs en profondeur. Je vais le dupliquer de fond en comble, et dans notre deuxième profondeur, ici je vais taper du texte. Low rib ten, et je vais configurer ce fichier. Mais notre premier PDF et notre dernier DV sont complètement vides. Cette fois, je veux cibler notre zone vide D. Comment pouvons-nous cibler cette profondeur vide ? Laisse-moi te montrer. Pour cela, je vais taper un bip à deux points vides. Ensuite, à l'intérieur de la résine de charbon, je vais utiliser ici une bordure de nom de propriété, bordure de trois pixels, et je veux une bordure pleine Avec cela, la couleur de notre foreuse est le rouge. Si je sous-titre ce fichier, vous pouvez voir le résultat. Vous pouvez voir dans mon navigateur qu'il s'agit de notre première bordure. Ensuite, entrez dans le vif du sujet car notre deuxième dV n'est pas vide. Puis vient le troisième de border car notre troisième div est vide. Notre profondeur était vide. C'est pourquoi nos frontières sont collées les unes aux autres. Mais si j'ajoute un peu de rembourrage, laissez-moi afficher le rembourrage de cinq pixels, puis définir ce fichier Vous pouvez maintenant voir le résultat. Mais attention si vous utilisez un sélecteur vide, car il compte également l'espace comme un caractère. Laisse-moi te montrer. Dans notre troisième a, je vais vous fournir un espace. Vous pouvez voir notre troisième si elle est vide, mais ici je fournis un espace. Si j'ai configuré ce fichier, vous pouvez maintenant voir qu'il n'a pas de bordure lors de notre troisième plongée car ici nous utilisons un espace. Parlons maintenant de notre prochain sélecteur Posido. Si nous ne voulons pas cibler cette balise specify class sinon spécifiée, alors nous utilisons not selector Il va cibler d'autres éléments, mais il ne va pas cibler l' élément spécifié. Laisse-moi te montrer. Encore une fois, j'invite Visual Studio Code Hit, et vous pouvez voir ici que nous devons indiquer une balise de cinq paragraphes dans notre document. Je vais sélectionner l'ensemble de cet élément de paragraphe. Pour cela, je vais taper P, puis lors des courses de tali, je vais ajouter de la couleur Couleur, rouge, et je vais configurer ce fichier. Comme vous pouvez le voir, pour configurer ce fichier, vous devez sélectionner toutes les balises de paragraphe. Mais dans notre balise du deuxième paragraphe, comme vous pouvez le voir, nous avons une classe nommée taste. Je ne souhaite pas sélectionner cette balise de paragraphe. Pour cela, nous devons utiliser not PosidoClass. Ici, je veux taper P, deux points, rien. Donc, dans le cours, je vais sélectionner la classe particulière nommée taste, dot, taste. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant le voir sélectionner toutes les balises de paragraphe, sauf la seconde , car elle n' utilise pas PositoCass et spécifie le paragraphe en utilisant son Parlons maintenant de notre prochain cours de posito Lang. Lang est l'abréviation de langage. Si vous souhaitez cibler une langue particulière sur votre page Web, vous devez dans ce cas utiliser cette option. Pour cet exemple, comme vous pouvez le voir, nous créons un nom de page d' estimation différent Langt TML Dans notre balise body, vous pouvez voir 23 Le premier est la langue anglaise. La deuxième est la langue française, et la troisième est la langue allemande. Pour déclarer cette langue, nous utilisons ici l'attribut Lang. Maintenant, je veux cibler ce paragraphe en utilisant leur langue. Pour cela, nous devons utiliser le sélecteur de procédure Lang. Tout d'abord, je veux cibler la langue française. Pour cela, je vais lier P, deux points, et je vais utiliser la classe Lang. Ligne. Ensuite, à l'intérieur des presses rondes, je vais taper le cliché à partir de, qui est FR. Dans la classe, je vais changer la couleur du paragraphe. Lecture en couleur. Après avoir configuré ce fichier, vous pouvez voir le résultat. Vous pouvez voir dans mon navigateur qu'il ciblait le paragraphe français. De même, si vous voulez cibler l'allemand, je vais choisir à nouveau cette section, et je veux cibler l'allemand. Pour cela, vous devez passer le DE ici. Si je configure ce fichier, vous pouvez voir le résultat. Nous ciblons maintenant le troisième car notre troisième paragraphe est en allemand. Voici donc l'utilisation du sélecteur de langue. Et maintenant, je vais parler de la classe link posto sur Posidoclass, de la classe PositoClass visitée et de la classe Posidoclass PositoClass visitée et de la classe Posidoclass En gros, les posto plus sont utilisés avec des tags ange. Et vous pouvez également utiliser over et active avec d'autres tags. Voyons comment nous pouvons l'utiliser. Encore une fois, je suis d'accord avec l'éditeur de code du studio, et comme vous pouvez le voir, nous créons ici un autre document stable nommé ling point HTML Et comme vous pouvez le voir, nous avons une liste non tissée, et à l'intérieur de cette liste non ordonnée, nous avons des nous avons Et ces tags LI sont dirigés par des tags NGA. Et pour styliser ces balises NGA, nous pouvons les utiliser pour des pseudo-classes Ce sont donc tous des liens. Je veux donc colorier tous les liens. Pour cela, je vais cibler toutes les balises ancha en UL A, lien entre deux points Ensuite, à l'intérieur des couleurs se trouve, je veux définir la couleur rouge. Et je veux configurer ce fichier. Comme vous pouvez le voir, pour configurer ce fichier, il convertit tous les liens en rouge. Et maintenant, je veux changer la couleur lorsque je passe le curseur sur ce lien. Pour cela, je vais dupliquer cette section, et je vais attacher deux points à Her. Et quand je survole mon curseur, je veux une couleur verte Après avoir défini ce fichier, lorsque je regarde mes voitures sur ce lien, vous pouvez le voir convertir la couleur de notre texte en vert et vous pouvez utiliser la classe Obert Posito avec n' importe quelle balise Vous pouvez l'utiliser avec un paragraphe, une balise deep, une balise span, etc. Je sais que cela vous est déjà familier. Notre prochain Posito sélectionné est visité et vous pouvez utiliser visité avec une seule ancre Je veux dupliquer cette section, et ici je vais taper visité ici », je vais utiliser la couleur bleue. Visité signifie que vous avez déjà cliqué sur ce lien une fois, et vous pouvez voir dans mon navigateur tous les tags sont rouges parce que je ne visite aucun lien Je vais donc cliquer sur Contacter les TA. Ainsi, chaque fois que je clique sur ContactAs, comme vous pouvez le voir, toutes les balises NCT visitées sont converties car j' espère avoir fait une erreur Comme vous pouvez le voir, je suis dans ma page TML à points de liens, et dans notre contactus Anctag, nous redirigeons notre page Web, page points d' index Et j'ai défini ce fichier et je l' ouvre sans utiliser Live Server et vous pouvez voir l'emplacement du fichier dans la section URL. Maintenant, cette fois encore, je vais cliquer sur Contacts. Je vais cliquer sur ce lien. Après avoir cliqué sur ce lien, comme vous pouvez le voir, vous revenez à notre autre page Mais si je clique sur le bouton Retour, vous pouvez maintenant voir que cette page de contact est visitée. J'espère que vous pouvez maintenant comprendre comment nous pouvons utiliser la classe VisitatePosdo Parlons maintenant une autre classe de posidoclasses qui est active Je vais moduler cette section et lier une action du côlon Ensuite, dans le cadre des processus ronds, je vais changer de couleur. Ici, je vais utiliser la couleur rose. Je vais configurer ce fichier. Je vais réécrire cette page. Maintenant, la question est de savoir à quoi sert la classe Pozo active Comme vous pouvez le voir, chaque fois que j'ouvre mon Carter dessus, vous pouvez voir que notre lien change de couleur, mais je ne clique pas sur ce lien. Maintenant, je vais cliquer sur ce lien. Je vais cliquer avec le bouton droit de la souris sur ce lien. Comme vous pouvez le constater, je continue de cliquer avec le bouton droit de la souris sur ce lien. Ça veut dire que notre lien est actif. Jusqu'à ce que je relâche mon clic droit, le lien continue d'agir. Cela signifie que chaque fois que je clique sur ce lien O, il active ce lien et change la couleur du texte de ce lien. C'est l'utilisation de la classe active, et chaque fois que je relâche le bouton droit de la souris, reviens à la couleur visitée car je clique sur ce lien. C'est tout pour ce tutoriel et pour le prochain tutoriel, je vais démarrer Target Focus, cocher, désactiver, activer, facultatif requis, etc. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 84. Sélecteur de cours CSS Pseudo partie 3: Maintenant, bonjour, c'est bon de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié aux CSS PoseoClasses, nous allons commencer notre voyage à partir de ce Cible, sélecteur PozioGlas cible. Ce PosidoGass est très utile avec une balise d'ancrage. Voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Light Server, et je crée déjà un document d'estimation nommé index point HTML. Et vous pouvez voir que dans notre liste non ordonnée, nous avons au total trois balises d'ancrage, DML CSS JavaScript, et dans la section HDF, ici j'utilise des identifiants Cela signifie que je souhaite cibler et rediriger vers une section particulière de cette page Web. Ils sont appelés liens vers la même page. Sinon, nous pouvons parler de liens internes. Et comme vous pouvez le voir dans notre section consacrée aux paragraphes, nous utilisons le même identifiant pour ces paragraphes. Ainsi, chaque fois que je clique sur ce lien HTML, je souhaite mettre en évidence le code TML lié à une balise de paragraphe en particulier la même manière, chaque fois que je clique sur JavaScript, je souhaite le surligner dans le paragraphe JavaScript. Pour cela, nous pouvons utiliser des PozioCas cibles . Laissez-moi vous montrer comment faire. Supposons que je veuille cibler l'élément P, P deux-points et que je vais utiliser Target PosidOlss. Cible. Ensuite, dans les ateliers automobiles, je vais changer la couleur de fond de ce paragraphe en particulier. Fond et je veux fond de couleur rouge. Je vais configurer ce fichier. Après avoir configuré ce fichier, vous pouvez plus rien voir dans notre navigateur. Mais chaque fois que je clique sur le lien en question, supposons que je veuille cliquer sur le lien CSS. Je vais cliquer sur CSS. Après avoir cliqué sur CSS, vous pouvez voir le résultat. Il a mis en évidence le CSS lié au paragraphe car ce lien et les paragraphes portent cet identifiant nommé CSS. De même, si je veux mettre en évidence la partie Javascript, oui, je le peux. Maintenant, la question est la suivante : quel est le processus par lequel ing reconnaît cet identifiant ? Comme vous pouvez le voir dans ma section URL, après DML, nous avons un identifiant, Hazteg Chaque fois que je clique sur CSS vous pouvez également voir que l'identifiant est modifié. Maintenant, vous pouvez voir que le lien est le hashtag CSS. va de même pour le DML. Méthode cible, reconnaissez cet identifiant à partir de cette barre d'URL. J'espère que vous comprenez maintenant comment nous pouvons utiliser Target PosidoClass Nous allons maintenant parler de Poseido Glass Focus. Ici vous pouvez voir tous les PosidoGlass de couleur rose. Ils fonctionnent tous avec des formulaires de saisie. Je vais essayer tout cela dans notre AtableFM. Commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Et nous allons commencer par nous concentrer. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Lifesaver, et j'ouvre déjà un nom de document HTML à partir de points Dans notre body tag, comme vous pouvez le voir, nous avons un formulaire. Et dans notre formulaire, nous avons un type d'entrée différent. Pour le prénom, nous utilisons du texte de saisie, et pour le nom de famille, nous utilisons également du texte de saisie. Sur ce, nous avons dit obligatoire parce que nous ne pouvons pas le laisser en blanc. De même, nous avons en même temps votre H, mais son type de saisie est un nombre. Dans notre section H, vous devez transmettre les numéros. De plus, j'ai fixé une limite à cette section de saisie, limite minimale de dix ans et une limite maximale de 20 ans. Vous devez donc passer une valeur entre eux. Notre prochaine section de saisie est la section e-mail. Ici, nous utilisons un e-mail de type saisie. Notre section suivante est consacrée aux loisirs, et ceux-ci sont tous du type de saisie de cases à cocher. Ensuite, nous utilisons votre sexe, pour votre sexe, nous utilisons ici le type d'entrée radio. Ce sont tous des boutons radio. L pour utiliser la boîte CLG. Si vous cliquez sur ce menu déroulant, vous pouvez voir de nombreux noms de pays. Il s'agit d'une zone de sélection et elles sont toutes des options de cette boîte de sélection. Par défaut, nous n'en sélectionnons aucun, et enfin, nous avons un bouton d'envoi, de type d'entrée submin. Commençons donc par la classe focus p zero. Dans la section style, je vais taper ici, et je vais utiliser focus avec la balise d'entrée. Entrée. Chaque fois que nous nous concentrons sur la saisie, je veux ajouter une bordure à cette section de saisie particulière, bordure par pixel, et je veux une bordure solide Avec cela, la couleur de notre bordure est le rouge. Après l'étape de ce fichier, chaque fois que je clique sur une section de saisie, je souhaite cliquer sur la dernière section de saisie. Si je clique sur ce champ de saisie, comme vous pouvez le voir, cela ajoute une bordure à ce champ de saisie. Mais le problème est que nous ne pouvons pas voir la couleur de la bordure rouge. Je vais augmenter la largeur de la bordure. Je veux une bordure solide à cinq Pi. Si je définis ce fichier et que je clique sur un champ de saisie, vous pouvez voir le résultat. Cela ajoute une bordure de couleur rouge à ce champ de saisie, mais cela ne fonctionnera pas sur la case à cocher et le bouton radio C'est l'utilisation de focus PozioClass Maintenant, je vais parler de la classe check Cette classe Posito fonctionne avec une case à cocher et une boîte radio de type entrée Passons au code de Visual Studio. Pour cela, je vais consulter cette section et commenter la ligne précédente. Ici, je vais utiliser la saisie, vérifier que notre PositoGlass est Ensuite, à l'intérieur des robes rondes, je ne vais pas utiliser la propriété des bordures car les bordures ne fonctionnent pas avec les cases à cocher et les boutons radio Ici, nous devons utiliser box shadow box shadow. Je veux définir l'ombre de la boîte, zéro, zéro, zéro, et je veux trois pixels. Avec ça, je veux de la couleur rouge. À partir de Ss et Xs, je prends zéro pixel et pour l' opacité, je prends également zéro Si je place ce fichier et que je survole la case à cocher de mon véhicule et que je clique sur la case à cocher, vous pouvez voir le résultat. C'est dans l'ombre de la case dans notre case à cocher. De même, si je clique sur les boutons radio, vous pouvez voir le même résultat. Chaque fois que je décoche ce bouton, vous pouvez voir qu'il a supprimé l'ombre de la boîte Maintenant, je vais vous montrer une belle astuce. Pour cela, je vais utiliser un sélecteur de communauté, et nous en avons déjà parlé dans nos précédents tutoriels Ici, je vais utiliser un sélecteur adjacent en utilisant plusine. Ensuite, je veux ajouter le nom du tag et notre nom de tag est label. Ici, je vais commenter cette ligne et je vais également ajouter une autre propriété nommée couleur, et je vais définir la couleur rouge. Je vais configurer ce fichier. Ainsi, chaque fois que je clique sur une case à cocher, l'étiquette suivante est Il va sélectionner l'étiquette suivante exacte, qui se trouve à côté de la case à cocher. Laisse-moi te montrer. Donc, si je clique sur la case à cocher musique, vous pouvez voir le résultat. Il applique des couleurs CSS amusantes à notre étiquette. J'espère donc que Nuts aura atteint 40 %. À quoi sert check PositoClass ? Parlons maintenant de notre prochaine classe PositoClass, qui est désactivée et activée Voyons donc comment nous pouvons l'utiliser. Comme vous pouvez le voir, toutes les entrées sont activées. Et maintenant je vais désactiver notre prénom en utilisant un guichet automatique. Donc, en effet, section de saisie, ici je veux taper disable. Après l'étape de ce fichier, vous pouvez voir le résultat. Nous ne pouvons rien taper dans ce champ de saisie, mais nous pouvons transmettre des données dans nos autres balises de saisie. Je vais donc d'abord commenter cette section. Et là, je vais ajouter une bordure à ce champ de saisie. Ici, le type de saisie est du texte. Je vais taper input, puis je vais utiliser le carré*** à l'intérieur du carré sis, je vais mentionner le type d'entrée, et nous l'avons déjà appris dans nos précédents tutoriels. Ici, j'utilise un sélecteur d'attribut, type égal pour insérer les codes uniques, je vais passer le nom du type, qui est du Ensuite, à l'intérieur du Cariss, je vais définir une bordure. Bordure de trois pixels, et je veux une bordure solide. Avec cela, notre couleur de bordure est y. Après l'étape de ce fichier, vous pouvez voir Mais le problème, c'est qu'il y avait une bordure à côté de notre bouton de désactivation. Notre premier champ de saisie est désactivé, mais notre deuxième champ de saisie est activé. Maintenant, je ne veux pas ajouter de bordure à notre bouton de désactivation. Pour cela, je vais utiliser une activation Positioglass. Laisse-moi te montrer. Je souhaite ajouter une bordure uniquement dans le champ de saisie d' activation Après la résine carrée, je vais taper colon enable. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, vous pouvez voir qu'il suffit d'ajouter la bordure dans champ de saisie de notre nom car il s'agit du champ de saisie valide De même, si je duplique cette section et que je commente la précédente, cette fois, je veux ajouter une bordure dans notre champ de saisie de désactivation Il tape « Disable ». Et définissez ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Il se trouve maintenant à la bordure de notre champ de saisie de désactivation. Voici l'exemple d'activation et de désactivation de Posidoclass. Parlons maintenant de deux autres classes de posito , obligatoires et facultatives Si un champ de saisie est requis, vous pouvez le cibler. Et si le champ de saisie est facultatif, vous pouvez également cibler ce champ. Permettez-moi de vous montrer l'exemple. Comme vous pouvez le voir, nos champs prénom et nom de famille sont obligatoires, mais dans notre champ e-mail, je n'utilise pas d'attribut obligatoire. Alors maintenant, je veux cibler ce champ obligatoire. Je vais donc sélectionner cette ligne et commenter la section précédente Comme vous le savez, les champs obligatoires sont très importants. Si vous essayez de soumettre ce formulaire sans saisie de champ obligatoire, des masses seront affichées. Merci de remplir ce champ. Vous ne pouvez pas envoyer le formulaire sans remplir ce champ de saisie. Avant de commencer mon CSS, je vais supprimer l'attribut disable, et je vais l'enregistrer à nouveau. Ici, je veux supprimer cette section et je vais taper une entrée et sélectionner la valeur requise. Ensuite, si le champ de saisie est obligatoire, parlez-en à propos de cette bordure. Je souhaite également ajouter une couleur de fond. Arrière-plan, et je veux une couleur de fond verte. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, nous avons sélectionné avec succès les champs de saisie obligatoires et nous avons également mis en forme ces champs de saisie obligatoires. De même, à l'inverse, nous avons une autre classe Pozio, qui est facultative Je vais commenter cette section précédente, et ici je vais taper input optional. Si le champ de saisie est facultatif, vous pouvez le voir appliquer les propriétés CSS, lequel champ de saisie est facultatif. En utilisant ce PoseroGlass, nous pouvons cibler les sections de saisie qui sont facultatives, dont le champ n'est pas obligatoire Parlons maintenant de deux autres posidoclasses, qui sont à portée et hors de Ces classes Posido fonctionnent uniquement avec le numéro de type d'entrée. Vous pouvez donc voir ici dans notre champ H, ici nous utilisons le numéro de type d'entrée, et vous pouvez également voir dans notre estimation, le numéro de type d'entrée. Avec cela, nous définissons également valeurs minimale et maximale pour ce champ de saisie. Nous ne pouvons pas en prendre plus de 20, nous ne pouvons pas non plus en prendre moins de dix. Donc, si quelqu'un essaie de dépasser 30, dans ce cas, notre section de saisie ne prendra pas ce chiffre. Alors maintenant c'est hors de portée. Pour cela, nous avons PositoGlass, qui est à portée et hors de Alors laissez-moi vous montrer comment cela fonctionne. Ici, je vais taper l'entrée dans la plage. Et je veux utiliser la couleur rouge de la bordure et de l'arrière-plan, et je vais définir ce fichier. Chaque fois que je passe la valeur 10-20, elle n'affichera aucune couleur car maintenant notre entrée est dans la plage Mais si je passe une valeur faible, supposons 60, vous pouvez maintenant voir que notre CSIS a disparu parce que cette valeur n'est pas dans la plage que j'ai spécifiée pour gérer la valeur hors plage. Nous pouvons également refléter une autre propriété du Csis Laissez-moi vous montrer comment faire. Pour cela, nous devons utiliser une pseudo-classe hors de portée. Tout d'abord, je vais supprimer la section de bordure. Je n'en ai pas besoin. Ensuite, je vais consulter cette section. Et cette fois, je vais taper hors de portée, et ici je vais dire que c'est la couleur de fond, rouge, et je vais définir ce cinq. Par défaut, comme vous pouvez le voir, notre champ de saisie H est vert. Donc, si je passe dix ou 11, alors les propriétés des positocles seront renvoyées dans la plage. Mais si j'en passe neuf, vous pouvez voir que la couleur de fond a changé . Maintenant que notre numéro est hors page, vous pouvez avertir votre utilisateur s'il passe une mauvaise saisie. C'est donc tout pour ce tutoriel. Dans le prochain tutoriel, je vais aborder les Posidoglasses restantes Merci donc d' avoir regardé cette vidéo Stune pour le prochain tutoriel 85. Sélecteur de cours CSS Pseudo partie 4: Bonjour, les gars, c'est bon de vous revoir. Ceci est un autre sélecteur de verre CSS Poseido lié au didacticiel sélecteur de verre CSS Poseido lié au Dans ce tutoriel, nous allons apprendre les lunettes Posto restantes Nous allons commencer par la lecture seule et réécrire Posto Glass Dans notre TimLpm, si nous utilisons l'attribut read only, nous ne pouvons lire que cette section d'entrée Nous ne pouvons rien écrire dans ce flux d'entrée, et le mode lecture rouge est le mode par défaut. Revenons au code de Visual Studio et essayons de comprendre à quoi servent ces deux sélections. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code isults Studio et mon navigateur en utilisant LibServeExtension, et je crée déjà un nom de document d'estimation nom de document Dans notre champ de saisie du prénom, si je clique dessus, comme vous pouvez le voir, nous pouvons taper le contenu ici. Mais si j'utilise l'attribut read only, nous tapons ici read only. Et ce fichier, maintenant vous pouvez voir que le champ de saisie de votre prénom n'est pas disible Mais chaque fois que je clique dessus, et si j'essaie de saisir, les données ne fonctionneront pas. Nous ne pouvons pas remplir ce champ de saisie avec des données, mais nous pouvons également transmettre la valeur par défaut ici. Laisse-moi te montrer. Il saisira une valeur et je veux transmettre le nom à une. Je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, automatiquement, il avait une valeur par défaut dans ce champ. Mais chaque fois que j'essaie de supprimer cette valeur par défaut, je ne peux pas car nous n'avons que pernon pour lire ce champ de saisie, pas correctement Maintenant, je veux sélectionner ce bouclier d'entrée à l'aide de Posidoglass. Pour cela, nous devons utiliser Positoglass en lecture seule. Smotype en entrée, deux-points, lecture seule. Ensuite, à l'intérieur des calibres, je vais d'abord parler de la bordure Bordure, je veux une bordure d'un pixel, et je veux une bordure unie et la couleur de notre bordure est le rouge. Si je configure ce fichier, vous pouvez voir le résultat. Nous pouvons cibler avec succès le champ en lecture seule en utilisant la classe Posido en lecture seule Mais si je duplique cette section et que je commente la précédente et que je veux taper une entrée, lire écrire. Lisez et écrivez. Ensuite, définissez ce fichier, vous pouvez voir un résultat différent. Maintenant, il sélectionne l' autre champ de saisie car le mode lecture-écriture est le mode par défaut du champ de saisie. Parlons maintenant de notre classe next to posito, qui est valide et invalide Nous utilisons ces classes de posito si notre type de saisie est un numéro de téléphone électronique Je veux dire que lorsque le champ de saisie nécessite une valeur valide , nous pouvons utiliser ces classes. La plupart du temps, nous utilisons une classe non valide. Supposons que si quelqu'un a saisi un mauvais e-mail, dans ce cas, je souhaite afficher un avertissement dans ce champ de saisie Je vais vous montrer la démonstration. Ici, vous pouvez voir que nous avons un champ de saisie nommé votre e-mail. Nous allons cibler ce champ de saisie et appliquer les deux classes. Dans un premier temps, je vais dupliquer cette section de saisie et commenter la section de saisie précédente. Ensuite, saisie herramuty, deux-points non valides. Après avoir défini ce fichier, comme vous pouvez le voir, il ajoute une bordure à notre champ de saisie du nom de famille. Mais la question est pourquoi ? Parce que dans ce champ de saisie, nous utilisons l'attribut obligatoire, nous ne pouvons donc pas le laisser là. Pour l'instant, je vais supprimer cet attribut obligatoire et définir cet âge du fichier, puis je vais augmenter le pixel de bordure cinq pixels et redéfinir ce fichier. Maintenant, vous pouvez voir que chaque fois que je clique sur ce champ de saisie et que j'essaie d'ajouter un e-mail, comme vous pouvez le voir, c'est une couleur de bordure rouge. Mais si j'utilise le signe add the res sign et que je tape un e-mail approprié, quelque chose comme gmail.com Vous pouvez maintenant le voir supprimer la bordure rouge car il s'agit désormais d'un e-mail valide. Il s'agit d'un format d'e-mail valide. Si nous ne transmettons pas les données valides dans notre champ de saisie, dans ce cas, les propriétés non valides seront renvoyées. Si je supprime le .com, vous pouvez voir le résultat. Encore une fois, il ajoute une bordure rouge à ce champ de saisie. J'espère que vous comprenez maintenant comment cela fonctionne. Maintenant, je vais utiliser une classe valide. Je vais commencer cette section et ici je vais taper le type d' entrée valide. Ici, nous utilisons une classe pasito valide, et je vais taper la couleur verte Je vais configurer ce fichier. Après avoir défini ce fichier, les classes valides jouent le rôle inverse de celles des classes invalides. Si nous transmettons un e-mail valide, quelque chose comme ajoutez-en un, ajoutez le gmail.com rouge Comme vous pouvez le voir, la couleur de la bordure est toujours appliquée en vert. Chaque fois que vous utilisez le .com et que vous remplissez la condition, vous pouvez maintenant le voir appliquer une couleur de bordure rouge J'espère donc que c'est maintenant clair pour vous. La plupart du temps, nous utilisons du verre posto non valide. Encore une fois, je vais commenter ces deux sections, et maintenant parlons de notre prochain sélecteur Positro Notre prochain PosidoGlass est celui par défaut. Cela fonctionne si la valeur existe déjà et nous pouvons utiliser le verre par défaut avec trois éléments. Nous pouvons l'utiliser avec une case à cocher, sinon, type d'entrée radio et le troisième est le type d'option, que nous utilisons dans le réservoir de sélection Passons au code du studio isalt et voyons comment nous pouvons l' utiliser dans la pratique Comme vous pouvez le voir sur notre formulaire, nos cases à cocher ne sont pas Mais chaque fois que je charge mon bal de fin d'année, sinon il est ouvert pour la première fois, je veux cocher l'une des options. Ensuite, nous pouvons utiliser la classe par défaut. Je reviens au champ de saisie des loisirs et, par défaut, je souhaite vérifier les voyages. Ici, je vais vérifier la saisie. Et je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, lorsque je recharge mon navigateur, par défaut, il coche l'option de voyage Maintenant, dans cette section de style, je vais utiliser la classe par défaut. Ici, je vais taper input, colon, default. Ensuite, à l'intérieur de la résine Cali, je vais utiliser une propriété nommée box shadow box shadow. Box Shadow, zéro, zéro, zéro, et je veux trois pixels. Avec ça, je veux une ombre de boîte de couleur rouge. Après avoir configuré ce fichier, vous pouvez voir le résultat. Il cible la valeur par défaut, qui est déjà sélectionnée, et vous pouvez également utiliser l' option par défaut avec des boutons radio. Je vais maintenant le faire Sen dans notre boîte de sélection de la section Botext Comme vous pouvez le constater dans notre pays, nous devons, nous devons effacer le nom de quatre pays, les États-Unis, l'Inde, le Royaume-Uni et l'allemand. Dans notre balise de sélection, par défaut, attribuez une valeur à une seule Après l'Inde, je vais taper select it, et je vais définir ce fichier. Donc, pour configurer ce fichier, chaque fois que je clique sur cette section Dp down, comme vous pouvez le voir, cela ne fonctionne pas. Non, cela fonctionne, mais nous ne pouvons pas appliquer ombre sur les balises que nous sélectionnons. Laisse-moi te montrer. Ici, je vais ajouter de la couleur verte. Définissez ensuite ce fichier. Après avoir défini ce fichier, si j'ouvre cette option dp down, elle ne fonctionne toujours pas. Utilisons-le avec le tag neuf en particulier. Je vais être dans cette section et commenter précédente ici, je vais taper option. Si je place ce fichier et ouvre ce point brun, vous pouvez maintenant voir le résultat. Maintenant, vous pouvez voir que la couleur de police par défaut a changé , c'est-à-dire l'Inde. Parlons maintenant de notre cours de posito américain. Notre classe us posito est root. Nous avons déjà utilisé la classe root posito dans notre précédent tutoriel Lorsque vous dites est variable, nous utilisons cette classe. Nous utilisons cette classe pour déclarer une variable, donc je ne vais pas l'expliquer donc je ne vais pas l'expliquer. Si vous voulez en savoir plus, allez dans la section Variable et regardez cette vidéo. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. le prochain tutoriel, nous allons lancer le sélecteur de pseudo-éléments. Restez à l'affût. 86. Pseudo élément CSS: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS avancé. Et dans ce tutoriel, nous allons apprendre l'élément CSS poseto Dans notre précédent tutoriel, nous avons appris les lunettes Poseido en CSS Dans notre précédent tutoriel, nous savions déjà que nous devions indiquer type de catégorie de sélecteur CSS Sélecteur simple, sélecteur combinateur, sélecteur d' attributs, lunettes Bseudoglasses et sélecteur d'éléments Posto. J'ai déjà abordé tout cela dans notre précédent tutoriel, à l' exception de l'élément posteto Aujourd'hui, dans ce tutoriel, je vais aborder l'élément posito Voyons quel type d'éléments positifs nous avons. Comme vous pouvez le constater, nous avons un total de six types d' éléments posito avant, la première lettre, la première ligne, la sélection et le dossier de placement Et dans ce didacticiel, je vais aborder uniquement les quatre sélecteurs, la première lettre, la première ligne, la sélection et l'espace réservé Et nous allons en apprendre davantage sur le sujet lors du prochain tutoriel. Alors, sans perdre votre temps, passons à l'aspect pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension if server, et je crée déjà un document d'estimation nommé index point HTML. Et notre document d'estimation commence par un paragraphe puis Adaist puis à nouveau par un paragraphe Je vais donc appliquer la première lettre et la première ligne de ces paragraphes. Commençons donc. Je veux donc sélectionner le nom de l'élément de type somme des paragraphes P. Ensuite, je vais utiliser deux points sinus, mais nous devons utiliser deux points sinus . Pour les éléments positifs, nous devons utiliser deux t. Ensuite, je veux sélectionner la première lettre, le type d' invocation , la première lettre À l'intérieur des étalonnages, je vais utiliser une propriété en couleur Couleur y. Je vais également augmenter la taille de la police. Taille de police. Ici, je vais le dire en 32 pixels. En haut de ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir sur notre page web, il applique le CSS, première lettre de ce Panagramme Cela a changé la couleur de police de cette lettre. Au fur et à mesure que cela augmente la taille des lettres. De même, si vous souhaitez sélectionner la première lettre de l' élément AI pour cela, il vous suffit de remplacer P par AI et ce fichier. En haut de ce fichier, vous pouvez voir le résultat. Il s'agit de l'utilisation de l'élément de la première lettre. Parlons maintenant de notre deuxième élément, qui est la première ligne. Pour cela, je vais dater cette section et commenter la section précédente. Et là, je vais lier, je vais sélectionner le paragraphe P, et je vais également lier la première ligne. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez le voir appliquer ce style, la première ligne de ce paragraphe. Parlons maintenant notre prochain sélecteur d'éléments, qui est la sélection Ceci est introduit dans CSS 3. Voyons comment nous pouvons l'utiliser. Je vais d'abord commenter cette section, puis j'ai remarqué celle-ci. Si vous remarquez, vous pouvez voir que chaque fois que je sélectionne mon paragraphe, vous pouvez voir la couleur de notre texte devenir blanche et la couleur d'arrière-plan devenir bleue. C'est ce qu'on appelle la sélection. Si vous souhaitez modifier la couleur d' arrière-plan, sinon, n'importe quelle propriété après la sélection, vous pouvez utiliser ce sélecteur d' éléments Laissez-moi vous montrer comment faire. Donc, je vais d'abord sélectionner l'élément P. Ensuite, appelez deux points, je dois taper la sélection. Sélection et à l'intérieur des presses rondes, notre première propriété est l'arrière-plan. arrière-plan et la couleur d'arrière-plan sont le rouge, et notre deuxième propriété est la couleur. De la couleur, pourquoi ? Si je définis ce fichier, si je bouleverse ce fichier, si je définis cet élément de paragraphe, comme vous pouvez le voir, notre couleur de fond devient rouge et la couleur du texte devient blanche. Il s'agit d'un élément de sélection destiné aux utilisateurs. Mais si je sélectionne le tag LI, cela ne fonctionne pas. Je décide d'appliquer le CSS de sélection à l'ensemble de cette page Web. Pour cela, il vous suffit de supprimer le nom du tag P, utiliser la sélection du liquide de refroidissement par deux points. Ala ce dossier. Si vous sélectionnez les balises de paragraphe et LI, vous pouvez voir le résultat. Comme vous pouvez le voir, il applique une couleur de fond rouge et une couleur de texte blanche. Il s'agit de notre travail sur les éléments de sélection. Parlons maintenant de notre élément positif américain, qui est la soudure Pour cela, je vais dupliquer cette section. Et commentez la section précédente. Je vais configurer ce fichier. En gros, les espaces réservés fonctionnent avec une forme stable C'est pourquoi j'ai ouvert mon précédent commentaire stable, qui provient de la table à points, et vous connaissez déjà ce tableau depuis. Comme vous pouvez le voir dans ce formulaire, nous n'avons aucun espace réservé dans ce formulaire, je vais donc ajouter un espace réservé ici Dans notre section de saisie du prénom, je vais utiliser ici un espace réservé, espace réservé, et je vais taper Entrez votre nom De même, je vais ajouter l'espace réservé dans notre section sur les noms Je vais donc copier l' espace réservé, le taper ici et le placer ici . Hemo tape entrez votre nom de Je vais également ajouter un espace réservé dans notre section. Je vais taper placeholder et ici je vais passer 15 et je vais définir ce fichier Après avoir défini ce fichier, vous pouvez voir l'espace réservé dans notre balise de saisie Et chaque fois que j' essaie de remplir une entrée, cela supprime notre espace réservé Il s'agit de l'utilisation de l'espace réservé. Maintenant, je veux styliser cet espace réservé. Pour cela, nous devons taper l' espace réservé à deux points, puis dans les calibrages, je vais appliquer le CSS Couleur et je veux la couleur rouge. Après avoir configuré ce fichier, vous pouvez voir le résultat. Il applique une couleur rouge à tout le texte de l'espace réservé. J'espère que maintenant c'est clair pour vous, quoi sert un espace réservé ? Dans le prochain tutoriel, je vais passer en haut et avant le sélecteur d' éléments Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 87. Pseudo éléments CSS avant et après: Si. Salut, les gars, c'est bon de vous revoir. Il s'agit du deuxième didacticiel relatif au sélecteur d'éléments CSS, et dans ce didacticiel, et dans ce didacticiel, je vais aborder l'évolution du CSS avant les sélecteurs Posidosélecteurs Dans notre précédent tutoriel, nous avons déjà découvert la première lettre, première ligne, la sélection et l'espace réservé Dans ce tutoriel, je vais couvrir et avant. Mais avant, nous devons savoir comment fonctionnent réellement Upper and Before Posidoelector Dans ce document, comme vous pouvez le voir, nous avons un paragraphe. Maintenant, je vais styliser ce paragraphe en utilisant Upturn Before Tout d'abord, je vais sélectionner le paragraphe du nom de l'élément. Puis colon colon. Je vais taper avant. C'est avant le sélecteur d'éléments. Ensuite, dans le Cali contre notre première propriété, il y a l'arrière-plan. Lecture de fond. Avec cela , je vais également changer la couleur de la police. Couleur et la couleur est blanche. Je vais utiliser le HexaValuhTag FFA. Si je configure ce fichier, rien ne se passera. Maintenant, le quotient est la façon dont cela fonctionne réellement. Ici, vous pouvez voir un paragraphe. La plupart des développeurs pensent que Ara signifie après la balise de paragraphe et avant signifie avant la balise de paragraphe. Non, ce n'est pas le cas. Avant, je veux dire le premier enfant de ce paragraphe. Jusqu'à ce qui précède, alors notre paragraphe commence. Before est le premier enfant de ce paragraphe. De même, atar est le dernier style de ce paragraphe. Lorsque le contenu du paragraphe est terminé, vient l'apta tang Les deux éléments se trouvent à l'intérieur de la balise de paragraphe, et non à l'extérieur de la balise de paragraphe. Voyons comment nous pouvons réellement l'utiliser. Mais avant d'entrer dans le vif du sujet, vous devez savoir comment utiliser upar et avant, nous devons utiliser le contenu d'un nom de propriété csus Sans contenu, nous ne pouvons pas utiliser Upturn avant Clectron. À l'intérieur de ce sélecteur, je vais utiliser une autre propriété csus qui est content Contenu. Ici, vous pouvez transmettre n'importe quel texte, n'importe quelle image, n'importe quelle URL, ce que vous voulez. Ici, je veux taper un texte. Je vais utiliser des codes doubles et je vais taper bonjour. Maintenant, si je définis ce fichier, vous pouvez voir le résultat. Avant le début de notre paragraphe, il ajoute ce mot bonjour de la même manière, je vais créer un sélecteur supérieur Je vais dupliquer cette section et je vais taper upper. Dans le cours Doble, je vais taper world. Si je configure ce fichier, vous pouvez voir le résultat. À la fin de ce paragraphe, c'est un monde. Réduisons la taille de police. Ici, je veux taper une taille de police 30 pixels, et je vais définir ce fichier. Vous pouvez maintenant voir le résultat. Maintenant, ce sont tous des éléments enfants de la balise de paragraphe. En gros, nous créons deux éléments en utilisant le sélecteur avant et après Et si vous voulez l'utiliser comme élément D, oui, vous le pouvez. Vous pouvez définir une largeur d élevée pour cet élément, etc. Je vais taper ce jeu, ce bloc d'affichage, et je vais utiliser la même propriété dans notre section supérieure. Cette pièce blabla. Après avoir défini ce fichier, vous pouvez voir le résultat. Maintenant c'est chez un Demin. De plus, si vous souhaitez ajouter de la hauteur et de la largeur, oui, vous le pouvez. Je vais taper hauteur, hauteur, 100 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, permettez-moi de vous montrer un autre exemple. Pour cela, je vais commenter cette section et je vais également supprimer cette propriété. Sur ce, je souhaite utiliser l'effet Over. B, C et plus. Si je définis ce fichier, comme vous pouvez le voir, il s'agit que d'un paragraphe. Mais lorsque j'ouvre le curseur sur ce paragraphe, vous pouvez voir le résultat. Comme vous pouvez le voir, le monde des éléments supérieurs apparaît maintenant et chaque fois que je retire mon curseur, il disparaît. C'est un bon exemple de Upper Poco Select. N'oubliez pas que vous pouvez utiliser les procédures après et avant sélectionnées avec n'importe quelle balise. Vous pouvez l'utiliser avec un paragraphe, balise d' ancrage , un élément profond , etc. Mais il y a une exception. Vous ne pouvez pas l'utiliser avec une balise image. Tu dois t'en souvenir. J' espère que c'est clair pour toi maintenant. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 88. Amélioration de la fonction CSS Attr(): Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec une nouvelle fonction CSS liée au tutoriel, et dans ce tutoriel, nous allons apprendre la fonction Otter La fonction ATTR est l'abréviation de fonction d'attribut. Voyons maintenant comment utiliser cette fonction dans la pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension if server, et j'ai déjà créé un document TML nommé IndexoteTml Donc, comme vous pouvez le voir dans notre balise body ab, balise de paragraphe, P, et tapez ici hello word. Et dans notre section style, comme vous pouvez le voir, notre famille de polices, notre famille de polices body est aérienne. J'ai également défini un peu de rembourrage. Dans notre balise de paragraphe, je définis ici la taille de police de 35 pixels et je définis une marge Et maintenant je veux utiliser la fonction d'attribut. Dans un premier temps, je vais prendre un attribut dans la balise de paragraphe. Je vais utiliser class attribute, class next, et je vais attribuer un nom de classe qui est taste. Maintenant, nous allons vous montrer comment nous pouvons l'utiliser. Je vais d'abord sélectionner le paragraphe. Ensuite, je vais utiliser une classe Posido, qui est appelée d'après Ensuite, dans cette classe posito, comme vous le savez, lorsque nous utilisons la classe after posito plus ou avant la classe posito, nous utilisons Je vais donc taper du contenu. Le contenu est nécessaire si nous utilisons la position supérieure sinon avant l'élément posito Ici, je vais appeler la fonction d'attribut ATR et je veux utiliser quel attribut je veux utiliser comme attribut de classe. Classe. Si je place ce fichier, comme vous pouvez le voir, dans Upper Hello World, il imprime le goût. Changeons la couleur de police pour mieux comprendre la couleur, et je vais imprimer en vert. Vous pouvez maintenant le voir imprimer Hover à partir du paragraphe , puis imprimer le nom de classe que j'ai attribué à ce paragraphe À l'aide de la fonction d'attribut, nous pouvons imprimer l'attribut de balise particulier dans le paragraphe. Dans la plupart des cas, nous utilisons cette fonction avec du contenu. Sinon, nous pouvons l' utiliser avec JavaScript. Si j'utilise un autre attribut, supposons que je vais attribuer un ID DM cette fois, je souhaite imprimer le nom de l'ID. Si je transmets la fonction d'attribut, ID, et que je passe ce fichier, vous pouvez maintenant le voir imprimer hello word, le nom d'identifiant Demo. En utilisant la fonction d'attribut, nous pouvons extraire le val de n'importe quel attribut. Je vais maintenant vous montrer un autre exemple. Quand j'entends mes cartes se trouvent dans ce paragraphe, je veux montrer le nom de l'attribut. Pour cela, nous devons utiliser le sélecteur de position Ober. Laisse-moi te montrer P, colon hover. Je vais configurer ce fichier. Après avoir défini ce fichier, si je survole mon CarSR dans ce paragraphe, vous pouvez voir le résultat C'est tout pour ce tutoriel. Merci d'avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 89. Tutoriel d'incrément de compteur CSS et de réinitialisation du compteur: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS, et dans ce didacticiel, vous allez découvrir une nouvelle propriété appelée compteur CSS, et nous allons apprendre à utiliser un compteur lié aux propriétés. C'est l'incrément du compteur et le compteur, c'est tout. Mais avant, voyons ce qu'est un compteur. C'est l'exemple du compteur. Les compteurs CSS sont des variables gérées par CSS dont la valeur peut être incrémentée par une règle CSS Il est utilisé pour suivre le nombre de fois qu'ils sont utilisés. Ainsi, comme vous pouvez le voir dans cet exemple, nous avons une balise body et à l'intérieur de cette balise body, nous avons une balise heading, puis dans cette rubrique une section, nous avons une balise heading deux. Ensuite, il y a les ressources humaines, qui vont diviser cette section. Mais si vous le remarquez dans notre navigateur, le résultat est différent. Avant le texte, comme vous pouvez le voir, le terme et le CSS, il imprime la première section. De même, pour le tag H one suivant, il imprime la section deux, et pour le troisième tag H one, il imprime la section trois. Vous pouvez également voir que nous avons une sous-section dans cette première section. Ici aussi, nous numérotons cette sous-section. C'est ce que nous pouvons faire en utilisant un compteur. Il n'est pas nécessaire de mentionner cette section manuellement. Si je duplique cette partie, si je duplique cette partie et que je modifie le texte, supposons que je le transforme en HTML et en JavaScript. Ensuite, dans cette section, vous pouvez voir le résultat. Maintenant, il crée une nouvelle section appelée Section quatre, et si je duplique l'une des sous-sections et que je définis ce fichier, vous pouvez voir le résultat. Dans notre section deux, nous avons maintenant un total de quatre sous-sections, mais avant la balise H two, nous ne créons rien. Nous ne le saisissons pas manuellement. Ainsi, en utilisant le compteur, nous pouvons suivre le temps que nous utilisons. Et comme je vous l'ai dit, les compteurs sont comme des variables. Comme je vous l'ai dit, nous devons exécuter deux compteurs liés aux propriétés, incrémentation du compteur et la réinitialisation du compteur, et nous avons également un compteur lié à la fonction, à savoir le compteur Ces deux propriétés et fonction étaient corrélées entre elles Essayons maintenant de comprendre le fonctionnement de cette propriété et de cette fonction. Notre première propriété est Counter Resit. Ici, dans un premier temps, nous devons d'abord transmettre un nom de compteur. Ensuite, nous devons mentionner dans quelle distance je veux lancer le compteur. Ici, vous pouvez prendre n'importe quel nom de compteur. Vous devez juste vous rappeler que vous ne pouvez pas fournir d'espace dans ce nom. En gros, nous créons ici une variable et une valeur. Notre variable est le nom du compteur et la valeur que nous transmettons ici et notre valeur est un. Nous devons maintenant imprimer ce compteur. Pour cela, nous devons utiliser cette fonction de compteur, et pour exécuter cette fonction de compteur, vous devez utiliser le contenu des propriétés CSS. Ensuite, vous devez mentionner le contre-nom exact à l' aide de la fonction Counter. compteur à l'intérieur de l'adresse ronde est, comme vous pouvez le voir ici, nous créons un compteur nommé mon compteur. Je vais transmettre le nom de la variable. Ensuite, si vous appelez cette valeur, nous devons l'incrémenter En gros, je veux dire que nous augmentons le compteur. Pour cela, encore une fois, vous devez utiliser cette propriété, l'incrémentation du compteur Dans cette propriété, vous devez d'abord mentionner le compteur que vous souhaitez incrémenter Dans notre cas, mon compteur, puis vous devez passer la valeur d'incrément cinq Dans notre cas, je veux augmenter le compteur de cinq. Il va d'abord en imprimer un, puis il va en imprimer six parce qu'il incrémente le compteur de cinq Ensuite, il va imprimer six plus cinq. Il va en imprimer 11. Dans un premier temps, nous devons créer la réinitialisation du compteur. Ici, nous devons mentionner le nom et la valeur du compteur. Ensuite, nous devons imprimer le compteur en utilisant la fonction compteur. Pour cela, nous devons utiliser la propriété du contenu, compteur de contenu et, dans la pause ronde, nous devons passer le compteur que je veux incrémenter À l'étape suivante, nous devons incrémenter compteur en utilisant la propriété d' incrément du compteur Alors ça ne réinitialisera pas le compteur. Il va imprimer à nouveau le compteur. Après l'incrémentation, le compteur ne réinitialisera pas le compteur Ensuite, il va imprimer le compteur. Après avoir imprimé à nouveau le compteur, il va incrémenter le compteur et il continuera encore et Parlons maintenant de l' utilisation pratique de cette propriété. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server et je crée déjà un document d'estimation nommé index point HTML. Dans notre étiquette d'estimation, nous avons une étiquette d'en-tête. Ensuite, nous avons quelques balises de paragraphe et deux balises d'en-tête. Nous avons d'abord le titre deux, puis le paragraphe. Nous avons d'abord le titre deux, puis le paragraphe. C'est ainsi que je répète ce titre deux et paragraphe par paragraphe. Et maintenant je veux commencer un compteur avant toutes les rubriques. Pour cela, nous allons utiliser incrémentation du compteur CSS et la valeur de réinitialisation du compteur Voyons comment cela fonctionne. Donc, au début, je vais entrer dans le body tag, le comptoir, et là je vais appeler counter resit property Repose-comptoir. Tout d'abord, je vais fournir un nom de compteur Notre contre-nom est M et notre nom de compteur est M Counter Après avoir fourni le nom, je vais transmettre une valeur et je vais passer zéro. Cela signifie qu'il va démarrer le compteur après une valeur nulle. Il va donc commencer ce compteur par un, et maintenant je vais sélectionner le titre à étiqueter, H deux, titre deux, et je vais utiliser les classes sudo B quatre Donc, avant tout le H à étiqueter dans les presses rondes, je vais utiliser le contenu. abord, nous devons fournir NameFirst, nous devons fournir un nom pour ce contenu, et je vais passer le chapitre sur le nom Ensuite, je vais exécuter une fonction nommée counter. Donc type de cheveux. Au comptoir, puis à l'intérieur des cuivres rondes, puis à l'intérieur des presses rondes, nous devons passer le nom du compteur et le nom du compteur est mon compteur Ensuite, je vais utiliser le double cours et à l'intérieur du double cours, je vais utiliser la colonne sinus et utiliser ce signe de colonne, j'utilise le point-virgule pour terminer la ligne Si je place ce fichier, en haut de ce fichier, maintenant vous pouvez voir qu'avant chaque balise H two, il ajoute le chapitre zéro. Maintenant, la question est de savoir pourquoi il imprime zéro ? Car ici on n' incrémente pas notre compteur. Nous devons incrémenter notre compteur, et pour augmenter la valeur, nous devons utiliser la probabilité d' incrément du compteur Appelons donc la propriété counter increment. À l'intérieur des deux, je vais utiliser l'incrémentation du compteur. Ensuite, je veux augmenter mon compteur. Et je veux augmenter d'une unité. Et je vais configurer ce fichier. Avant de configurer ce fichier, vous pouvez voir le résultat. Maintenant, il imprime le chapitre un, chapitre deux, le chapitre trois, le chapitre quatre. À chaque fois, il augmente notre compteur r d'un. Maintenant, si je change la valeur deux, maintenant, à chaque fois, cela va incrémenter notre compteur r de deux Avant de configurer ce fichier, vous pouvez voir le résultat. D'abord, il imprime le chapitre deux, puis il imprime le chapitre quatre, puis il imprime le chapitre six, puis il imprime le chapitre huit. Changeons la couleur du chapitre pour mieux comprendre. Je vais donc utiliser la propriété de couleur, et je vais dire la couleur verte. Désolé, vert, pas gris. est à vous de configurer ce fichier. Maintenant , c'est beaucoup plus visible. Maintenant, changeons le testament de réinitialisation du compteur. Si je passe à cinq puis que je définis ce fichier, cette fois, vous pouvez voir notre chapitre commencer par sept car par défaut, la valeur de notre compteur commence par cinq, cette fois, vous pouvez voir notre chapitre commencer par sept car par défaut, la valeur de notre compteur commence par cinq, puis il en ajoutera deux à ce compteur. C'est pourquoi il imprime le chapitre sept, chaque fois qu'il va en ajouter deux à notre valeur précédente. C'est pourquoi il imprime le chapitre 9 chapitre 11 et le chapitre 13. Si je passe un compteur et qu'ils définissent ce fichier, vous pouvez maintenant le voir imprimer les numéros de série, mais cela commence par le chapitre six N'oubliez pas que dans notre propriété de comptoir, nous devons d'abord fournir un nom de comptoir, puis nous devons indiquer d' où nous voulons commencer notre comptoir. Et si je ne fournis aucune valeur à la propriété de réinitialisation du compteur, je vais supprimer cette valeur et définir ce fichier, puis vous pourrez le voir fonctionner en série. Par défaut, la valeur de réinitialisation du compteur est égale à zéro. C'est pourquoi il imprime à partir de 1234. Vous décidez maintenant de ne pas imprimer le numéro dans le compteur. Vous souhaitez imprimer Alpha etics. Pour cela, il suffit de mentionner Upper My Counter coma, vous devez mentionner Upper Alpha Alpha. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il imprime le chapitre A, le chapitre B, le chapitre C, le chapitre D. De la même manière, vous pouvez l'imprimer en minuscules, pour changer de majuscule en minuscule. Alpha inférieur. Jusqu'à étouffer, vous pouvez voir le résultat Cette fois, vous pouvez le voir imprimer des lettres minuscules, chapitre A, chapitre B, chapitre C, chapitre D. Et si vous voulez imprimer Roman Vu, possible, vous devez passer par le bas romain. Vous pouvez voir maintenant que nous imprimons des chiffres romains, et la dernière valeur est le latin supérieur. Donc, si je passe en haut et donc ce fichier, vous pouvez voir qu'il imprime des chiffres romains dans la litière supérieure. De plus, vous pouvez créer un sous-compteur à l'intérieur du compteur Permettez-moi de vous montrer l'exemple. Pour l'exemple suivant, encore une fois, je crée un nouveau document HTML nommé index two style. Comme vous pouvez le voir, nous avons une étiquette d'en-tête, puis en dessous de cette rubrique, une étiquette, nous avons une étiquette de titre par étiquette. Après chaque étiquette H one, nous avons H à étiqueter. Nous avons trois H à étiqueter. Ce sont tous des sous-titres. Et maintenant, je veux utiliser un compteur différent pour le titre et un compteur différent pour le sous-titre Donc, d'abord, je vais créer un tag Counter Four H one. Donc, d'abord, je vais appeler Counter Reset Property. Section de réinitialisation du compteur, section de réinitialisation du compteur. Je vais l'appeler section. Et puis je vais en créer un avant. Donc, ici, je veux taper H un, point-virgule, deux-points, deux-points, posit selector avant, puis à l'intérieur CierSSF pour appeler la Contin. Ensuite, en double code, je veux imprimer la section. Espace de section. Ensuite, je vais peindre le comptoir. Et j'ai dit qu'en fin nous devons fournir le nom du compteur, et notre nom de compteur est section. Ensuite, après avoir imprimé cette section, je veux imprimer, puis je veux imprimer un signe deux-points. C'est ça. Ensuite, nous devons augmenter le compteur Nous devons donc appeler counter increment property. compteur incrémente le compteur, et je vais passer à la section Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Tout d'abord, il imprime la première section, puis il imprime la section deux, puis il imprime la section trois dans notre balise d' en-tête. Maintenant, nous devons créer quatre sous-en-têtes, et cela fonctionnera si nous n'avons qu'une seule balise H. Donc, pour créer ce sous-cunar, nous allons passer à la balise H one Ensuite, dans la section de texte H one, nous allons créer le repose-comptoir. Le compte est réinitialisé, et je vais passer un nom, et je vais le nommer sous-section. Et je vais l' incrémenter avec un, donc je ne vais transmettre aucune valeur Ensuite, nous devons créer avant quatre H deux, H deux, deux points, deux points, avant de passer au sélecteur, avant Ensuite, dans le clirass, je veux copier cette section et je vais la coller ici Tout d'abord, je vais remplacer la section par une sous-section, copier la valeur et nommer la section de contenu par une sous-section. Ensuite, dans notre fonction de compteur, nous devons modifier la valeur. Sous-section de la section 2. Nous devons également apporter des modifications à notre section de comptoir. Après avoir défini ce fichier, vous pouvez voir le résultat. Dans chaque section, nous avons une sous-section, et nous attribuons également un compteur à chaque sous-section avec succès. C'est donc notre contre-mot. J'espère que ce processus vous plaira. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 90. Couleur du caret CSS: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons découvrir une nouvelle propriété, qui est la bonne couleur. Voyons donc comment utiliser cette propriété pratique et quels sont les avantages de l'utilisation de cette propriété. Comme vous pouvez le voir côte à côte, j'ai ouvert mon éditeur de code so studio et mon navigateur en utilisant l'extension if server, et j'ai déjà créé un document TML nommé index point HTML Dans notre body tag, nous avons donc un pro. Vous pouvez également voir le t dans mon navigateur. Nous avons un champ de saisie, un prénom, nom de famille, un âge, un e-mail et des loisirs. Maintenant, la question est : qu'est-ce qu'un chariot ? Si je clique sur un champ de saisie, comme vous pouvez le voir, si je le zoome un peu, comme vous pouvez le voir, un cheveu de Karsalblink C'est ce qu'on appelle un caret. Si vous souhaitez modifier la couleur clignotante de Karzal, il vous suffit d'utiliser une propriété appelée couleur du carret Je vais vous montrer comment vous pouvez l'utiliser. Comme vous pouvez le voir, je sélectionne déjà la balise de saisie et la zone de texte. Dans cette sélection, je vais utiliser la couleur du caret. Arrete color et je vais le dire rouge. Si je définis ce fichier et que je pense à l'un des champs de saisie, vous pouvez maintenant voir qu'il a changé ma voiture ou sa couleur. Maintenant, vous pouvez voir que la couleur du carat a changé. Maintenant, il devient rouge et la couleur du panier est appliquée dans tous les champs de saisie Également dans notre zone de texte. Vous pouvez utiliser n'importe quel format de couleur, hexa, RGBA, etc. Si vous passez au mode automatique, laissez-moi vous montrer qu'il appliquera la couleur par défaut, c' est-à-dire que si je clique sur un champ de saisie, vous pouvez maintenant le voir renvoyer la couleur noire. De plus, si vous ne voulez pas montrer le carat pour cela, vous pouvez utiliser une couleur transparente. Laisse-moi te montrer. Je souhaite remplacer Auto par transparent. Si je définis ce fichier et que je clique sur un champ de saisie, vous ne pouvez plus voir mon panier car il est devenu transparent. Mais vous pouvez tout de même écrire n'importe quoi dans ce champ de saisie. Ajoutez-en un. Mais on ne voit pas le carat. J'espère que vous savez maintenant ce qu'est la couleur du carat. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 91. Règle de @import: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons apprendre une nouvelle chose en CSS, les règles d'importation CSS. Alors pourquoi utilisons-nous la méthode des règles de saisie ? Supposons que vous ayez un fichier CSS Tutor Two. Vous souhaitez maintenant utiliser un fichier CSS dans un autre fichier CSS. Pour cela, nous utilisons la règle de saisie. Nous n'avons pas besoin de créer un lien vers le fichier dans notre TIMLPage. Nous avons juste besoin de lier le fichier CSS principal à notre page d'estimation et un autre qui jouera le rôle de soutien, que vous allez lier au fichier CSS Min point, et pour importer le fichier CSS dans un autre fichier CSS, nous devons utiliser cette règle à l'entrée rouge. Ensuite, dans le double cours, nous devons transmettre le nom du fichier, sinon le chemin du fichier. Il existe également une autre méthode permettant de définir l'entrée. C'est une autre méthode où vous pouvez utiliser l'URL. Si vous souhaitez fournir un chemin absolu, dans ce cas, vous pouvez fournir un chemin comme celui-ci en utilisant une URL. Dans notre première méthode, vous pouvez transmettre le chemin relatif, mais dans notre deuxième méthode, vous pouvez transmettre le chemin relatif, également le chemin absolu. Avec cela, il est livré avec une autre option où nous pouvons définir les médias. Comme vous pouvez le voir dans cet exemple, Hero utilise un média appelé print. Ainsi, chaque fois que quelqu'un essaie d'imprimer la page, dans ce cas, il applique ce CSS, ce style d'impression ou ce CSS. J'espère que vous connaissez déjà ce média. Toutes les fonctions d'impression, d'écran et de reconnaissance vocale. Tous les types de médias couvrent trois types de médias à la fois. Le second est l'impression. Il est utilisé uniquement à des fins d'impression, et le troisième est l'écran. Il est utilisé sur notre écran mobile, notre écran tactile, onglet, notre ordinateur portable, notre ordinateur, etc. Le dernier est la parole Voyons maintenant comment utiliser cette règle multimédia dans la pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server, et j'ai déjà créé un document HTML nommé index point HTML. Et comme vous pouvez le constater, nous créons une mise en page Web de base. Ici, vous pouvez voir, nous avons une section d'en-tête, section de menu, section de contenu, une section de barre latérale, et en bas, nous avons FootarSection, et nous ne mettons aucune couleur dans cette Et donc, si vous remarquez, à l'intérieur du headtag, nous avons un tag link. Et dans cette balise de lien, voici le lien vers le fichier css principal du point. Il s'agit de notre fichier CSS Min point. Et dans ce fichier CSS, nous écrivons du CSS visuellement pour la structure, pas pour la couleur. C'est pourquoi vous ne voyez aucune couleur sur cette page. Et si vous remarquez, vous pouvez voir nous avons également un autre fichier nommé color point CSS. Ce fichier est créé séparément pour les couleurs, la couleur d' arrière-plan, la couleur la section d' en-tête, la couleur de la section de menu, la section de contenu, la couleur, la couleur du buffet, etc. Et maintenant, je vais entrer ce fichier CSS à points de couleur particulier dans le fichier CSS à points principal. peux utiliser directement le fichier CSS à points colorés avec notre code HTML en utilisant la balise Link, mais je ne vais pas l'utiliser. Je vais importer le fichier CSS à points colorés dans le fichier CSS à points principal. Je vais donc saisir ce fichier. Juste une chose dont vous devez vous souvenir, que vous devez importer le fichier en haut de la page. Donc ici, je vais taper sur l'entrée rouge. Ensuite, à l'intérieur des codes doubles, je vais passer le chemin du fichier, qui est du CSS à points colorés. Et point-virgule sur cette ligne. Et je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, il met maintenant toutes les couleurs dans ma mise en page. Il ressemble à la section d'en-tête, à la section de menu, à la section de barre latérale et à la section de pied de page Également, l'arrière-plan de cette page Web. Et maintenant, je veux importer le fichier CSS à points PrintStyle. Si quelqu'un a essayé d' épingler cette page Web, je ne veux pas imprimer la section de la barre latérale De plus, je ne veux pas imprimer cette barre de manuel. Je veux juste imprimer la section de contenu exacte. Ou son style CSS créatif à cinq caractères. Ici, nous masquons essentiellement la barre latérale et la section du menu. Comme vous pouvez le constater, le menu et la barre latérale n'en affichent aucun. De plus, j'augmente le contenu avec une surface de 100%. Et maintenant, je vais saisir ce fichier en utilisant la méthode des règles de saisie. Ici, je vais taper au taux Import, et cette fois, je vais utiliser l'URL. Et dans les codes doubles, je vais passer le CSS Printylet, et je vais définir ce fichier Après avoir défini ce fichier, vous pouvez voir le résultat. Et il y a un autre problème. Après la saisie, le style d'impression CSS, il supprime notre manœuvre et notre côté était une section Pour résoudre le problème, nous devons définir le média. Nous devons définir l'objectif des médias. Pour cela, vous devez définir le média. Alors voilà, je vais taper print. Si je définis ce fichier, vous pouvez maintenant voir la section cybernétique, ainsi que la section des menus. Mais si j'essaie d'imprimer la page, laissez-moi vous montrer l'impression. Maintenant, vous pouvez voir sur notre page d'impression que nous n'avons pas la section des menus et la section de la barre latérale J'imprime l'en-tête, le contenu et la section pied de page. C'est donc ce que nous pouvons faire en utilisant les médias imprimés. 92. Polices d'icônes Css: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce didacticiel, nous allons en apprendre davantage sur les polices d'icônes. Nous allons apprendre comment utiliser téléphones à icônes dans nos pages tamale Mais avant de commencer notre travail pratique, voyons ce que sont les polices d'icônes. Comme vous pouvez le voir, j' ouvre ici le modèle de site Web d'OpenE. Et dans cette section de la barre supérieure, comme vous pouvez le voir, nous avons l'adresse du bureau, service des ventes, les heures d' ouverture, etc. Mais ici, vous pouvez voir les icônes avant le texte. Heure d'ouverture, appelez-nous et adresse du bureau. Ici, vous pouvez voir l'icône d'appel, l' icône de la carte et l'icône de l'horloge. Il ne s'agit pas d'une image. Ce sont des polices d'icônes. Vous pouvez également voir cette icône dans cette section : icône GR, icône Subot, icône de documentation et icône du panier Nous n'utilisons pas d'images pour cela. Nous utilisons des polices d'icônes pour créer cette icône. Comme tous les autres téléphones, ce sont toutes des polices Ces icônes sont créées avec des polices de caractères. Si nous utilisons des images sans police , cela augmentera le temps de chargement de notre serveur. De plus, cela va rendre la mise en page de notre site Web très lourde. C'est pourquoi nous utilisons des polices d'icônes. L'avantage d'utiliser la police d'icônes réside dans le fait que tous les types de polices sont disponibles dans un seul fichier. Nous n'avons pas besoin de rechercher un type d'icône sur le site Web. Vous pouvez accéder à des milliers d' images à partir d'un seul fichier. Voyons maintenant comment l' insérer dans notre page Web. Pour cela, nous devons aller sur Google et rechercher des polices d'icônes. Et ici vous pouvez voir un site Web, Font Awesome. Il s'agit de l'un des sites Web les plus populaires proposant des polices d'icônes. Sans cela, de nombreux sites proposent des polices d'icônes. Même Google fournit des polices d'icônes. Mais dans ce didacticiel vidéo, j'aimerais utiliser Font Awesome. Je vais donc cliquer sur ce lien. Comme vous pouvez le voir, il s'agit d'une redirection vers ce site Web. Donc, cette version gratuite fournit également la version P, mais nous aimerions opter pour la version gratuite. Je vais donc cliquer sur ce bouton, démarrer gratuitement. Après avoir cliqué, commencez gratuitement, c'est redirigé vers cette page Maintenant, vous pouvez voir dans cette section comment utiliser ce téléphone. Nous pouvons l'utiliser dans nos projets Web, nos projets de bureau avec des API. Dans divers projets, nous pouvons utiliser ces téléphones, mais j'aimerais aborder notre projet Web Vous pouvez donc voir ici l'option de téléchargement. Cliquez simplement sur l'option de téléchargement. Après avoir cliqué sur les options de téléchargement, vous êtes redirigé vers cette page. Maintenant c'est nous. C'est Font Awesome Verse Six. Il s'agit de la dernière version. Sa sortie est prévue pour avril 2024. Pour télécharger cette police, il vous suffit de vous rendre sur la PAGE de téléchargement de fontsom.com slash À partir de là, vous pouvez voir l'option de téléchargement. Comme vous le savez, nous allons utiliser cette police pour nos projets Web. Pour cela, nous devons utiliser cette option. Nous devons télécharger cette option, gratuitement pour le Web. J'ai déjà téléchargé cette police. Si vous cliquez sur cette option, automatiquement, cette police sera téléchargée. Si vous téléchargez cette police, elle fournira le fichier Cs que vous pouvez utiliser avec les préprocesseurs En outre, il fournit des fichiers SVG. Et ne t'inquiète pas. Nous allons en apprendre davantage sur le SAS, le préprocesseur CSS et les graphismes WIG dans notre prochain tutoriel Donc, après avoir cliqué sur ce bouton de téléchargement, il sera téléchargé dans un fichier Z. Ensuite, vous devez extraire ce fichier. Après avoir extrait ce fichier. Comme vous pouvez le voir, si j'ouvre ce dossier, il fournit un fichier CSS, un fichier CS, sous forme de pile, de script, de SVG, formulaires Web, etc. Donc, dans un premier temps, je vais ouvrir le dossier CSS. Ici, il fournit tous les types de polices, marques, de SVG solide, etc. Et si vous voulez tout utiliser, vous pouvez utiliser ce fichier dans son intégralité. Essayons maintenant d'explorer la signification de tous les types de polices. Allons donc sur le site Web et cliquons sur les icônes de cette option de menu. Si je clique sur les ICO, comme vous pouvez le voir, vous pouvez voir ici que la version 6 de Font Awesome fournit un total de 30 199 Mais c'est uniquement pour la proversion. Maintenant, faisons défiler la page un peu vers le bas et passons à la section des polices. Je vais donc commencer par les formes solides. Ici, vous pouvez voir que toutes les icônes sont unies. Et si vous voulez des formes claires, cliquez sur Lumière. Vous pouvez maintenant voir que toutes les polices sont créées avec une bordure. Maintenant, ce ne sont pas des polices solides. De même, si je sélectionne la section fine et que je décoche la section claire, vous pouvez maintenant voir que la bordure des icônes plus fine que dans la version précédente Et si je vous montre le modèle normal, laissez-moi vous le montrer régulièrement. Maintenant, vous pouvez voir que toutes les icônes sont faites avec 50 50. Je tiens à dire qu'il est fabriqué avec du solide. Comme il l'a fait avec Border Line. Cela divise donc notre icône dans un style différent. Il fournit donc tous les types de CSS pour cela. Mais si vous souhaitez utiliser tous les types de polices avancées pour cela, vous pouvez utiliser celle-ci, cette option. Nous allons donc utiliser toutes les polices. Donc, pour copier ce fichier, je veux le déplacer dans notre répertoire de travail actuel. C'est mon répertoire de travail actuel, et je veux le coller ici. Sur ce, je dois en copier cinq autres, désolé, un autre dossier, qui est celui des polices Web. Je vais donc copier ce dossier de polices Web. Vous pouvez voir ici tous les types de polices. Je vais donc copier le dossier entier et le coller dans mon répertoire de travail actuel. Pour vous et moi, il est difficile d'utiliser les polices Web. Ne t'inquiète pas. Je vais également vous montrer le chemin le plus facile. Passons maintenant à l'éditeur de code du studio Wizard. Comme vous pouvez le voir, nous sommes dans mon éditeur de code et voici mon répertoire de travail actuel Ici, vous pouvez voir le fichier CSS Adt. Nous avons également un dossier nommé polices Web. Maintenant, je vais ouvrir la pile Adt Css. Et maintenant, nous devons lier toutes les polices présentes dans notre dossier de polices Web à ce fichier. Pour cela, nous devons faire défiler ma page vers le bas. Nous devons faire défiler la page CSS d'Aldo vers le bas. Et comme vous pouvez le voir, nous avons une source, et cette source redirige vers toutes les polices qui se trouvent dans le dossier webfont Nous devons donc le relier à nouveau. Pour cela, pour cela, nous devons changer le répertoire racine actuel. Nous devons rediriger son propre dossier. Je vais donc reformuler ceci en point à partir de chaque lien URL. Parce que ce dossier est mon répertoire de travail actuel. C'est pourquoi il n'est pas nécessaire d'aller deux fois plus loin pour lier le dossier. Je sais que c'est la voie la plus difficile. Ce n'est pas facile, mais je dois vous le montrer. Ensuite, je vais configurer ce fichier. C'est ça. Je vais maintenant ouvrir mon projet précédent dans lequel nous créons une mise en page Web Bessy. Vous souvenez-vous de ce projet Bessy web layout ? Oui, nous allons appliquer toutes les polices d'icônes dans ce projet. Et maintenant, nous devons lier tous les fichiers CSS à points de cette page Web. Donc, dans la balise head après la balise title, je vais taper link, link, et nous devons fournir le chemin de ce fichier, tout en CSS à points, et je vais définir ce fichier. Nos icônes sont maintenant prêtes à être utilisées. Voyons maintenant quelle icône nous allons utiliser. Nous allons utiliser l' icône d'accueil pour le menu d'accueil des liens. Passons donc au site Web. Ensuite, vous devez sélectionner l'option gratuite car nous allons utiliser la version gratuite de la police. C'est pourquoi j'aimerais opter pour l'option gratuite. Et pour la maison, je vais utiliser cette icône, house. Je vais donc cliquer sur cette icône. Après avoir cliqué sur cette icône, comme vous pouvez le voir, elle offre certaines options. Nous pouvons le télécharger sous forme de fichier SVG. En outre, il fournit un lien Sable. Si j'utilise le code, le code exact, alors l'icône sera créée. De plus, si vous codez avec React, il fournit également du code pour React. Pour VA et aussi, la fourniture est très bonne. Mais nous allons utiliser la police dans notre page t. Je vais donc copier ce lien. Et si vous remarquez, notre icône est solide. C'est pourquoi il attribue une classe F à un solide. Et voici l'icône de la maison. En outre, il attribue une maison de classe FA. Si j'utilise la version normale, vous pouvez maintenant voir que notre classe est toujours la même s'il s'agit d'une maison, mais qu'elle a également attribué une autre classe nommée Aregular. la même manière, si je clique sur la version allégée, on attribue maintenant une classe, Flight, et c'est une maison. C'est pourquoi il retourne dans une maison. Et si je sélectionne cette option, elle attribue maintenant une nouvelle classe, qui est Fa dutne qui signifie double tonalité De même, si vous cliquez sur cette option mince, vous pouvez maintenant voir qu'elle fournit un verre fin FA. Nous allons donc commencer par une classe solide, F est solide. Encore une fois, je vais copier ce code. Donc je le copie, je le tape, et je vais le coller avant la maison Nous devons donc aller dans la section menu de ma page stable. Ensuite, avant la maison, je veux passer, nous devons le coller ici. Donc, si je définis ce fichier, vous pouvez maintenant voir l'icône d'accueil attachée à l' option Menu principal. Et si vous n' aimez pas l'icône solide, il vous suffit de changer le nom de la classe. Supposons que je veuille utiliser Light Virgin. Vol léger. Et si je configure ce fichier, pour le configurer, comme vous pouvez le voir, il ne fonctionnera pas correctement car je pense que si je sélectionne la version allégée, oui, c'est une version pro. Seule la version pro peut utiliser cette option. Nous n'avons plus qu'une seule option. Nous devons opter pour du solide. Je veux donc copier à nouveau ce code, le remplacer par l'ancien et redéfinir ce fichier. Nous avons donc certaines limites. Cette version n'est pas gratuite pour tous. Dans notre version gratuite, il ne fournit que 1 392 icônes. Nous devons donc utiliser une ancienne version de cette police. Comme je vous l'ai dit plus tôt, je vais vous montrer au total deux méthodes permettant d'utiliser les téléphones Web dans nos pages Web. C'est la plus difficile, et maintenant je vais vous montrer la méthode facile, la méthode très simple. Comme vous pouvez le voir, j'ouvre ici un site Web, nommé wthschool.com Ce site Web est la meilleure ressource pour apprendre le développement de sites Web. Maintenant, cliquez sur la section CSS. Après avoir cliqué sur la section CSS, faites défiler un peu vers le bas. Ici, vous pouvez voir l'option. Nommez les icônes CSS. Cliquez sur cette option, et cela fournira au total trois exemples d'utilisation des icônes CSS. Il fournit un lien CDN fontosom. En outre, il fournit un lien CDN avec l'icône Boosterp. Avec cela, il fournit des polices Google. Comme je vous l'ai dit, nous allons utiliser fontosom pour ce tutoriel Vous pouvez donc voir ici une option, un nom, savoir plus sur la façon de démarrer avec pontosom dans notre tutoriel PontosomFive Son édition gratuite fournit un total de 588 icônes. Réglez fast uniquement pour copier cette balise de script. Je vais donc copier cette balise de script, puis je vais accéder à mon éditeur de code Visual Studio. Ensuite, insérez cette balise de tête Dans un premier temps, je vais coller cette balise de script Donc un titre, je vais coller cette balise de script, et je vais définir ce fichier. Ensuite, revenons au site Web. Ensuite, nous allons essayer quelques icônes d'accessibilité. Je clique donc sur ce lien, et comme vous pouvez le voir, il fournit des icônes d'accessibilité. Supposons que vous souhaitiez utiliser cette icône de légende. Pour cela, vous devez copier cette classe. Après avoir copié cette classe, passons au code du studio. Laisse-moi te montrer. Donc ici, je vais utiliser ITAC I. Ensuite, dans cet iTag, je vais attribuer une classe Et comme je vous l'ai dit, nous devons utiliser classe particulière pour utiliser l'icône de sous-titrage, qui est un sous-titrage rapide AA Je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, il ne fonctionne pas car ici nous avons besoin d'un code J particulier. Pour cela, revenons à nouveau au navigateur. Pour cela, vous devez vous connecter à ce site Web. Il vous fournira le code JavaScript, le code JavaScript Wontosom, quelque chose comme ça Il s'agit de votre lien CDN pontosom personnel. Copiez simplement ce code retournez dans le navigateur et remplacez ce code, remplacez l'ancien code par du code. Et puis définissez ce fichier. Après l'étape de ce fichier, vous pouvez maintenant voir le résultat. J'imprime le signe de légende, puis je vais dupliquer cette ligne plusieurs fois. Trois fois au total. Et maintenant, étape par étape, je vais augmenter la hauteur de cette police. Pour cela, nous devons utiliser le style d'attribut style. Comme je vous l'ai dit, nos icônes fonctionnent comme une police, vous pouvez donc utiliser les propriétés de police pour manipuler cette taille de police. Je vais donc utiliser la propriété de taille de police, la taille de police, et je vais attribuer 24 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, cela a augmenté notre première taille de police. De la même manière, je vais augmenter toute la taille de police. Donc, à la police suivante, je vais attribuer 36 semaines de taille de police Salt Style 36. Avec cela, je veux attribuer une nouvelle couleur de police, et il est très simple de changer la couleur de cette police. Juste pour utiliser la propriété de couleur. De la couleur, et je veux du rouge. Ensuite, il suffit de définir ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Ensuite, je vais dupliquer cette ligne à nouveau et cette fois je vais supprimer les deux lignes parce que vous n'avez pas besoin d'essayer autant d'air froid. Je vais augmenter la valeur. Cette fois, je vais utiliser 48 pixels, et ici je vais utiliser couleur verte et redéfinir ce fichier. Essayons maintenant d'autres icônes. Encore une fois, je reviens sur le site Web et je passe à la section des icônes CSS et je redirige vers le tutoriel pontosm be De là, selon la situation, vous pouvez obtenir différents formulaires. Supposons que si vous voulez des polices d'alerte, sont les polices d'alerte que vous pouvez utiliser sur votre site Web. Et si vous voulez des icônes d'animaux, il suffit de coller des icônes d'animaux, vous pouvez voir le résultat. Il fournit tous les types d'icônes en fonction de vos besoins, date et de l'heure, du design, éditeur, de l'éducation, etc. Supposons que je vais utiliser celle-ci, cette icône By. Mais cette fois, je ne vais pas utiliser ce nom de classe. Je vais utiliser l'Unicode. Juste pour n'utiliser qu' un seul nom de classe FaS. Laisse-moi te montrer. Je vais copier cet UICode et revenons à l'éditeur de code du studio Donc ici, je vais créer un bouton, et dans ce bouton, puis dans ce bouton, je vais utiliser iTag I. Et dans ce tag, d' abord, je vais trouver une classe, et dans cette classe, et dans cette classe, nous n'avons besoin d'utiliser qu' un seul nom de classe, AA est Ensuite, je vais utiliser l'Unicode en question. Nous utiliserons cet Unicode pour utiliser l'icône Bal. De plus, je vais passer un texte dans ce bouton et lui taper le bouton « Je tape ». Et je vais configurer ce fichier. Vous pouvez maintenant voir que cette balise de bouton est accompagnée d'une icône en forme de boule. Et si vous voulez augmenter la taille du bouton, la taille de la balle, sinon prendre de la taille, vous devez utiliser la propriété de taille de police. Style, je vais utiliser la taille de police. Et pour ce bouton, je vais utiliser 24 pixels, et je vais reconfigurer ce fichier. Après avoir configuré ce fichier, vous verrez le résultat. Voici donc comment nous pouvons utiliser différentes icônes en fonction de la situation. Il existe plusieurs sites Web qui fournissent ce type de polices, mais Font Toos est la meilleure Si vous avez un abonnement pro, vous pouvez accéder à tout. C'est donc tout pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 93. Tutoriel de style de barre de défilement CSS: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS, et dans ce tutoriel, nous allons apprendre le style des barres de défilement. Avant de commencer nos travaux pratiques, voyons quel style nous pouvons appliquer dans nos barres de défilement. Comme vous pouvez le voir dans cet exemple, nous avons au total six barres de défilement différentes. Nous avons une barre de défilement solide, nous avons une barre de défilement avec une ombre en forme de boîte Nous avons une barre de défilement faite avec une bordure, barre de défilement en dégradé Pour créer ce type de barre de défilement, le CSS introduit de nouvelles propriétés Ce ne sont pas des propriétés. Ce sont des éléments de Poseido Essayons donc de comprendre les éléments du poseido. Les éléments positifs sont particulièrement introduits dans le style de la barre de défilement. Le premier élément positif est la barre de défilement. Le deuxième élément positif est le pouce de la barre de défilement. Le troisième est Scroll Bat Track, et le quatrième est le coin de la barre de défilement Certains navigateurs ne prennent pas en charge cet élément. Seuls Chrome, Safari et Opera le supportent correctement. De plus, nous n'utilisons pas cette propriété directement dans notre navigateur. Nous devons utiliser le préfixe, webkit, et après avoir utilisé le préfixe webkit, cela ressemble à ça Après deux points, nous devons taper tiret webkit, tiret, puis nous devons passer le nom positoelmin Alors, sans trop parler, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Rizal Studio et mon navigateur en utilisant l'extension if server, et je crée déjà un document HTML nommé index dotSTML Comme vous pouvez le voir, Hary a créé Devilment et nous avons également défini un Avec cela, vous pouvez également voir une barre de défilement verticale. Et je vais styliser cette barre de défilement, et j'applique déjà un peu de CSS dans ce style profond Ici, nous fixons une hauteur de 250 pixels à 400 pixels. De plus, nous définissons la bordure de marge et le débordement, le débordement automatique. C'est pourquoi vous pouvez voir cette barre de défilement. Donc, dans un premier temps, nous devons sélectionner l'élément DV en utilisant son nom d'identifiant Possède un DAG, un goût, un colon, un trait d'union, un webkit Nous devons utiliser ce préfixe sans utiliser de préfixe, je pense que ça ne marchera pas Je vais donc taper Webket Scrollbar. Ensuite, à l'intérieur de la résine Cali, l'aide de ce verre posto, nous pouvons définir Nous pouvons définir une barre de défilement personnalisée avec. Je vais donc prendre avec 20 pL. Si je configure ce fichier, vous ne pouvez rien voir car vous devez appliquer une couleur de fond. Je vais donc utiliser l'arrière-plan des propriétés du diagramme, et je vais utiliser la couleur grise. Après avoir défini ce fichier, vous pouvez voir le résultat, et vous pouvez également remarquer l' épaisseur de la barre de défilement Et maintenant, nous devons appliquer la barre de défilement. Je vais donc mettre à jour cette section, et ici je vais taper Scrollbar Dash Ici, je ne vais pas le mentionner. Je veux juste mentionner la couleur de fond. Et pour l'instant, je vais appliquer la couleur verte. Et je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, il définit notre piste. Je vais également commenter cette couleur d'arrière-plan à partir de la barre de défilement N'oubliez pas que nos voitures se déplacent sur la trajectoire de la barre de défilement, et non sur cette barre de défilement Pour être plus clair, permettez-moi d'appliquer un certain rayon de bordure. Parfois, un rayon de bordure, je vais appliquer dix pixels. Après avoir défini ce fichier, vous pouvez voir la bordure. C'est la zone de notre barre de défilement , et maintenant je vais appliquer notre troisième propriété, notre troisième élément posito, notre troisième élément posito, qui est le pouce de la barre de défilement Je vais donc approfondir cette section. Et je vais remplacer Jack par le pouce. Avec ça, je vais changer la couleur du pouce. Sinon, vous ne pouvez pas comprendre le pouce. Je vais appliquer la couleur jaune, et je vais configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir que notre barre de défilement fonctionne correctement. Vous pouvez également appliquer des dégradés de couleurs. Je vais donc appliquer des dégradés de couleurs linéaires. Je vais donc dupliquer cette section et commenter la ligne précédente. Et ici, je vais taper gradient linéaire. Et ici, je vais passer au rouge bicolore, et notre deuxième couleur est le jaune. Après avoir étudié pendant ce temps, vous pouvez voir le résultat. Nous pouvons également appliquer le dégradé de couleur dans notre piste. Faisons en sorte que ce parchemin soit un peu attrayant. Ici, je vais appliquer la couleur grise. Et je vais configurer ce fichier. Utilisons une version plus claire de cette couleur grise. Pas de gris précis, autant de gris. Et je vais configurer ce fichier. Oui, maintenant ça a l' air plutôt bien. Je vais également appliquer une petite ombre à paupières. Je vais donc taper box shadow. Je vais d'abord l'insérer. Insérez, puis à partir de XX c'est zéro, à partir de YX c'est zéro, et pour le flou je vais utiliser six pixels Et nous devons également appliquer la couleur de l'ombre. Tapez donc RGBA RGBA à l'intérieur du laiton rond, rouge pour rouge, je vais passer zéro Pour le vert, je vais également passer zéro et pour le bleu, je vais également passer zéro. Et pour la valeur Alpha, je vais passer 0,3. Je veux 30 % de transparence. Si je définis ce fichier, si je définis ce fichier, vous pouvez voir le résultat. Après avoir assigné l'ombre de la boîte, elle ressemble à une forme en trois D. Maintenant, notre barre de défilement est un peu attrayante. Avec cela, je vais utiliser le même type d' ombre en forme de boîte dans la zone de notre pouce. Je vais donc copier l'ombre de cette section, et je vais la coller ici. Je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Il s'agit donc d'une barre de défilement verticale. Vous pouvez également appliquer une barre de défilement horizontale. Pour cela, il faut transmettre une image. Donc hero type mag point source, et si je vous montre mon répertoire de travail actuel, il y a une image image point JPG. Je vais passer le chemin du fichier, point image JPG. Je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir ici la barre de défilement horizontale, et les deux barres de défilement suivent la même propriété. Maintenant, si vous remarquez, vous pouvez voir qu'au coin de la rue, nous avons un espace. Pour remplir cette zone d'angle, il est également livré avec cet élément positif, qui est le coin de la barre de défilement. Pour cela, je vais dupliquer cette section et remplacer le pouce par le coin. Et dans le coin, je vais utiliser uniquement la couleur de fond. Je n'ai pas besoin d'utiliser wer radius. Oui, tu peux si tu veux l'utiliser. Alors tapez arrière-plan, et je veux une couleur rouge d'arrière-plan. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez également utiliser un dégradé de couleur si vous le souhaitez. J'espère donc que vous comprenez maintenant comment nous pouvons styliser notre barre de défilement Pour cela, nous devons utiliser un sélecteur d'éléments Posido, à savoir une barre de défilement, une piste de mots scolaires, un pouce de mots scolaires et un coin de mots Et si tu veux jouer avec la largeur de l'école, oui, tu peux. Si vous voulez le réduire de dix pixels, puis le sous-fichier, vous pouvez voir la barre de défilement Et seul le mot scolaire vertical est appliqué à la propriété width . même, si vous voulez mentionner la hauteur, le mot scolaire horizontal sera appliqué. À présent, la conception des mots défilants et le contrôle du comportement sont entre vos mains. Utter a mentionné cette largeur de barre scolaire, puis nous devons indiquer dans la barre de défilement où notre barre scolaire va se déplacer, puis nous devons créer l'élément pouce. Enfin, nous pouvons contrôler le coin bar de l'école. J'espère donc que vous comprenez maintenant comment nous pouvons utiliser ces propriétés. Merci donc d' avoir regardé cette station vidéo pour le prochain tutoriel. 94. Tutoriel CSS Display Root: Salut, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons apprendre une nouvelle valeur. Cette valeur est la propriété d'affichage associée, qui est la racine du flux. Dans notre précédent tutoriel, nous avons déjà abordé ces valeurs liées à la probité d'affichage, mais une autre valeur a été introduite dans la propriété d'affichage, qui est la racine du flux Voyons maintenant où nous pouvons utiliser cette valeur. Supposons que nous ayons un élément profond, et qu'à l'intérieur de cet élément profond, nous ayons un autre élément profond. C'est donc l'élément profond de notre parent, et c'est l'élément profond de notre enfant. Ainsi, chaque fois que nous utilisons la propriété float pour un élément enfant, cela crée un problème. Peu importe la valeur que vous utilisez. Il peut être à droite ou à gauche. Et le problème ressemble à ça. Comme vous pouvez le voir, le parent se trouve tout près de l'élément childiv et l'élément child et l'élément childi se dirigent vers le parent deep tout près de l'élément childiv et l'élément child et l'élément childi se dirigent vers le parent Pour résoudre ce problème, nous avons déjà deux solutions. Notre première solution consiste à utiliser la propriété de débordement dans notre automatique de débordement Mais cette solution ne fonctionne pas correctement sur tous les navigateurs. Parfois, cela ne fonctionne pas sur Internet Explorer. Cette solution n' est donc pas suggérée. Sans cela, nous avons une autre solution, qui est la réparation des engrenages. Pour utiliser Clear Fix, nous devons utiliser Aptar Positoselector. Nous devons utiliser ce cours de pasito chez notre parent. Ensuite, nous devons utiliser trois propriétés CSS, contenir un contenu vide, puis afficher la propriété et la propriété tear. De plus, cette solution n' est pas parfaite car ici nous devons taper plusieurs lignes. Nous devons utiliser Upra Selector, nous devons créer, nous devons prendre trois propriétés, et nous appelons cette méthode carfix. Et ce n'est pas non plus une solution permanente. Mais maintenant, les CSS introduisent une solution permanente, appelée display flow root. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension if server, et je crée déjà un document d'estimation nommé index point HTML. Ainsi, comme vous pouvez le voir dans notre balise body, nous avons une balise Deep parent, et à l'intérieur de cette balise Deep parent, nous avons une balise Dip enfant. Et vous pouvez voir le résultat dans mon navigateur. Et aussi, je stylise ces éléments profonds. C'est ce qu'est l'élément Paren Deep. Ici, nous avons défini avec 600 pixels, puis nous avons défini la marge 55 à 50, et nous avons également défini une bordure pleine de deux pixels. Ensuite, dans notre tag enfant, nous utilisons 100 pixels et 100 pixels de hauteur. Avec cela, sa couleur de fond est le rouge. Et maintenant, je vais utiliser la propriété float sur mon élément enfant. Donc HemoTypeFloat, float, let. En haut de ce fichier, vous pouvez voir le problème ici. Maintenant, l'élément childp sort de l'élément parentib. Pour résoudre ce problème, le CSS introduit la valeur racine du flux. Donc, dans notre élément parent, je vais utiliser cette propriété Afficher le flux Root. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, cela résout maintenant notre protéine. Si j'utilise float, right, et que je définis ce fichier, vous pouvez voir le résultat. Maintenant, il déplace notre élément enfant sur le côté droit. De plus, cela ne détruit pas la structure de nos parents. J'espère que maintenant c'est Clearfo. À quoi sert cette valeur ? Si vous utilisez cette valeur, nous n'avons pas besoin d'utiliser overflow, sinon clearfake C'est donc tout pour ce tutoriel. Merci d'avoir regardé cette vidéo Stun pour le prochain tutoriel 95. Qu'est-ce que la mise en page CSS: Bonjour, les gars. Bon retour. Dans ce tutoriel, je vais vous présenter ce qu'est la grille CSS et comment elle fonctionne, pourquoi devrions-nous utiliser CSS greed Tout d'abord, il s' agit d'un système de grille bidimensionnel C'est un nouveau système de mise en page. Nous l'appelons bidimensionnel parce que nous pouvons gérer des lignes et des colonnes ensemble. Notre deuxième avantage est que la disposition en grille remplace la disposition flottante. Nous n'avons plus besoin d'utiliser la propriété flottante comme niveau Margin et nous n'avons pas besoin de nous concentrer sur le float laid et le float right. Nous pouvons créer des mises en page très facilement. Notre troisième avantage est qu'il crée notre code de manière très rapide et propre, car nous n'avons pas besoin de nous concentrer sur les propriétés flottantes et cela augmente la lisibilité du code Notre quatrième avantage est que nous n'avons pas besoin d'utiliser de framework CSS tel que bootstrap, foundation, CSS matérialisé, etc. B. Si vous comprenez bien la grille, vous n'avez pas besoin d' utiliser Parce que vous pouvez tout gérer avec une grille CSS. Essayons de comprendre comment fonctionne réellement le réseau. Supposons qu'il s'agisse d'une profondeur et qu'à l'intérieur de cette profondeur, nous ayons six profondeurs différentes et nous appelons cette structure un système de grille Sans utiliser de flottement ni de marge, nous pouvons créer des lacunes et nous pouvons y remédier ensemble. Nous appelons ce conteneur parent un conteneur quadrillé. Pour créer ce conteneur de grille, nous devons utiliser la propriété CSS dans notre profondeur parent , qui est propriété d'affichage, grille d'affichage. Lorsque nous utilisons une grille de propriétés d'affichage, elle suppose automatiquement que ce conteneur parent est un conteneur de grille. Comme vous pouvez voir tous les objets de cette plongée, nous les appelons objets de la grille. Ici, vous pouvez voir une feuille individuelle, nous l'appelons cellule quadrillée, ici vous pouvez voir quelques lignes entre ces profondes et nous l'appelons ligne quadrillée. Vous pouvez voir ici quatre lignes de quadrillage. Ce sont toutes des lignes verticales. Et ici, vous pouvez voir un espace entre ces deux cellules, nous l'appelons gouttière De même, ces lignes fonctionnent verticalement. Comme je vous l'ai dit, cela fonctionne en deux dimensions et nous pouvons le gérer très facilement Cela fonctionne comme les cellules, les lignes et les colonnes d'un tableau. Ici, vous pouvez voir, selon cette structure, que nous avons deux lignes de grille dans notre image, et ici vous pouvez voir dans des bordures jaunes, nous les appelons colonnes de grille. Et ici, vous pouvez voir un écart entre les lignes et les colonnes, et nous l'avons appelé zone de grille. Dans nos prochaines vidéos, nous allons comprendre comment créer des grilles. Dans notre prochaine vidéo, je vais aborder toutes les propriétés de la grille dans cette série de didacticiels. Nous allons également apprendre comment créer une belle mise en page en utilisant ces propriétés de grille. Vous pouvez voir ici le nom du navigateur qui peut prendre en charge notre système de grille. Internet Explorer ne prend pas en charge le système de grille. Age supporté, Firefox le supporte, Chrome le supporte, Safari le supporte et Opera le supporte également. La plupart du temps, nous travaillons avec Chrome Saffer et Firefox. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 96. Création de grille CSS avec des lignes et des colonnes: Bonjour, les gars. C'est bon de te revoir. Dans ce tutoriel, nous allons apprendre comment créer du gruau Nous allons commencer par deux propriétés. Notre première propriété est Greet tablet column, et notre deuxième propriété est Greet template Row. Commençons donc par la pratique et essayons de comprendre comment cela fonctionne. Vous pouvez voir ici que je crée déjà un document ETmal, et j'ouvre ce document HTML à l'aide de l'extension de serveur Life Et sur le côté droit, vous pouvez voir notre navigateur Web. Donc, je vais d'abord créer un De où je vais créer un conteneur quadrillé. Dev et aussi, je vais attribuer une classe à ce conteneur de classes profondes. Et à l'intérieur de cette profondeur, je vais créer six autres profondeurs et je vais définir comme classe, objet et élément un Je vais reproduire cette profondeur cinq fois. Ici, j'utilise plusieurs classes, et je vais changer le nom de la classe. Point deux, point trois, point quatre, point cinq et point six. Dans cette profondeur, je vais taper du texte. Le premier, le deuxième, le troisième, le quatrième, cinquième et le dernier sont sixièmes. Si je définis ce fichier, vous pouvez voir ici tous les conseils, premier, deuxième, troisième, quatrième, cinquième et sixième. abord, je vais définir une couleur d'arrière-plan pour ce conteneur, point, conteneur, arrière-plan, gris. J'ai configuré ce fichier, ici vous pouvez voir le résultat. De plus, je vais attribuer wed à ce conteneur, avec 700 pixels. Comme je vais donner une marge à ce conteneur. Marge. Pour le top, je vais utiliser 50 pixels. Pour l'ascenseur, je vais utiliser zéro. Pour le bas, je vais utiliser zéro, et pour p, je vais utiliser 50 pixels. Si je place ce fichier, vous pouvez voir le résultat ici. Maintenant, je vais fournir une couleur différente pour différents articles. Je vais donc créer un élément de sélection. Je vais également définir un arrière-plan pour cet article. Si je sauvegarde ce fichier, vous pouvez voir le résultat. Maintenant, je vais dupliquer cet article plusieurs fois. Pour le deuxième point, je vais dire couleur orange. Pour le troisième point, je vais dire couleur verte. Ou point quatre, je vais dire couleur jaune. Pour le point 5, je vais dire couleur bleue, et pour l'article 6, je vais dire couleur violette. Si je configure ce fichier, vous pouvez voir les résultats. Larry peut voir toutes les couleurs dans nos profondeurs. Revenons à notre parent D, qui est une classe container. Je vais utiliser une propriété qui est display et je vais utiliser une grille d'affichage. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement car nous ne créons pas de ligne et de colonne dans cette grille. Je vais d'abord créer des colonnes. Je vais utiliser une colonne de modèle de cupidité. Ici, nous pouvons mentionner le nombre de colonnes que nous voulons. Avec cela, nous pouvons mentionner la largeur des colonnes. Supposons que je veuille deux colonnes, notre première colonne a une largeur de 200 pixels et notre deuxième colonne une largeur de 250 pixels. Si je définis ce fichier, nous pouvons voir ici qu'il crée nos colonnes. Notre première colonne prend une largeur de 200 pixels et notre deuxième colonne une largeur de 250 pixels. Ici, vous pouvez voir sur une ligne que nous créons deux colonnes. Supposons que je veuille changer la largeur de la première colonne, quelque chose de 350 pixels. Si je définis ce fichier, vous pouvez voir la largeur de la colonne. De même, nous pouvons définir la hauteur à l'aide d'une autre propriété. Laisse-moi te montrer. Excellentes lignes de modèles. Ici, nous pouvons définir le nombre de lignes que nous voulons. Ici, vous pouvez voir que nous avons un total trois lignes dans notre continuité parent. Pour notre première ligne, je veux dire 100 pixels de hauteur. Si je place ce fichier, vous pouvez voir le résultat ici. Cela s'applique uniquement à notre première ligne , et pour notre deuxième ligne, je veux définir une hauteur de 200 pixels, et pour notre troisième ligne, je veux définir une hauteur de 100 pixels. Si je place le fichier, nous pouvons voir ici le résultat. Si vous le remarquez, cela n' affecte pas la largeur de notre conteneur, qui est de 700 pixels. De plus, nous pouvons ajouter une autre colonne à ce D. Pour cela, je vais d' abord réduire la valeur de cette première colonne, 150 pixels, et pour notre troisième colonne, je vais prendre 150 pixels encore une fois, 150 pixels encore une fois. Si je place ce fichier, vous pouvez voir le résultat ici. Maintenant, il crée trois colonnes, et ici vous pouvez voir que pour notre première ligne, il définit une hauteur de 100 pixels, et pour notre deuxième ligne, il définit une hauteur de 200 pixels, et il n'y a pas de troisième ligne dans ce conteneur. Si nous avions une troisième ligne dans notre conteneur, il définirait une hauteur de 100 pixels. Laisse-moi te montrer. Je vais dupliquer cet article une fois de plus. Et si je définis ce fichier, désolé, nous devons dupliquer notre deep, pas le sélecteur Si je duplique ce D et que je définis ce fichier, vous pouvez voir le résultat ici. Ici, vous pouvez voir que pour notre troisième ligne, cela crée une hauteur de 100 pixels parce que nous avons mentionné une hauteur de 100 pixels pour notre troisième ligne. Ici, vous pouvez voir un espace vide, et maintenant je veux remplir cet espace vide avec notre troisième colonne. Pour cela, nous devons utiliser une propriété, qui est automatique. Si je place ce fichier, ici vous pouvez le voir remplir la zone avec notre dernière colonne. Je vais remplir tout l' espace restant avec notre troisième colonne Supposons que je veuille changer notre deuxième colonne de 100 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Si j'utilise Auto pour la largeur de notre deuxième colonne et si j'utilise cette valeur pour la largeur de notre troisième colonne, et si je définis ce fichier, vous pouvez voir un résultat. Vous pouvez maintenant voir que notre première colonne a une largeur de 150 pixels et notre dernière colonne a une épaisseur de 100 pixels. Et notre espace de fusion est couvert par une deuxième colonne car nous utilisons une valeur automatique pour notre deuxième colonne. Permettez-moi de vous montrer une chose. Si vous utilisez le navigateur Firefox ou Chrome, appuyez simplement sur Ap 12. C'est l' option Développeur ouverte dans votre navigateur. Si vous surlignez le plongeon du conteneur ici, vous pouvez voir une option nommée GET. Comme vous pouvez le voir sur les propriétés, affichez GED. Comme vous pouvez le voir, une icône GED ici. Cela s'appelle GED Editor. Si vous cliquez dessus, vous pouvez voir ici de nombreuses options. Pour l'instant, je ne vais pas le prolonger. Je vais étendre tout cela plus tard, alors je le ferme. Mais si je clique sur cette option de grille, vous pouvez voir ici une ligne et vous pouvez également voir les numéros de ligne et nous l'appelons lignes de grille. Cela n'est possible que si vous utilisez la propriété display grid. Ici, vous pouvez voir que nous utilisons des pixels, mais nous pouvons également utiliser des pourcentages. Laisse-moi te montrer. Supposons que je veuille utiliser deux colonnes. Pour la première colonne, je veux utiliser 40 % et pour notre deuxième colonne, je veux utiliser 30 %. Si je place ce fichier, vous pouvez voir le résultat ici. Notre première colonne couvre 40 % de la superficie totale de notre conteneur. Et maintenant, je veux utiliser la troisième colonne pour notre troisième colonne, je vais utiliser Auto Vin. Si je configure ce fichier, vous pouvez voir le résultat. Notre première colonne prend 40 % ou la deuxième colonne 30 %, et notre troisième colonne prend également 30 % car nos première et deuxième colonnes en prennent 70 %. Si je passe de 100 % à 70 %, la valeur restante est de 30 % C'est pourquoi il faut 30 %. Non seulement cela, nous pouvons utiliser le pixel avec le pourcentage. Supposons que pour notre première colonne, je souhaite utiliser 100 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Notre première colonne mesure 100 pixels et notre deuxième colonne occupe 30 % de la largeur de notre conteneur et notre troisième colonne couvre l'espace restant. Non seulement cela, il existe une autre unité qui est Fer signifie fraction. Supposons que je veuille deux colonnes d' un Fer et une autre d'un FR. Si je place ce fichier, vous pouvez le voir ici dans notre conteneur. Notre première colonne prend la première moitié et notre deuxième colonne représente la seconde moitié. Si j'utilise une autre valeur Fer et que je définis ce fichier, vous pouvez voir ici que cela crée un total de trois colonnes et que toutes les colonnes ont une largeur similaire, une largeur similaire, cela divise également la largeur du conteneur, qui est de 700. Si j'utilise deux valeurs aer pour notre troisième colonne, puis que je définis le fichier, nous pouvons voir ici que notre troisième colonne prend deux fois plus d'espace que notre première colonne et notre deuxième colonne. Ici, vous pouvez voir que nous pouvons contrôler les grilles sans utiliser de flotteur Ensuite, je vais utiliser une autre propriété qui est grid gap. Laisse-moi te montrer. Je vais utiliser 15 pixels et si je définis ce fichier, vous pouvez voir ici qu'il fournit un écart égal entre les lignes et les colonnes. Si je clique sur cette option de grille, vous pouvez la voir. Maintenant, vous pouvez le voir clairement. Dans le prochain tutoriel, je vais vous expliquer clairement. Il existe une autre unité que nous pouvons utiliser comme valeur de colonne de modèle de grille, qui est la répétition. Laisse-moi te montrer. La répétition est essentiellement une fonction. Supposons que vous vouliez deux colonnes de même largeur. Dans notre premier paramètre, nous devons transmettre le nombre de colonnes que nous voulons. Dans notre cas, deux, puis vous devez transmettre la largeur, qui est de 150 pixels. Si je place ce fichier, vous pouvez voir le résultat ici. Ici, nous devons taper la valeur de largeur plusieurs fois. Si nous voulons quatre colonnes, nous devons taper quatre ici. Si je place ce fichier, vous pouvez voir le résultat ici. Il crée quatre colonnes de même largeur. Pour l'instant, je vais utiliser deux colonnes. Avec cela, je souhaite utiliser une colonne d'effort. Oui, nous pouvons le faire. Tapez simplement un FR. Si je sauvegarde ce fichier, vous pouvez voir le résultat ici. Tout d'abord, il crée deux colonnes de taille égale , puis il couvre l'espace restant avec notre troisième colonne. De même, nous pouvons utiliser la valeur en pourcentage et la valeur en pixels ici. Laisse-moi te montrer. Supposons que je veuille une colonne de 40 %. Si je sauvegarde ce fichier, vous pouvez voir le résultat ici. De même, nous pouvons utiliser notre unité de fraction dans nos lignes. De plus, nous pouvons utiliser l'unité de fraction pour nos lignes. Mais avant, je vais définir hauteur de notre conteneur parent. Hauteur 700 pixels. Si je place ce fichier, vous pouvez voir le résultat ici. Maintenant, je veux deux rangées de même hauteur. Je vais utiliser la fonction refit, deux rangées avec un F ou une hauteur Si je place ce fichier, vous pouvez voir le résultat ici. Ici, vous pouvez voir que nos lignes sont réparties de manière égale. Cette valeur ne s'applique qu'à deux lignes, la première et la deuxième. Si j'utilise trois puis que je place les cinq, vous pouvez voir ici que les trois lignes sont réparties de manière égale. Leur hauteur est égale. De même, nous pouvons utiliser la valeur des pixels ici. Supposons que pour notre première ligne, je vais utiliser 100 pixels. Pour notre deuxième rangée, je vais utiliser 30 %. Pour notre troisième rangée, je vais en utiliser une pour l'unité. Si je place ce fichier, vous pouvez voir le résultat ici. J'espère que le concept est maintenant clair pour vous. Ces deux propriétés sont très importantes pour créer une structure de grille. Notre premier nom de propriété est la colonne du modèle de grille, et notre deuxième nom de propriété est le modèle de grille Row. Dans notre prochain tutoriel, nous allons comprendre ce qu'est le grid gap. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 97. Tutoriel CSS Grid Gap: C'est bon de vous voir, les gars. Dans ce tutoriel, nous allons apprendre une nouvelle grille CSS liée aux propriétés. Qu'est-ce que CSS Grid Gap ? Nous avons un écart de réseau lié à trois propriétés au total. Notre première propriété est l'écart entre les lignes de la grille, notre deuxième propriété est l'écart entre les colonnes de la grille, et la dernière est l'écart entre les lignes de la grille. Essayons de comprendre comment fonctionne la propriété Grid Gap. Ici, vous pouvez voir un écart entre les éléments de la grille, que nous appelons écart de grille. S'il est fourni avec row wise, nous l'appelons row gap. Et s'il est fourni par colonne, nous l'appelons colonne Gap. Commençons par la pratique et essayons de comprendre comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon coitor Visual Studio et mon navigateur en utilisant l'extension if server, et j'ai déjà créé un document TML dans mon répertoire Ici, vous pouvez voir que nous avons un total deux colonnes de grille avec Oi pour valeur et nous avons un total de trois lignes dans notre grille, 100 pixels, 150 pixels et 100 pixels. Entre ces éléments, je veux mettre un espace. Peut-être une voix en ligne, peut-être une vue en colonne. Tout d'abord, je souhaite utiliser Row Voice gap. Je vais utiliser un écart entre les lignes de la grille de propriétés. Et je veux attribuer un écart de dix pixels entre ces lignes. Laissez-moi vous montrer dix pixels. Si je place ce fichier, vous pouvez voir le résultat ici. Augmentons la valeur de 30 pixels. Vous pouvez voir ici les écarts entre les lignes. Vous pouvez augmenter la taille de l'écart , comme vous le souhaitez. Il s'agit d'un écart entre les lignes. Si vous souhaitez espacer les colonnes par colonne, vous devez utiliser la propriété read column Gap. Laisse-moi te montrer. Je vais taper ed column gap. Je vais utiliser un écart de 20 pixels entre les colonnes. Si je place ce fichier, vous pouvez voir le résultat ici. Ici, vous pouvez voir que l'écart entre les lignes est 30 pixels et l' écart entre les colonnes est de 20 pixels. De plus, nous pouvons utiliser propriété Stan pour ces deux propriétés. Pour cela, nous devons utiliser la propriété read gap. Laisse-moi te montrer Gap. abord, nous devons transmettre la valeur de la ligne , puis la valeur de la colonne. Pour la ligne, je vais utiliser 20 pixels et pour la colonne, je vais utiliser 30 pixels. Si nous utilisons la propriété red gap, nous n'avons plus besoin de l' utiliser , je vais donc la supprimer. Si je place ce fichier, vous pouvez voir le résultat ici. La distance entre les lignes est 20 pixels et la distance entre les colonnes est de 30 pixels. Si j'utilise une valeur égale pour l'écart de ligne et l'écart de colonne, 30 pixels pour la ligne et 30 pixels pour la colonne et que je définis ce fichier, vous pouvez voir le résultat ici. Maintenant, je veux montrer trois colonnes dans notre conteneur. Je vais taper C, répéter la troisième colonne. Si je place ce fichier, vous pouvez voir le résultat ici. Vous pouvez également voir l' écart similaire entre les éléments de la grille, et ici vous pouvez voir un espace vide car nous utilisons trois tailles de ligne différentes. Si je supprime celui-ci, pensez au dernier et définissez ce fichier. Maintenant, vous pouvez voir qu'il n'y a aucun écart. La hauteur de la première ligne est de 100 pixels et celle de la deuxième est de 150 pixels. J'espère que vous comprenez maintenant ce qu'est la bienséance Bit Gap. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 98. Tutoriel de positionnement des éléments de la grille CSS: Encore une fois, je suis de retour avec une nouvelle grille CSS liée au tutoriel. Dans ce tutoriel, nous allons apprendre le positionnement des grilles CSS. Essayons de comprendre ce que sont les éléments de la grille et quelle est la signification de la position des éléments de la grille. Ici, vous pouvez voir un paren deep et nous l'avons appelé conteneur quadrillé Tout au plus profond du conteneur parent, nous l'avons appelé objets en grille La question qui se pose maintenant est la suivante : quel est le sens du positionnement ? Supposons que vous vouliez déplacer le troisième élément de la grille à la cinquième place, et que vous décidiez de déplacer Pip Tans à la troisième place, quelque chose comme ça, et nous avons appelé cela un excellent positionnement Comme vous pouvez le constater, nous déplaçons le troisième élément à la cinquième place. De même, nous déplaçons le cinquième élément à la troisième place. Donc, liées à ce type d'alignement, nous avons quelques propriétés CSS. Laisse-moi te montrer. Comme vous pouvez le constater, nous avons sept propriétés CSS telles que le début de la ligne de grille, fin de la ligne de la grille, la ligne rouge, début de la colonne de la grille, etc. Enfin, nous avons une propriété courte nommée grid area. Passons donc au coordinateur de Visual Studio et essayons de comprendre comment cela fonctionne. Vous pouvez voir ici que je crée déjà un document TML et j'ouvre mon navigateur et mon codateur côte à côte Si je vous montre, vous pouvez voir ici que nous avons un conteneur parent à l'intérieur de ce conteneur parent, nous en avons au total six de profondeur. Cela signifie six éléments de la grille. Comme vous pouvez le constater, chaque élément de la grille est coloré différemment. Dans un premier temps, je vais placer le premier élément de la grille à la sixième place. De même, je vais déplacer les six éléments de la grille en premier lieu. Comme vous pouvez le constater, nous avons déjà créé nos sélecteurs. Point un, point deux, point trois. Comme je vous l'ai dit plus tôt dans cette série de didacticiels, nous avons une option de navigateur dans notre console, savoir les lignes quadrillées. Laisse-moi te montrer. Sélectionnez simplement votre navigateur et louez Ep 12 pour le mode debloper. Je vais ouvrir ce panneau en bas de mon navigateur. Je vais appuyer sur cette option. Ici, vous pouvez voir une option dans mon conteneur à stylos, qui est une grille. Si je clique dessus, vous pouvez voir quelques lignes ici. Vous pouvez maintenant voir les numéros des lignes de la grille. Vous pouvez le voir par rangée. Vous pouvez également le voir par colonne. Dans ce tutoriel, nous allons comprendre quel est le cas d'utilisation de ces lignes. Passons à notre premier sélecteur d'articles, qui est l'élément 1 Comme je vous l'ai dit, je vais déplacer ce premier objet en six positions. Dans un premier temps, je vais utiliser une propriété qui est un excellent point de départ. Dans un premier temps, nous devons déplacer cet élément de note dans la deuxième ligne. Comme vous pouvez le constater, il s'agit de notre deuxième rangée. Je vais en taper deux ici. Si je place ce fichier, vous pouvez maintenant voir notre article de première année passer dans la deuxième rangée et nous devons également déclarer le poste. Pour cela, nous devons utiliser une autre propriété CSS, qui est la ligne N de la grille. Encore une fois, si je vous montre mes lignes de quadrillage, vous pouvez voir ici que notre position finale est trois. C'est pourquoi nous devons en passer trois. Si votre robot utilise la propriété Grid Row, cela crée peut-être des problèmes lorsque vous réagissez à votre site Web. Si je définis ce fichier, vous pouvez voir ici n' y a aucun changement, mais c'est une bonne façon d' utiliser cette propriété. Et maintenant, nous devons travailler avec des colonnes. Comme vous pouvez le voir, nous devons déplacer cet élément de la grille en troisième position. Pour cela, je vais utiliser une autre propriété CSS, grid columns stir. Ici, je vais en mettre trois. Si je configure ce fichier, vous pouvez voir le résultat. Nous avons réussi à placer notre premier article lu à la sixième place. Nous devons également déclarer la position de cette colonne. Lisez la colonne A. Comme vous pouvez le voir, notre ligne se termine en quatrième position, vous devez donc en passer quatre. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Ce n'est pas obligatoire, mais dans un souci de réactivité, c'est très important. Et maintenant, je veux déplacer ce quatrième élément en première position. Pour cela, je vais copier ce code, passer à notre quatrième élément sélectionné et je vais passer le code. Notre ligne de départ est donc la première, donc je vais en taper un et notre ligne de fin est deux. De même, comme vous pouvez le voir, nos colonnes commencent par un et se terminent par deux, type Sumo, les colonnes de début, un et de fin de colonne deux Si je place ce fichier, vous pouvez voir le résultat ici. Nous avons réussi à déplacer notre quatrième conteneur en première place. Mais l'important, c'est que nous ne modifiions pas la structure de notre timus Vous pouvez voir ici notre structure extrémiste. En utilisant les propriétés de la grille CSS, nous pouvons modifier leurs positions sans changer leur structure réelle. Maintenant, je vais vous montrer la méthode abrégée avec toutes ces propriétés. Maintenant, je veux déplacer le cinquième élément à la première place. Je passe donc au cinquième sélecteur d'éléments, puis je vais utiliser une propriété de grille CSS différente Si vous souhaitez créer un raccourci pour une ligne, vous devez utiliser la propriété grid row Laissez-moi vous montrer la ligne de classement. abord, nous devons fournir cette position de ligne de départ , qui est une, puis vous devez utiliser une barre oblique, puis nous devons fournir la position de la ligne de fin, qui est deux De même, nous avons une propriété abrégée pour la colonne, qui est une colonne de grille. Laisse-moi te montrer. Nos colonnes commencent par la ligne numéro un et se terminent par la ligne numéro deux. Si je place ce fichier, vous pouvez voir ici que nous avons réussi à déplacer notre article de cinquième année à la première place. Mais qu'en est-il d'un article de quatrième race ? Nous ne retirons pas les articles de quatrième race de ce contenant. Il existe toujours en premier lieu. Juste le point 5, superposez le quatrième. C'est pourquoi nous ne pouvons pas voir le quatrième. Non seulement cela, nous avons un autre raccourci pour désigner cette propriété En utilisant ce raccourci, nous pouvons transmettre la valeur du port en une fois, qui est la zone de la grille. Laisse-moi te montrer. Supposons que je veuille déplacer le sixième élément à la deuxième place. Pour ceux-ci, nous devons fournir le point de départ de la ligne et le point de départ de la colonne. Notre point de départ de ligne est un et notre point de départ de colonne est deux, puis nous devons fournir le point de fin de ligne et le point de fin de colonne. Le point de terminaison de notre ligne est deux et le point de terminaison de notre colonne est trois. Si je place ce fichier, vous pouvez voir ici que nous avons réussi à déplacer nos six conteneurs à la deuxième place. Il suffit d'utiliser une propriété de grille CSS, qui est la zone de grille. Rappelez-vous simplement que vous devez d'abord fournir le point de départ de la ligne, puis le point de départ de la colonne. Ensuite, vous devez fournir point de fin de ligne et point de fin de colonne. J'espère que vous comprenez maintenant comment fonctionnent les colonnes de lignes. Il existe de nombreuses méthodes pour positionner nos grilles. Dans mes prochaines vidéos, je vais vous les apprendre toutes. Dans notre prochain tutoriel, nous allons apprendre comment répartir les éléments de notre grille. Supposons que vous vouliez couvrir votre troisième élément avec Je veux juste remplir cette zone vide avec ce troisième élément. Cela signifie qu'il faudra deux colonnes de largeur. Je me souviens de cette méthode, Span. Restez à l'affût pour notre prochain tutoriel. Merci d'avoir regardé cette vidéo. À bientôt. 99. Tutoriel sur les éléments de la grille CSS: C'est bon de vous voir, les gars. Encore une fois, je suis de retour avec une nouvelle grille CSS liée au tutoriel. Dans ce didacticiel, nous allons apprendre l' élément de grille CSS, spanning. Mais avant de commencer la pratique, nous devons comprendre ce que signifie la durée. Simplifions-le. Ici, vous pouvez voir un conteneur quadrillé, et à l'intérieur de ce conteneur quadrillé, nous avons jusqu'à six objets. Si vous remarquez, vous pouvez voir chaque élément D avec la même chose, et maintenant je veux étendre d1w Je souhaite étendre l'article numéro un à deux articles. De même, je souhaite étendre l'élément deux lignes, quelque chose comme ceci. Pour le premier élément, nous utilisons l' envergure des colonnes, et pour le deuxième élément, nous utilisons l'envergure des lignes et les autres éléments automatiquement disposés à sa propre place Commençons par l'aspect pratique et essayons de comprendre comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon Visual Studio Coreor et mon navigateur en utilisant l'extension Light Server Comme vous pouvez le constater, nous avons au total six articles de la grille dans notre conteneur de brevets et nous les organisons en série. Commençons par les lignes de la grille. Je vais faire l'éloge d'Atwel. Et si je clique sur cette option, vous pouvez voir les lignes de la grille. Maintenant, je voudrais passer notre premier article, colonne par colonne, je veux étendre cette colonne jusqu' à la troisième ligne. Je vais taper Mauvaise colonne d trois. Vous savez déjà que le premier article est notre premier article. Si je place ce fichier, vous pouvez voir le résultat ici. Étalez avec succès notre premier élément de la grille, la première colonne. Si vous remarquez, vous pouvez voir tous les éléments de la grille changer automatiquement de place. Vous pouvez constater que l'article numéro six est descendu et que nous n'indiquons aucune hauteur pour notre troisième rangée. C'est pourquoi il a l'air petit. Je vais maintenant spécifier la hauteur de cette troisième ligne, 100 pixels. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. hauteur de notre première ligne est de 150 pixels et la hauteur de notre deuxième ligne est de 150 pixels, mais la hauteur de notre troisième ligne est de 100 pixels. Encore une fois, je vais activer mes lignes de quadrillage. Et maintenant, je veux étendre notre deuxième élément par ligne, et je veux l'étendre de ce point à ce point. Ça veut dire quatre. Pour cela, nous devons travailler avec ces deux propriétés. Je vais copier ces propriétés et les coller ici. Je vais changer le point final de la ligne de notation, qui est quatre. Si je place ce fichier, vous pouvez voir le résultat ici. Maintenant, cela ressemble à une page Web. Voici notre en-tête, et voici notre barre latérale. Non seulement cela, nous pouvons utiliser une propriété abrégée pour cela. Laissez-moi vous montrer la ligne de lecture. Si je commente cela dans la propriété, si je tape 14, et si je place ce fichier, vous pouvez voir le même résultat ici . Il n'y a aucun changement. J'espère que vous comprenez maintenant comment les orthographes sont portées. Permettez-moi de vous montrer une chose. Ici, vous pouvez voir que nous devons indiquer trois colonnes avec un e ou une valeur. Pour cet exemple, je vais commenter cette propriété. Encore une fois, je vais activer les lignes de la grille. Ici, vous pouvez voir que nous devons indiquer quatre lignes de colonne dans notre structure. Mais que se passe-t-il si nous passons cinq valeurs ici, si je définis ce fichier, vous pouvez le voir étendre notre colonne avec la valeur par défaut. Nous avons maintenant un total de quatre colonnes dans notre conteneur. Mais vous pouvez voir ici que nous ne déclarons pas quatre colonnes, nous déclarons simplement trois colonnes. Nous pouvons étendre notre élément de grille au-delà du conteneur. Ensuite, il organise automatiquement l'élément de la grille en fonction de la valeur de la fraction Mais ce n'est pas une bonne pratique, je vais donc en utiliser quatre. Si je règle celui-ci, vous pouvez voir le résultat. Je vais maintenant fixer le troisième élément dans sa position absolue. Pour cela, dans le sélecteur d' éléments 3, je vais taper grit Et je vais aussi activer les lignes de la grille. Notre troisième élément commence à la ligne numéro deux et se termine à la ligne numéro trois, notre propriété suivante est la colonne de grille. Et vous commencez également par la colonne numéro deux et vous terminez par la colonne numéro trois. Si je configure ce fichier, vous pouvez voir qu'il n'y a aucun changement. Il s'agit de la position absolue du troisième élément. Maintenant, je ne peux pas déplacer cette grille depuis cet espace, et maintenant je veux étendre la largeur de la deuxième colonne jusqu'à la ligne numéro trois. Pour cela, je vais utiliser la propriété de colonne de la grille. Et notre colonne commence à la ligne numéro un et se termine à la ligne numéro trois. Si je définis ce fichier, vous pouvez obtenir un résultat différent car nous avons déjà placé notre troisième plongeon dans cette position, de sorte que notre deuxième élément de la grille ne peut pas prendre sa place. Ensuite, il se rétrécit automatiquement. Mais si vous remarquez, vous pouvez voir nous n'utilisons que la propriété de la colonne de grille. Nous n'utilisons pas la propriété Grid Row. Si j'utilise la propriété grid row, laissez-moi vous le montrer. Rangez et essayez de déplacer cet objet à cet endroit. Laisse-moi te montrer. Mais d'abord, je vais activer la ligne rouge. Notre ligne commence à la ligne numéro deux et se termine à la ligne numéro trois. Si je définis ce fichier, vous pouvez maintenant voir un résultat différent. Maintenant, ils se chevauchent. Si vous souhaitez voir l'élément S dans son intégralité, vous devez utiliser la probité de l'indice Z. Laisse-moi te montrer. Je vais taper le nom de probité Z index. Par défaut, il est livré avec zéro. Racine de somme de type 1. Si je définis ce fichier, vous pouvez maintenant voir le deuxième élément dans son intégralité. Notre troisième article existe toujours derrière ce deuxième article. Je vais maintenant vous montrer les différentes valeurs que nous utilisons pour le span, qui est span. Laisse-moi te montrer. Somme le type de racine, l'étendue, et je veux étendre notre premier élément jusqu'à quatre colonnes , espace, quatre Si je définis ce fichier, désolé, nous n'avons pas quatre colonnes dans notre conteneur. C'est pourquoi il étend la colonne et crée une nouvelle ligne de grille. Pour cela, nous devons utiliser span three. Si je définis ce fichier, nous revenons maintenant à notre ancien résultat. Si je vous montre les lignes de la grille, vous pouvez voir ici que nous avons un total de quatre lignes. Cette valeur fonctionne avec numéros des éléments de la grille et cela fonctionne avec les numéros des lignes de la grille. C'est la principale différence entre deux valeurs. Comme nous pouvons l'étaler en rangées. Laisse-moi te montrer. Espandez deux. Si je définis ce fichier, nous couvrons maintenant notre premier conteneur, ligne est également la colonne vois. Comme nous utilisons la propriété index pour notre deuxième élément, c'est pourquoi notre premier élément ne couvre pas le deuxième élément. Je sais que c'est un peu compliqué, mais j'essaie de l' expliquer très simplement. De plus, nous pouvons utiliser cette valeur avec cette valeur différente. Laisse-moi te montrer Span 2. Si je place ce fichier, vous pouvez voir le résultat ici. Pour l'instant, je n'en ai pas besoin, je vais l'annuler. Et je souhaite également modifier la valeur finale du dessin de la grille. Deux. Encore une fois, je vais activer les lignes de la grille. Supposons que nous ayons beaucoup de colonnes dans notre conteneur et que je souhaite étendre l'élément de la grille rouge du début à la fin de ce conteneur. Mais je ne sais pas combien de lignes de colonne nous avons. Pour ceux-ci, nous pouvons utiliser des points négatifs. Ici, vous pouvez voir un numéro de ligne moins un. N'oubliez pas que notre numéro de dernière ligne commence toujours par moins un. Nous pouvons donc utiliser le moins vo ici. Laisse-moi te montrer. Si je tape moins un et que je définis ce fichier, vous pouvez voir ici qu'il n' y a aucun changement. J'espère que vous comprenez maintenant comment se situent les spannings . Merci donc d' avoir regardé cette vidéo Restez à l'affût pour notre prochain tutoriel. 100. Tutoriel de nommage des lignes de grille CSS: Bonjour, les gars. C'est bon de te revoir. Dans ce tutoriel, nous allons apprendre la dénomination des lignes de grille CSS. Dans notre précédent tutoriel, nous avons utilisé des lignes de grille pour faire tourner nos éléments de grille. Mais dans ce tutoriel, nous allons apprendre comment attribuer un nom de ligne, et comment pouvons-nous utiliser le nom de ligne comme valeur ? Permettez-moi de le simplifier. Il s'agit de notre élément d'en-tête et de notre élément de barre latérale Pour créer cet élément de la barre latérale, nous devons utiliser la propriété GDrawpProperty et la propriété Dans la propriété redraw, nous devons d'abord passer le point de départ de la ligne , puis nous devons passer le point de fin de la ligne Mais dans ce didacticiel, nous n' allons pas utiliser de numéros de ligne. Nous allons créer notre propre nom de valeur. Comme vous pouvez le voir, pour le point de départ, j'utilise le point de départ sur le panneau latéral et pour le point final, j'utilise SideburdN Commençons par l'aspect pratique et voyons comment cela fonctionne. Ici, vous pouvez voir, côte à côte, que j'ouvre mon studio utilisateur Creator et mon navigateur en utilisant l'extension de serveur Lip. J'ai déjà créé un document stimal pour cet exemple où vous pouvez voir une mise en page Web, que je crée à l'aide de grilles Ici, vous pouvez voir un en-tête, une manœuvre pour différentes cases, barre latérale et un pied de page, ici vous pouvez voir le conteneur et tous les DV à l'intérieur de ce conteneur et tous les DV Je crée cette mise en page en utilisant le spanning. Passons au sélecteur profond du conteneur. Ici, vous pouvez voir que nous avons un total trois colonnes de grille avec un A pour valeur. Comme vous pouvez le constater, nous avons un total de cinq rangées de tailles différentes. Pour l'en-tête, j'utilise une hauteur de 150 pixels. Pour la manœuvre, j'utilise une hauteur de 50 pixels, et pour notre troisième rangée, encore une fois, j'utilise une hauteur de 150 pixels Et pour le pied de page, encore une fois, j'utilise une hauteur de 50 pixels Et ici, vous pouvez voir que j'étale mon en-tête du début à la fin de un à moins un, et ici vous pouvez voir que nous utilisons la valeur du quadrillage pour cela Je vais activer mes lignes de quadrillage en mode développeur. Et vous pouvez voir les numéros de ligne. Ce n'est pas un modèle très complexe, mais nous devons parfois faire face à des modèles difficiles ou très complexes. Dans ce cas, il est très difficile de se souvenir ces chiffres et cela peut créer de très gros problèmes. Pour résoudre ce problème, nous attribuons un nom à ces lignes et nous appelons ce processus la dénomination des lignes de grille. Voyons donc comment cela fonctionne. abord, je vais commencer par les lignes, et nous devons attribuer à ces noms de lignes ces valeurs. Donc, pour la première ligne de la grille, je vais utiliser un nom qui est header start. Laisse-moi te montrer. Tout d'abord, je vais utiliser Square Sis. Au lieu de cela, je vais attribuer un nom à notre première ligne, header start. Vous devez juste vous rappeler que vous ne pouvez pas suivre le rythme entre deux orbes. Et je vais activer Word Wrap. Sinon, tu ne peux pas voir mes lignes. Vous pouvez utiliser des tirets, des soulignement ou tout autre caractère Si je commence également cet en-tête, nous devons également terminer cet en-tête, et je veux terminer cet en-tête sur la ligne numéro deux. Je veux utiliser à nouveau le carré*** et à la place le carré***, je vais taper fin d'en-tête, fin d'en-tête. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Je vais maintenant vous montrer comment utiliser ces noms dans notre valeur. Dans notre propriété gredro, je vais taper header start car c'est notre point de départ Et pour notre point de terminaison, je vais utiliser la valeur de fin d'en-tête. Si je sauvegarde ce fichier, vous pouvez voir ici qu'il n' y a aucun changement. Nos noms fonctionnent donc correctement. Passons à la section du menu. Créons un point de départ pour Menu. Pour cela, il n'est pas nécessaire d' utiliser une autre base carrée. Je veux juste utiliser un espace entre fin de l' en-tête et le point de départ du menu. Pour le point de départ du menu, je vais utiliser Manurt Je vais utiliser le nom de démarrage du menu. Commencer à terminer ce menu après 50 pixels, je vais utiliser le nom de fin du menu Menu end. Je vais utiliser ces noms dans nos propriétés de Bedro. Laisse-moi te montrer. Je vais copier le nom de démarrage du menu, et je vais en supprimer deux avec ce nom Pour la valeur de fin de notre menu, je vais utiliser le nom de fin de menu. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Cela fonctionne parfaitement. Similarité, vous pouvez prendre des noms pour toutes les lignes. Ces méthodes de dénomination des lignes sont très utiles lorsque nous travaillons avec des mises en page complexes Je vais maintenant donner un nom à nos colonnes. Ici, vous pouvez voir que nous avons trois colonnes. Mais si vous remarquez, vous pouvez le voir, nous utilisons une valeur de répétition ici, et j'utilise une valeur d'effort pour trois colonnes. Comment attribuer un nom aux valeurs répétées ? Il existe deux méthodes pour attribuer un nom à vos colonnes. Soit vous tapez un effort trois fois et à chaque fois que vous utilisez ces crochets. Sinon, nous pouvons attribuer un nom avec cette valeur de répétition. Laisse-moi te montrer. Avant un nom pour la valeur, je vais utiliser un nom, qui est call start. Et après une valeur d'effort, je vais taper call end. Vous pouvez taper n'importe quel nom comme vous souhaitez, mais il y a un problème. Il va utiliser Call Start et appelé trois fois. abord, il va utiliser Call Start ici, puis il va utiliser Call End ici. Encore une fois, il va utiliser Call Start ici, puis Call End ici et continuer. Comment l'utiliser correctement ? Pour cela, nous devons d'abord taper call Start. Ensuite, nous devons attribuer le point de départ de nos colonnes. Nos colonnes partent d' un smartype. Pour le point de terminaison, je vais utiliser Call end Call. Parce que je couvre jusqu' à trois colonnes, je vais donc utiliser trois cheveux. Vous n'avez pas besoin de remarquer le numéro de ligne ici, vous devez noter le nombre de colonnes que vous souhaitez utiliser. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Il n'y a donc aucun problème. Cela a parfaitement fonctionné. Maintenant, je veux étendre notre en-tête à deux colonnes. Je veux utiliser deux cheveux. Si je configure ce fichier, vous pouvez voir le résultat. Il a utilisé une valeur de deux colonnes pour l'élément d'en-tête. Je voudrais revenir à mon ancien poste, certains pour en utiliser trois. Nous pouvons utiliser la même valeur pour les colonnes de nos menus. Permettez-moi de vous en montrer quelques-unes pour copier la valeur et je vais la remplacer par celle-ci. Comme notre élément de menu occupe une grande partie de la surface d'une colonne, nous pouvons utiliser cette valeur. Si je sauvegarde ce fichier, vous pouvez voir qu'il n'y a aucune modification. Ainsi, vous pouvez attribuer n'importe quel nom à vos lignes et vous pouvez l'utiliser plusieurs fois. J'espère que le concept des noms quadrillés est clair pour vous. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 101. Tutoriel de nommage de zone de grille CSS: C'est bon de vous revoir, les gars. Encore une fois, je suis de retour avec un nouveau tutoriel lié à CSS Grid. Tutoriel en anglais, nous allons apprendre la zone de grille CSS, le nom Dans notre précédent didacticiel, nous avons découvert la dénomination des lignes de quadrillage. Mais dans ce tutoriel, nous allons apprendre à nommer les zones de la grille. Nous utilisons cette méthode pour positionner les éléments de notre grille. Voyons quel type de propriétés nous pouvons utiliser pour le positionnement. Notre première propriété est les zones du modèle de grille et notre deuxième propriété est la zone de la grille. Commençons par la pratique et essayons de comprendre comment cela fonctionne. Comme vous pouvez le voir dans notre précédent tutoriel, nous créons une mise en page de base à l'aide propriétés de la grille et nous attribuons ici des noms aux lignes de la grille. Et en utilisant ces noms, nous positionnons nos articles et les répartissons. Je vais maintenant créer le même modèle sans utiliser les propriétés de ligne de grille et de colonne de grille. Nous n'avons pas besoin d'utiliser des noms de ligne pour cela. Ici, vous pouvez voir que j'ai un autre fichier de table, zone de grille, et je vais utiliser ce modèle. premier temps, nous divisons cette grille en trois colonnes avec un F pour valeur et nous avons déjà fibre fibreuse pour l'en-tête du menu, pour les boîtes et pour le pied Je vais maintenant attribuer un nom différent à chaque élément de la grille. Pour cela, je vais utiliser la propriété de la zone de grille. Dans cette zone de grille, vous pouvez prendre n'importe quel nom. Je vais utiliser le même nom pour cela, qui est header. Et nous n'avons pas besoin d'utiliser des codes inversés pour cela. De même, je vais utiliser la même propriété pour chaque élément de grade. Pour Menu, je vais utiliser le même nom, Menu pour boîte, je vais utiliser la boîte 1. Pour la boîte deux, je vais utiliser la boîte deux. Pour la case 3, je vais utiliser la case 3. De même, pour la case 4, je vais utiliser la case 4. Pour la barre latérale, je vais utiliser le même nom, qui est barre latérale pour Footer, je vais utiliser Si je place ce fichier, vous pouvez voir ici que tout a disparu. Parce que nous n' utilisons aucun positionnement, c'est pourquoi les articles ont disparu. Au plus profond de nos parents, je vais utiliser une nouvelle propriété. Permettez-moi de vous montrer que le nom de notre propriété est excellentes zones de modèles, d' excellentes zones de modèles. Dans les zones du modèle de grille, je vais utiliser des codes doubles. Permettez-moi de vous montrer une chose. Je vais retourner à mon ancien dossier. Vous pouvez voir ici ma mise en page précédente. Si j'appuie sur Aptl et que j'active les lignes de la grille, vous pouvez voir ici que nous avons mis trois colonnes dans notre structure et notre section d'en-tête utilise trois colonnes pour cela Je reviens donc à ma nouvelle mise en page et je vais utiliser ce nom d'en-tête trois fois. Laisse-moi te montrer. Donc, pour copier le nom, je vais le coller ici. En-tête, en-tête et en-tête. Pour trois colonnes, j'utilise ce nom trois fois. Si je place ce fichier, vous pouvez voir le résultat ici. Mais si vous remarquez, cela laisse un espace vide car il prévoit six lignes dans notre structure de grille, et ici nous n'utilisons qu'une seule ligne. Encore une fois, si je vous montre mon ancienne mise en page, vous pouvez voir ici que notre menu utilise également trois colonnes. Donc, dans les codes doubles, je vais utiliser le nom du menu trois fois. Si je configure ce fichier et que je vous montre ma mise en page, vous pouvez voir le résultat ici. Encore une fois, je reviens à mon ancienne mise en page. Ici, vous pouvez voir que dans notre première colonne, nous utilisons la case 1. Dans notre deuxième colonne, nous utilisons la deuxième case, et dans notre troisième colonne, nous utilisons la barre latérale Je vais dupliquer cette ligne, et pour notre première colonne, je vais utiliser le nom de la case 1. Pour notre deuxième colonne, je vais utiliser le nom de la case 2. Pour notre troisième colonne, je vais utiliser le nom de la barre latérale Nous utilisons ces noms de colonnes pour notre troisième ligne, encore une fois, je vais creuser cette ligne. Ici, vous pouvez voir notre quatrième rangée, commencer par la case trois, puis venir par la case quatre, puis revenir à la barre latérale. Je vais taper la case trois, case quatre, puis la barre latérale. Dans notre dernière rangée, vous pouvez le voir ici, nous utilisons trois colonnes pour notre pied de page Je vais utiliser ce nom de pied de page trois fois s' il s'agit du pied de page, du pied de page et du pied de page de Dov TER Et un point-virgule pour terminer cette ligne. Si je définis ce fichier et que je vous montre ma mise en page, vous pouvez voir ici que nous avons créé avec succès notre ancienne mise en page sans utiliser les propriétés de ligne de grille et de colonne de grille. Il s'agit de la deuxième méthode que nous pouvons utiliser pour positionner les éléments de notre grille. Il suffit d'utiliser deux propriétés pour cela. Notre première propriété est la zone quadrillée et notre deuxième propriété est la zone quadrillée des tablettes. Ce type de technique de positionnement est donc très utile pour les petits projets. Si votre mise en page n'est pas complexe, vous pouvez utiliser ce processus. Mais si votre projet est plus complexe et plus volumineux, je ne recommande pas d' utiliser ce processus. Si vous remarquez, vous pouvez voir ici que nous utilisons trois noms de colonne pour chaque ligne. Si je supprime l'un des noms de colonne, n'importe quelle ligne, je vais donc supprimer le menu. Et si je place ce fichier, vous pouvez voir ici que tout a disparu. Parce que nous utilisons trois colonnes, c'est pourquoi nous devons transmettre le nom de trois colonnes. Si j'ai configuré ce fichier, encore une fois , vous pouvez le voir, maintenant il a l'air parfait. Et maintenant, supposons que vous vouliez utiliser deux colonnes pour la section du menu. Dans ce cas, vous devez passer le point ici. Si j'ai défini ce fichier, il fonctionne maintenant. Si vous souhaitez utiliser l' élément de menu uniquement dans la deuxième colonne, dans ce cas, vous devez passer un autre point avant le point de menu. Si je configure ce fichier, vous pouvez voir le résultat. Nous pouvons aligner notre élément de grille et nous pouvons positionner en utilisant simplement des points. Mais vous ne pouvez pas utiliser ce point au milieu de ces deux colonnes. Laisse-moi te montrer. Si je supprime l'en-tête de cet endroit utilise un point pour définir ce fichier, cela peut restaurer votre mise en page Encore une fois, je vais répéter ce processus comme il fonctionne. premier temps, vous devez utiliser une zone de cupidité contenant un nom de propriété pour chaque élément de cupidité, puis vous devez attribuer un Vous pouvez utiliser n'importe quel nom pour cela. Ensuite, dans le sélecteur de conteneur parent, vous devez utiliser une propriété qui correspond aux zones du modèle de grille Ensuite, vous devez vous souvenir du nombre de colonnes que vous attribuez à cette structure de grille. D'après ma mise en page, vous pouvez le voir ici, j' utilise trois colonnes. Donc, dans chaque ligne, nous devons passer trois Valu et ici, vous pouvez voir nous couvrons également notre ligne de barre latérale C'est pourquoi j'utilise ce nom de barre latérale dans les lignes numéro trois et quatrième J'espère que vous comprenez maintenant ce qu'est la dénomination des zones de grille. Merci d'avoir regardé cette vidéo et restez connectés pour notre prochain tutoriel. 102. Tutoriel de la fonction CSS Grid MinMax: Hey, c'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS greet. Dans ce didacticiel, nous allons apprendre la fonction CSS Greet MinMax. Grâce à cette fonction, nous pouvons modifier dynamiquement la hauteur des lignes et des colonnes. Commençons. Dans ce tutoriel, nous allons apprendre deux autres valeurs sans Min Max. Le premier est le contenu maximum, et le second est le contenu minimum. Voyons comment modifier dynamiquement l' augmentation de la largeur. Ici, vous pouvez voir côte à côte que j'ouvre mon Visual Studio Coater et mon navigateur en utilisant l'extension Lip Server Et je crée déjà un document HTML. Comme vous pouvez le constater, dans mon dossier de brevets, nous avons huit ventes différentes sur le réseau et nous déclarons la colonne Ford pour nos ventes sur le réseau avec une valeur FR. Nous avons également deux lignes d' une hauteur de 175 pixels. Commençons par l'aspect pratique. Commençons par l'aspect pratique. Comme vous pouvez le voir dans mon premier élément de grille, il y a un texte, le nom d'abord. Je vais insérer plus de texte dans cet élément de la grille. Luum 20. Il va ajouter 20 mots dans cet élément de la grille. Si je place ce fichier, vous pouvez voir le résultat ici. Permettez-moi de réduire quelques mots , puis je vais configurer ce fichier. Ici, vous pouvez voir qu'il décompose nos lignes en fonction de l' OID de cet élément de la grille Mais que s'est-il passé si j'utilise la valeur maximale du contenu pour notre première colonne, utilisons-la. Je vais utiliser la valeur maximale du contenu pour notre première colonne. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir qu'il n' y a pas de saut de ligne pour ce paragraphe et qu'il déborde également du conteneur en fonction de la taille Si nous utilisons cette valeur, cela ne brisera pas nos lignes. Il va imprimer tous les paragraphes sur une seule ligne. Ce n'est pas très utile pour nos vrais projets. Je vais réduire un mot de ce paragraphe. Ensuite, je vais enregistrer ce fichier. Réduisons encore quelques mots. Maintenant, ça a l'air parfait. Je vais maintenant ajouter du texte dans notre quatrième contenu, Lum, ten, et je vais enregistrer ce fichier. Ensuite, je vais utiliser notre valeur suivante pour cette colonne, qui est le contenu de Mint. Si je place ce fichier, vous pouvez voir le résultat ici. Il change dynamiquement le huit en fonction du plus gros mot de cette phrase. Comme je vais ajouter plus de texte dans cet article. Ajoutons du texte. Barrage 8. Si je définis ce fichier, vous pouvez voir ici que notre texte recouvre l'élément de la grille Pour résoudre ce problème, nous pouvons ajouter une valeur de contenu minimale dans notre ligne. Laisse-moi te montrer. Je vais supprimer la valeur de 170 pixels et ici je vais taper la valeur du contenu Mint. Si je définis ce fichier, vous pouvez maintenant voir qu'il indique la hauteur de l'élément de note, fonction de la zone de texte. Supposons que je veuille ajouter un paragraphe de 50 watts dans notre septième article. Je vais passer au septième élément et je vais taper Lorem 50 Si je définis ce fichier, vous pouvez le voir ici, ici vous pouvez voir, en fonction de la taille du texte, qu'il change de hauteur et de largeur. Il consommera une taille minimale et un poids minimum selon ce texte. C'est pourquoi ce nom de valeur est le contenu principal. Et maintenant, je veux fixer la hauteur minimale de notre ligne. Je vais supprimer un mot de ce texte. Ensuite, je vais configurer ce fichier. Je vais maintenant utiliser la fonction MinMax pour définir une hauteur fixe Laisse-moi te montrer. Je vais utiliser la fonction Min Max ici. Minimum max. Entre cette parenthèse, et ici, nous devons passer les deux valeurs pour taille minimale de pro et pour la taille maximale de pro Supposons que notre hauteur de ligne minimale soit 175 pixels et que pour le maximum, je vais utiliser la propriété du contenu principal. Parce que je souhaite modifier la hauteur fonction de cette taille de contenu, si notre contenu prend plus de 170 pixels de hauteur. Si je définis ce fichier, vous pouvez voir ici par défaut notre ligne a une hauteur de 170 pixels. Mais comme vous pouvez le voir sur notre première ligne, il faut plus de 170 pixels de hauteur car il contient taille supérieure à 170 pixels pour notre valeur maximale, nous utilisons le contenu principal. C'est pourquoi il peut prendre autant de hauteur qu'il le souhaite. La fonction Min Max est très utile pour nos lignes. Ici, nous disons la valeur minimale pour la hauteur de notre article. Mais si notre contenu prend plus de hauteur, nous pouvons utiliser la valeur du contenu principal comme valeur maximale. Mais que s'est-il passé si je dis 200 pixels de hauteur maximale, laissez-moi vous le montrer. Si je définis ce fichier, vous pouvez voir ici, par défaut, notre deuxième ligne prend 175 pixels de hauteur, mais que notre première ligne s'étend jusqu'à 200 pixels, puis notre contenu déborde de cet élément C'est pourquoi nous parlons d'utiliser le contenu principal comme taille maximale. Contenu principal. Maintenant, il peut contenir tout le contenu de notre ligne et maintenant je vais utiliser la fonction MinMax comme valeur de colonne Utilisons-le. Pour notre première colonne, je vais utiliser la fonction MinMax. Je vais définir une largeur minimale de cette colonne, qui est de 150 pixels. De plus, je vais prendre 200 pixels pour la largeur maximale. Et ici, vous pouvez voir que nous avons déjà défini la largeur maximale du conteneur, qui est de 700 pixels. Mais je vais utiliser une valeur en pourcentage ici, 80 %, et cela rendra notre page Web plus réactive. Si je place ce fichier, vous pouvez voir le résultat ici. Ajoutons du contenu à notre première colonne. Lorom six. Ici, vous pouvez voir notre première colonne prendre une largeur maximale de 200 pixels. Si j'augmente la largeur maximale de 300 pixels, puis que je définis ce fichier, vous pouvez maintenant voir les modifications. Par défaut, la largeur sera de 150 pixels et elle peut s'étendre jusqu'à 300 pixels. Après cela, cela va détruire nos lignes. Maintenant, je vais utiliser 200 pixels pour notre largeur minimale. Si j'active mon option développeur et que je sélectionne ce contenu, vous pouvez voir ici que la largeur maximale de ce contenu est de 300 pixels. Si j'essaie de le rendre réactif, puis que je sélectionne cet élément, vous pouvez voir ici que la largeur minimale de cet élément est 200 pixels car nous avons déjà défini une taille minimale pour cette colonne. De même, si nous agrandissons notre fenêtre, laissez-moi vous montrer. Et puis sélectionnez cet élément, vous pouvez voir qu'il ne peut pas s'étendre de plus de 300 pixels. J'espère que maintenant vous comprenez un peu comment cela fonctionne. Si j'utilise une valeur en pourcentage dans notre taille maximale, laissez-moi vous montrer. 60 %. Définissez ensuite ce fichier. Vous pouvez maintenant voir un résultat différent. Cela va prendre 60 % de largeur de ce conteneur. Ici, nous pouvons utiliser la valeur en pourcentage, la valeur de l'air, la valeur en pixels, etc. Mais si je réduis la taille du navigateur et qu'il s' arrête à 200 pixels de largeur, nous ne pouvons pas réduire notre première colonne plus de 200 pixels. J'espère que la façon dont la valeur principale et la valeur maximale sont utilisées est maintenant claire . Merci d'avoir regardé cette vidéo et restez connectés pour notre prochain tutoriel. 103. Tutoriel implicite et explicite de grille CSS: C'est bon de vous voir, les gars. Encore une fois, je suis de retour avec un nouveau tutoriel et dans ce tutoriel, nous allons apprendre la grille implicite et la cupidité explicite Voyons ce que c'est. Ici, vous pouvez voir côte à côte que j'ouvre mon coheor Visual Studio et mon navigateur en utilisant Comme vous pouvez le voir dans mon conteneur parent, nous avons un total de huit cellules de grille. Dans un premier temps, je vais me fixer sur la hauteur. Au début, je vais utiliser la valeur de colonne du modèle de grille, lire les colonnes du modèle et créer deux colonnes avec une valeur effer Pour ceux-ci, je vais utiliser une valeur de répétition. Répétez deux colonnes avec un e ou une valeur. Si je configure ce fichier, vous pouvez voir le résultat. Je vais aussi dire hauteur de ligne. Pour cela, je vais utiliser la propriété des racines tempérées de Crète. Mais je vais dire trois rangées de hauteur à partir de ces quatre rangées. Je vais utiliser la valeur de répétition une fois de plus, répéter la valeur de 100 pixels par une virgule à trois lignes Si je configure ce fichier, vous pouvez voir le résultat. Je vais également créer un espace entre ces cellules. Donc, pour taper, lire, taper la propriété. 20 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez donc voir ici que nous venons définir deux tailles de colonne et trois tailles de ligne. Mais il faut distinguer huit cellules de cette structure. Nous ne stylisons pas notre septième élément de grille et notre huitième élément de grille. Supposons que nous extrayons dynamiquement les données du serveur et que je souhaite afficher ces données dans nos septième et huitième colonnes. Pour ceux-ci, nous devons définir la hauteur, mais nous définissons déjà la hauteur en utilisant la probité des lignes du modèle de grille Quelles sont donc ces colonnes ? Comment définir la hauteur de ces colonnes ? Laisse-moi te montrer quelque chose. Si je fais l'éloge d'Eptel vous montre la barre d'outils de mon développeur et que je clique sur cette icône en forme de grille, vous pouvez voir ici quelques lignes de grille Comme vous pouvez le constater, nous définissons trois lignes et deux colonnes, et nous appelons cette structure « grain explicite », car nous avons explicitement défini cette zone à l'aide de ces deux propriétés Et celui-ci que nous n'avons pas défini, et nous l'avons appelé cupidité implicite Pour styliser cette grille implicite, nous avons donc de nouvelles propriétés. Allons voir ça. Ici, vous pouvez voir nous avons un total de trois grilles implicites liées aux propriétés. Notre premier est celui des lignes automatiques de la grille, second est celui des colonnes automatiques de la grille et notre dernier est celui des flux automatiques de la grille. Commençons par la pratique et essayons de comprendre comment cela fonctionne. Après Grid Gap, je vais utiliser notre nouvelle propriété, qui est Grid Autoros So Type, Grit Auto Ici, nous pouvons définir la hauteur de ligne implicite de notre grille. Pour notre élément implicite, je vais définir une hauteur de 50 pixels. Si je définis ce fichier, vous pouvez maintenant voir que la hauteur implicite de l' élément de note est de 50 pixels. Si nous ajoutons plus de cellules à ce conteneur, laissez-moi vous montrer quelqu'un qui duplique cette ligne deux fois et définit ce fichier. Vous pouvez maintenant le voir définir automatiquement une hauteur de 50 pixels pour ces éléments de la grille. Pour l'instant, je vais supprimer ces colonnes. Je n'en ai pas besoin et j'ai configuré ce fichier. Ici, vous pouvez voir que lorsque nous ajoutons une nouvelle cellule, elle ajoute une ligne. Mais maintenant, je veux ajouter une nouvelle cellule par colonne. Pour cela, nous devons utiliser une autre valeur, qui est le flux automatique de la grille, donc type, grille, flux automatique. Il est livré avec deux types de valeur, ligne et colonne. Par défaut, cela fonctionne avec une ligne. Mais ici, je vais utiliser la colonne. Si je dis ce fichier, vous pouvez maintenant voir le résultat car nous avons déjà défini trois lignes dans notre grille explicite, puis après trois lignes tous les articles de vente seront ajoutés par colonne. Vous pouvez voir ici que nous ne définissons aucune taille de colonne pour cet élément de la grille. C'est pris en fonction de cette taille de texte, et maintenant je veux nous assigner à notre grille implicite. Pour cela, nous devons utiliser une propriété qui est grid auto columns. Et ici, je vais fournir 0,5 e ou valeur pour notre grille implicite. Si je place ce fichier, vous pouvez voir le résultat ici. Nos colonnes de grille explicites prennent un e ou valeur et notre colonne de grille implicite prend un demi-e ou une valeur. Si j'ajoute une colonne supplémentaire à ce conteneur, laissez-moi vous montrer puis définir ce fichier. Maintenant, vous pouvez voir qu'il faut également 0,5 e ou une valeur selon cet élément de la grille. Il s'agit de notre grille implicite et de notre grille explicite. J'espère que c'est maintenant clair pour vous, merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 104. Tutoriel d'alignement des éléments de la grille CSS: Bonjour, les gars. C'est bon de te revoir. Dans ce tutoriel, nous allons apprendre l' alignement des éléments de la grille CSS. Dans notre vidéo précédente, nous verrons comment créer mises en page à l'aide d'éléments de grille CSS et comment positionner ces éléments Mais dans ce didacticiel, nous allons en apprendre davantage sur l'alignement horizontal et l'alignement vertical. Nous avons un total de six alignements de grilles CSS liés aux propriétés. Alignez l'article, justifiez l'article, placez l'élément, alignez-vous, justifiez-vous et placez-le vous-même. Commençons par la pratique et essayons de comprendre comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon code Visual Strew et mon navigateur en utilisant l'extension Life Server, et mon navigateur en utilisant l'extension Life Server, j'ai déjà créé un point d'index de nom de document TML TML Ici, vous pouvez voir que nous avons un total de dix éléments de la grille. Nos six premiers éléments de grille sont des éléments de grille explicites, et nos quatre derniers éléments de grille sont des éléments de grille implicites. Ici, vous pouvez voir que la hauteur de notre élément de grille explicite est de 100 pixels et que notre élément de grille implicite est de 50 pixels. Maintenant, je veux dépenser mon cinquième élément de la grille, et je veux le dépenser par ligne. Pour cela, je vais passer au cinquième sélecteur d'éléments, et ici je vais utiliser une propriété CSS qui est grito Ici, je vais utiliser cet objet sur deux lignes, un peu pour taper, espan, puis je vais en passer deux. Si je configure ce fichier, vous pouvez voir le résultat. Et ici, vous pouvez voir notre dixième élément de la grille et je voudrais utiliser cet élément de lecture par colonne. Je vais passer au sélecteur d'éléments dix, et ici je vais utiliser une propriété CSS, qui est une colonne de grille Je vais taper une colonne de grille. Je veux l'étendre sur deux colonnes. Si je configure ce fichier, vous pouvez voir le résultat. Ici, nous dépensons notre article, ligne par ligne, et ici, nous faisons tourner notre article dans le sens des colonnes. Commençons l'alignement. Tout d'abord, je vais aborder l'alignement vertical. Pour cela, nous devons utiliser align item et align self property. Ces propriétés étaient assorties de quatre valeurs. Laisse-moi te montrer. Le premier est le début, la fin, le centre et l'étirement. Si j'utilise la valeur de départ, cela placera notre contenu, début de ce conteneur signifie à cet endroit. Si nous utilisons la valeur, notre contenu sera placé à cet endroit. Si nous utilisons le centre, il placera notre contenu au centre de cet élément de grille, et Stretch est notre valeur par défaut. Encore une fois, je suis de retour à mon codator Visual Studio Je vais maintenant me lancer dans le conteneur parent Donc, d'abord, je vais utiliser une valeur CSS, qui est align items, sound type align items. Je vais utiliser notre première valeur et notre première valeur est le centre. Si j'enregistre ce fichier, vous pouvez le voir ici aligner notre centre de contenu. Et voici notre processus d'alignement vertical. Si je vous montre mes lignes de quadrillage, vous pouvez les voir clairement ici. Comme vous pouvez le voir, il s'agit de notre élément de grille, et voici le contenu de cet élément de grille. Comme vous pouvez le voir, il appuie sur notre contenu au milieu de cet élément car nous utilisons l'option aligner les éléments au centre. Mais qu'est-il arrivé à notre cinquième article ? Selon cette ligne, cela aligne fin de notre contenu sur cet élément de la grille, mais ce n'est pas le cas. Comme nous couvrons notre cinquième élément de la grille, c'est pourquoi il a utilisé deux éléments et, selon l'élément, il centre le contenu. Vous pouvez également voir le même alignement pour nos éléments de grille implicites. Maintenant, je vais utiliser la valeur finale, SotEnd. Si je définis ce fichier, vous pouvez maintenant voir l'alignement. Ici, vous pouvez le voir aligner notre contenu, à la fin de cet article. De même, si j'utilise la valeur de départ, laissez-moi vous montrer. Et puis définissez ce fichier, vous pouvez voir l'alignement. Ici, vous pouvez le voir aligner notre contenu, début de cet élément, et valeur de notre dernier élément aligné est Stretch. Laisse-moi te montrer. Si j'utilise cette valeur et que je définis ce fichier, il s'agit d'un positionnement d' alignement par défaut. Ce n'est pas très important. Il s'agit d'une valeur par défaut. Pour l'instant, je vais utiliser center Value. Et maintenant je vais parler du soi aligné. Qu'est-ce que align self ? Ici, vous pouvez voir que tout le contenu de l'article est aligné au centre, et maintenant je décide d'aligner différemment notre article de troisième année. Je tiens à dire que je souhaite utiliser Align end value pour ce troisième élément. Je vais passer au troisième sélecteur d'objets. Et pour ce type d'alignement, nous devons utiliser la propriété align self, Sumtyp align Et ici, je vais utiliser la valeur finale. Si je configure ce fichier, vous pouvez voir le résultat. Si j'active les lignes de ma grille, vous pouvez voir ici que tout le contenu est aligné au centre, mais que notre troisième élément de grille est aligné à la fin. Nous ne pouvons utiliser cette propriété que dans une cellule individuelle, pas pour l'ensemble du conteneur. Alors maintenant, il est clair pour vous que si nous voulons appliquer un alignement, tous ces éléments pour cela, nous devons utiliser la propriété align item. Et si nous voulons appliquer des éléments individuels, nous devons pour cela utiliser la propriété des cellules alignées. Je vais maintenant parler de l'alignement horizontal. Pour l'alignement horizontal, nous devons utiliser deux propriétés, justify IM et justify self. C'est similaire à notre précédent, et nous devons utiliser les mêmes valeurs pour cela, start center et stretch. Commençons par l'aspect pratique. Une fois de plus, je reviens à mon créateur de Visual Studio et je vais me lancer dans le conteneur parent Maintenant, je veux aligner notre contenu horizontalement au centre. Pour cela, nous devons utiliser une propriété, qui est justify IM. Et notre valeur est centrale. Si je place ce fichier, vous pouvez voir le résultat ici. Si j'active mes lignes de quadrillage, vous pouvez le voir clairement. Il a centré notre contenu horizontalement. De même, si j'utilise une valeur différente, puis que je définis ce fichier, vous pouvez maintenant voir le résultat. Vous pouvez maintenant voir la fin de cet élément de la grille. De même, nous avons une autre valeur, qui est start. Si j'ai configuré ce fichier, vous connaissez le résultat. Il aligne horizontalement le début du contenu de cet élément de location. Si vous souhaitez déplacer votre contenu, côté ascenseur, vous devez utiliser start, si vous voulez déplacer votre contenu, côté droit, vous devez utiliser end. Comme vous le savez, le stress est notre valeur par défaut, je ne vais donc pas l' expliquer ici. Maintenant, je vais parler de la justification de l'autopropriété. Supposons que vous ayez centré votre premier élément horizontalement. Pour cela, nous devons utiliser justify el property. Laisse-moi te montrer. Ici, je vais utiliser Justify el property. Je vais utiliser la valeur centrale. Si je configure ce fichier, vous pouvez voir le résultat. Si j'active mes lignes de quadrillage, vous pouvez le voir clairement. Si vous devez aligner votre contenu individuellement, vous pouvez utiliser une propriété de cellule justifiée. De même, vous avez un total de trois valeurs pour cela, centre, début et fin. Maintenant, je voudrais parler de deux nouvelles propriétés, place item et place el. Placer l'article est un raccourci, aligner l'article et justifier l'article. Si vous souhaitez utiliser cette valeur une seule ligne, vous pouvez l'utiliser. Dans cette propriété, vous devez d' abord transmettre la valeur de l'élément d'alignement, puis vous devez transmettre la valeur de l'élément de justification entre eux, vous devez fournir un espace. De même, nous avons la propriété place cell. Cela concerne les éléments individuels de la grille. abord, vous devez transmettre la valeur de la cellule d'alignement , puis vous devez transmettre la valeur de justification de l'elfe. Voyons comment cela fonctionne dans la pratique. Encore une fois, je suis de retour chez un créateur de studio visuel. Pour l'instant, je vais commenter ces deux lignes. Je vais d'abord utiliser la propriété de l'élément de place. Je vais taper des objets de place. Comme vous le savez, nous devons d'abord transmettre la valeur de l'élément d' alignement, puis vous devez transmettre la valeur de l'élément de justification. Notre première valeur est le centre. Et notre deuxième hilo est Sir et maintenant je vais configurer ce fichier Si je définis ce fichier, vous pouvez voir ici le même résultat. n'y a aucun changement. Vous pouvez utiliser cette valeur de cette façon ou d'une autre. C'est entièrement de ta faute. Voyons ensuite comment fonctionne la valeur de la cellule de position. Comme vous le savez, cela fonctionne de manière individuelle. Dans notre deuxième article, je vais utiliser cette propriété. Placez-vous. abord, nous devons transmettre une valeur de cellule alignée , puis nous devons transmettre une valeur de cellule justifiée. Je veux fournir un centre. Notre valeur de cellule justifiée est également centrale. Si je configure ce fichier, vous pouvez voir le résultat. Il centre notre contenu horizontalement et verticalement. J'espère donc que vous comprenez maintenant en quoi place self et place items sont du travail. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 105. Tutoriel d'alignement des pistes de grille CSS: Bonjour, les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons en apprendre davantage sur l'alignement des pistes de grille CSS. Pour aligner notre piste, nous devons définir trois propriétés, aligner le contenu, justifier le contenu et placer le contenu . De plus, la propriété du contenu est une version abrégée des termes aligner le contenu et justifier la propriété du contenu. Essayons de comprendre ce qu'est le suivi des éléments de la grille. Ici, vous pouvez voir, côte à côte, que j'ouvre mon ordinateur Visual Studio et mon navigateur en utilisant l'extension de serveur if J'ai déjà créé un document TML nommé index point TML. Ici, je vais utiliser la même structure de grille que celle que j'ai utilisée dans mon précédent tutoriel. Ici, vous pouvez voir un total de dix éléments de la grille. Comme vous pouvez le constater, nous dépensons notre cinquième élément de grille par ligne, nous dépensons également nos dix éléments de grille, par colonne. Dans un premier temps, je vais réduire la largeur des colonnes. Laisse-moi te montrer. Je vais réduire une valeur d'effer et je vais taper 150 pixels Si je définis ce fichier, vous pouvez voir l'alignement. Comme je vais augmenter la hauteur du conteneur. Je vais donc utiliser la propriété de hauteur. Hauteur, 750 pixels. Si je configure ce fichier, vous pouvez voir cet espace. Je vais maintenant vous montrer comment nous pouvons utiliser l'alignement du contenu et le justifier. Mais nous devons d'abord comprendre ce qu'est un contenu justifié. Nous utilisons le contenu de justification pour l'alignement horizontal, et nous avons un total de sept valeurs liées au contenu de justification, au début, à la fin, au centre, à l'étirement, l'espace autour de l'espace entre les deux et à un espace uniforme. Nos trois dernières valeurs sont utilisées pour la propriété du contenu. Laissez-moi vous montrer comment cela fonctionne. Une fois de plus, je suis de retour à mon éditeur de code Wiser Studio. Au début, je vais activer mes lignes de quadrillage, donc je vais faire l' éloge d'Eptel, puis je clique sur Grilles pour voir les lignes de la grille Je vais maintenant utiliser la valeur du contenu ifié. Dans un premier temps, je vais utiliser la valeur centrale. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir tous les éléments de la grille se déplacer ensemble vers le centre de ce conteneur. En utilisant la propriété justify item, nous pouvons centrer notre contenu sur ces éléments. En utilisant la propriété de contenu justifiée, nous pouvons aligner nos éléments de grille à l'intérieur du conteneur. En utilisant un contenu justifié, nous pouvons déplacer l'ensemble de la piste. De même, nous avons une autre valeur, qui est la fin. Si j'ai dit ce fichier, vous pouvez voir le résultat. Horizontalement, il déplace nos éléments de grille à la fin de ce conteneur, et le début est notre valeur par défaut. Laisse-moi te montrer. Si je configure ce fichier, vous pouvez voir le résultat. Je vais maintenant parler de nos trois nouvelles valeurs. Notre première valeur est l'espace entre les deux. Je vais taper un espace entre les deux. Si je configure ce fichier, vous pouvez voir le résultat. Si nous utilisons un espace entre les valeurs, vous allez fournir l'espace restant entre les éléments de notre grille. Comme vous pouvez le voir, cela a divisé les éléments de notre grille de bout en bout. Mais si vous avez trois colonnes, laissez-moi vous montrer. Je vais donc en passer trois ici. Et puis définissez ce fichier, ici vous pouvez voir le résultat. Comme vous pouvez le voir, cela place notre deuxième colonne au centre et divise notre espace vide en deux parties. Et pour l'instant, je vais utiliser deux colonnes. Notre valeur suivante est l'espace autour. Laisse-moi te montrer. Si je place ce fichier, vous pouvez voir le résultat ici. Si nous utilisons cette valeur, comme vous pouvez le constater, elle fournit d'abord un espace, puis notre élément de note, puis vous pouvez voir la taille de l'espace similaire au temps. Encore une fois, notre colonne et un espace aveugle. Vous pouvez voir l' espace égal à gauche et à droite. Comme vous pouvez le voir, la même quantité d' espace après la première colonne. De même, vous pouvez voir cet espace avant la deuxième colonne. Vous pouvez voir plus d' espace au centre, et notre valeur suivante est espace uniforme, somme égale à l'espace t uniformément. Si je définis ce fichier, vous pouvez voir ici qu'il est assez similaire à l'espace autour de la valeur, mais il y a une différence fondamentale. La principale différence est que vous pouvez voir la même quantité d'espace entre nos meilleurs articles. Si cette taille d'espace n'est qu'un effort, vous pouvez voir la même quantité d' espace avant et après la colonne. Il s'agit donc de notre propriété de contenu justifiée. Nous l'utilisons essentiellement pour l'alignement horizontal, et cette propriété fonctionne avec des astuces de grille. Parlons de la valeur de contenu alignée. Nous utilisons la propriété de contenu aligné pour l'alignement vertical. Et comme vous pouvez le constater , cette propriété a sept valeurs . Commencez, terminez, centrez, étirez, espacez l'espace entre les deux et espacez uniformément. Nous connaissons déjà ces quatre valeurs. Mais dans ce didacticiel, nous allons apprendre l'espace autour de l'espace entre les deux et l'espacement uniforme. Revenons-en à l'aspect pratique. Ici, vous pouvez voir que la hauteur de notre conteneur en grille est de 750 pixels. Je vais donc taper le nom de cette propriété, qui est Aligner le contenu. Et notre première valeur est le centre. Si je place ce fichier, vous pouvez voir le résultat ici. Si j'active mon mode développeur, vous pouvez maintenant le voir clairement. Comme vous pouvez le constater, notre contenu est centré verticalement. De même, si j'utilise la valeur finale puis que je définis le fichier, vous pouvez maintenant voir qu'il met notre structure de grille à la fin de ce contenu. Comme vous le savez, start est notre valeur par défaut. Mais maintenant, je vais utiliser un espace de nom de valeur entre, donc pour taper un espace entre. Si je place ce fichier, vous pouvez voir le résultat ici. Ici, vous pouvez le voir mettre notre élément de première année et à notre dernier élément de grille fin à notre élément de première année et à notre dernier élément de grille. Ici, vous pouvez voir les espaces entre tous les éléments de la grille. C'est le cas d'utilisation de l'espace entre les valeurs. Passons à la valeur suivante, qui est l'espace autour. Donc, pour taper de l'espace autour. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Cette valeur fournira l'espace, en haut du contenu et en bas du contenu. Supposons qu'il fournisse dix pixels en haut de cet élément de la grille, et qu'il fournisse également dix pixels en bas de cet élément, et de là vient une zone d'écart de lecture Encore une fois, en plus de ce troisième élément, il fournit une pause de dix pixels. De cette façon, c'est au-dessus de notre dernière valeur que l'espace est uniformément. Donc, pour taper l'espace de manière uniforme. Donc, si je définis ce fichier, vous pouvez voir ici qu'il offre la même quantité d'espace, en haut et en bas de cet élément. C'est le cas d'utilisation de ces valeurs. Permettez-moi de vous montrer une chose. Ici, vous pouvez voir que nous parcourons notre colonne 102 fois. Je vais supprimer la propriété de la colonne d'accueil de l'élément dix. Et maintenant je vais dépenser les objets. Je vais donc le présenter ici. Si je place ce fichier, vous pouvez voir ici une lacune. Ici, vous pouvez voir un espace vide. Si vous travaillez avec une structure de grille complexe, ces problèmes sont parfois gênants. Si vous souhaitez résoudre ce problème, nous avons une autre propriété, savoir le flux automatique du réseau. Laisse-moi te montrer. Donc, tapez, grille, flux automatique. Comme vous le savez, nous devons activer deux types de flux, ligne Voice et la colonne Vise. Je vais utiliser Row Vie. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Mais si j'utilise une autre valeur avec cela, laissez-moi vous montrer. Je vais utiliser une nouvelle valeur qui est dense. Si je définis ce fichier, vous pouvez le voir ici placer notre huitième élément de grille dans l'espace vide. Si j'utilise cette valeur, cela ne remplira pas l'espace vide J'espère que vous comprenez maintenant ce qu'est le suivi par réseau. Restez à l'affût de notre prochain tutoriel. Merci d'avoir regardé cette vidéo. 106. Tutoriel de remplissage automatique de CSS Grid et de ajustement automatique: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre les propriétés de champ automatique et d' ajustement automatique À l'aide de ces propriétés, nous pouvons contrôler la largeur de la grille. Commençons par l'aspect pratique et voyons comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon coordinateur Visual Studio et mon navigateur à l'aide d'une extension de serveur Web, et j'ai déjà créé un document TML Ici, vous pouvez voir un conteneur et à l'intérieur du conteneur, nous avons au total quatre éléments de la grille. Comme vous pouvez le voir, notre conteneur 700 pixels et nous utilisons la propriété de la grille distale Et maintenant je vais le dire à propos de la hauteur de ces objets. Pour l'instant, je souhaite utiliser deux colonnes avec une valeur eher. Je vais donc utiliser la propriété de colonne du modèle de grille, et je vais utiliser une valeur de répétition, répéter deux avec une valeur eer. Si je configure ce fichier, vous pouvez voir le résultat. Et aussi, je vais donner de la hauteur à notre rangée. Je vais utiliser la propriété de ligne de colonne du modèle de grille. Et encore une fois, je vais utiliser la valeur de répétition. Deux lignes d'une hauteur de 150 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Supposons que je ne veuille pas utiliser la valeur de fraction. Je vais taper 100 pixels. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Maintenant, notre colonne de 100 pixels. Sur ce, je veux afficher trois colonnes dans notre ligne. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, je veux ajuster notre quatrième élément de la grille à cet endroit. Pour cela, nous devons utiliser deux valeurs, autofil et autofit Laisse-moi te montrer. À cet endroit, je vais taper Autofill Si je configure ce fichier, vous pouvez voir le résultat. Il place automatiquement notre quatrième élément de concert au troisième élément de concert De même, si j'utilise la valeur d'ajustement automatique, laissez-moi vous montrer et définir ce fichier Ici, vous pouvez voir qu'il n'y a aucun changement. Mais il y a une différence fondamentale. Si j'utilise la valeur autofil, cela créera une piste supplémentaire Laisse-moi te montrer. Je vais donc taper à nouveau le remplissage automatique. Et si j'active la barre d'outils de mon développeur et que je clique sur cette icône en forme de grille, vous pouvez voir ici qu' il y a un espace pour trois éléments de grille, car notre conteneur contient ces 700 pixels et nous avons défini notre élément de grille avec 100 pixels. C'est pourquoi nous avons un espace pour trois éléments de la grille. Mais si j'utilise Autofit Value, laissez-moi vous montrer puis définir ce fichier, puis l'exécuter sur mes lignes de grille. Ici, vous pouvez voir qu'il ne crée pas de lignes de piste supplémentaires Il crée la piste en fonction des éléments de la grille. Supposons que je veuille déplacer l'extrémité de la quatrième colonne de ce conteneur, je vais donc utiliser la valeur de fin de colonne de la grille. Grille, colonne N, et je vais définir la position moins un. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucune modification car la propriété autofit ne crée pas de déclencheur supplémentaire, mais si j'utilise la propriété autofil, laissez-moi vous montrer puis définir Vous pouvez maintenant voir le résultat. Si je cours sur les lignes de la grille, vous pouvez maintenant le voir clairement. Comme la propriété autofil crée une colonne supplémentaire, nous pouvons déplacer notre quatrième élément de grille à l' extrémité de ce conteneur C'est la principale différence entre autofil et autofit value. Je vais maintenant utiliser la fonction Min Mx pour notre colonne. Je vais supprimer celui-ci et définir ce fichier. abord, je vais associer ajustement automatique, puis utiliser la fonction Min Max. Je souhaite définir un conteneur minimum de 150 pixels et un maximum d'une valeur d'effort. Si je configure ce fichier, vous pouvez voir le résultat. Mais que se passe-t-il si je réduis la largeur du conteneur, je vais donc taper 70 % de largeur du conteneur ? Si je place ce fichier, vous pouvez voir ici notre article de quatrième année se réduire. Si je vous montre ma section calculée, vous pouvez voir ici que la largeur de notre conteneur est de 546 pixels et que nous fixons notre élément minimum 150 pixels et si nous multiplions 150 pixels par quatre, cela donnera 600 pixels Comme vous le savez déjà, la largeur de notre conteneur est inférieure à 600 pixels, c'est pourquoi cela réduit notre article de quatrième qualité. Si j'augmente la largeur du conteneur, je vais vous le montrer. Vous pouvez maintenant voir qu'il s'agit notre quatrième élément de fin d'études dans notre première rangée. Si je vous montre la largeur de ma suite, vous pouvez voir ici qu'elle est supérieure à 600 pixels. C'est pourquoi il s'inscrit dans cette rangée. Et de même, si je vous montre la largeur de mon élément de grille, vous pouvez voir ici que la largeur de notre élément de grille est de 167 pixels. Nous ne pouvons pas réduire notre élément de grille en dessous de 150 pixels. Si nous essayons de réduire notre élément de grille avec force, laissez-moi vous montrer ici que vous pouvez le voir réduire notre élément de grille dans la deuxième rangée Et si nous essayons de réduire davantage, vous pouvez voir ici que cela réduit également notre troisième élément de grille la deuxième ligne, car nous ne pouvons pas réduire la largeur de l'élément de grille en dessous de 150 pixels. Sans utiliser de requête multimédia, en utilisant simplement la valeur d'ajustement automatique, nous créons parfaitement notre conteneur réactif De même, si j'augmente la largeur du navigateur, vous pouvez voir ici tous les éléments de la grille sur une seule ligne. Si vous le remarquez, vous pouvez également le voir augmenter la largeur de l'article. La largeur de l'article est maintenant de 245 pixels. Si vous souhaitez afficher tous les éléments de la grille sur une seule ligne, vous devez avoir une largeur de conteneur minimale de 600 pixels. Si je réduis trop la largeur du navigateur et que j'augmente la longueur continue avec des pourcentages, c'est 85 %, et je vais également augmenter la largeur minimale, donc je vais l'augmenter jusqu'à 300 pixels Si je définis ce fichier, vous pouvez maintenant voir un total de quatre lignes. Maintenant, ça a l'air totalement réactif. Comme vous pouvez le constater, nous définissons la hauteur de deux lignes, 150 pixels de hauteur. J'espère que le concept est maintenant clair pour vous, qu'est-ce que la valeur autofil et la valeur autofd Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 107. Tutoriel de contenu de CSS Grid: Bonjour, les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons apprendre une nouvelle grille CSS liée aux propriétés, le contenu adapté. Voyons donc comment nous pouvons l' utiliser dans la pratique. Ici, vous pouvez voir, côte à côte, que j'ouvre mon codateur Visual Studio et mon navigateur en utilisant l'extension Lifesaver, et je crée déjà un document TML nommé index point TML Ici, vous pouvez voir qu'à l'intérieur du conteneur parent, nous avons un total de six éléments de la grille. En gros, ajuster la propriété du contenu fonctionne comme un mix avec la propriété. Utilisons donc cette propriété. Je vais donc supprimer le précédent. Et je vais taper Supposons que je veuille afficher deux colonnes en utilisant le contenu ajusté. Donc, pour taper du contenu. Et entre parenthèses, je vais dire 200 pixels de largeur maximale pour notre première colonne De même, pour notre deuxième colonne, je vais utiliser la propriété fit content. Et pour notre deuxième colonne, je vais utiliser 400 pixels maxwde. Si je sauvegarde ce fichier, vous pouvez voir le résultat ici Ici, vous pouvez voir que pour la première colonne, nous prenons une largeur de 200 pixels, et pour la deuxième colonne, nous prenons une largeur de 400 pixels. Mais si vous remarquez, vous pouvez voir notre article avec la taille du contenu en fonction de la taille. Prenons une autre colonne avec une valeur Eer. Donc, pour taper un ER. Si je configure ce fichier, vous pouvez voir le résultat. Si nous avons dit ajuster la valeur du contenu, nous ne pouvons pas étendre notre colonne de plus de 200 pixels. De même, nous ne pouvons pas étendre notre deuxième colonne de plus de 400 pixels. Donnons du contenu à notre premier article. Dans le premier élément, je vais taper dum. 30. Si je place ce fichier, vous pouvez voir le résultat ici. Si j'active les lignes de ma grille et que je vous montre la largeur de mes cellules, vous pouvez voir ici notre premier élément de grille s'étendre jusqu'à 200 pixels. Si nous utilisons la propriété fit content, nous ne pouvons pas l'étendre de plus de 200 pixels. De même, si j'ajoute du contenu dans notre deuxième élément de grille, laissez-moi vous le montrer puis définir le fichier, vous pouvez voir ici le résultat. Si je vous montre la taille de ma cellule, vous pouvez la voir ici s' étendre jusqu'à 400 pixels, pas plus de 400 pixels. Parce que j'ai dit largeur maximale de cette cellule de grille en utilisant la propriété fit content. Pour notre troisième colonne, nous utilisons la valeur de la fraction, afin qu'elle puisse changer de taille en fonction du contenu. En gros, cette technique est très utile pour la galerie d'images. De plus, vous pouvez remarquer que nous ne pouvons pas voir l'intégralité du contenu de cet article. Pour cela, nous pouvons utiliser MNMXFunction dans nos lignes. Laisse-moi te montrer. Je vais donc supprimer celui-ci, et je vais dire Man max. À l'intérieur de la parenthèse, nous pouvons définir ici la hauteur minimale de notre élément de grille Je veux dire une hauteur minimale de 200 pixels. Ensuite, si vous souhaitez étendre la hauteur du gril en fonction du contenu, vous pouvez utiliser pour cela la fonction principale du contenu. Laissez-moi vous montrer le contenu d'Amin. Si je place ce fichier, vous pouvez voir le résultat ici . Maintenant, ça a l'air parfait. Nous avons découvert la propriété du contenu principal dans nos précédents didacticiels. J'espère que vous comprenez maintenant quel est le cas d'utilisation de la propriété fit content. Merci d'avoir regardé cette vidéo Restez connectés pour notre prochain tutoriel. 108. Tutoriel de propriété de commande de grille CSS: Bonjour, les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons apprendre une nouvelle propriété de positionnement des éléments de la grille, qui est la propriété de l'eau. Voyons donc comment utiliser cette propriété. Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur Visual Studio et mon navigateur à l'aide de l'extension de serveur Lip, et j'ai déjà créé un document TML nommé index point TML Ici, vous pouvez voir à l'intérieur de mon contenant de brevets, nous avons au total six éléments de la grille. Ainsi, en utilisant la propriété de l'eau, nous pouvons modifier la position des cellules de la grille. Supposons que vous souhaitiez déplacer la première cellule de la grille en sixième position. Pour cela, vous pouvez utiliser la propriété Water. Dans nos précédents tutoriels, nous en apprenons davantage sur le positionnement. Mais dans ce tutoriel, nous allons nous positionner en utilisant la propriété de l'eau. Supposons que je veuille déplacer l' élément une en six positions. Pour cela, je vais accéder à l'objet ou au sélecteur, et je vais utiliser la propriété Water Commande. Ici, je vais passer une valeur. Si je place ce fichier, vous pouvez voir ici qu'il déplace automatiquement notre contenu en position de luxure L'arrosage commence dans la direction opposée. C'est pourquoi on en est venu à l'endroit de la luxure. Et de même, si j'utilise une valeur nulle puis que je définis le fichier, vous pouvez voir ici qu'il n' y a aucun changement dans l'ordre. La valeur par défaut de cette propriété est zéro. Mais si je passe l'ordre deux puis que je configure le fichier, vous pouvez voir ici qu'il arrive également premier lieu parce qu' il n'y a pas de commande 1. Supposons maintenant que je veuille déplacer notre deuxième article dans le premier ordre. Pour cela, je vais passer au sélecteur d'articles, et je vais taper la propriété de la commande. Commandez-en un. Si je place ce fichier, vous pouvez voir le résultat ici. Maintenant, c'est notre position de commande numéro un. Supposons maintenant que je veuille déplacer le quatrième élément en troisième position. Passons au quatrième sélecteur, et je vais taper l'ordre trois Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. C'est notre position sur l'eau une, voici notre position deux, et voici notre troisième position. Tout d'abord, nous arrosons notre article un en deuxième position. Il est arrivé à la deuxième position, puis nous arrosons notre article deux en première position. Il est arrivé en première position, puis nous arrosons notre quatrième objet en troisième position et vous pouvez voir le résultat. Il est arrivé en troisième position. Comme vous pouvez le constater, nous ne travaillons pas avec le troisième, cinquième et le sixième élément, il a été proposé. Supposons maintenant que vous souhaitiez déplacer le troisième élément derrière le quatrième élément. Je vais donc utiliser à nouveau la propriété de l' eau, l'eau, et je vais passer quatre valeurs Si j'ai dit ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir que notre troisième article est passé sixième position parce que nous utilisons quatre valeurs Notre première position de commande est donc celle-ci. Et c'est notre position de second ordre. Et c'est notre troisième position de commande, et c'est notre quatrième position de commande. Alors maintenant, vous comprenez comment cela fonctionne. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 109. Tutoriel sur les grilles imbriquées: Bonjour, les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons en apprendre davantage sur les grilles imbriquées Essayons donc de comprendre ce qu'est une grille imbriquée. Ici, vous pouvez voir un conteneur de grille, et à l'intérieur de ce conteneur de grille, nous devons accéder à ces cellules de grille. Vous décidez maintenant d'ajouter d' autres cellules de grille à l'intérieur de cette cellule de grille. Ensuite, vous devez convertir cette cellule de grille en conteneur de grille, puis vous pouvez ajouter d'autres cellules de grille à l'intérieur de ce conteneur, quelque chose comme ça. Nous appelons l'ensemble de ce système des grilles imbriquées. À l'aide d'une grille imbriquée, nous pouvons convertir une cellule de grille parent en conteneur de grille Commençons par l'aspect pratique et voyons comment nous pouvons le créer. Comme vous pouvez le voir côte à côte, j'ouvre mon coordinateur Visual Studio et mon navigateur à l'aide de l'extension Light Server, et je crée déjà un document TML nommé index point TML Comme vous pouvez le voir dans mon conteneur parent, j'en ai quatre qui lisent et je veux maintenant en ajouter d'autres dans la quatrième case de la grille. Pour ceux-ci, nous devons utiliser propriété de la grille d'affichage pour l'élément quatre Dans le quatrième sélecteur d'éléments, je vais utiliser la propriété d'affichage, la grille d'affichage Maintenant, il convertit notre cellule en un conteneur GET. Nous pouvons maintenant ajouter d'autres cellules de grille à l'intérieur de ce conteneur. Laisse-moi te montrer. Je vais supprimer ce texte et dans ce div, je vais créer quatre autres points Dev Dev SUB b un, et je vais dupliquer cette ligne trois fois. Et je vais également numéroter dans leur nom de classe les sous-deux, sous-trois et sous-quatre. Dans ces cases de la grille, je vais taper A, B, C et D. Si je définis ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, nous créons quatre cellules de lecture dans le quatrième conteneur, et maintenant je vais attribuer de la largeur à nos cellules. Pour cela, je vais utiliser la propriété de colonne du modèle de grille. Colonnes de modèles de cupidité, et je souhaite attribuer deux colonnes avec une valeur F, une FR, une FR. Si je configure ce fichier, vous pouvez voir le résultat. Fixons une couleur d'arrière-plan à cette profondeur. Sinon, il ne sera pas visible. Je vais donc sélectionner le point quatre. Dans le quatrième élément, je vais sélectionner toutes les profondeurs. Puis, dans le fond du caribou, lisez. Si je sauvegarde ce fichier, vous pouvez voir le résultat. Comme vous pouvez le voir, il n'y a pas d' espace entre ces cellules, je vais donc utiliser la propriété grid gap. Lisez, écartez, dix pixels. Si je définis ce fichier, vous pouvez maintenant voir clairement les cellules. Comme vous pouvez le voir, dans un conteneur ParatentGrid, nous avons un total de quatre cellules, puis nous convertissons notre quatrième cellule de grille en À l'intérieur de ce conteneur, nous avons également quatre cellules de grille. Nous appelons ce processus une grille imbriquée. En utilisant l'intérieur d'un élément de grille, nous pouvons insérer plus d'éléments de grille, et vous pouvez également insérer plus d'éléments de grille dans ces sous-éléments de grille. Supposons que vous souhaitiez insérer quatre autres éléments de grille dans cette cellule A. Encore une fois, vous devez suivre la même procédure. abord, vous devez utiliser la grille de propriétés d'affichage pour cette vente, puis vous pouvez ajouter d'autres éléments de la grille dans cette vente. Si je vous montre la barre d'outils de mon développeur, vous pouvez voir ici à l'intérieur de cette grille, nous avons une autre structure de grille, et vous pouvez voir les lignes de cette structure de grille. Si je vous montre ma section de mise en page, vous pouvez voir ici dans les superpositions de grille, nous avons un système de grille à deux au total, notre système de grille de conteneurs principal, et ensuite notre système d'éléments de grille de superposition, et vous pouvez désactiver et activer vos lignes de grille selon votre choix Merci d'avoir regardé cette vidéo. J'espère que vous comprenez maintenant ce qu'est une grille imbriquée. Restez à l'affût pour notre prochain tutoriel. 110. Tutoriel de superposition d'éléments de grille: C'est bon de vous revoir, les gars. Il s'agit de notre dernier tutoriel relatif à la grille CSS. Dans ce didacticiel, nous allons apprendre ce que sont les éléments de la grille qui se chevauchent Alors, allons de l'avant et essayons de comprendre ce que c'est. Ici, vous pouvez voir un conteneur quadrillé. Et à l'intérieur de ce conteneur quadrillé, nous avons au total trois éléments de grille. Et comme vous pouvez le constater, les objets se chevauchent. Et nous l'avons appelé éléments de grille qui se chevauchent. Et maintenant, tu veux d'abord jouer au green une partie, quelque chose comme ça. Voyons donc comment créer les objets de cupidité qui se chevauchent Avec cela, nous allons apprendre comment modifier l'ordre de pile de ces objets de cupidité L'ordre de pile signifie un indice Z. Commençons donc par la pratique et essayons de comprendre comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon codtor Visual Studio et mon navigateur en utilisant l' extension de serveur if et que je crée déjà un document HTML nommé index point Comme vous pouvez le constater, je crée déjà une structure en grille. Il y a trois éléments de grille dans cette structure de grille. Comme vous pouvez le voir, notre conteneur mesure 400 pixels et notre colonne 200 pixels. La hauteur de notre ligne est également de 200 pixels. Essayons de superposer les éléments de la grille. Dans un premier temps, je veux couvrir notre élément de la grille rouge. Je veux l'étendre sur deux colonnes. Pour cela, je vais utiliser la propriété de colonne de la grille. Un à partir de la colonne un, deux, intervalle deux. Si je configure ce fichier, vous pouvez voir le résultat. Nous couvrons la deuxième colonne de notre article. Comme je vais étendre cet élément par ligne avec deux colonnes. Laisse-moi te montrer. Je vais utiliser grado PupityRadow à partir de la première ligne, . Si je configure ce fichier, vous pouvez voir le résultat. Alors maintenant, notre premier élément s'étend sur deux colonnes et deux lignes, notre deuxième élément et notre troisième élément sont nos éléments de grille implicites. Je vais maintenant attribuer une largeur maximale tous ces éléments de la grille. Comme vous le savez, nous utilisons cet élément plus de tous ces éléments de la grille. Je vais donc utiliser la propriété Max Width, je vais taper une largeur maximale de 200 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, je vais aligner notre première cellule verticalement. Je vais taper, aligner self sir. Si je définis ce fichier, vous pourrez voir le résultat. Si je vous montre mes lignes de quadrillage, vous pouvez voir ici qu'il occupe toute la surface. Parce que nous utilisons la propriété Aligned cell, c'est pourquoi elle semble plus petite. Si je commente cette propriété et que je définis ce fichier, vous pouvez voir le résultat. Mais pour créer une grille superposée aux éléments qui en ont besoin, je vais donc annuler le commentaire et définir ce fichier Je souhaite maintenant déplacer notre deuxième élément au centre de cette page. Pour ceux-ci, je vais utiliser les mêmes propriétés pour le deuxième élément. Si je passe le code et que je configure le fichier, vous pouvez le voir ici chevaucher notre premier élément de fin d'études, mais je veux le placer au milieu. Je vais utiliser la propriété align el, Align center. Si je configure ce fichier, vous pouvez voir le résultat. Nous alignons verticalement notre article, au centre de ce conteneur. Je vais maintenant centrer horizontalement cet élément de la grille. Pour cela, je vais utiliser et justifier propriété personnelle, justifier le centre de soi. Si je configure ce fichier, vous pouvez voir le résultat. Pour notre troisième élément de grille, je vais utiliser la propriété se. Mais je veux aligner notre extrémité de ce conteneur. Je vais utiliser align self end. Et justifiez également l'autodestruction. Si je configure ce fichier, vous pouvez voir le résultat. Je n'ai pas besoin de cette couleur de fond orange, je vais donc la supprimer. Maintenant, tous les objets de cupidité occupent la même surface. Nous alignons simplement les éléments, au début, au centre et à la fin, mais leur taille de colonne et leur position sont les mêmes. Je vais maintenant ajouter du texte dans tous les éléments. Dans le premier point, je vais taper Lum 15. Cela va ajouter un caractère de 15 watts. Il peut ajouter un paragraphe de 15 watts dans notre article, et je vais copier le paragraphe et coller dans notre deuxième article. Toujours dans notre troisième article, si je définis ce fichier, vous pouvez voir le résultat. Hé, nous devons ajouter plus de personnages pour superposer cet objet. Je vais coller ce caractère une fois de plus. Si je définis ce fichier, vous pouvez maintenant voir qu'il se chevauche. Je vais maintenant vous montrer comment modifier l' ordre de pile de cet objet. Pour modifier l'ordre des piles, nous devons utiliser notre ancienne propriété, qui est l'index Z. Maintenant, je veux mettre le premier élément au premier plan. Pour cela, je vais utiliser la propriété d'index Z. Je vais taper un index Z. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez voir qu'il est arrivé en haut et maintenant je veux mettre l'article orange en haut du. Pour cela, nous devons utiliser la valeur de l'indice Z deux. Donc, pour taper Z index deux. Si je configure ce fichier, vous pouvez voir le résultat. Vous savez maintenant comment nous pouvons contrôler les zones de superposition. Voyons maintenant si je supprime tout l'alignement de ce conteneur. Et puis définissez le fichier. Ici, vous pouvez voir le résultat. Désormais, tous les éléments de la grille existent toujours au même endroit. Maintenant, je veux montrer notre élément de la grille verte. Pour cela, nous devons à nouveau utiliser la valeur de l'indice Z. Z index trois, si je définis ce fichier, vous pouvez voir le résultat. J'espère que vous avez maintenant dissipé vos doutes quant au chevauchement. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain studio. 111. Qu'est-ce que Flexbox: Bonjour, les gars. C'est bon de te revoir. Voici la vidéo d'introduction de CSS Flexbox. Essayons de comprendre ce qu'est Flexbox. En gros, Flexbox est un nouveau module en CSS 3. Cela rend l'alignement très facile dans différentes directions et dans différents ordres. Il donne au conteneur la possibilité d'étendre et rétrécir les éléments pour utiliser au mieux tout l'espace disponible. C'est le meilleur moyen d'utiliser tout l'espace disponible. Notre point suivant est que la mise en page CSS Flexbox remplace la mise en page flottante Semblable à la disposition en grille, elle peut également remplacer la disposition flottante. Cela nous a beaucoup facilité la tâche. Flexbox vous permet de créer une mise en page unidimensionnelle très facilement. La grille CSS n'est pas unidimensionnelle. Il est bidimensionnel, mais CSS Flexbox est unidimensionnel Vous ne pouvez pas gérer simultanément la hauteur des lignes et la largeur des colonnes. À la fois, vous ne pouvez gérer qu'une seule dimension. Ligne, sinon colonne. Supposons qu'il s' agisse de notre conteneur principal à l'intérieur de ce conteneur parent, nous avons quatre sous-dps Nous appelons le conteneur flex container, et si vous souhaitez le créer flexbox, vous devez utiliser la propriété display. Écran flexible. Dans notre conteneur parent, nous devons utiliser cette propriété, puis la convertir en conteneur flexible. Tous les articles contenus dans le conteneur flexible sont désormais des articles flexibles. Comme je vous l'ai dit plus tôt, flexbks fonctionnent de manière unidimensionnelle Par ligne, sinon par colonne. Si nous parlons de lignes, cela signifie voie horizontale. Pour cela, nous appelons l'axe principal. Sinon, vous pouvez l'appeler ligne. Si je parle de dimension verticale, nous l'appelons axe transversal. Sinon, vous pouvez l'appeler colonnes. Voyons une petite démonstration façon dont nous pouvons utiliser une boîte flexible. Ici, vous pouvez voir côte à côte que j'ouvre mon Visual Studio Creator et mon navigateur en utilisant l'extension if server, et je crée déjà un document TML nommé index point HTML Comme vous pouvez le voir, il existe un parent deep, qui classe le conteneur à l'intérieur de ce conteneur parent Nous avons un total de quatre éléments. Comme vous pouvez le constater, nous utilisons différentes classes pour tous les éléments 1, 2, 3 et 4 J'ai déjà défini une couleur d'arrière-plan pour tous les sous-ensembles Comme vous pouvez le constater, notre conteneur parent en contient 600. Lorsque j'ai défini une couleur d'arrière-plan, marge et une bordure pour ce conteneur parent. Maintenant, si je veux en faire un conteneur flexible pour ceux-ci, nous devons utiliser la propriété d'affichage, l'affichage et je vais utiliser la valeur flexible. Comme vous pouvez le constater, nous avons placé les quatre rangées dans notre conteneur parent. Si je définis ce fichier, comme vous pouvez le voir, il enregistre automatiquement tous les éléments sur une seule ligne. Maintenant, il n'est pas clair pour vous que lorsque nous convertissons notre conteneur parent en une boîte flexible, quel que soit l'article contenu dans notre conteneur, il est livré dans une rangée. Dans notre prochain tutoriel, nous allons découvrir de nouvelles propriétés. Voyons les propriétés. Sont un total de 12 propriétés que vous pouvez utiliser avec Flex Box. Flex direction, flexap, flex blow, flex grow, flex syn, flex basics, flex, justify content, aligned content, align item, align self, at last water Pour l'alignement, nous utilisons cette propriété et nous en avons déjà parlé dans notre chapitre sur la grille Dans notre prochaine vidéo, je vais vous parler de toutes les propriétés. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 112. Tutoriel CSS Flexbox Flex Direction: C'est bon de vous voir. Dans ce didacticiel, nous allons apprendre ce qu' est la propriété de direction du flex. Voyons les valeurs de cette propriété. Comme vous pouvez le constater, nous avons un total quatre valeurs liées à la direction de flexion CSS, à l'inverse de ligne, à la colonne et à ClumRvers Et row est notre valeur par défaut dans cette propriété. Commençons donc par la pratique et voyons comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon coordinateur visuel sto et mon navigateur en utilisant l'extension if server, et je crée déjà un document TML, nommé index point TML, comme vous pouvez le voir dans mon document, il y a un conteneur, et à l'intérieur de ce conteneur, nous avons au total quatre éléments flix Et comme vous pouvez le constater, nous transformons déjà notre conteneur Flexbox. Et vous savez déjà que si nous utilisons la propriété flex, nos éléments sont placés sur une seule ligne. Et dans ce tutoriel, nous allons parler de la propriété de direction du flex. Cette propriété est liée au conteneur et non aux articles. Je vais l'utiliser après la propriété display, et je vais taper flakes direction, notre première valeur est row. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Comme je vous l'ai dit, row est la valeur par défaut. Si vous l'utilisez, cela n'aura aucun effet sur votre structure par défaut, suivez les lignes de gauche à droite. Mais si j'utilise la valeur inverse de la ligne, laissez-moi vous montrer puis définir le fichier, vous pouvez maintenant voir le résultat. Ici, vous pouvez voir que l'ordre de notre article est inversé. Maintenant, la direction est de droite à gauche. Il s'agit d'un cas d'utilisation de la valeur inverse de ligne et notre valeur suivante est la colonne, laissez-moi vous le montrer. Je vais taper une colonne. Cette valeur fonctionne verticalement. Si je configure ce fichier, vous pouvez voir le résultat. En gros, il suit l'ordre du haut vers le bas. Comme vous pouvez le voir, premier, deuxième, troisième, quatrième, si vous souhaitez l'organiser de bas en haut, vous devez utiliser une autre valeur, qui est l'inverse de la colonne. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir que notre premier article est arrivé au bas de la page. Puis sont arrivés deuxième, puis troisième, et notre dernier article est arrivé en première position. Il s'agit essentiellement de changer la direction de bas en haut. Si j'utilise uniquement la valeur de colonne, la direction sera de haut en bas. Il s'agit de la propriété de direction du flex. Comme je vous l'ai dit tout à l'heure, il s'agit d'un travail unidimensionnel. À la fois, cela fonctionne par ligne, sinon par colonne, et vous ne pouvez pas gérer les lignes et les colonnes ensemble. J'espère que la propriété flex direction est maintenant claire pour vous, merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 113. Tutoriel CSS Flex Wrap et Flex Flow: C'est bon de vous revoir encore et encore avec un nouveau tutoriel lié à Flexbox. Dans ce didacticiel, nous allons découvrir ce que sont FlexAP et Flex Flow Ces deux nouvelles propriétés sont très importantes dans notre flexbox. Sans plus de discussion, commençons donc par la pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur Visual Studio et mon navigateur en utilisant l'extension Clip Server, et je crée déjà un document HTML nommé index Vous pouvez voir ici que dans notre conteneur, nous avons un total de quatre articles flexibles et la taille de notre conteneur est plus grande que celle des articles flexibles. Si j'augmente l'article flexible dans cette boîte, sinon, si je réduis la largeur du conteneur, dans ce cas, les articles sont survolés vers ce Laisse-moi te montrer. J'ai déjà créé six autres éléments flexibles, et je vais supprimer les balises DIP, et je vais définir ce fichier Vous pouvez maintenant voir que nous avons un total dix articles flexibles dans notre conteneur, et maintenant je vais réduire la largeur du conteneur. Utilisation de la propriété width. Je vais donc taper avec 400 pixels. Si je place ce fichier, vous pouvez voir le résultat ici. Vous pouvez voir ici que des articles flexibles sont survolés vers ce conteneur De même, si j'utilise propriété de hauteur, que j' augmente la hauteur 200 pixels et que je définis ce fichier, vous pouvez voir ce résultat. Mais si je change le sens de flexion, laissez-moi vous montrer le flex. Direction, colonne, puis définissez le fichier. Vous pouvez maintenant constater, une fois de plus, des articles flexibles sont survolés vers ce conteneur Pour résoudre ce problème, nous avons une autre propriété flex , Flex RAP. En gros, flex Rap a trois valeurs, NoaPrap et RF reverse NoAP est notre valeur par défaut. Que vous l'utilisiez ou non, cela débordera de données. Voyons comment cela fonctionne. Pour cela, je vais utiliser ligne de direction flexible et je vais également définir la largeur de ce conteneur. Avec 400 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Et maintenant je vais utiliser la propriété flex Rp, FlexAP. Dans un premier temps, je vais utiliser nob value. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement car il s'agit de la valeur par défaut de cette probabilité, donc cela n' affectera pas les éléments flexibles. Si vous souhaitez l'encapsuler, vous devez utiliser Rav Value. Laisse-moi te montrer. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Vous pouvez maintenant voir notre conteneur avec ce conteneur en acier de 400 pixels, mais il enveloppe parfaitement notre article flexible à l'intérieur de ce conteneur. Comme vous pouvez le voir, il passe automatiquement à la ligne suivante. Faisons une marge entre cet ancien article. Je vais taper une marge de cinq pixels. Si je configure ce fichier, vous pouvez voir le résultat. Vous savez maintenant que lorsque les données débordent de la première ligne, elles passent automatiquement à la ligne suivante Ensuite, il passe automatiquement à la ligne suivante. Mais si je change également la colonne de direction du flex je souhaite également utiliser la propriété height, hauteur 200 pixels, et je vais commenter la propriété wide Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Vous pouvez voir qu'il est défini dans l'ordre vertical, premier , deuxième, troisième, quatrième, cinquième, six, septième, huit, 19. J'espère que vous comprenez maintenant comment les éléments sont placés dans l'ordre vertical. Je vais maintenant utiliser la valeur suivante de cette probabilité, qui est rap reverse. Je vais taper rap reverse. Si je définis ce fichier, maintenant vous pouvez voir qu'il suffit d' inverser l'ordre des éléments. Maintenant, il va commencer par le côté droit et se terminer du bout des lèvres. Si je change la direction de flexion, les lignes et la configuration avec ce conteneur. Et changez la hauteur et définissez ce fichier. Comme vous pouvez le constater, nos articles commencent à partir de la deuxième ligne de ce conteneur. Premier, deuxième, troisième, quatrième, cinquième, sixième, sept, huit, 19. En gros, nous utilisons la propriété p pour contrôler les données de débordement. J'espère que vous avez compris, et notre prochaine propriété est le flex flow. Qu'est-ce que Flex Flow ? Il s'agit d'une propriété abrégée de flex arrivée et flex direction. En utilisant une seule propriété, vous pouvez contrôler les deux propriétés et nous pouvons l'utiliser sur une seule ligne. Je vais utiliser la propriété Flex Flow, Flex Flow. Ici, nous devons d'abord fournir une valeur de direction de flexion, puis nous devons fournir une valeur de répétition de flexion Tout d'abord, notre valeur de direction de flexion est colonne, notre valeur de flexion p est rare Je vais commenter ces deux propriétés et je dois également commenter avec propriété, car nous utilisons valeur de colonne et je vais annuler la propriété de hauteur Si je définis ce fichier, nous pouvons voir ici qu'il fonctionne parfaitement. Si je n'utilise pas de valeur ici, et que je définis ce fichier. Vous pouvez maintenant voir que nos articles flexibles sont survolés vers ce conteneur En gros, Flexplo est une combinaison des deux propriétés, flex direction et FlixAP J'espère que les concepts sont maintenant clairs pour vous : qu'est-ce que FlexAP et Flixlo ? Merci donc d' avoir regardé cette vidéo Restez connectés pour notre prochain tutoriel. 114. Tutoriel CSS Flexbox Justify: Salut, encore une fois, je suis de retour avec un nouveau didacticiel lié à Flexbox et dans ce didacticiel, nous allons apprendre à justifier la propriété du centre Revenons au flux informatique. Fondamentalement, nous utilisons la propriété justify content pour l'alignement horizontal. Cette propriété a une valeur totale de six. Laisse-moi te montrer. Notre première valeur est le flex start. Il s'agit également d'une valeur par défaut. Viens ensuite le centre, l'espace autour, l'espace entre les espaces uniformément. Elle est très similaire à notre propriété de grille, justifier le contenu, et nous en avons savoir justifier le contenu, et nous en avons déjà parlé dans notre section sur la grille. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon coordinateur Visual Studio et mon navigateur à l'aide de l'extension de serveur Web À l'intérieur du conteneur de brevets, nous avons au total quatre articles flexibles. Je vais maintenant l'aligner en utilisant la propriété justify content. Type de son, justifiez le contenu. Dans un premier temps, je vais utiliser la valeur centrale. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, il déplace tout le centre de flexion de ce conteneur. Ensuite, je vais utiliser flex end value. Extrémité flexible. Si je définis ce fichier, comme vous pouvez le voir, il efface tous les éléments flexibles dans le coin droit de ce conteneur, et flex tart est la valeur par défaut de cette propriété Si j'utilise cette propriété, laissez-moi vous montrer et définir ce fichier. Comme vous pouvez le constater, il s'agit d'une valeur par défaut. Si j'utilise une valeur de flexion ou non, cela renverra ce résultat. Notre valeur suivante est l'espace entre les deux. Type de son : espace entre les deux. Si je définis ce fichier, comme vous pouvez le voir, il déplace notre premier et dernier élément de bout en bout de ce conteneur. Si je supprime la marge, c'est maintenant plus clair pour vous. Comme je vais retirer le rembourrage. Vous pouvez maintenant voir le résultat et je vais ajouter tout l'espace entre ces éléments. Il a divisé cet espace de manière égale entre les éléments flexibles. Notre valeur suivante est l'espace autour. Laisse-moi te montrer. Si je définis ce fichier, vous pouvez maintenant voir qu'il fournit un espace égal en premier et en dernier de cet élément. Et entre ces éléments, il offre un double espace. Comme vous pouvez le constater, il fournit un espace égal avant le premier élément et un espace au-dessus du premier élément De même, il fournit un espace égal avant le deuxième élément et au-dessus du deuxième élément C'est pourquoi l'écart entre les éléments développe ce premier écart, et notre dernière valeur est l'espace uniformément. Si j'utilise ce v et que je définis ce fichier, comme vous pouvez le voir, il fournit un écart similaire entre les éléments flexibles. J'espère que vous comprenez maintenant comment nous pouvons aligner horizontalement nos articles flexibles. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 115. Tutoriel CSS Flexbox Align Items: Bonjour, les gars. C'est bon de te revoir. Encore une fois, j' arrive avec un nouveau tutoriel lié à la boîte flexible CSS. Dans ce didacticiel, nous allons apprendre à aligner la propriété d'un élément. Nous utilisons la propriété align item pour l'alignement vertical, et nous avons un total de cinq valeurs liées à la propriété align items, au centre FlexRTFLX, à la contrainte et à la ligne de base Si nous utilisons la valeur flexart, sera placé mon article flexible sera placé au-dessus de ce conteneur Si nous utilisons la valeur flex N, mon article flexible sera placé au bas de ce conteneur. Si vous souhaitez aligner le centre verticalement, dans ce cas, vous pouvez utiliser la valeur centrale étirement est notre valeur par défaut, mais la valeur de référence est différente. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon coordinateur Visual Studio et mon navigateur en utilisant Comme vous pouvez le constater, nous avons déjà créé un continuateur et dans ce conteneur, nous avons au total quatre articles flexibles. Comme vous pouvez le voir, nous utilisons la propriété display flex. Grâce à cette propriété, nous pouvons convertir notre conteneur en conteneur flexible. Je vais utiliser cette propriété, qui est align item, align items. Notre première valeur est l'étirement. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement car il s'agit d'une valeur par défaut. Nous travaillons avec un alignement vertical, nous devons donc augmenter la hauteur du conteneur, la hauteur, 500 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Par défaut, l'élément d'alignement utilise la valeur d'étirement. Je vais maintenant utiliser la première valeur, qui est flex start. Si je définis ce fichier, comme vous pouvez le voir, l'alignement vertical de cet article se situe maintenant en haut du conteneur. De même, si j'utilise flex end value et que je définis ce fichier, comme vous pouvez le voir, tous les éléments sont alignés en bas de ce conteneur. Si vous souhaitez aligner cet article, au centre de ce conteneur, vous pouvez utiliser la valeur centrale Aligner le centre de l'article, vous pouvez voir le résultat. Il aligne tous les articles flexibles au centre de ce conteneur. Ajoutons un peu de hauteur dans notre troisième article. Je vais utiliser la propriété de hauteur dans notre troisième élément, hauteur 50 pixels. Si je définis ce fichier, comme vous pouvez le voir, hauteur de notre troisième élément est maintenant de 50 pixels, et maintenant je vais parler du concept de base. Si j'utilise flex end value, flex end et que je définis ce fichier, comme vous pouvez le voir, éléments se terminent à la ligne de base. Mais si j'utilise la valeur de départ et que je définis ce fichier, la ligne de base se termine maintenant par. Je vais maintenant parler de notre dernière valeur, qui est la valeur de référence. Mais dans un premier temps, je vais augmenter la taille de police du troisième élément. Taille de police. Je souhaite utiliser la propriété de taille de police. Taille de police 34 pixels. Maintenant, je vais également réduire la taille de police du deuxième élément. Je vais utiliser à nouveau la valeur de la taille de police et je vais utiliser dix pixels pour cela. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir que l'alignement de la ligne de base du texte est différent et maintenant je veux aligner ce texte dans la même ligne de base. Pour cela, nous devons utiliser la propriété de base. Laissez-moi vous montrer comment aligner les éléments, je vais utiliser la valeur de référence. Base de référence. Si je configure ce fichier, vous pouvez voir le résultat. Désormais, tous les textes sont présentés dans la même ligne de base. Si vous souhaitez utiliser l'alignement horizontal, oui, vous pouvez l'utiliser. Il vous suffit d'utiliser la propriété justify content. Utilisons-le. Justifiez le centre de contenu. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez changer le sens de flexion. Comme vous le savez, par défaut, notre direction de flexion est erronée. Changeons le sens de flexion. Direction de flexion. Je vais utiliser la valeur de colonne. Si je définis ce fichier, comme vous pouvez le voir, notre propriété Ant fonctionne désormais horizontalement, et non verticalement. Si j'utilise la propriété flex N et que je définis ce fichier, comme vous pouvez le voir, il est aligné horizontalement car nous changeons direction XX et la direction YxS en utilisant la propriété de direction flex Suivons maintenant l'axe transversal opposé. Voilà pour ce tutoriel. J'espère que le concept est maintenant clair pour vous : qu'est-ce que la propriété align item. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 116. Tutoriel de CSS Flexbox Align: Bonjour, les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons apprendre la propriété d'alignement du contenu en CSS. Dans notre précédent didacticiel, nous allons en apprendre davantage sur la propriété d' alignement des éléments. Cette propriété est également utilisée pour l'alignement vertical. Comme vous pouvez le constater, nous avons de nombreuses probabilités de contenu d' alignement liées aux valeurs différentes. Flex start, flex N, center, stretch, baseline, espace autour de l'espace entre les deux et espacement uniforme. Dans notre précédent didacticiel, nous allons découvrir comment aligner des éléments. Les deux propriétés sont utilisées dans le même but, mais il existe une différence entre les deux dans cette probabilité Alignez l'élément utilisé pour l'alignement d' une seule ligne, mais alignez le contenu utilisé pour l'alignement de plusieurs lignes. Supposons que votre contenu ne soit pas couvert sur une seule ligne, qu'il soit encapsulé et passe à la ligne suivante. Ensuite, nous devons utiliser la propriété Align content. Commençons par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir côte à côte, j'ouvre mon Visual Studio Cater et mon navigateur en utilisant l'extension Lip Server Comme vous pouvez le voir, j'ai déjà créé document TML nommé index point HTML Ici, vous pouvez voir que dans mon conteneur parent, nous avons au total dix articles flexibles. Dans un premier temps, je vais l' attribuer à ce conteneur. Après la hauteur, je vais taper we avec une valeur égale à 450 pixels. Comme vous pouvez le constater, nos données sont transportées par avion vers ce conteneur. Dans ce cas, nous devons utiliser la propriété FlexRP, quelqu'un pour taper flex rap Je vais utiliser la valeur Rab. Si je configure ce fichier, vous pouvez voir le résultat. Dans nos précédents didacticiels, nous allons en apprendre davantage sur les propriétés du flex rap. Vous pouvez maintenant voir que les articles excédentaires arrivaient les uns aux autres et, comme vous pouvez le constater, nos articles sont déjà étirés Utilisons notre propriété align contained. Donc, tapez, alignez le contenu. Notre première valeur est l'étirement. Si je définis ce fichier, comme vous pouvez le voir, il n'y a aucun changement car stretch est notre valeur par défaut. Mais si j'utilise la valeur du point flexible et que je définis ce fichier, vous pouvez maintenant voir qu'il se déplace verticalement vers le haut. De même, si j'utilise le flux et la valeur et que je définis ce fichier, les éléments sont maintenant déplacés verticalement. De même, si j'utilise la valeur centrale, définissez le fichier. Maintenant, tous les articles sont au centre de ce conteneur. Notre prochaine propriété est l'espace entre les deux, Somlote entre les deux. Si je configure ce fichier, vous pouvez voir le résultat. Cette valeur va remplir tout l'espace entre deux lignes. Si j'utilise l'espace autour de la valeur, laissez-moi vous montrer puis définir ce fichier. Ici, vous pouvez voir l' espace que nous avons en haut de la ligne, il va le doubler entre cette ligne et ensuite obtenir la même quantité d'espace, en bas de la dernière rangée. Puis vient notre valeur suivante, qui est l'espace uniforme, une partie du type espace uniformément. Si je définis ce fichier, vous pouvez maintenant le voir avec le même espace entre les lignes. Cette propriété ne fonctionne que lorsque nous avons plusieurs lignes. Si je supprime un élément flexible de ce conteneur, laissez-moi vous le montrer, puis définir ce fichier, vous pouvez voir que tous les éléments sont plus centrés verticalement. Maintenant, cette propriété ne fonctionnera pas correctement. Si j'utilise une valeur différente, quelque chose entre un espace, puis que je définis ce fichier, vous pouvez voir que cela ne fonctionne pas. Cette propriété fonctionne exactement lorsque nous avons plusieurs lignes. Sinon, ça ne marchera pas. Si nous avons une seule ligne dans ce cas, nous devons utiliser la propriété Align item. J'espère que vous comprenez maintenant ce qu'est la propriété Align content. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 117. Tutoriel de CSS Flexbox Align Self: Bonjour, les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons apprendre la propriété des cellules alignées en CSS ex box. Cette propriété est également utilisée pour l'alignement vertical, similaire à la propriété d'alignement des éléments. Comme vous pouvez le constater, pour cette propriété, nous avons des valeurs similaires. Nous avons juste une nouvelle valeur pour cette propriété, qui est automatique. De là viennent le début flexible, l'extrémité flexible, le centre, l' étirement et la ligne de base La question qui se pose maintenant est la suivante : quelle est la différence entre la propriété d'alignement de l'élément et la propriété de la cellule d'alignement ? Propriété de cellule alignée utilisée de manière vésicale pour des éléments individuels Supposons que vous souhaitiez aligner verticalement un élément flexible individuel. Dans ce cas, vous devez utiliser cette propriété. Comme vous pouvez le voir sur cette image, il ne reste qu'un élément flexible, tous les éléments flexibles arrivés en haut du conteneur, car pour cette cellule en particulier, nous utilisons la propriété d'alignement de la cellule. C'est grâce à cela que nous avons pu nous différencier. Commençons donc par l'aspect pratique et voyons comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon coretor Visual Studio et mon navigateur en utilisant l'extension p server Je vais utiliser mon ancien fichier SML pour cet exemple. Comme vous pouvez le voir dans notre conteneur fixe, nous avons au total cinq articles flexibles. Et comme vous pouvez le constater, par défaut, les éléments sont étirés. Tout d'abord, je veux aligner tous les articles sur le dessus du conteneur. Je vais utiliser la propriété align item. Aligner l'article Flextrt. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, je vais utiliser la propriété de cellule alignée car je veux maintenant aligner une cellule individuelle. Supposons que je veuille déplacer l'extrémité de la cellule numéro trois de ce conteneur. Ensuite, nous devons accéder au sélecteur d'objets 3, et nous devons utiliser cette vente alignée Je vais utiliser flex end value flex end. Si je configure ce fichier, vous pouvez voir le résultat. Nous avons réussi à déplacer une extrémité cellulaire individuelle de ce conteneur. N'oubliez pas que cette propriété est utilisée pour l'alignement vertical. Déplaçons le centre de la cellule numéro deux de ce conteneur. Pour ceux-ci, encore une fois, je passe au sélecteur numéro deux, et je vais taper AlignellPPerty Alignez le centre L. Si je configure ce fichier, vous pouvez voir le résultat. Parlons de notre nouvelle propriété qui est automobile. Si j'utilise la valeur automatique dans notre deuxième élément et que je définis ensuite ce fichier, vous pouvez voir ici qu'il est de retour dans le groupe. Maintenant, cette valeur est liée à la valeur d' alignement du conteneur parent. Modifions l'alignement du conteneur parent. Alignez les éléments au centre. Si je définis ce fichier, comme vous pouvez le voir, notre valeur automatique suit automatiquement cet alignement. Si nous utilisons align self auto, cela fonctionne relativement bien avec la valeur des éléments d'alignement. Si nous utilisons la valeur centrale, nous agissons également comme une valeur centrale. Si nous utilisons flex endvalue agissons également comme une valeur finale flexible N'oubliez pas que la propriété Alan SEL ne fonctionne qu'avec les ventes Flexbox, non avec le conteneur Flexbox. J'espère que vous savez maintenant ce qu'est la propriété d'Alan Cell et quel est l'Ukage de cette propriété Merci d'avoir regardé cette vidéo, restez connectés pour nos deux prochains studios 118. Tutoriel de commande CSS Flexbox: Bonjour, les gars. C'est bon de te revoir. Dans ce tutoriel, nous allons en apprendre davantage sur les propriétés de l'eau. Cette propriété fonctionne de la même manière que nous le faisions dans la grille. Commençons par l'aspect pratique et voyons comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon coator Visual Studio et mon navigateur en utilisant l'extension Lifesaver, et je crée déjà un document HTML nommé index point HTML Comme vous pouvez le constater, au lieu du conteneur flexible, nous avons un total de six articles flexibles. Si vous vous souvenez d'avoir utilisé la propriété WR, nous pouvons modifier les positions de vente. Supposons que vous souhaitiez déplacer la quatrième cellule en position numéro deux. Dans ce cas, nous devons utiliser les propriétés de guerre. Je vais donc passer au secteur du point 5 et je vais taper « eau ». Dans un premier temps, je vais passer valeur nulle. Il s'agit de la valeur par défaut. Si je place ce fichier, vous pouvez voir ici qu'il n' y a aucun changement dans leur ordre. Mais si je passe moins un, laissez-moi vous montrer et configurer ce fichier. Maintenant vous pouvez voir, maintenant vous pouvez voir notre cinquième article se hisser à la première place dans cet ordre. Par défaut, la valeur de la propriété de l'eau de toutes les cellules est nulle. L'eau commence à partir d'une valeur négative. Pour le point 5, nous utilisons une valeur négative. C'est pourquoi c'est arrivé en premier. C'est moins un. De plus, je vais taper moins un sur cinq. Moins un. De même, pour notre troisième point, je voudrais passer moins deux, eau moins deux. Si je mets ce fichier, vous pouvez maintenant voir qu'il est arrivé en première place dans notre eau, car moins deux est inférieur à zéro et moins un. C'est pourquoi c'est arrivé en premier. Comme je vous l'ai dit plus tôt, la valeur la plus basse est arrivée en premier. Je veux taper moins deux à la troisième place, moins deux. D'abord moins deux, puis viennent moins un, puis zéro, zéro, zéro et zéro. Mais si je passe une valeur dans l'élément numéro un, laissez-moi vous montrer une valeur pour l'eau, puis que je configure ce fichier, vous pouvez voir qu'il est passé du bon côté car un est supérieur à la valeur négative et à la valeur zéro. C'est pourquoi il est tombé à zéro. Je vais passer plus un ici. C'est passer de la valeur la plus basse à la valeur la plus élevée. Maintenant, si je passe l'ordre deux dans notre quatrième article, laissez-moi vous montrer l'ordre deux, et si je place ce fichier, comme vous pouvez le voir, il passe maintenant à la dernière place car plus deux est supérieur à zéro et un. Si j'ai configuré ce fichier, c'est maintenant clair pour vous. Maintenant, vous pouvez clairement comprendre en quoi les commandes sont des mots. Nous ne fixons aucune commande pour l' article numéro deux et pour l'article numéro six. Donc, à l'automne, l'eau contenue dans ces articles est nulle. J'espère que vous comprenez maintenant l'arrosage. Maintenant, la question est : pourquoi utilisons-nous la propriété de l'eau ? Lorsque vous souhaitez rendre votre site Web réactif, l'eau est la propriété la plus importante. Dans Dexter View, vous devez suivre cette eau. Mais dans la vue mobile, vous souhaitez déplacer l'élément quatre en premier lieu. Dans ce cas, les propriétés de l'eau sont très utiles. J'espère que tu as compris. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 119. Tutoriel CSS Flexbox Flex Grow: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je viens avec un nouveau tutoriel. Et dans ce tutoriel, nous allons apprendre une nouvelle propriété , Flix Row. Commençons donc par l'aspect pratique et voyons comment cela fonctionne. Comme vous pouvez le voir, côte à côte, j'ouvre mon Visual Studio Creator et mon navigateur en utilisant l'extension Lifesaver, et j'ai déjà créé un document HTML nommé index point TML Et comme vous pouvez le voir dans notre conteneur parent, nous avons au total six articles flexibles. Utilisons donc notre nouvelle propriété. Fondamentalement, la propriété Flex Groove ne fonctionne pas avec le conteneur. Je travaille avec des articles flexibles. Comme vous pouvez le constater, il existe un nom de classe commun pour tous les éléments flexibles. Je vais accéder au sélecteur d'objets. Je vais utiliser notre nouvelle propriété, qui est Flex Grow Flex Grow. Ici, nous devons passer une valeur numérique, si je passe zéro puis que je définis ce fichier, comme vous pouvez le voir, et qu'il n' y a aucun changement Si je passe une valeur ici, je vais en taper une puis définir ce fichier, ici vous pouvez voir que tout l'espace divisé de manière égale en élément flexible. J'espère que vous comprenez maintenant comment fonctionnent les propriétés des groupes flexibles. Si j'en passe deux ici puis que je définis ce fichier, comme vous pouvez le voir, il n'y a aucun changement. Parce que j'ai divisé l'espace de manière égale, tous les objets Lex. C'est pourquoi ça ne marchera pas. Je suis revenu à mon ancienne position 1, et je vais configurer ce fichier. Maintenant, je veux augmenter la largeur de l'article. Oui, nous pouvons le faire. Dans un premier temps, nous devons sélectionner l'article individuellement , puis nous devons utiliser cette probité, ces flocons, cette croissance Ici, je vais en passer deux. Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez le voir ici, maintenant c'est le double par rapport aux autres cellules. De même, si je passe trois puis que je définis ce fichier, maintenant sa taille est triple par rapport à tous les fichiers de la même manière, je vais utiliser la même propriété dans notre élément quatre. Je vais taper, les flocons poussent, et je veux augmenter la largeur jusqu'à quatre fois, donc je vais en passer quatre ici. Si je configure ce fichier, vous pouvez voir la différence. Si je supprime la marge entre les cellules, c'est maintenant plus clair pour vous. Sans les éléments deux et quatre, toutes les cellules ne font qu'une. Pour l'élément deux, la valeur de la propriété du groupe Flex est trois, et pour l'élément quatre, la propriété du groupe Flex est de quatre. Cette propriété ne fonctionne que pour la largeur de l'élément flexible. En gros, nous utilisons cette propriété lorsque nous devons fournir un montant égal à toutes les ventes. J'espère que vous comprenez maintenant ce qu'est la propriété du groupe Flex Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 120. Tutoriel CSS Flexbox Flex Basis: Salut, encore une fois, je suis de retour avec une nouvelle propriété liée à CSS Flexbox. Dans ce tutoriel, nous allons apprendre ce qu'est Flex Basis ? Cette propriété est assez similaire à la propriété Max With. En gros, il gère la largeur des articles flexibles. Voyons comment nous pouvons l' utiliser dans la pratique. Comme vous pouvez le voir côte à côte, j'ouvre mon codator Visual Studio et mon navigateur en utilisant l'extension if server, et je crée déjà un document HTML nommé index point Comme vous pouvez le constater, à l'intérieur du conteneur flexible, nous avons un total de 66 articles. Comme vous pouvez le voir, nous utilisons la propriété display, flex, et nous utilisons également flex wrap. Nous avons utilisé la probité Flex Rap car si un objet survolait , il redescendait C'est pourquoi nous utilisons Flex Rap et pour chaque article flexible, nous définissons une largeur commune. Comme vous pouvez le constater, flex grow one. Nous découvrons cette propriété dans notre didacticiel de préconfiguration. C'est pourquoi tous les objets occupent le même espace. Utilisons la base Property Flex. Si l'article 1 est sélectionné, je vais taper flex basis. Et là, je vais passer à 250 pixels. Si je définis ce fichier, comme vous pouvez le voir, largeur de notre premier élément flexible est maintenant de 250 pixels. Maintenant, cela fonctionne comme une largeur maximale. Passons à la barre d'outils du développeur. Si je sauvegarde ce creux, comme vous pouvez le voir, notre premier article mesure 250 pixels. Mais sans notre premier élément, tous les plongeons qui prennent le même espace Mais si j'essaie de réduire la taille du navigateur, laissez-moi vous le montrer. Comme vous pouvez le constater, cela n' affectera pas la largeur de cet article. Si nous réduisons la largeur du navigateur, comme vous pouvez le voir, elle diminue maintenant. Parce que cette propriété fonctionnait comme une largeur maximale. Nous pouvons réduire la largeur de cet élément en dessous de 250 pixels, mais nous ne pouvons pas étendre la largeur de cet élément de plus de 250 pixels. Je vais maintenant utiliser la propriété flex basis pour tout cet article. Je vais commenter cette ligne et je vais taper flex basis 100 pixels. Si je définis ce fichier, dans un premier temps, je vais augmenter la largeur du panneau de mon navigateur. Maintenant, vous pouvez voir que la largeur de notre premier élément est toujours de 250 pixels. Mais sans notre premier article, largeur de chaque article est de 100 pixels Si j'essaie d'augmenter légèrement la taille du navigateur, laissez-moi vous montrer, comme vous pouvez le voir, point 5 situé dans le coin droit Parce que sans le premier élément, chaque élément essaie de conserver largeur de 100 pixels et essaie également de remplir l'espace de ce navigateur. Essayons maintenant de réduire la largeur du navigateur et voyons ce qui s'est passé. Si j'essaie de réduire la largeur du navigateur, comme vous pouvez le voir, la plupart des éléments sont expédiés vers la deuxième ligne car nous utilisons la propriété flexer Sinon, ils vont déborder dans ce conteneur Mais si je le réduis un peu plus, comme vous pouvez le constater, comme vous pouvez le constater, il n'y a pas de place pour deux éléments sur une même ligne. C'est pourquoi ils sont rétrécis. Mais comme vous pouvez le constater, nous réduisons l'article d'une largeur. Mais en restant dans le premier élément, toutes les largeurs des éléments sont toujours de 100 pixels car ils ont de l'espace pour s'étendre sur toute leur largeur Mais si je le réduis de plus en plus, comme vous pouvez le constater, tous les articles réduisent leur largeur. J'espère donc maintenant qu'il est clair pour vous que cette propriété fonctionne comme une largeur maximale. Non seulement cela, cette propriété fonctionne également comme une largeur minimale. Laisse-moi te montrer. Si je commente cette ligne, et si nous utilisons la propriété flex group pour tout cet élément et définissons ce fichier, comme vous pouvez le voir, tous les éléments sont placés sur une seule ligne. Nous utilisons la propriété Flexbsis uniquement pour le premier élément, et pour le reste, nous utilisons la propriété flex group, et notre valeur de croissance flexible est de un et notre valeur de croissance flexible est Comme je vous l'ai dit, cela fonctionne également comme une propriété de largeur minimale. Laisse-moi te montrer. Si j'essaie de réduire la largeur du conteneur, comme vous pouvez le voir, cela affectera toute la largeur de cet article sans l'article un. Si j'essaie de le réduire davantage, comme vous pouvez le constater, cela n' affectera pas le premier point. Sans le premier élément, tous les articles réduisent leur largeur. Si nous essayons de le réduire davantage, comme vous pouvez le constater, notre dernier article a été expédié au deuxième rang. Mais notre article 1 conserve toujours la même largeur de 250 pixels. Si nous utilisons la propriété flex Basis avec une ligne flexible, il y a une largeur minimale. Mais si nous utilisons uniquement la propriété Flex Basis, elle agira comme un maximum avec. Non seulement cela, nous pouvons également utiliser ici une valeur en pourcentage. Supposons que je veuille utiliser 50 %, 50 %. Si je configure ce fichier, comme vous pouvez le voir, il fonctionne toujours correctement. Augmentons le pourcentage de 90 %. Si j'ai configuré ce fichier, vous comprendrez maintenant comment il fonctionne. Maintenant, à chaque fois, notre premier article occupera 90 % de la largeur de ce navigateur. C'est donc à vous de décider du type de valeur que vous allez utiliser. J'espère que vous savez maintenant quelle est la propriété la plus fondamentale de Flex Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 121. Tutoriel CSS Flexbox Flex Shrink: Bon retour, les gars. Dans ce tutoriel, nous allons apprendre ce qu'est Flex Stream. Passons donc à l' écran de l'ordinateur et voyons ce que c'est. Ici, vous pouvez voir côte à côte que j'ai ouvert mon Visual Studio Coreator en utilisant l'extension Lifesaver, et j'ai déjà créé un document TML nommé index point TML Et ici, vous pouvez voir les quatre points fixes un, deux, trois, quatre, et voici notre conteneur fixe. Si je vous montre ici, vous pouvez voir nous utilisons une solution distale Et dans notre classe commune, j'utilise la propriété fix zero, fix 01. C'est pourquoi les largeurs des articles sont réparties de manière égale. Mais dans ce tutoriel, nous allons apprendre une nouvelle propriété, qui est flex syn. Commençons donc. Donc, d'abord, je vais supprimer la propriété fix roo, et je vais définir W W 200 pixels Si je configure ce fichier et que je redimensionne mon navigateur avec, vous pouvez voir le résultat Ici, vous pouvez voir que notre conteneur est plus grand que la largeur des articles. Comme vous pouvez le voir, tous les éléments ont une résolution de 200 pixels. Maintenant, je veux utiliser cette propriété de flexion dans notre premier article. Mais dans un premier temps, je voudrais vous expliquer ce que signifie « fléchir Fondamentalement, nous utilisons la propriété de flexion pour créer notre élément flexible réactif Si vous souhaitez rendre vos articles rétractables, vous devez utiliser cette propriété Ici, vous pouvez le voir réduire la largeur de l'article. Permettez-moi de clarifier le concept. Dans notre premier article, je vais utiliser cette propriété, flex shrink. Un est la valeur par défaut. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Mais si j'utilise une valeur nulle et que je définis ensuite ce fichier, vous pouvez maintenant voir : Hé, j'ai fait un peu de synamista. Nous devons utiliser cette propriété à l'intérieur de l'article, pas de tous les articles. Je souhaite déplacer cette propriété dans notre article 1. Si je définis ce fichier, vous pouvez voir ici que le premier élément n'a pas changé de forme. Maintenant, notre article 1 n' est pas rétractable. Maintenant, il a maintenu la largeur fixe de 200 pixels. Si j'augmente la largeur du navigateur, vous pouvez voir le résultat. Et si je réduis au maximum les autres articles Flix, laissez-moi vous montrer ici que vous pouvez voir notre autre article Flix survolé depuis ce conteneur Comme vous pouvez le constater, notre premier article n'a pas diminué car nous avons utilisé la valeur de flexion zéro Maintenant, c'est clair pour toi. Pour le rétrécissement, nous pouvons utiliser zéro et une valeur. Si nous utilisons une valeur et que nous définissons ensuite ce fichier, vous pouvez maintenant voir le résultat. Ici, vous pouvez voir maintenant qu'il rétrécit notre article. Si vous souhaitez augmenter le rétrécissement, vous devez utiliser une valeur nulle. Maintenant, je vais vous montrer autre chose. Vous savez déjà que si j'utilise une valeur nulle, nous pouvons augmenter le rétrécissement. Mais si j'utilise une seule valeur, nous pouvons réduire nos éléments flexibles. Maintenant, sans zéro ou un, nous pouvons utiliser des valeurs différentes. Laisse-moi te montrer. Si j'utilise deux cheveux, je place ce fichier, vous pouvez voir le résultat. Cela réduit notre premier article par rapport aux autres articles. De même, si j'utilise trois valeurs puis que je définis ce fichier, vous pouvez voir, encore une fois, qu'il réduit notre article un. Si nous n'utilisons pas de valeur nulle, notre article est toujours rétractable. Je vais maintenant vous montrer la deuxième méthode Comment pouvons-nous utiliser cette propriété de chaîne d'une manière différente ? Pour cela, dans un premier temps, je vais supprimer la largeur de l'article. Ensuite, j'ai défini ce fichier et je vais également utiliser la valeur de chaîne 1. Et maintenant, je vais utiliser la propriété flex Basis. Base flexible. Base flexible 200 pixels. Une base flexible est synonyme de mauvaises herbes dynamiques. Maintenant, vous pouvez voir que nous ne pouvons pas appliquer de produit humide sur tout l'article. Dans notre article, nous en appliquons un en utilisant flex BesiSpity. Maintenant, si je définis ce fichier et que j'essaie de réduire la largeur du navigateur, comme vous pouvez le voir, lorsque l'espace de fusion est terminé, et si j'essaie de le réduire, vous pouvez voir notre article 1 également diminuer. Maintenant, la question est de savoir pourquoi rétrécir ? Parce que nous utilisons une seule valeur. Mais si j'utilise une valeur nulle et que je définis ce fichier, vous pouvez maintenant voir que nos articles sont survolés depuis ce conteneur Mais si je passe à la valeur puis que je définis ce fichier, comme vous pouvez le voir, cela ne fonctionnera pas. Si j'utilise la valeur 1 et que je définis ce fichier, vous pouvez voir qu'il n'y a aucun changement. Dans cette méthode, nos autres valeurs ne fonctionneront pas. Si vous souhaitez couvrir l'espace restant, vous pouvez dans ce cas utiliser flex grow value. Laisse-moi te montrer. Dans notre quatrième article, je vais utiliser flex grow value. Les flocons poussent. Premièrement, si je définissais ce fichier, comme vous pouvez le voir, notre quatrième article couvrait toute la pièce vierge. Si je réduis le navigateur avec, vous pouvez voir notre article quatre se réduire automatiquement et lorsque vous le réduisez, cela a maintenant un effet sur l'article 1. J'espère qu'à ce moment-là, c'est clair pour vous. Je vais maintenant m' occuper de ce conteneur. Comme vous pouvez le constater, nous n'utilisons aucune largeur pour ce conteneur, et maintenant je vais définir le conteneur avec. Ici, je vais taper avec WIDTH avec 600 pixels. Si je définis ce fichier et que j' augmente la largeur de mon navigateur, vous pouvez maintenant voir que la taille de notre conteneur est fixe, et maintenant je vais réduire la largeur du conteneur. Je vais utiliser 300 pixels. Si je définis ce fichier, vous pouvez le voir réduire tous les éléments. Également l'article 1. Et si je réduis légèrement le conteneur à 50 pixels, puis que je place ce fichier, vous pouvez voir que cela fonctionne également parce que nous utilisons une valeur ici, fléchissant une, mais si j'utilise valeur zéro et que je définis ce fichier, vous pouvez obtenir un résultat différent Vous pouvez voir ici que d'autres objets ont été survolés depuis ce conteneur J'espère que vous comprenez maintenant ce qu'est l'immobilier flexible. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 122. CSS Flexbox avec Margin Auto Tutorial: Aujourd'hui, dans ce tutoriel, nous allons apprendre ce qu'est la marge automatique dans Flexbox Passons à l' écran de l'ordinateur et voyons comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon coordinateur Visual Studio et mon navigateur à l'aide de l'extension Lifesaver, et que je crée déjà un document TML nommé index Comme vous pouvez le voir dans mon navigateur, il existe un conteneur parent, et à l'intérieur de ce conteneur parent, nous avons un C'est notre conteneur Flix, et c'est notre article de réparation. Je vais maintenant vous montrer comment obtenir résultat différent en utilisant Margin Autowl Donc, dans notre article, je vais taper Margin. Marge. Et je vais utiliser Atovil Si je configure ce fichier, vous pouvez voir le résultat Ici, vous pouvez le voir aligné au centre horizontalement et verticalement. Mais pourquoi ? Parce qu'il y a beaucoup d' espace libre à l'intérieur de ce conteneur. C'est pourquoi il est aligné au centre. Maintenant, je vais utiliser Margin Lip Auto, Margin Lab. Si je place ce fichier, comme vous pouvez le voir , vous pouvez le voir automatiquement expédié sur le côté droit de ce conteneur. Notre article quitte l'espace sur le côté gauche et est expédié sur le côté droit. Si j'utilise Margin Top Auto Top, puis que je définis ce fichier, vous pouvez maintenant voir qu'il descend par le haut car il y a de l'espace libre en haut. Avec cela, je vais utiliser Margin Let Property. Marge laissée et encore une fois, je vais utiliser Auto Valu. Si je définis ce fichier, vous pouvez maintenant voir notre article flexible expédié dans le coin inférieur droit de ce conteneur. J'espère que vous pouvez maintenant comprendre comment nous pouvons obtenir un alignement différent simplement en utilisant Auto Vu. Permettez-moi de vous donner un autre exemple. Supposons que nous ayons un conteneur, et qu'à l'intérieur de ce conteneur, nous devions indiquer quatre éléments flexibles. Vous pouvez voir ici les articles, l'article un, l'article deux, l'élément trois et le point quatre. Je dis une couleur de fond différente pour ces articles. Et maintenant, je vais utiliser notre marge automatique Velu, je vais l' utiliser dans notre article deux Margin, right, auto Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir notre article deux occuper tout l'espace disponible à l'intérieur du contenant, et il est prévu d'utiliser la marge et de façonner l'article trois et l'article quatre, sur le côté droit de ce contenant. De même, si j'utilise la propriété Margin Lift, laissez-moi vous montrer la marge, le tour, puis définir ce fichier. Vous pouvez maintenant voir qu'il fournit tout l'espace, côté gauche de cet article deux. Et si j'utilise la même propriété que celle du premier élément, je vais donc couper cette propriété et la coller ici. Si je définis ce fichier, vous pouvez maintenant voir qu'il fournit tout l' espace avant le premier élément, et qu'il a déplacé tous les éléments du côté droit de ce conteneur. Ainsi, lorsque vous travaillez avec le côté réactif, vous pouvez utiliser cette arborescence pour aligner votre élément flexible. J'espère donc que vous comprenez maintenant, en utilisant Auto Value, comment nous pouvons créer une mise en page différente dans Flex Box. Merci donc d'avoir regardé ce tutoriel restez connectés pour notre prochain tutoriel. 123. Tutoriel CSS Flexbox imbriqué: Bonjour, il s'agit de la dernière propriété flexbox liée au didacticiel, et dans notre didacticiel d' adaptation, nous allons aborder certains projets similaires Dans ce tutoriel, nous allons apprendre ce qu'est Nested Flix Passons à l' écran de l'ordinateur et voyons comment cela fonctionne. Comme vous pouvez le voir, il y a un conteneur et à l'intérieur de ce conteneur, nous avons mis trois articles D. Si nous convertissons notre conteneur parent en conteneur flexible, nous appelons cet article De flex. Mais si nous utilisons la propriété display flex dans un élément particulier, dans ce cas, il s'agira d'un conteneur flexible imbriqué, et il s'agit également d' éléments flexibles à l'intérieur de ce conteneur Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Light Server, et je crée déjà un document TM nommé index point HTML. Et ici, vous pouvez voir un élément div parent, classe container. Et à l'intérieur de ce conteneur, nous devons trouver un article Flexbox Comme vous pouvez le voir, dans notre classe de conteneur, nous utilisons la propriété d'affichage flix. abord, je vais changer la direction des six objets. Donc, ici, je vais utiliser la propriété flex direction. Direction de flexion. Je vais utiliser Clumvi. Si je configure ce fichier, vous pouvez voir le résultat. Nous avons déjà défini une hauteur de 100 pixels pour nos articles. Je vais maintenant ajouter trois autres DV dans notre deuxième article Ici, je vais ajouter au total trois autres DV. Dans un premier temps, je vais créer un D avec un sous-élément de classe de sous-élément. De plus, je vais utiliser un autre nom de classe, sous-élément un pour notre premier D. Ensuite, je vais dupliquer cette ligne pour un total de deux t. Je vais donc faire l'éloge des moutons, flèche réduite vers le bas, sous-élément deux et sous-élément trois Ici, vous pouvez voir, j'ai défini un nom de classe commun sabem nous avons également défini un nom de classe différent pour chaque élément Ensuite, dans ce diviem, je vais taper A, B et C. Si je définis ce fichier, comme vous pouvez le voir, il renvoie nos éléments ligne par ligne, et maintenant je vais convertir notre deuxième élément flexbox en Ici, je vais utiliser un affichage de nom D approprié. Afficher Flix. Si je place ce fichier, comme vous pouvez le voir, par défaut, il organise notre élément sur une seule ligne Définissons maintenant une couleur d'arrière-plan pour nos articles. Pour cela, l'élément deux, supérieur à un signe, indique le nom de notre classe, qui est un sous-élément. Ensuite, dans la classe, je vais définir la couleur de fond. Contexte Pourquoi ? Je vais également définir une couleur de texte. Couleur : noir. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, je veux diviser en parts égales notre article flexible imbriqué dans ce conteneur Pour cela, je vais utiliser une propriété nommée flex Grove. Vin Flex Grove Flex Grow. Si je configure ce fichier, vous pouvez voir le résultat. Permettez-moi de donner une marge à nos articles qui peuvent vous goudronner. Marge d'un pixel. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, nous avons un conteneur de correction parent ce continuer flexible parent, nous avons P four flex IN, et nous convertissons notre deuxième conteneur flex IN en un conteneur flexible imbriqué, et à l'intérieur du NSTP fix continuer, nous avons transféré trois éléments flexibles, A, B et C. J'espère que vous savez maintenant comment créer des éléments de vous savez maintenant comment créer des Ce n'est pas très difficile. C'est un processus très simple. Merci donc d' avoir regardé cette vidéo, Say pour notre prochain tutoriel. 124. Tutoriel sur l'épaisseur de décoration de texte CSS3: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce didacticiel, nous allons apprendre un nouveau texte lié à une propriété, l'épaisseur de la décoration du texte. Dans nos précédents tutoriels, nous avons déjà découvert les propriétés de décoration du texte. Prend une ligne de décoration, prend la couleur, prend un style de décoration. Grâce à ces propriétés, nous pouvons souligner n'importe quel texte. Nous pouvons également modifier la couleur de soulignement et souligner le style de décoration. Non seulement nous pouvons également utiliser la ligne O, mais le problème est que nous ne pouvons pas contrôler l'épaisseur. Pour résoudre ce problème, le CSS introduit une autre propriété, l'épaisseur de la décoration du texte. Commençons donc par la pratique et voyons comment utiliser cette propriété. Comme vous pouvez le voir côte à côte, j'ouvre l'éditeur de code Studio de mes utilisateurs et mon navigateur à l'aide de l'extension Light Server, et je crée déjà un document ML nommé index point HTML Comme vous pouvez le voir, nous avons une balise H, et nous utilisons ici cette propriété, le centre de la ligne de texte. Et maintenant, je vais utiliser une autre propriété appelée Text Decoration Line. Ici, je vais taper une décoration de texte, une ligne. Et cette propriété est soulignée à trois valeurs au total sur une ligne et une ligne. Je vais donc utiliser le soulignement. Et je vais configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir ici le soulignement sous le texte. Maintenant, je vais changer la couleur de soulignement. Pour changer la couleur, nous devons utiliser la propriété appelée Décoration fiscale, couleur, décoration du texte , couleur, et je vais utiliser la couleur rouge. Ensuite, je vais chercher le style de décoration. Ici, je vais utiliser une autre propriété appelée style de décoration de texte Tax decoration style, et je vais utiliser dst Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, je veux contrôler l'épaisseur de ce soulignement. Nous devons donc utiliser la nouvelle propriété appelée épaisseur de la décoration fiscale. Décoration SunDuttt Épaisseur de la décoration du texte. Et ici, je vais mentionner cette taille, et je vais prendre Pain Pixel. Si je place ce fichier, vous pouvez voir le résultat ici. Comme vous pouvez le constater, cela augmente l'épaisseur de ce texte. Et si je le rends solide, maintenant c'est du volume plus pur. Solide Après avoir configuré ce fichier, vous pouvez voir le résultat. Et si vous souhaitez ajouter de l'épaisseur, augmentez simplement la valeur. Supposons que je passe 20 pixels et que vous puissiez voir le résultat. Nous pouvons également l' appliquer dans notre overline. Supposons que si je passe en soulignement, je veuille passer par-dessus la ligne. Si je configure ce fichier, vous pouvez voir le résultat. Nous utilisons maintenant le soulignement et le surlignage ensemble. C'est donc tout pour ce tutoriel. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 125. Tutoriel de sous-ligne du texte CSS3: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons apprendre à souligner le texte CSS ci-contre. Dans nos précédents tutoriels, nous avons déjà découvert ces propriétés. Prend une ligne de décoration, prend la couleur, prend un style de décoration. À l'aide de ces propriétés, nous pouvons définir la couleur, l'épaisseur, le style, etc. Mais si je veux créer un écart entre le texte et le soulignement, nous n'avons aucune propriété. Mais le CSS introduit une nouvelle propriété, le texte étant souligné en face. À l'aide de cette propriété, vous pouvez définir l'écart entre le texte et le soulignement. Commençons donc par la pratique et voyons comment appliquer cette propriété. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension if server, et je crée déjà un index de noms de documents TML DotsTM Et comme vous pouvez le voir sur notre étiquette corporelle, nous avons une étiquette H. Donc, dans un premier temps, je vais utiliser une propriété appelée Tix Decoration line Décoration de texte de type Son. Prend une ligne de décoration. Prend une ligne de décoration, je vais utiliser le soulignement. Ensuite, je vais utiliser une autre couleur de décoration de la propriété Tikes Prend de la couleur décorative. Prend la couleur de la décoration, je vais utiliser la couleur rouge. La prochaine propriété que je vais utiliser est le style de décoration. Style de décoration du texte. Prend du style décoratif, solide. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat ici. De plus, si vous souhaitez contrôler l'épaisseur, seule l' utilisation de l'unité prend en compte la propriété de l'épaisseur de la décoration. Attachez donc la décoration du texte à l'épaisseur de la décoration du texte. Et je vais utiliser dix pixels. Et je veux configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le soulignement, mais il y a un problème. Il n'y a aucun écart entre le texte et le texte souligné. Je veux créer un écart entre le texte et le souligné. Pour cela, le CSS a introduit une autre propriété, savoir le soulignement du texte ci-contre. Donc, pour taper du texte, soulignez, ci-contre. Et je veux fournir un écart de 20 pixels. Après avoir sous-traité ce fichier, vous pouvez voir le résultat. Il fournit désormais un écart de 20 pixels entre le texte et le soulignement. C'est donc tout pour ce tutoriel. J'espère que c'est clair pour toi maintenant. 126. Tutoriel CSS CurrentColor: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS. Et dans ce tutoriel, nous allons apprendre une nouvelle chose, qui est la couleur actuelle. Dans nos tutoriels inversés, nous l'avons déjà appris. Nous avons un total de six modes de couleurs différents. Nom de couleur hexadécimal, RGB, RGBA, HSL, HSLA. Maintenant, le CSS ajoute un autre mode de couleur, qui est la couleur actuelle. Essayons maintenant de comprendre quelle est la couleur actuelle et dans quelle mesure il est facile de le faire. Ici, vous pouvez voir un élément profond. Et dans cet élément de développement, nous avons un titre, une ligne de séparation, un paragraphe, un bloc profond et un bouton. En savoir plus. Ensuite, dans cet élément parent, j'ajoute une propriété nommée color, et je dis « color blue ». Après avoir utilisé cette propriété de couleur , le bleu, la couleur du texte va changer du noir au bleu. Mais je veux appliquer la même couleur à cette étiquette pour chat et à cet élément profond. Pour appliquer cette couleur bleue à cet élément de base de données et à ce bouton, nous devons utiliser une propriété. Nous devons utiliser la propriété de couleur d'arrière-plan, et ici nous devons transmettre cette valeur, la couleur actuelle. Lorsque j'utilise cette valeur, la couleur actuelle, cela vérifie la couleur que nous utilisons pour notre valeur de couleur. Comme vous pouvez le voir, nous utilisons la couleur bleue. Ensuite, il va appliquer la couleur bleue à cet élément profond et à ce bouton. Et nous pouvons utiliser la couleur actuelle n'importe où. Nous pouvons l'appliquer en couleur de fond, couleur de bordure, n'importe où. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant IPServeExtension, et j'ai déjà créé un document stable nommé index point nommé Si vous remarquez que vous pouvez voir dans notre balise body, nous avons une balise heading, puis une balise deep. Et insérez cette balise DIP, vous avez deux balises d'en-tête, un paragraphe et un paragraphe et coupez une balise pour un bouton Et ici, nous avons identifié ce goût débilitant. Et aussi, nous disons avec marge de rembourrage une bordure à cet affaiblissement Et maintenant, je vais appliquer la propriété de couleur à cet élément gustatif. Donc ici, je vais utiliser une propriété appelée couleur. Couleur, et je vais utiliser le rouge. rouge. Et je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, il a changé les couleurs de police. Maintenant, il passe au rouge noir, et maintenant je veux définir une bordure en dessous du sous-titre Pour cela, nous devons sélectionner le sous-titre. Hemoti a donc une étiquette, l'élément parent, qui est Goûtez, puis je veux sélectionner H deux éléments. H deux, puis les cols, je veux définir la propriété du bas de la bordure. Bouton de bordure. Et je vais passer deux pixels, deux pixels, une bordure unie, et pour la couleur, je vais utiliser la couleur actuelle. Je vais utiliser le lieu de couleur actuel. Et je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, si vous remarquez que la couleur de notre bordure est rouge. Cela est possible parce que dans notre élément parent, elle utilise la propriété color, et nous disons couleur rouge Et maintenant, si vous souhaitez changer la couleur, la couleur du texte, ainsi que la couleur de la bordure, vous devez changer une fois. Supposons que je veuille appliquer la couleur verte. Vert. Comme vous pouvez le constater, a changé la couleur de la police. Cela a également changé la couleur de la bordure. De même, si vous souhaitez appliquer bordure d' élément parent de couleur verte, vous pouvez également utiliser cette couleur actuelle Vu Je vais donc copier cette valeur et remplacer le noir par la couleur actuelle. Et je vais configurer ce fichier. En suivant ce fichier, vous pouvez voir le résultat. Et si vous souhaitez appliquer la couleur actuelle à cette étiquette pour chat, oui, vous le pouvez. Laisse-moi te montrer. Hemo select a donc une étiquette, un goût, alors je veux sélectionner cette classe read mood Je copie donc le nom de la classe et le type Hem point read mood. Ensuite, à l'intérieur du Caris se trouve Hemo pour utiliser une propriété appelée background Et je veux passer la couleur actuelle. Après avoir défini ce fichier, comme vous pouvez le voir, couleur d' arrière-plan de notre type d'ancre devient violette car par défaut, elle est livrée avec une couleur violette. Si je commente cette ligne et que je reconfigure ce fichier, comme vous pouvez le voir, vous remarquerez ici que la couleur de notre texte est violette. C'est pourquoi il est indiqué que la couleur de fond est violette. Maintenant, il y a un problème avec la couleur actuelle. Si j'essaie de changer la couleur de police, laissez-moi vous montrer. Je vais donc utiliser la propriété de couleur, la couleur, et je vais appliquer le rouge. Ensuite, je vais configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Maintenant, vous remarquerez qu'avec la couleur de police, la couleur d' arrière-plan a changé. Désormais, la couleur de police et la couleur d'arrière-plan deviennent rouges. C'est pourquoi notre police n'est pas visible dans cette section. Mais quoi ? Si je fais le contraire, si je dis couleur, couleur actuelle, je veux donc changer le rouge avec la couleur actuelle. Et je vais changer la couleur de fond avec rouge. Définissez ensuite le fichier. Comme vous pouvez diviser le fichier, notre texte est maintenant visible. Vous pouvez maintenant voir que la couleur de notre police est verte car son élément parent, couleur de la police sont le vert et la couleur d'arrière-plan est le rouge. Vous devez donc vous rappeler que ce n'est pas une bonne pratique d'utiliser la couleur actuelle avec la propriété d'arrière-plan. Vous ne pouvez l'utiliser qu'avec la propriété de couleur. Sinon, vous pouvez l'utiliser avec des bordures, etc. Voilà pour ce tutoriel. 127. Tutoriel du pseudo élément de marqueur: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un autre tutoriel lié à Advancess et dans ce tutoriel, nous allons apprendre un nouvel élément posito, qui s'appelle Nous connaissons déjà ces éléments du posito après la première lettre, la première ligne, la sélection et l'espace réservé Dans cette liste, il y avait un nouvel élément positif, qui est le marqueur. Essayons d'abord de comprendre ce que cela signifie. Ici, vous pouvez voir la liste des commandes et nous avons le nom de certains aliments dans cette liste. Maintenant, je veux changer la couleur de ces points. Que faisons-nous auparavant pour changer la couleur de ce point ? Nous attribuons simplement une nouvelle couleur à une balise LI et nous l'appelons marqueur de processus, mais nous ne pouvons pas séparer la couleur du texte de la couleur du marqueur pour résoudre ce genre de problème, introduit le CSS, classe Marker Posido Commençons par la pratique et voyons comment nous pouvons utiliser ce nouvel élément posito Comme d'habitude, j'ouvre côte à côte l'éditeur de code de mon studio de résultats et mon navigateur à l'aide de l'extension de serveur Lip, et je crée déjà un document stable nommé index point HTML Comme vous pouvez le voir dans mon navigateur, nous avons une liste d'interlistes et une liste de l'AMA De plus, vous avez War List. Maintenant, je veux séparer la couleur du marqueur de la couleur du texte. Pour cela, nous devons utiliser le sélecteur Marker Posito. Ici, je vais taper le marqueur deux-points. Ensuite, à l'intérieur de la couleur se dissipe, je vais dire couleur Couleur et je veux le dire couleur rouge. Si je configure ce fichier, vous pouvez voir le résultat dans mon navigateur. Ici, vous pouvez voir dans mon navigateur que les couleurs du marqueur ont été modifiées. Quel que soit le type le moins que nous utiliserons, appliquerons tous ces éléments. Mais maintenant je décide de changer la couleur du marqueur Unwaters. Pour cela, je vais attacher ici UL unwater east AI. Dans la liste ci-dessous, toutes les balises LI, je souhaite appliquer le sélecteur Marker Poseido Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, il applique la couleur du marqueur, uniquement la liste ci-dessous. N'oubliez pas que pour l'instant, ce sélecteur de marqueurs ne prend en charge qu' une seule propriété CSS, à savoir la couleur Vous ne pouvez pas augmenter la taille du marqueur à l'aide de ce sélecteur. Peut-être que cela pourrait être utile à l'avenir. C'est tout pour ce tutoriel. Merci d'avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 128. CSS ! Tutoriel important de hack: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel reel date CSS. Et dans ce tutoriel, nous allons découvrir un piratage, connu sous le nom de piratage important. Si vous voulez comprendre ce qui est important vous devez d'abord connaître l'étiquette de priorité CSS, et pour comprendre l'étiquette de priorité de CS, vous devez d'abord savoir comment implémenter le CSS dans notre page HTML Nous pouvons utiliser le nom de la balise pour créer un sélecteur CSS. Nous pouvons utiliser pauptag, header tag , body tag, peu importe Ainsi, nous pouvons créer le sélecteur et styliser l'élément Nous pouvons également prendre le nom de la classe et styliser l'élément. Ensuite, nous pouvons utiliser le nom de l'ID, et nous pouvons également cibler l'élément. Et la dernière méthode est le style intérieur. Je veux dire que nous pouvons utiliser l'attribut de style dans nos balises d'estimation, puis nous pouvons styliser l'élément, et toutes les méthodes sont accompagnées d'une étiquette de priorité différente. Le CSS fournit toujours une méthode de style intérieur de première priorité. Ensuite, il fournit un ID de priorité, puis un nom de classe, et enfin un nom de balise de priorité. Supposons que dans un élément d'estimation, nous utilisions toutes les méthodes de ciblage. Comme vous pouvez le voir, utilisez ici la même propriété, mais la valeur est différente Dans ce cas, CS fournira une méthode de style intérieur prioritaire. C'est pourquoi cela va donner à la police une couleur orange. Permettez-moi de clarifier le concept plus en détail. Comme vous pouvez le voir dans cet exemple, nous avons une balise de paragraphe, laquelle nous attribuons d'abord un nom de classe, puis un ID. Dans ce paragraphe, il ne s' agit que d'un texte aléatoire. Ce n'est qu'un test. Dans notre page CSS, si je sélectionne ce paragraphe en utilisant son nom de balise, P, et que je définis la couleur rouge, alors ce paragraphe devient rouge. Mais si je sélectionne abord ce même élément en utilisant son nom de classe, puis que je le rends bleu, dans ce cas, ce paragraphe devient bleu. De même, si vous utilisez le nom de l'identifiant et que vous le rendez vert, il devient vert. Mais si vous utilisez la méthode de style en ligne , l'attribut style, puis que vous le colorez en beige, le texte sera de couleur beige en même temps CS va donc donner la priorité à la méthode de style en ligne C'est ainsi que fonctionne le label de priorité de CS. Mais maintenant, je veux briser cette étiquette de priorité. Comme vous pouvez le constater, en même temps, nous utilisons ici une méthode de sélection différente pour sélectionner ce paragraphe. Mais il donne la priorité à la méthode de style en ligne. En même temps, nous utilisons au total quatre méthodes différentes, mais cette fois, je veux donner la priorité à la couleur bleue, ce nom de classe. Pour cela, nous pouvons utiliser cette sorcière. Nous pouvons utiliser une balise importante, signe d'exclamation, puis nous voulons taper Si je casse l'étiquette de priorité et que je lui donne de l'importance, dans ce cas, elle appliquera la couleur bleue à ce texte. Il va maintenant fournir la première priorité à cette méthode de sélection. ne s'agit pas d'un piratage. C'est une technique qui permet de pirater n'importe quelle propriété CSS. Commençons donc par la pratique et voyons comment nous pouvons l' utiliser dans la pratique. Comme vous pouvez le voir côte à côte, j'ouvre l'éditeur de code studio de mon utilisateur et mon navigateur à l'aide de l'extension Live Server, et j'ai déjà créé un document ML nommé index point HTML. Comme vous pouvez le voir dans notre balise body, nous avons une balise header, et dans cette balise, nous tapons hello world. Et ici, vous pouvez voir que dans cette balise, nous attribuons un nom de classe. Tout d'abord, nous attribuons également un identifiant, ensuite. De plus, nous sélectionnons cette balise H one dans notre section de style en utilisant le nom de balise H one. Et maintenant je vais changer la couleur de police. Je vais donc utiliser ici la propriété de couleur. Color ray, et je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Je vais maintenant sélectionner l' élément en utilisant son nom de classe. Donc ici, je vais d'abord taper un point, là, dans les couleurs, je vais utiliser la propriété des couleurs. Couleur, et cette fois, je vais utiliser le bleu. Bleue. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, notre texte prend la couleur bleue. Comme vous pouvez le constater, les deux sélecteurs sélectionnent l'élément H. abord, pour utiliser le nom de balise, ils utilisent désormais le nom de classe, mais celui-ci donne la priorité au nom de la classe. Ensuite, je vais utiliser ID. Donc HemotyphTAG, deuxièmement. Deuxièmement, est-ce que c'est le Carles, je vais utiliser la propriété color. Couleur. Et cette fois, je vais utiliser la couleur verte. Vert. Si je définis ce fichier, vous pouvez maintenant voir que cette fois, il donne priorité au sélecteur d'ID Quoi qu'il en soit, si je change l'heure, je vais copier cette section. Désolé, je vais couper cette section et la coller avant le nom de la classe et définir ce fichier. En outre, il renvoie la couleur verte. Comme je vous l'ai dit, cette fois, il donne priorité à notre sélecteur d'identification Et maintenant, je vais utiliser la méthode de style Inland. Donc, ici, je vais utiliser le style d'attribut de style et je vais utiliser la propriété de couleur, la couleur. Et ici, je vais utiliser la couleur orange. Orange. Et je vais sous-traiter ce fichier. Après avoir sous-traité ce fichier, vous pouvez voir qu'il donne la priorité à la méthode de style Inland. Mais maintenant, comment pouvons-nous utiliser le hack important ? Supposons que je veuille donner la priorité à la couleur bleue. Je veux dire le sélecteur de clus. Pour le rendre important, il suffit qu'elle tape le signe d' exclusion de l'espace important. Si je définis ce fichier, vous pouvez maintenant voir que cette fois, le sélecteur d'ID sera important De même, si vous voulez donner la priorité à la couleur rouge, je veux dire le sélecteur d' éléments, pour taper le mot clé important en haut de la page. Si je configure ce fichier, vous pouvez voir le résultat. Et n'oubliez pas qu'il n'est pas obligatoire que vous puissiez utiliser ce hack uniquement avec la propriété color. Vous pouvez utiliser ce hack important avec n'importe quelle propriété. Vous pouvez l'utiliser avec la taille de police, le rembourrage, les marges, etc. C'est donc tout pour ce tutoriel. J'espère que vous comprenez maintenant comment nous pouvons utiliser ce hack. Hack important. Merci donc d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 129. Tutoriel de CSS3 @supports: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce tutoriel, nous allons apprendre un nouveau sélecteur, qui est à ce jour le support Maintenant, la question qui se pose est la suivante : à quoi cela sert-il en fait ? En gros, nous utilisons ce sélecteur pour détecter les fonctionnalités dans le navigateur. Je veux dire nouvelle propriété CSS sinon valeur prise en charge par le navigateur. Supposons que nous ayons une propriété CSS appelée GED, display grid. Cette fonctionnalité CSS est prise en charge par Chrome, Firefox, Sapai, ge, etc. Mais pour savoir quel navigateur va prendre en charge cette propriété et cette valeur, nous devons utiliser le sélecteur de support En utilisant cela, nous pouvons taper différents CSS pour différents navigateurs. Donc, en gros, nous l'utilisons pour le CSS conditionnel. C'est pourquoi nous l'avons parfois appelée règle conditionnelle. Voyons maintenant comment nous pouvons l'utiliser dans notre CSS. Dans un premier temps, vous devez taper Adiate support. Ensuite, à l'intérieur de la résine ronde, vous pouvez mettre votre condition. Supposons que nous puissions vérifier l'état de la grille d'affichage. Alors maintenant, la question est de savoir ce que cela va faire. Chaque fois qu'un utilisateur ouvre la page Web dans son navigateur, ce support vérifie cette condition. Ce navigateur supporte-t-il la propriété de la grille d'affichage ou non ? S'il supporte la condition, il exécutera le CSS. Supposons que nous saisissions Addid support et que, dans notre état, nous transmettions la grille d'affichage Si le navigateur prend en charge la valeur de la grille, nous pouvons attribuer la grille d'affichage des identifiants principale. Mais si le navigateur ne supporte pas cette grille de propriétés, nous pouvons taper un CSS différent pour cet élément. Non seulement cela, nous pouvons également définir condition opposée en utilisant le support, quelque chose comme ça. Ajoutez du support, pas une grille de distribution. C'est principal si le navigateur ne supporte pas la propriété en désaccord, dans ce cas, nous pouvons attribuer le bloc d'affichage CSS De plus, nous pouvons utiliser le sélecteur avec plusieurs conditions. Laisse-moi te montrer ça. Comme vous pouvez le constater avec le sélecteur de support, nous avons utilisé ici deux conditions : afficher flocons ou afficher les flocons du webkit Il s'agit du préfixe du navigateur Chrome. Il s'agit de deux conditions différentes. Si l'une des conditions est vraie, l' autre est fausse, alors le CSS sera exécuté. Et si les deux conditions sont vraies, il exécutera également le CSS pour vérifier la condition multiple, la façon dont nous utilisons l'opérateur, mais nous avons un autre opérateur, qui est l'opérateur. Donc, comme vous pouvez le voir entre la condition multiple que nous utilisons et l'opérateur, les deux conditions ne sont pas vraies, alors le CSS ne sera pas exécuté. Mais si nous utilisons Okword si l'une des conditions est vraie, le CSS sera exécuté Donc, si le navigateur prend en charge la grille et la grille en ligne, il exécutera ce CSS Dans cet exemple, comme vous pouvez le voir, il a utilisé les deux conditions, mais vous pouvez utiliser plusieurs conditions à la fois. Il suffit d'utiliser ou un mot clé, sinon, et un mot clé entre eux. Commençons donc par la pratique et voyons comment nous pouvons utiliser ce sélecteur, un support direct Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur à l'aide de l'extension Lifesaver, et j'ai déjà créé un document ML nommé index point Donc, dans un premier temps, je vais taper Style tech. Style. Et dans cette balise de style, je vais utiliser le sélecteur de support En tout cas, des supports souples. Ensuite, à l'intérieur de la robe ronde je vais régler les conditions. Je vais dire Display, et je vais utiliser Flix Display Flix. Ensuite, à l'intérieur du Cariss, nous allons sélectionner notre body tag Nous allons sélectionner le body tag. Le corps, c'est le calibre. Je vais utiliser la propriété d'arrière-plan. Arrière-plan, et je veux appliquer la couleur orange de fond. Orange. Si cette condition est vraie et que ce navigateur prend en charge la propriété flex, la couleur d'arrière-plan sera modifiée. Si je définis ce fichier, comme vous pouvez le voir, maintenant, la couleur de fond de notre corps est orange. Maintenant, permettez-moi d'utiliser une propriété qui n'est pas prise en charge par le navigateur Chrome. Donc pour l'instant, je vais retirer les flocons et elle doit taper brique de décoration de boîte, brique décoration de boîte, et je vais utiliser la propriété de la tranche. Trancher. Nous devons également supprimer ce point-virgule Nous n'avons pas besoin de ce point-virgule dans notre état. Si je définis ce fichier, comme vous pouvez le voir, il n'applique plus la couleur d' arrière-plan orange car cette propriété et cette valeur ne sont pas prises en charge par le navigateur Chrome. Pour l'utiliser, nous devons utiliser le préfixe webkit. Cette propriété n'est donc pas prise en charge par Google. Mais si j'utilise des supports non durcis , n'appliquez pas la couleur orange. Si les navigateurs ne supportent pas cette propriété, elle s'appliquera. Ainsi, après avoir défini ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant le voir appliquer une couleur de fond orange au corps. Utilisons maintenant plusieurs conditions. Pour cela, je vais utiliser l'opérateur. Donc pour l'instant, je vais supprimer ce type non guéri et hémopathique Ou dans la robe ronde, je vais taper Display Flex. Je vais retirer ce colon. Je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir la couleur d'arrière-plan fixe revenir orange car cette fois, l'une des conditions est vraie. C'est pourquoi il redevient orange. Si les deux conditions échouent, d'arrière-plan ne sera pas couleur d'arrière-plan ne sera pas appliquée. Laisse-moi te montrer. Donc, pour que cette condition échoue, je vais appliquer la même propriété. Je copie cette propriété et je remplace le fail par celle-ci. Ensuite, je vais modifier la valeur de cette propriété. Je vais maintenant appliquer la valeur du clone. Cloner. Si je définis ce fichier, comme vous pouvez le voir, les deux conditions échouent maintenant, c'est pourquoi nous n'appliquons pas la couleur de fond orange à ce corps. C'est ainsi que fonctionne l'opérateur. Maintenant, laissez-moi vous montrer, à vous et à l'opérateur. Cette fois, je vais remplacer A par et et je vais sous-traiter ce fichier. Après avoir sous-traité ce fichier, vous pouvez toujours voir qu'il n'applique pas de couleur de fond orange. Et maintenant je vais vérifier que les deux conditions sont vraies. Si les deux conditions échouent, la couleur d'arrière-plan ne sera pas appliquée. Mais si je confirme les deux conditions , Sootide présentera des flocons Je vais également modifier cette condition, qui est la position absolue. Et nous devons supprimer ce point-virgule. Nous n'avons pas besoin de mettre ce point-virgule dans notre condition. Si je définis ce fichier, vous pouvez maintenant voir qu'il a changé couleur d'arrière-plan, car si nous utilisons un opérateur, vous devez vous assurer que les deux conditions sont vraies, puis appliquer la couleur d'arrière-plan. Mais si l'une des conditions échoue, cette couleur d'arrière-plan ne sera pas appliquée. Donc, si je fais échouer l'une des conditions, la décoration de la boîte casse le fichier et le comprime. Comme vous pouvez le voir, encore une fois, il n'applique pas le CSS. Mais si j'utilise l'opérateur or ici et que je comprime ensuite ce fichier, il appliquera maintenant la couleur orange car l'une des conditions est vraie. C'est ainsi que fonctionne le support. J'espère que vous comprenez maintenant comment nous pouvons l'utiliser. 130. Tutoriel de Pseudo cours présenté dans CSS Placeholder: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau CSS lié au tutoriel. Et dans ce tutoriel, nous allons apprendre une nouvelle classe posto, qui est présentée en soudeur Je sais que vous connaissez déjà le placeholder. Nous avons utilisé un espace réservé dans nos balises de saisie. Si vous voulez simplement utiliser cet espace réservé à cet attribut, nous pouvons taper n'importe quel texte Et ce texte a fonctionné comme une étiquette. Et chaque fois que nous essayons de taper quelque chose dans ce champ de saisie, le texte de cette étiquette est masqué. Et si vous souhaitez styliser l'espace réservé associé, CSS introduit une nouvelle classe posto, qui est l'espace réservé affiché Et cela ne fonctionne qu' avec un total de deux balises, balise d'entrée et une balise de zone de texte. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server, et je crée déjà un document TML nommé index point TML Comme vous pouvez le voir dans notre balise body, nous avons une balise from, et à la place de cette balise from, nous avons un total de quatre champs de saisie. Nous avons deux champs de saisie de texte, un champ de saisie numérique et un champ de saisie d'e-mail. abord, nous devons fournir le nom, puis l'adresse, puis le numéro, et enfin, nous devons fournir un e-mail. Je stylise déjà ce champ de saisie en fonction de mes besoins. Et chaque fois que j'essaie de taper quelque chose dans ce champ de saisie, supposons que vous en ajoutiez un comme vous pouvez le voir, cela masque le texte de l'étiquette. Et maintenant, je veux afficher la bordure de ce champ de saisie jusqu'à ce que je tape du texte dans ce champ de saisie. Je veux dire jusqu'à ce que vous supprimiez le texte de l'étiquette. Pour cela, nous devons utiliser espace réservé indiqué dans le sélecteur de verre Poseido Donc ici, je vais taper une entrée. Alors je vais utiliser des lunettes Poseido. Et ici, je vais taper l'espace réservé affiché. Puis j'ai dit à la classe, ici, je vais attribuer une bordure. Bordure, je veux une bordure solide en C pixels. Avec cela, la couleur de notre bordure est le rouge. Après avoir défini ce fichier, comme vous pouvez le voir, il applique une couleur de bordure rouge dans nos champs de saisie. Et chaque fois que j'essaie d' écrire quelque chose dans ce champ de saisie, la couleur de la bordure est supprimée. Il a supprimé la bordure. Laisse-moi te montrer. Supposons que si je tape bonjour, comme vous pouvez le voir, cela supprime la couleur de la bordure rouge. la même manière, si je tape le deuxième mot du champ vous remarquerez également qu'il a supprimé la couleur de la bordure rouge. Si notre espace réservé est actif, n'est que là que nous pouvons appliquer ces propriétés car nous utilisons ici cette classe Posido, l'espace réservé Et si je supprime le contenu de ce champ de saisie, cela applique à nouveau les propriétés affichées par l'espace réservé C'est donc l'utilisation principale de la Posido affichée par un espace réservé Et n'oubliez pas que l'espace réservé ne fonctionne pas sur tous les champs de saisie Si je duplique cette section et que je change le type d'entrée, le type d'entrée, la date. Ils ont défini ce fichier, et ensuite, je vais modifier le texte de l' espace réservé pour toute la date Et puis définissez ce fichier après avoir défini ce fichier, vous pouvez voir ici le champ de date. Mais vous pouvez remarquer qu'il n' applique pas les propriétés affichées par l'espace réservé D car ce sélecteur de poseudoclas ne fonctionne pas à la date, à l' heure, au mois, à la semaine, etc., et vous devez vous en souvenir ne fonctionne pas à la date, à l' heure, au mois, à la semaine, etc., et vous devez vous en souvenir. Et si vous souhaitez cibler un champ de saisie en particulier, oui, vous le pouvez. Supposons que vous souhaitiez cibler uniquement le type de champ de saisie. Pour cela, vous devez utiliser ici square sis. Ensuite, vous définissez la résine carrée ici, vous devez fournir le type Tapez égal à l'intérieur des codes doubles, sinon, les codes simples, vous devez fournir le type de champ de saisie, qui est du texte. Si je place ce fichier, vous pouvez voir le résultat ici. Cette fois, ce sélecteur Positoglass ne fonctionne que dans les champs de saisie de texte C'est donc comme ça que c'est terminé. J' espère que c'est clair pour toi maintenant. Merci d'avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 131. Tutoriel de chaîne de caractères de type de liste CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Dans nos précédents didacticiels, nous allons en apprendre davantage sur le style, et nous connaissons déjà la propriété du type de tuile. Et cette propriété introduit une nouvelle valeur, une chaîne. Essayons maintenant de comprendre ce que c'est. Si nous parlons de liste non ordonnée, comme je vous l'ai dit, nous avons un total de trois valeurs, disque , carré et cercle, et cela ressemble à ça Si nous utilisons la valeur digs, elle renverra un point plein Et si nous utilisons le carré, il renverra un carré plein. Et si vous utilisez un cercle, cela renverra un cercle vide Maintenant, sans ces trois valeurs, nous pouvons transmettre une valeur de chaîne. Comme vous pouvez le voir dans cet exemple, nous utilisons ici une forme. Ce n'est pas une image. Il s'agit d'un symbole ML. la même manière, nous pouvons utiliser différents symboles, quelque chose comme ça. Nous pouvons également transmettre une chaîne en tant que type de style. Dans notre cas, Waouh. Passons maintenant à l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension if server, et je crée déjà un document stable, nommé index point stem Dans notre body tag, vous pouvez voir ici la liste des nœuds, et nous avons un total de cinq éléments dans cette liste Et maintenant, je veux arrêter cette liste nodale. Pour cela, je vais sélectionner le tag UL. L'URL à l'intérieur de la Carriress que je vais utiliser, la propriété est une attache à carrelage Type de style, et ici, je vais utiliser une valeur de chaîne. Pour utiliser cette valeur de chaîne, il suffit de passer cette valeur de chaîne dans le guillemet. Donc, entre guillemets, je vais passer la démo. Une fois que j'ai configuré ce fichier, vous pouvez le voir dans mon navigateur, il remplace tous les points par cette démonstration de chaîne. Voici donc comment nous pouvons passer n'importe quelle chaîne ici. Supposons que si je fournis de l'espace, trait d'union et que je configure ce fichier, cela semble maintenant plus amer Nous devons également changer de position. Par défaut, c'est le contraire. Donc ici, je vais utiliser une propriété is style position, style, position inside. Si je sauvegarde ce fichier, vous pouvez voir le résultat. Maintenant, laissez-moi vous montrer comment nous pouvons utiliser les symboles ici. Pour utiliser les symboles du tableau, nous devons le rechercher sur Google. Il suffit donc de rechercher les symboles STL. De nombreux sites Web fournissent un symbole SML tel que Three School, Toptal, etc. J'ouvre donc l'un de ces sites. Tout d'abord, je vais ouvrir Top tell. Comme vous pouvez le constater, il existe plusieurs symboles SML. Ces symboles ne sont pas disponibles sur notre clavier. Si vous faites défiler cette page vers le bas, vous pouvez trouver de nombreux symboles. Maintenant, je vais utiliser l'un des symboles. Supposons que je vais utiliser Je veux utiliser ce symbole de nuage. Pour utiliser ce symbole, il vous suffit de le sélectionner , puis d'appuyer sur Ctrl C pour le copier. Nous devons maintenant revenir à notre document. Et voilà, je vais extraire cette démo avec ce symbole, Control V, ce Cloud, et je vais configurer ce fichier Après avoir défini ce fichier, si j'ouvre mon navigateur, vous pouvez voir le résultat ici. Maintenant, remplacez le type de liste par le symbole. À partir de là, vous pouvez utiliser n'importe quel symbole. Supposons que si vous souhaitez utiliser ce symbole de téléphone, il vous suffit de le copier et de le coller ici. Je vais remplacer Cloud par ce symbole, puis fournir un espace et définir ce fichier. Après avoir configuré ce fichier, si je vous montre mon navigateur, vous pouvez maintenant voir la résine. Il remplace Cloud par ce symbole de téléphone. Sur ce site Web, vous pouvez trouver tous les symboles de type up. Supposons que si vous souhaitez utiliser le symbole monétaire, cliquez simplement sur la devise. Et si vous souhaitez utiliser des symboles MT, cliquez sur le numéro des symboles mathématiques, celui que vous souhaitez utiliser. la même manière, d'autres sites Web fournissent le même type de symboles. Voici donc comment nous pouvons l'utiliser. Ici, nous pouvons également transmettre Sting, nous pouvons transmettre n'importe quel symbole. J'espère donc que vous savez maintenant comment nous pouvons utiliser ce nouveau flux vidéo. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour le prochain tutoriel. 132. Tutoriel de comportement de défilement CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce didacticiel, vous allez apprendre un nouveau CSS lié aux propriétés, comportement de défilement. Dans un premier temps, laissez-moi vous montrer un exemple Que pouvons-nous faire en utilisant le comportement de défilement ? Comme vous pouvez le voir, j'ouvre ici une page Web, et nous avions une barre de netbar et dans notre barre de réseau, un lien à trois pôles, un, deux et Et ici, dans cet exemple, j'utilise la méthode de liaison interne. Donc, si je clique sur l'un d'eux, il sera redirigé vers la première section. Si je clique sur trois, cela me redirigera vers la section trois. Mais si vous remarquez, vous pouvez voir que si je clique sur l'un des éléments, notre mot de défilement passe à la position. Si je clique sur la section deux, vous pouvez remarquer que notre mot de défilement descend vers le bas. Nous pouvons créer cette transition scrollbt en utilisant la propriété scroll behavior. Mais quoi ? Si nous n' utilisons pas la propriété de transition du mot de défilement. Si je commente cette propriété, faites défiler le comportement des mots, revenez à ma page Web et redémarrez mon navigateur. Si je clique sur la première section, comme vous pouvez le voir, maintenant, vous ne pouvez pas ressentir de transition. Il passe instantanément à cette section. Si je clique sur la section trois, vous pouvez maintenant remarquer que notre barre de défilement ne bouge pas Vous ne ressentez aucune transition. C'est pourquoi le comportement du scroller est important. Alors étudions la pratique et essayons de le comprendre. Comme vous le savez, dans le SDML, nous avons la balise Anca, et en utilisant la balise Anca, nous pouvons créer trois types de liens (lien externe, lien interne) et un autre est un lien e-mail Sans cela, il existe de nombreux liens nous pouvons créer à l'aide de la balise NCat, tels que le lien de téléchargement , le lien téléphonique, donc je ne vais pas en parler Notre sujet principal est le comportement du défilement. Si vous souhaitez utiliser le comportement de défilement, vous devez utiliser l'encre de page interne, et nous pouvons utiliser le lien de page interne dans notre document. Sinon, nous pouvons l' utiliser dans un élément de base de données. Ici, nous pouvons utiliser le trop-plein masqué, sinon nous pouvons utiliser la propriété de défilement pour créer cette barre de défilement Nous pouvons utiliser le comportement de défilement lorsque nous avons des données ana à faire défiler sur notre page. Si vous souhaitez utiliser cette propriété dans votre document, vous devez dans ce cas l' utiliser dans la balise TML Et si vous souhaitez l'utiliser dans une balise profonde, vous devez sélectionner cette balise dip, et vous pouvez attribuer une propriété de comportement de défilement Et dans cette propriété, nous pouvons transmettre un total de deux valeurs, Auto et Smooth Auto est la valeur par défaut de cette propriété. Cela ne changera rien. Mais si vous utilisez une valeur fluide, cela changera votre comportement de défilement. Donc, sans perdre votre temps, commençons la pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension de serveur Lip, et je crée déjà un document ETML nommé index point html Vous pouvez donc voir ici une mise en page de base. Si je vous montre ma structure d' estimation, vous pouvez voir ici que nous avons une barre d'affichage C'est notre zone n bar, et nous devons effacer le lien entre trois éléments Pour l'instant, nous ne fournissons aucun lien dans notre tag d'ancrage. Ensuite, nous avons des sections. Il s'agit de la première section. Il s'agit de la section deux. Et cette section est faite avec la balise section, et dans cette balise de section, nous avons la balise H deux, titre deux. Et comme vous pouvez le constater dans chaque section, nous attribuons un service informatique. C'est pour la section un, l'ID un, l' ID deux, l'ID trois. Maintenant, comme vous pouvez le voir, nous avons suffisamment de zone de défilement sur notre page. Je vais maintenant utiliser les liens internes. Si je fais défiler cette page un peu vers le bas, comme vous pouvez le voir, notre barre Nb s'en tient à cet espace. Ici, vous pouvez voir que nous utilisons la position de la barre N, zéro supérieur. C'est pourquoi il reste à sa place. Maintenant, je vais utiliser les liens internes vers les pages. Dans un premier temps, je vais lier la section à la balise ancha numéro un Pour lier cela, je vais utiliser son nom d'identification 1. Donc, pour lier cet identifiant, un HTG. Il s'agit d'une méthode d'encrage de page interne. Ensuite, je vais lier la section deux, hashtag, deux. Enfin, je vais mettre le lien avec le tag 3. Et je vais configurer ce fichier. Après avoir défini ce fichier, si je clique sur le lien numéro deux, comme vous pouvez le voir, il est redirigé vers la section deux De même, si je clique sur le lien numéro trois, il est redirigé vers la section trois. Mais le problème, c'est que si vous remarquez ce comportement de défilement, si je clique sur le numéro un, cela passe instantanément à section numéro un, mais je n'en veux pas. Je veux que la transition se fasse en douceur. Donc, pour résoudre le problème, nous pouvons utiliser la propriété de comportement de défilement. Ici, je vais créer un sélecteur dans notre section de style Avant la balise body, je vais sélectionner la balise TML, le SML entier Ensuite, à l'intérieur de la résine Cali, je vais utiliser la propriété, le comportement de défilement Et je vais utiliser Smooth Value. Après avoir défini ce fichier, et si je clique sur le numéro trois, vous pouvez maintenant voir un effet de lissage De même, si je clique sur le numéro un, vous pouvez remarquer qu'il redirige vers le numéro un, mais qu'il fait défiler la page. Voici donc ce que nous pouvons créer en utilisant l'effet de défilement. Si vous souhaitez l'attribuer dans votre page de rôle, vous devez dans ce cas sélectionner la balise TML Sinon, vous pouvez l' utiliser dans un élément profond. Voilà pour ce tutoriel. Merci d'avoir regardé cette vidéo State even pour le prochain tutoriel. 133. Tutoriel de sélecteur de fichaire CSS Button Pseudo élément: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, vous allez apprendre un nouvel élément posto, connu sous le nom de cinq boutons de sélection Vous pouvez voir ici la liste de tous les éléments posto, et nous avons déjà abordé cet élément posito dans nos précédents Dans cette avance, il y avait un nouvel élément positif , à savoir cinq boutons sélecteurs Essayons maintenant de comprendre ce que nous pouvons faire avec le bouton de sélection de fichiers En HTML, nous avons une balise connue sous le nom de in et cette balise d'entrée contient différents types de messages tels que le texte, le courrier électronique, la soumission, etc. De même, elle a une valeur. Dont le type est un fichier de type fichier d'entrée. Après avoir utilisé le type de fichier dans notre balise de saisie, nous pouvons voir ce type de bouton dans notre navigateur. Choisissez Fichier. Après avoir cliqué sur ce bouton, nous pouvons choisir n'importe quel type de fichier. Je sais que cela vous est déjà familier. Mais si vous remarquez que vous pouvez voir, il est toujours de couleur grise. autre côté, nous pouvons styliser les boutons, nous pouvons styliser n'importe quel autre élément. Mais jusqu'à présent, nous ne pouvons pas changer la couleur de ce colorant pour fichiers. Nous ne pouvons attribuer aucune couleur à ce bouton. Et si nous voulons le faire, nous devons utiliser l'écran Java de Hellbog, et c'est un processus très lent. Je veux changer la couleur de ce bouton de saisie, quelque chose comme ça. Et cela n'est possible que par le biais du bouton de sélection de fichiers Posidoglass Commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Results Studio et mon navigateur à l'aide de l'extension Live Server, et je crée déjà un document HTML, nommé index point HTML Dans un premier temps, je vais créer la structure TML. Je vais donc utiliser l'étiquette frontale. Et à l'intérieur de la balise frontale, je vais d'abord créer une étiquette, une étiquette, et ici je vais taper un texte. Pour cet exemple, je n'ai pas besoin de ces quatre attributs. Je vais le supprimer, et dans cette étiquette, je vais taper upload five. Après cela, je vais utiliser la balise d'entrée. Entrée. Entrée, je dois régler TIF. Je vais également attribuer un identifiant à cette balise d'entrée. ID égal à upluot. Ensuite, je vais configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat dans mon navigateur. J'ai donc fait une partie trop estimable. Maintenant, nous stylisons la balise d'entrée, celle-ci. Donc, à l'intérieur de l'étiquette principale, je vais taper style tag. Style. Nous pouvons le cibler à l' aide de notre téléchargement de nom d'identification. Nous pouvons également le cibler en utilisant son type. Dossier. Je vais donc le sélectionner à l'aide de sa cravate. Alors voilà, je vais taper. Tout d'abord, je vais taper le nom du tag saisi. Ensuite, à l'intérieur du carré ss, je vais fournir le lien , le type d'entrée que je vais sélectionner. Donc ici, tapez égal à fichier. Et maintenant, je veux changer la couleur d'arrière-plan de ce type de fichier d'entrée. Mais je ne peux pas le faire directement. Nous devons d'abord utiliser le sélecteur de fichier PosidoGlass, nous devons le lier au nous devons le lier au Ensuite, nous devons passer le nom du sélecteur de position Fichier, le sélecteur de tiret, le bouton de tiret Voici comment nous pouvons utiliser ce sélecteur. Donc, dans un premier temps, je vais changer la couleur de fond. Tapez donc la couleur de fond, et je vais la mettre en rouge. Avec cela, je vais changer la couleur de la bordure. Bordé. Je veux une bordure solide de deux pixels et la couleur de la bordure est verte. Maintenant, configurons le fichier et voyons s'il fonctionne correctement ou non. Après avoir défini ce fichier, comme vous pouvez le constater, il a fonctionné correctement. Ajoutez maintenant un peu de rembourrage. Dix Bigel dans chaque direction. Je vais également changer la couleur du texte. Couleur. Pourquoi ? Après avoir consulté ce fichier, vous pouvez voir le résultat Maintenant tu as peut-être du titane. Quoi ? Si je télécharge ce sélecteur, si je télécommande le PostoGlass, laissez-moi vous Donc, si je supprime le PositoGlass et que je sélectionne simplement le type de fichier d'entrée et ceci dans ce fichier, vous pouvez voir le résultat Cela n'a pas fonctionné correctement. Maintenant, il ajoute de la couleur au diagramme à l'ensemble de la section. C'est pourquoi nous devons utiliser ce Positroselector, Si je le sauvegarde à nouveau, vous pouvez voir le résultat. Maintenant, si je clique sur ce bouton, nous pouvons choisir n'importe quel type de fichier. Supposons que je sélectionne cette image d'atterrissage. Vous pouvez voir le nom de cette image, landing point JPG. Non seulement cela, vous pouvez également utiliser Hobart PosidoClass Je vais donc dupliquer cette section, et cette fois, je vais utiliser le sélecteur Hobart. Colon Hobart Cette fois, je vais changer uniquement la couleur de fond. Je vais utiliser la version plus foncée de cette couleur rouge, quelque chose comme ça. Et je vais configurer ce fichier. Après avoir configuré ce fichier, si je passe mes cartes sur ce bouton, vous pouvez voir le résultat Il change de couleur d'arrière-plan. Voilà pour ce tutoriel. J'espère que vous savez maintenant comment personnaliser nos boutons de sélection de fichiers Merci donc d'avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 134. Tutoriel de filtre de toile de fond CSS: Bonjour, les gars, c'est bon de vous voir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Et dans ce didacticiel, nous allons apprendre un filtre appelé filtre de fond. Supposons que nous insérions une image d'arrière-plan dans notre balise HTML body. Sinon, nous pouvons supposer que nous envoyons l' image d'arrière-plan dans une balise profonde. Maintenant, dans cet élément profond, nous avons un autre élément profond. De plus, cette profondeur est accompagnée d'une couleur de fond, d'une bordure, etc. Maintenant, physiquement, je ne veux pas donner de couleur de fond à cet objectif profond. Quelque chose comme ça. C'est un transparent. Sinon, je peux l' ajuster avec une faible opacité. Mais maintenant, je veux attribuer un filtre au Dip Ignit interne et pour le rendre possible, CSS a introduit le filtre, connu sous le nom de filtre Brop À l'aide de ce filtre, nous pouvons attribuer n'importe quel effet à la section intérieure de l'élément profond. Mais nous n'ajoutons aucun effet à l' image d' arrière-plan de notre élément profond principal. Ne vous inquiétez pas, nous allons le faire de manière pratique. De plus, cette propriété filtrée en toile fond est associée à un poids prédéfini. Laisse-moi te montrer. Ce sont donc des objets que nous pouvons utiliser avec du bagrap filtré. Ce sont tous des effets : flou, luminosité, contraste, ombre portée, échelle de gris, rotation des teintes, inversion, opacité, spa, saturation, etc. Passons maintenant à l'aspect pratique et appliquons tous les filtres un par un. Comme vous pouvez le voir, côte à côte, j'ouvre l'éditeur de code de mon studio de résultats et mon navigateur à l'aide de l'extension Live Server, et j'ai déjà créé un document d'estimation nommé table à points d'index. Donc, comme vous pouvez le voir dans notre document d'estimation, c'est sur l'étiquette du corps, nous avons un conteneur Da De ID, et dans notre section de style, je stylise cet Em profond. La voici avec 600 pixels, hauteur, 800 pixels. Vous avez également dit bordure, 500 pixels, bordure pleine. Ensuite, nous ajoutons une image de fond à ce continent, une URL d'arrière-plan, un point nature, un point JPG. Maintenant, dans cet élément continua deep, je vais créer une autre dette, certain type, et je vais attribuer un identifiant à ce développement, identifiant égal à Ian Ensuite, je vais styliser ce développement dans notre section de style. Dans un premier temps, je vais sélectionner ce debilmin en utilisant son nom d'identification, inner Ensuite, les calices, je vais d'abord semer de l'herbe. Weed, ici je vais dire 400 pixels. Propriété suivante, je vais utiliser la hauteur, hauteur, je vais définir 250 pixels. Je vais aussi dire que c'est la couleur de fond. Arrière-plan, et je veux un fond de couleur blanche. Je vais donc utiliser Hix HH. Propriété suivante, je vais utiliser le rayon de bordure, rayon de bordure, et je vais définir le rayon de bordure de cinq pixels. De plus, nous devons attribuer une bordure avec une bordure bordée avec, je veux une bordure solide de deux pixels, solide Et je veux dire couleur de bordure blanche. Mot-clic KSH. Et je vais configurer ce fichier. Après avoir défini ce fichier, voici ce qu'il crée. Maintenant, je veux supprimer la couleur de fond de cette plaque inondée Je vais donc commenter cette ligne, et je vais configurer ce fichier. Après avoir défini ce fichier. Oups. Lui, nous devons utiliser uniquement la propriété frontalière, pas avec la propriété. Bordure, seule frontière. Si je définis ce fichier, c'est ce qu'il crée. Vous pouvez maintenant voir que nous avons un élément profond transparent avec une bordure blanche pleine à pixel. Et maintenant, nous devons déplacer cet élément profond intérieur verticalement et horizontalement au centre. Et pour l'aligner, je vais utiliser un flex d'affichage des propriétés. Donc, dans notre conteneur parent, je vais taper Je vais lier le flocon d' affichage du nom de la propriété Et alignez-le, alignez les éléments au centre, au centre et justifiez qu' ils contiennent également le centre. Après avoir défini ce fichier, vous pouvez voir le résultat. Augmentons la bordure intérieure en T pour la rendre plus large. Au passage, cinq pixels. Pour configurer ce fichier, il est désormais plus visible. Et maintenant, je vais appliquer un filtre de fond dans notre élément profond intérieur. Nous pouvons donc voir l'effet de filtre d'image à travers cet élément profond. Il est maintenant temps d'utiliser l'ajusteur de toile de fond de propriété, le type de somme, la toile de fond et le filtre de toile Et d'abord, et pour la première vidéo, je vais utiliser le flou C'est le vétérinaire préféré de Pin. Ici, on parle de flou à pixel près. Après avoir défini ce fichier, vous pouvez maintenant voir l'effet sanguin à travers l'élément profond interne. Vous pouvez maintenant voir l'effet sanguin à travers l'élément d'immersion interne. Et si vous voulez augmenter la version sanguine, augmentez simplement la valeur. Si je crée un flou de six pixels puis que je définis ce fichier, vous remarquerez maintenant que cela rend cette partie plus floue Non seulement cela, en même temps, vous pouvez ajouter, vous pouvez ajouter de la couleur de fond à cet élément profond intérieur. Laisse-moi te montrer. Supposons que je vais utiliser la couleur d'arrière-plan de cette propriété, et ici je vais utiliser la valeur RGV Nous allons utiliser la valeur Alpha pour plus de transparence. Alors tapez RG, BA, à l'intérieur de la robe ronde je vais taper 255 couleur blanche, 255 et 255 Et pour Alpha Val, je vais prendre 0,2. Si je configure ce fichier, vous pouvez voir le résultat. Et si j'augmente la valeur de transparence, si je la rends semi-transparente de 0,5 et règle ensuite la semelle, vous pouvez voir plus de blancheur dans cet effet sanguin Et n'oubliez pas que nous ne définissons aucun effet sur l'image d' arrière-plan. Ici, nous utilisons l'effet dans notre section intérieure consacrée aux éléments profonds. Et si j'utilise du contenu dans cet élément inatp, cela n'affectera pas le contenu. Laisse-moi te montrer. Donc, à l'intérieur de cet élément innatp, je vais ajouter un titre à ce « motie hello ». Pourquoi ? Et je vais dire centre d' alignement du texte d'alignement, centre d'alignement du texte. Et je vais configurer ce fichier. Après avoir défini ce fichier, vous verrez le résultat. Vous pouvez maintenant voir qu'il ne quantifiera pas efficacement ce qui se trouve à l'intérieur de l' élimination inactive Maintenant, parlons du prochain wow. Donc, dans un premier temps, je vais commenter cette propriété de couleur d'arrière-plan. Ensuite, je vais examiner cette ligne et commenter la ligne précédente, et je vais remplacer le flou par la luminosité Lors des longues courses, il devra transmettre la valeur en pourcentage. Supposons que si j'utilise 60 % et cela dans ce fichier, vous pouvez maintenant voir que cela réduit la luminosité de cette section intérieure. Et si je fais 10 % et ceci sur ce fichier, vous pouvez maintenant remarquer une baisse de luminosité plus importante dans cette partie. Et si je passe 100 %, c'est la valeur différée. Maintenant, c'est exact. Mais si je veux augmenter la luminosité, nous pouvons transmettre une valeur supérieure à 100 %. Supposons que si j'en passe un à 50 % et que ce soit dans ce fichier, vous pouvez maintenant le voir augmenter la luminosité de cette section intérieure. Si j'en fais 200, maintenant c'est plus clair pour toi. Voici donc comment nous pouvons utiliser cette luminosité d'alimentation. Passons maintenant au filtre suivant, qui est le contraste. Je vais donc être cette ligne, commenter notre ligne précédente et modifier cette luminosité avec le contraste Ensuite, vous avez dit que le candidat avait dit : «  Je vais passer les 40 % Ensuite, si je suis satisfait, vous pouvez voir le résultat. Dans ce cas, vous devez également passer le pourcentage d unité. Vous pouvez maintenant voir l' effet de cuisson dans cette portion. Et si je le fais à 100 %, comme la luminosité, vous pouvez voir l'image exacte. Maintenant, si je veux augmenter le contraste, supposons quelque chose de 50 % et que vous définissez ce fichier, vous pouvez voir le résultat. En gros, le contraste a un effet sur les couleurs. Cela peut réduire la quantité de couleur. Cela peut également augmenter la quantité de couleur. Si je fais 200 %, 200 % et que je définis ce fichier, vous pouvez voir plus de contraste dans la Vous pouvez maintenant remarquer qu' à cette partie, les ombres sont beaucoup plus visibles. De plus, la couleur verte est surlignée. Parlons maintenant du filtre suivant, qui est u rotate. Je vais dupliquer cette section et commenter la ligne précédente. Et je vais m'attarder à la rotation du filtre H. Ensuite, je règle le rond pra, c'est ici l'unité passe ici l'unité passe par l'unité, le degré de réussite. Donc, ici, je vais passer les 120 degrés. Et si je configure ce fichier, vous pouvez voir le résultat. Si vous travaillez dans Photoshop, cette option vous est assez familière. Si vous modifiez la valeur du degré, cela changera la couleur de l'image. Supposons que si je fais 150 degrés et que je définis ce fichier, vous pouvez voir une couleur différente pendant le sommeil. Et si je ne fais que 90 degrés, vous pouvez voir un résultat différent. Et nous pouvons augmenter la valeur jusqu'à 360 degrés. Si je passe à 360 degrés et que je définis ce fichier, voici ce qu'il contient. Maintenant, il a exactement la même apparence. Et si je fais un degré un degré et que je règle le fichier, maintenant vous pouvez voir qu'il n' y a pas de différence. Mais si j'augmente un peu la valeur, quelque chose de 40 degrés et ceci dans ce fichier, vous pouvez maintenant remarquer les changements. Parlons maintenant du filtre. Je vais donc dupliquer cette section et commenter la précédente. Et cette fois, je vais utiliser Invert Vale tie Invert. Cette valeur vous fournit exactement même effet négatif propre. Ici, vous devez utiliser le pourcentage de cette unité. Donc, si je le fais à 60 % et que je configure ensuite ce fichier, c'est ce que c'est. Maintenant, ça a l' air d'être un Flam négatif. Et si je le fais à 100 % et que je configure ensuite ce fichier, il aura maintenant complètement l' air négatif. Passons maintenant au filtre suivant qui est SIPEA. Pour dupliquer cette ligne, commenter la ligne précédente et remplacer invert Et il faut aussi un pourcentage de cette unité. Donc pour l'instant, je vais passer 50 %, et je vais configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. En gros, cela peut vous donner un petit effet vintage. Si je le fais à 100 % et configure ce fichier, vous pouvez voir le résultat. Certains films et vidéos populaires utilisent ce filtre. Parlons maintenant du filtre suivant, qui est saturé. Je duplique donc cette ligne , je commente la précédente et je remplace la RCP par saturate Saturer à 100 %. Si je place ce côté, vous pouvez voir l'image par défaut. Si vous réduisez la valeur et obtenez 10 %, la couleur sera supprimée. Maintenant, ça va ressembler à noir et blanc, quelque chose comme ça. Et si vous voulez le faire entièrement en noir et blanc, il suffit de dépasser une personne, sinon 0 %. Cela va rendre l'ensemble de l' image en noir et blanc. Vous pouvez l'expérimenter pour obtenir des résultats différents. Non seulement cela, vous pouvez utiliser plusieurs chargeurs à la fois, cela lui montre. Je vais donc dupliquer cette ligne et commenter la précédente. Cette fois, avec cela, je veux utiliser l'inversion Donc, d'abord, je vais utiliser la valeur du flou, flou et je vais utiliser un dé à deux pixels Ensuite, je vais utiliser Invert B. Invert. Inversez la valeur, je vais utiliser 100 %. Si je configure ce fichier, vous pouvez voir le résultat. Maintenant, vous pouvez remarquer qu'avec le dire vous pouvez également voir le filtre inversé Vous pouvez donc utiliser plusieurs filtres à la fois autant que vous le souhaitez. Maintenant, pour rendre cet effet plus percutant, je vais utiliser l'effet Hover Donc, dans un premier temps, je vais sélectionner le tag dip interne, has tag, inner. Ensuite, Colon, je vais utiliser Positoselector Hober puis insérer le Caira dit : «   Je vais utiliser cette banque de filtres pour dessiner Copiez cette section et je vais la coller ici. Et aussi, je commente cette option, et je vais définir ce fichier. Donc, si je passe le curseur sur cette section, vous pouvez voir l'effet. Ajoutons également une transition pour le rendre plus animé. Donc, ici, je vais utiliser une propriété appelée transition. Transition. Et je souhaite ajouter un effet de transition, un filtre de fond particulier. Donc je suis attaché, lâchez le filtre. Et pour le temps de transition, je vais utiliser 0,3 seconde. Et je vais configurer ce fichier. Et si je passe le curseur sur cette image, vous pouvez voir le résultat. Et si j'augmente le temps de transition, Sabin place ce fichier et je passe mon curseur sur cet élément, vous pouvez voir l'effet Vous pouvez maintenant voir le bel effet de transition. Voilà pour ce tutoriel. J'espère que vous savez maintenant comment utiliser le filtre de fond d'écran. Merci donc d' avoir regardé cette vidéo, Sduned pour le prochain tutoriel 135. Le Pseudo cours de CSS3 est() amélioré: C'est bon de vous revoir, les gars. Dans ce tutoriel, vous allez apprendre qu' une nouvelle classe Posito s' appelle posto class Supposons que nous ayons une profondeur avec ID ABC et qu'à l'intérieur de cette profondeur, nous ayons un paragraphe. la même manière, nous avons un autre identifiant profond X Y, et à l'intérieur de ce profond, nous avons un autre paragraphe. Et maintenant, je veux changer la couleur du paragraphe à la fois. Les deux paragraphes se trouvent à l'intérieur d'un élément p différent, mais nous avons peut-être un autre paragraphe sur notre site Web, mais surtout, je souhaite changer les couleurs des paragraphes. Pour sélectionner les deux paragraphes, nous attribuons d' abord l'identifiant, puis nous sélectionnons le paragraphe particulier associé à ce D. Ensuite, nous changeons de couleur. C'est notre ancienne méthode, et pour créer cette méthode, nous devons taper plusieurs lignes. Mais maintenant, nous avons classe es poseido pour créer ce code de programmation multiple en une seule ligne Quelque chose comme ça. Nous devons d'abord utiliser le sélecteur Poseido E, puis à l'intérieur de la presse ronde, nous devons transmettre à la fois le D ID, puis en dehors de la presse ronde nous devons transmettre l'élément, élément que je veux cibler et l'élément qui se trouve entre les deux Ici, nous passons P, puis à l'intérieur des couleurs, nous devons utiliser la propriété CSS. Ce type de code réduit donc la taille de notre fichier CSS. Cela a également augmenté, et cela a également augmenté la vitesse des pages. Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Et aussi, je vais vous montrer d'autres variantes de cette classe de poseido Comme vous pouvez le voir, côte à côte, j'ouvre l'éditeur de code de mon studio de résultats et mon navigateur en utilisant l'extension Lifesaver, et je crée déjà un index de nom de document estim point t. Donc, dans un premier temps, je vais vous dire Donc, dans le body tag, dans un premier temps, je vais prendre un DV et notre nom profond est taste one, taste one Ensuite, je vais dupliquer ce Dev et attribuer un nouvel identifiant à ce deep, Taste Two. Donc, dans le taste one Deep, je vais attribuer une balise de titre H one. Donc, dans notre premier ombrage, je vais taper la première section Et dans notre rubrique CND, je vais taper Section deux, Section deux Ensuite, je vais prendre un autre titre dans notre goût, un D, et je vais utiliser le titre deux. Et ici, je vais taper un sous-titre. Ensuite, je vais taper la balise de paragraphe, P, et là, je vais passer un paragraphe factice, plus bas, et je vais passer deux mots Et après ce paragraphe, je vais prendre une autre balise de titre, H trois. Et ici, je vais passer au sous-titre deux. Ensuite, je vais passer à un autre paragraphe. P. Et dans ce paragraphe, je vais passer et écrire «   Herald », hum cinq Ensuite, à l'intérieur du test 2 D, je vais ajouter un petit paragraphe. Low T. Je vais configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le contenu dans mon navigateur. Maintenant, je veux ajouter une ligne horizontale entre ces deux D. Pour cela, Healtype HR À partir de ce fichier, vous pouvez voir le résultat. Je vais maintenant vous montrer l'ancienne méthode. Je veux changer toute la couleur du titre dans celui de dégustation. Pour cela, nous devons le sélectionner plusieurs fois. Laissez-moi vous montrer comment faire. abord, nous devons sélectionner la pièce d'identité et la dame en goûtera une. Ensuite, nous devons sélectionner l' élément, qui est H un. Ensuite, nous devons indiquer le coma et je vais dupliquer cette ligne à la fois. Pour sélectionner H deux éléments, nous devons passer H deux et pour sélectionner H trois, encore une fois, nous devons passer H trois. Maintenant, dans la couleur ss, je vais utiliser la propriété CSS qui est colorée. Coloré en rouge. Si je sous-titre ce fichier, vous pouvez voir le résultat. Cela a changé tous les types de couleur de titre par rapport à notre goût D. Mais le problème, c'est que nous devons taper trois lignes de code, et maintenant je vais en faire une seule ligne à l' aide de son sélecteur Psitoglass Laissez-moi vous montrer comment faire. Encore une fois, je vais taper notre nom d'identification, goûter un. Goûtez-en un. Ensuite, nous devons utiliser le sélecteur Positro. E. Ensuite, à l'intérieur des versets ronds, nous devons sélectionner le nom de l'élément. Notre premier élément est H un. Notre deuxième élément est H deux, et notre troisième élément est H trois. Ensuite, à l'intérieur des portes, nous pouvons sélectionner notre propriété, et notre propriété est la couleur Et cette fois, je vais utiliser la couleur verte. Si je configure ce fichier, vous pouvez voir le résultat. En gros, il remplace notre ancienne propriété par une nouvelle. Si je commente toute cette section et que je reconfigure ce fichier, vous pouvez obtenir le même résultat. Désormais, nous n'avons pas besoin de taper notre nom d'identification plusieurs fois. Il suffit d'utiliser le sélecteur Po Zero. Maintenant, permettez-moi de vous montrer un autre exemple. Pour cela, je vais ajouter une autre balise de titre en dehors de la balise profonde, H one, et je vais taper un titre extérieur. Et je vais configurer ce fichier. Comme vous pouvez le constater, nous avons une balise head-tag à l'intérieur de taste one Dev, taste two Dev et à l'extérieur de DD. Maintenant, je décide de sélectionner cette balise d'en-tête, qui se trouve à l'intérieur du taste one et du taste two. Je ne veux pas sélectionner le modèle extérieur. Pour cela, je vais dupliquer cette section et cette fois, je dois nouer des liens car nous devons utiliser une robe ronde. Ensuite, à l'intérieur des robes rondes, nous devons passer le nom d'identification. Hashtag Tastez-en un. Goûtez un hashtag à virgule, goûtez-en deux. Après cela, je souhaite sélectionner un seul titre. Je vais retirer ces robes rondes et je vais taper une robe H. Cette fois, je veux de la couleur rose. Après avoir configuré ce fichier, vous pouvez voir le résultat. C'est la deuxième méthode que nous pouvons utiliser, c'est Positroselector C'est ainsi que nous pouvons sélectionner la rubrique particulière issue du goût 1 et du goût 2. Mais si vous n'êtes pas facile, comme vous pouvez le constater, il ne peut pas sélectionner le titre extérieur. Je vais maintenant vous montrer un autre exemple. Ici, je vais créer une sélection complexe. Pour cela, je vais utiliser Is Posidoselected to time. Supposons que je veuille sélectionner tous les paragraphes, c' est-à-dire ceux du premier goût et en coller deux. Pour cela, encore une fois, nous devons utiliser is Posidoselected. Je vais donc dupliquer cette section et la commenter. Et là, je vais attacher tar E. Ensuite, dans le tour des résistances, je vais sélectionner les éléments, à savoir H un, une virgule et le paragraphe P. Si je définis ce fichier, vous pouvez maintenant voir le résultat Maintenant, vous pouvez voir qu' avec le titre, il a également appliqué de la couleur dans nos paragraphes. Maintenant, je vais vous montrer notre autre exemple. Dans cet exemple, je vais vous montrer comment utiliser Over selector avec is Positoselector Pour cela, je vais dupliquer cette section et commenter la section précédente. Et je vais supprimer celui-ci. Et ici, je veux parler de Hober dans notre paragraphe. Donc, nous devons d'abord taper l'élément, lequel je veux survoler Je vais taper P. Ensuite, Colon devra passer le sélecteur HoberPosito, qui hober Et je vais configurer ce fichier. Après avoir défini ce fichier, si I Her my Carr sur ce paragraphe, vous pouvez voir que la couleur de la police a changé Voici donc comment nous pouvons utiliser son sélecteur avec PozioSelector Voici donc quatre exemples différents que nous pouvons utiliser avec le sélecteur Posido Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 136. Tutoriel d'orientation du texte CSS: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec d'autres CSS liés au tutoriel. Et dans ce tutoriel, nous allons apprendre l'orientation du texte CSS. L'orientation du texte de l'appel de propriété dépend d'une autre propriété, et nous avons déjà abordé cette propriété dans notre précédent tutoriel, qui porte sur le mode écriture. Tant que vous n'utilisez pas la propriété du mode d'écriture, vous ne pouvez pas utiliser, vous ne pouvez pas utiliser la propriété d'orientation du texte. Supposons que nous ayons un élément profond et qu'à la place de cet élément profond, nous ayons un texte. Maintenant, je veux faire pivoter cet élément à 90 degrés, quelque chose comme ça. Dans la propriété du mode d'écriture, nous avons deux valeurs, RL verticale et Ea verticale. Si nous l'utilisons pour valoriser, nous pouvons faire pivoter n'importe quel texte. En utilisant la propriété du mode d'écriture, nous pouvons faire pivoter ce texte comme ceci, mais je ne veux pas ce type de texte. C'est ce résultat que je veux. Dans cet exemple, comme vous pouvez le voir, nous tapons le texte à la verticale. Et si vous voulez que ce type de texte soit habile pour cela, CSS introduisent l'orientation du texte De plus, cette propriété est associée à une valeur prédéfinie. Voyons voir. Il s'agit d'un total de quatre valeurs, mélangées verticalement, latéralement, latéralement à droite, et mixte est la valeur par défaut Commençons donc la pratique et voyons comment nous pouvons l'utiliser. Enfin, comme vous pouvez le voir, côte à côte, j'ai ouvert mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Light Server, et j'ai déjà créé un document est nommé index point TML Dans le body tag, nous avons un symbole appelé goût. Et également à l'intérieur de cette balise body, de cette balise body, nous avons un titre et un paragraphe. Ensuite, je stylise cette étiquette à tremper en fonction de son goût. Tout d'abord, nous attribuons 550 pixels. Ensuite, nous attribuons une bordure, une bordure de couleur noire unie. Nous disons aussi pour. Police aérienne de 70 pixels, et la voilà qui rembourre dix pixels Maintenant, je vais faire pivoter toute cette section profonde de 90 degrés. Pour cela, je vais utiliser une propriété appelée writing move Ici, je vais utiliser une variable appelée vertical RL, celle-ci, RL signifie de droite à gauche Maintenant, si je définis ce fichier, comme vous pouvez le voir, il fait pivoter notre texte. Si vous modifiez l'orientation, il suffit d'échanger la valeur AR deux RL, RL deux AI Si je passe R et que je suis satisfait, vous pouvez voir le résultat. Maintenant, l'orientation commence de gauche à droite. Mais pour cet exemple, j'aimerais choisir RL. Et maintenant je vais utiliser une autre propriété appelée orientation du texte, orientation du texte. Dans un premier temps, je vais utiliser cette valeur en position verticale. Une fois satisfait, vous pouvez voir le résultat. Vous pouvez maintenant voir notre texte devenir un titre vertical, paragraphe ou un texte de type vertical Si j'utilise une autre vidéo appelée mixée et ce fichier, vous pouvez maintenant voir que la police par défaut est revenue Si vous ne souhaitez aucune modification, l'orientation du texte est mixte. La plupart du temps, nous utilisons cet effet lorsque nous devons taper verticalement. Sinon, si vous avez un site Web sur lequel vous devez effectuer des corrections dans n'importe quelle langue chinoise, vous avez besoin de ces effets En chinois sinon en mandarin, tapez toujours de haut en bas. C'est pourquoi nous avons besoin de la valeur verticale et verticale, et les deux autres valeurs restantes, latéralement et latéralement à droite, ne sont prises en charge par aucun navigateur Il n'est pas pris en charge par Mozilla, ni par Google, Opera, ni par aucun navigateur. C'est tout pour ce tutoriel. J'espère que c'est clair pour toi. Comment utiliser l'orientation du texte ? 137. Focus CSS dans le tutoriel de pseudo cours: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons apprendre une nouvelle classe Posero, qui est axée sur elle Maintenant, laissez-moi vous montrer comment nous pouvons utiliser cette nouvelle classe. Comme vous pouvez le voir dans cet exemple, nous avons un élément profond, et à l'intérieur de cet élément profond, nous avons quatre champs, name, edge, Zender et un bouton Et maintenant, je veux changer la couleur d'arrière-plan de cet élément profond lorsque je me concentre sur l'un des champs de saisie. Si je me concentre sur le nom, sinon sur Zener ou sur un bouton, cela changera la couleur de fond de cet élément profond. Quelque chose comme ça. En gros, nous nous concentrons sur l'élément enfant et nous personnalisons l'élément parent. Ce n'était pas possible auparavant, mais c'est maintenant possible car nous avons maintenant intégré le nouveau focus en verre et nous devons utiliser cette classe Posido dans notre élément profond parent Il peut s'agir de parentp sinon de n'importe quel élément parent. Si nous focalisons l'un des champs de saisie qui se trouve à l'intérieur de cet élément parent, cela affectera l'élément parent. Passons maintenant à l' aspect pratique et voyons comment nous pouvons utiliser focus within dans nos projets. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server, et je crée déjà un document ML nommé index point t. Comme vous pouvez le voir sur cette page TL, nous créons déjà un formulaire de connexion. Dans ce formulaire de connexion, nous avons un total de quatre champs de saisie, tels que le nom d'utilisateur saisi, le mot de passe saisi, le bouton de connexion et le bouton Annuler. Donc, comme je vous l'ai dit, nous allons utiliser la mise au point dans le verre postérieur Pour l'instant, vous pouvez voir comment cela se passe à partir de la couleur de fond blanche. Lorsque je me concentre sur un champ de saisie, comme vous pouvez le voir, la couleur de fond ne change pas. Maintenant, je veux changer la couleur d'arrière-plan du parent emate, mettre l'accent sur l'élément en haut Après le focus, l'un des champs de saisie se trouve sur ce formulaire. Pour cela, nous devons utiliser un PositoGlass. Donc ici, je vais taper à partir de deux points et notre nom PositoGlass est focus weening focus Ensuite, à l'intérieur du Carrass, je vais utiliser Bagnoroperty Contexte. Et ici, je vais envoyer une couleur de fond jaune. Je vais configurer ce fichier. Après avoir défini cette règle, si je clique sur l'un des champs de saisie, comme vous pouvez le voir, cela change la couleur d'arrière-plan de ce formulaire. Parce que comme je vous l'ai dit, à l'aide de ce sélecteur PosidoGas, nous pouvons sélectionner l'élément dB de fond Nous pouvons sélectionner l'élément profond parent, et si je clique en dehors de ce formulaire, encore une fois, il revient à la couleur blanche. C'est ainsi que fonctionne ce PosiTrogls. Il peut sélectionner l'élément profond parent l'aide de l'élément enfant De. Si vous cliquez sur l'un des boutons ou sur l'un des champs de saisie, la couleur change tout de même. J'espère que tout est maintenant clair pour vous Que pouvons-nous faire avec ce sélecteur Pozioglas Merci d'avoir regardé cette vidéo, restez connectés pour les deux prochaines. 138. Tutoriel de la table d'affichage CSS partie 1: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un autre tutoriel lié au CSS. Et dans ce didacticiel, nous allons apprendre à connaître la propriété de la table. Nous avons déjà découvert cette propriété dans notre tutoriel de préface Nous apprenons le flex, la grille, voici le bloc en ligne, etc. Mais ils viennent avec un autre d qui est une table. Dans nos précédents didacticiels, nous avons déjà découvert les propriétés d'affichage telles que le bloc intégré, le bloc intérieur, les derniers flicks actifs, le grit, le flick intérieur, le grit intérieur, Mais dans ce tutoriel, j'essaie juste de couvrir celui-ci. Ils vendront, ils cultiveront, etc. Essayons maintenant de comprendre ce qu'est une table et comment elle fonctionnera avec la propriété d'affichage. Parfois, nous devons créer un tableau dans nos pages Web, quelque chose comme ça. Comme vous pouvez le voir dans ce tableau, nous devons dessiner trois lignes et deux colonnes. Nous pouvons utiliser ce tableau de plusieurs manières. Nous pouvons afficher les résultats des tests, les détails du compte, etc. Pour cela, le code STML fournit une balise spéciale. C'est ce qu'on appelle table tag, quelque chose comme ça. Dans la balise de table, pour créer une ligne de table, nous devons taper TN et pour fournir la colonne, nous devons utiliser TD. Selon cet exemple, nous créons un total de trois lignes de tableau. De plus, nous avons un total de deux points dans chaque ligne. Mais maintenant, le problème est que je ne veux utiliser aucune balise de table pour une table. Je veux juste utiliser uniquement les balises profondes, quelque chose comme ça. Je souhaite utiliser le tag Di pour créer les ventes de tables, lignes TV et la structure des onglets. Comme vous pouvez le voir dans cet exemple, Herald n'utilise aucune balise de table, juste une balise deep pour créer la même structure Notre première étiquette, qui est de couleur noire, fonctionnera comme une étiquette de table. Ensuite, celui qui est en couleur fonctionnera comme une ligne de tableau et fonctionnera comme une ligne de tableau et le vert fonctionnera comme une colonne de tableau. Mais il n'est pas très facile de créer une table comme celle-ci. Pour résoudre le problème, CSS introduit une propriété spéciale, qui est la table d'affichage. Et nous devons utiliser cette propriété de table d'affichage sur le div externe, qui est l'élément div parent Et pour les lignes, nous devons également utiliser une propriété spéciale appelée afficher la ligne du tableau pour les cellules du tableau, pour nos colonnes, nous pouvons utiliser cette propriété des cellules du tableau. C'est ainsi qu'il va créer la même structure stable en utilisant la propriété d'affichage. Commençons donc par la pratique et voyons comment créer le TME en utilisant ces trois éléments pour la propriété. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code is Studio et mon navigateur en utilisant LiveServeRetension, et je crée déjà un document ML nommé Comme vous le savez, nous allons créer une télévision en utilisant le deep tag. Donc, à l'intérieur de la balise body , je vais d' abord prendre une balise profonde avec le nom d'identification tib Ici, je vais taper has tag table, et je vais appuyer sur Entrée. Et à l'intérieur de cette balise de table, je vais prendre trois colonnes. Pour l'instant, je vais prendre trois colonnes. Je ne vais pas m'embêter. Je vais donc taper un point, et je vais attribuer un nom de classe à nos colonnes. Le nom de notre classe est donc call. Et je vais appuyer sur Entrée. Dans notre premier cours, je vais taper A. Ensuite, je vais dupliquer cette ligne deux fois. Voici BN. C'est B, et celui-ci est C. Nous avons maintenant un tableau de trois colonnes de largeur. Et maintenant je vais styliser cette table. Donc, dans un premier temps, je vais sélectionner la table ID Hastag. Ensuite, à l'intérieur de la voiture, je vais utiliser une propriété appelée table d'affichage Ensuite, je vais sélectionner toutes les colonnes. Je suis de type point COL. À l'intérieur de la résine Carli, je vais ajouter une bordure. Je vais ajouter une bordure. Bordure, je veux une bordure solide d'un pixel et notre couleur de bordure est le noir. Aztag 2000. Et je vais configurer ce fichier. Pour configurer ce fichier, vous voyez ce résultat. Je vais également ajouter de l' herbe à ce tableau. Pour cela, herbez de la mauvaise herbe, 800 psi. Ensuite, je vais ajouter une bordure ennuyée, bordée d'un pixel, une bordure pleine, et la couleur de la bordure est le noir Je souhaite configurer ce fichier. Bouleversez ce fichier, voici ce qu'il crée. Je pense que la largeur de 500 pixels est une augmentation, donc je vais en faire 500. Pour configurer ce fichier, comme vous pouvez le voir dans mon tableau, nous avons un total de trois lignes. Mais maintenant je veux les faire appeler. Jusqu'à A, je veux imprimer B, puis je veux en imprimer trois. Je veux tous les imprimer sur une seule ligne. Pour cela, je vais réutiliser cette propriété. Donc, à l'intérieur de la classe d'appel, utilisez l'affichage du type. Et je vais utiliser la cellule du tableau d'affichage, cellule tamoule, et je veux définir ce fichier Bougez ce fichier, vous pouvez voir le résultat. Aujourd'hui, nous n'avons qu' une seule rangée et trois charbons. De plus, je veux placer ce tableau au centre de cette page, je vais donc utiliser la propriété de marge dans notre tableau. Marge, zéro et automatique. En haut de ce fichier, vous pouvez voir le résultat. De bas en haut, cela ajouterait zéro marge et de gauche à droite, cela ajouterait. Maintenant, vous pouvez remarquer que toutes les cellules du tableau sont divisées de manière égale parce que nous n' avons pas assez de contenu pour agrandir une cellule. Si j'ajoute quelque chose dans cette cellule B, supposons que je veuille ajouter cinq mots à la limite inférieure. Alors satisfaites, vous pouvez voir le résultat. Vous pouvez maintenant le voir agrandir la colonne B et réduire la taille des colonnes A et C. Nous pouvons maintenant fournir une largeur fixe à cette colonne centrale. Supposons que vous souhaitiez attribuer largeur de 200 pixels à cette colonne centrale. Pour cela, vous pouvez utiliser la méthode de style Inland. Donc, le style de type héros est égal à 200 pixels. Si je configure ce fichier, vous pouvez voir ce résultat. Maintenant, nous ne pouvons pas étendre la taille des cellules du tableau de plus de 200. Je vais maintenant ajouter deux autres colliers. Je vais dupliquer cette ligne temps et je vais la nommer B et celle-ci est E. Si je définis ce fichier, comme vous pouvez le voir, à l' exception de la colonne D, toutes les colonnes sont réparties de manière égale. Donc, dans cet exemple, il crée un téléviseur avec une seule ligne et nous avons plusieurs colonnes dans cette ligne. Mais si vous souhaitez créer plusieurs lignes pour cela, nous devons créer le parent D pour toutes les profondeurs de colonne C'est assez similaire à Tata. Nous savons que dans TV, le tag Tia représente Taviow et le tag TD représente la colonne Tavil Créons donc une ligne. Au début, je vais sélectionner toute cette section et je vais couper cette section, puis à l'intérieur la balise DV, je vais créer une ligne Je vais attacher Row. Dans cette rangée, je vais coller tous les coups. Cette fois, je n'ai pas besoin de ces colonnes inutiles Je vais donc supprimer D et E. Comme je vais les placer dans le niveau d' indentation, vous pouvez comprendre que les lignes et les colonnes sont très claires. Sur ce, je veux créer une autre ligne. Donc, je vais passer à la ligne des points noués. Et à l'intérieur de cette ligne, je vais créer plusieurs colonnes. Donc, d'abord, je vais créer un point C de type D et je vais mettre un nom qui est D. Ensuite, je duplique cette ligne, et je vais créer celle-ci E. Et je veux définir ce fichier. Donc, dans notre première ligne, nous devons faire trois colonnes, et dans notre deuxième ligne, nous devons faire deux colonnes. Ensuite, je vais supprimer les données supplémentaires et créer celle-ci B. Avec ça, je n'ai pas besoin de ce style, donc je vais le supprimer. Et je pense que pour l'instant, je dois utiliser trois colonnes pour mieux le comprendre. Je duplique donc à nouveau cette diapositive, je vais la lier et l'enregistrer à nouveau. Nous devons donc faire deux lignes et trois colonnes dans chaque ligne. Maintenant, le problème, c'est qu' après avoir défini ce style, vous pouvez remarquer que nous n' avons aucun poids pour nos elfes Cela est dû au fait que nous ne stylisons pas la classe de ligne, nous devons donc styliser la ligne. Je vais donc sélectionner cette classe, donc je vais taper une ligne de points à l'intérieur du Curly Resist Je vais utiliser la propriété. Afficher la ligne du tableau, celle-ci. Si je dis ce fichier, vous pouvez voir le résultat. Je vais maintenant ajouter des données réelles sur les étudiants dans ces préservatifs. Pour cela, je vais d'abord passer la règle numéro un, puis je vais transmettre le nom de l' étudiant, en ajouter un, et enfin, je vais passer le total de notes, qui est de 250. Encore une fois, dans notre deuxième rangée, je vais passer Roluba deux, et je m'appelle Rahul ou Scoop Be Capital et le nombre total est Capital et Ensuite, je duplique cette section, cette ligne. Maintenant, nous en avons un total de trois, et voici Roluba Le nom de Ravi est de 350 Maintenant, configurons le fichier et voyons s'il fonctionne correctement ou non. Avant de configurer ce fichier, vous pouvez voir le résultat. Dans notre première colonne, il imprime tous les numéros de rouleaux, puis il relit tous les noms et enfin nous imprimons le nombre total Maintenant, ajoutons-le rembourrage aux ventes. Pour cela, nous devons sélectionner une colonne et ajouter un rembourrage. Rembourrage, dans toutes les directions je veux ajouter une bande de cinq pixels, et je vais définir ce fichier Pour configurer ce fichier, voici à quoi il ressemble. Notre tableau est maintenant prêt, mais il n'y a aucun titre dans ce tableau. Dans la prochaine partie de ce didacticiel, nous allons donc apprendre comment ajouter titre en utilisant ces propriétés. C'est donc tout pour ce tutoriel. Merci d'avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 139. Tutoriel de la table d'affichage CSS partie 2: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec une autre propriété de table d'affichage liée au didacticiel. Dans ce didacticiel, nous allons créer un en-tête et un pied de page à l'aide de la propriété display Pour créer ce type de titre dans un tableau, ST aura une balise spéciale , à savoir TH tag table header. Mais nous allons créer cette section d'en-tête en utilisant une balise profonde pour créer ce type d'en-tête en utilisant une balise profonde Nous devons d' abord prendre DV puis insérer cette balise profonde, nous devons prendre ces trois colonnes Comme nous devons utiliser une propriété CSS spéciale appelée display table header group, nous devons utiliser cette propriété dans le défilé Develen En l'utilisant, nous pouvons créer le titre d' un tableau et de la même manière, nous pouvons créer un pied de page de tableau, quelque chose comme ça Comme vous pouvez le constater, c'est une table d'employés et nous avons le numéro d'employé, la sieste et le céleri. Ici, vous pouvez voir que c' est notre section de pied de page, et enfin nous imprimons du céleri total Pour créer ce type de pied de page, nous devons également utiliser une balise profonde et à l'intérieur de cette balise profonde, nous devons créer les colonnes et, au niveau de la balise profonde parent, utiliser cette propriété ss, afficher le groupe de pieds de page du tableau C'est ainsi que nous pouvons créer le pied de page d'un tableau. Commençons par l'aspect pratique et essayons de réduire les coûts. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visal Studio et mon navigateur à l'aide de l'extension Live Server J'ouvre ici mon précédent document d'établissement. Et comme vous le savez, dans notre précédent tutoriel, utilisions des balises profondes. Mais dans ce tutoriel, nous allons créer un en-tête et un pied de page de tableau Je vais donc d'abord créer la section d'en-tête. Dans ce blob de tableau, je vais prendre une balise profonde, et je vais définir une table de balises IDH, un en-tête de soulignement Ensuite, dans ce bloc, je vais créer 23 co. Je copie cette section et je la colle ici. Dans notre première colonne, je vais taper row et dans notre deuxième colonne, je vais taper le nom. Et dans notre troisième colonne, je vais taper des marques et je vais définir ce fichier. Après avoir défini ce fichier, voici à quoi il ressemble. Comme vous pouvez le voir, cela ne ressemble pas à un en-tête de tableau. Nous devons maintenant styliser cet élément profond, l'en-tête du tableau. Je vais copier son nom d'identification, en-tête de table, et ici, je vais taper, hashtag, en-tête de table. Puis insérez des versets de Gali. Ici, je vais utiliser un affichage de propriétés. Affichage, en-tête du tableau, c'est parti. Cette propriété. Je vais également prendre une couleur de fond pour mettre en valeur ce rôle. Types de héros, arrière-plan, et je veux quelque chose de bleu clair, de bleu clair. Réglons le fichier et voyons s'il fonctionne correctement ou non. Après avoir défini ce fichier, comme vous pouvez le voir, il fonctionne correctement. C'est ainsi que nous pouvons créer l' en-tête de ce tableau. Il suffit d' utiliser cette propriété. Ils seront les têtes d'affiche de cette pièce. la même manière, nous pouvons créer un pied de page de tableau. Laisse-moi te montrer. Pour créer le pied de page, je vais copier cette section et la coller dans cette section, je vais changer l'en-tête du tableau des noms d'identification en pied de Dans notre première colonne, je ne veux envoyer aucune valeur, et dans notre deuxième colonne, je vais taper le total des notes. Donc, ne craignez pas les marques. Dans notre dernière colonne, je vais imprimer le total des notes. Ce qui fait 300 plus 350 plus 250. Maintenant c'est devenu 900 et je vais configurer ce fichier. Après avoir défini ce fichier, il ressemblait cela car nous n' utilisons pas la propriété d'affichage. Donc, je vais d'abord copier le nom d'identification de ce pied de page, puis je vais le sélectionner Ensuite, dans la propriété Cal first, je vais utiliser l'affichage. Afficher et ici, je vais utiliser le toit du pied de page du téléviseur pour définir ce fichier Après avoir défini ce fichier, comme vous pouvez le voir, créez le pied de page De plus, je vais attribuer une couleur d'arrière-plan, certain type, un arrière-plan vert clair . Je souhaite configurer ce fichier. Après avoir défini la couleur d'arrière-plan, je pense qu'il y a un problème dans mon code, voyez, c' est le problème. Nous devons le retirer. Réglons à nouveau le fichier. Vous pouvez maintenant voir le résultat. Comme vous pouvez le constater, créez avec succès la partie de pied de page. Et si vous voulez placer le texte au centre, oui, vous pouvez avoir besoin d'aligner, d'aligner le texte. Vous devez utiliser la propriété du centre. Je vais utiliser la propriété sen dans pied de page et je vais définir ce fichier Avec cela, si vous voulez augmenter la police il vous suffit de taper la police à huit. Fontez, pesez, et je vais utiliser Bond. Je vais utiliser la même propriété dans la section du pied de page, et je vais l'enregistrer à nouveau. Maintenant, cela ressemble à une queue complète. C'est ainsi que nous pouvons créer une tavilhaded et une section de pied de page Je veux juste utiliser cette propriété avec. Mais si vous voulez faire la même chose en utilisant une structure, une structure Tim appropriée, pour cela, nous devons utiliser la balise TH, mais nous pouvons faire la même chose facilement avec la propriété display. Je vais maintenant vous montrer comment regrouper les lignes d'un tableau. Nous apprenons comment regrouper l'en-tête et le pied de page d'un tableau. En outre, nous pouvons regrouper les lignes du tableau et fournir une couleur d'arrière-plan. Laisse-moi te montrer. Pour cela, je vais déplacer toutes les rangées dans une autre profondeur. Dans un premier temps, je vais couper cette portion. Je sélectionne cette portion et je la coupe. Ensuite, je suis en train de taper un autre type profond Bev, je vais attribuer un identifiant et IDName est un groupe de lignes Groupe de lignes. Ensuite, dans cet identifiant de groupe de lignes, je vais coller toutes les lignes. Ensuite, je vais utiliser cet identifiant comme sélecteur et passer à la sélection de style abord, je vais sélectionner cet identifiant, puis à l'intérieur de l'écran Alivss, et je vais utiliser le groupe de lignes dans la ligne du tableau, passer à celui-ci Je vais également définir la couleur d'arrière-plan, l'arrière-plan et je veux un fond jaune. Je vais configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Voilà pour ce tutoriel. Dans le prochain tutoriel, nous allons apprendre le groupe du charbon. Ici, nous allons apprendre comment regrouper n'importe quelle colonne. Supposons que je veuille regrouper cette colonne, je souhaite changer la couleur de fond de cette pièce. Je souhaite sélectionner toutes les colonnes. Nous allons donc l'apprendre dans le prochain tutoriel. Merci d'avoir regardé cette statue pour notre prochain tutoriel. 140. Tutoriel de la table d'affichage CSS partie 3: Bonjour, les gars. C'est bon de te revoir. Il s'agit de la nouvelle propriété de table disp associée au didacticiel. Et dans ce tutoriel, nous allons apprendre une table appelée groove. Comme vous pouvez le voir dans cet exemple, nous avons le numéro de ligne, le nom et l'âge. Ce sont trois colonnes et maintenant je veux dire la couleur de fond de la colonne de nom, quelque chose comme ça Nous avons déjà fait la même chose pour une ligne, mais cette fois nous allons le faire pour une colonne. Pour définir la couleur d'arrière-plan de cette manière, CSS introduit une autre propriété, display appelée groove. Voyons maintenant comment nous pouvons l'utiliser. premier temps, dans votre table, vous devez créer un élément DV, et comme vous pouvez le voir dans ce Delmate une classe appelée groupe de table C. En gros, nous essayons de créer un groupe de colonnes de table. Ensuite, vous pouvez mentionner les colonnes, nombre de colonnes que vous souhaitez sélectionner et vous pouvez également augmenter la classe vers ces colonnes Dans notre cas, colonne de table. Dans cet exemple, HetyTtal à deux colonnes. Si vous en voulez plus, vous pouvez augmenter la taille de la colonne. Nous devons également utiliser une propriété CSS spéciale pour cette classe, groupe d'appels de table, et nous devons utiliser cette propriété Ce groupe de colonnes de table de jeu, et pour la colonne, nous devons utiliser cette propriété. Cette colonne de table de jeu. Cela va créer un groupe de couleurs et vous pouvez changer la couleur d'arrière-plan avec celui-ci. Commençons par la pratique et voyons comment nous pouvons l'appliquer. Comme vous pouvez le voir, côte à côte, j'ai ouvert mon éditeur de code Visual Studio et mon navigateur à l'aide de l' extension Live Server et j'ai déjà ouvert mon précédent point d' index de nom de document Atable t. Ici, nous créons déjà un tableau. Ici, nous créons un en-tête de tableau, un pied de page de tableau, nous devons remplir trois colonnes, nous devons également faire trois lignes Nous devons maintenant créer un groupe à l'aide de colonnes. Donc, à l'intérieur de la balise table, je vais prendre une autre balise DIP et je vais attribuer un identifiant à un groupe tbcll. Groupe d'appels de table. Ensuite, à l'intérieur de ce groupe d'appels de table, nous allons créer un total de trois colonnes car votre table aura un total de trois couleurs Ici, je vais taper Dev point et je vais attribuer un nom de classe appelé table color. Je vais le dupliquer plusieurs fois. Si nous passons une valeur dans cette colonne, supposons que si je tape c'est COL call one, c'est la colonne un et que je copie cette valeur et psi ici, que je remplace un par deux et que je remplace cette valeur un par trois, et ceci dans ce fichier uppifle comme vous le voyez, pour l'instant, ça ressemble à ça Mais maintenant je vais appliquer ces propriétés. Dans un premier temps, nous devons attribuer une propriété CSS à ce groupe d'appels de table. Je copie cette valeur et le groupe d'appels de la table HemotyehTag. Ensuite, j'ai défini le calibrss et je veux utiliser ici une propriété appelée play this tab Column group Ils appelleront un groupe et sélectionneront également cet enfant. Ils le feront C. Oups, il y a une faute de frappe dans le nom de ma classe Ce devrait être E, pas R. Je le corrige. Ensuite, je vais copier le nom de la classe et créer un sélecteur en utilisant ce nom de classe, Tableau C. Au lieu du cis, ici, je vais appliquer cette labilité Afficher le tableau coll Celui-ci, et je veux définir ce fichier. Comme vous pouvez le constater, pour configurer ce fichier, toutes les données sont masquées dans les colonnes. Ici, vous ne pouvez pas voir les données que nous transmettons à l'intérieur du dip Eins, telles que Col un, appel deux, appel trois Nous devons maintenant ajouter un nom positif différent à l' ensemble de cette colonne Tapez ici, c'est l11. Ensuite, vous copiez le nom de la classe et il s'agit de L deux. C'est la colonne deux, celle-ci est L trois, la colonne trois. En gros, Hey regroupe trois marques de nom de rouleau de colonnes différentes. Supposons maintenant que je veuille ajouter une couleur d'arrière-plan à la couleur du nom. Pour cela, nous devons sélectionner cette colonne, appeler deux. Mais avant d'appliquer la couleur d'arrière-plan des colonnes, je souhaite supprimer la couleur du livre indésirable. Pour cela, comme vous pouvez le voir, nous devons supprimer cette couleur jaune, donc je commente cette ligne. Ensuite, je vais sélectionner ce groupe de colonnes appelé deux et créer un sélecteur Et à l'intérieur des foies, il faut appliquer la couleur de fond, un peu de couleur de fond, et je tiens à le dire rose Je souhaite configurer ce fichier. Après avoir configuré ce fichier, vous pouvez voir le résultat. Nous avons réussi à regrouper cette couleur de nom et nous avons défini une couleur d'arrière-plan pour cette couleur de nom. De même, si vous souhaitez ajouter une couleur différente au rouleau, oui, vous le pouvez. Il suffit de dupliquer ce e shot et de le sélectionner. Cette fois, nous devons sélectionner deux points, appeler un, et ici je vais attribuer une couleur rouge. Je veux régler ce pi. Vous pouvez voir le résultat. N'oubliez pas que vous ne pouvez faire une demande qu'à une propriété. Vous pouvez modifier la couleur d'arrière-plan de ce groupe de colonnes. Vous pouvez également augmenter la largeur des groupes de colonnes. Dans le cas contraire, vous ne pouvez pas appliquer d'autres propriétés CSS. Laissez-moi vous donner un aperçu de cela. Supposons que dans la deuxième colonne, je souhaite appliquer la propriété de la ligne de texte, aligner le texte et le placer au centre. Je veux placer tous les noms au centre. Donc, s'il définit ce fichier, comme vous pouvez le voir, cela ne fonctionne pas. Mais si nous appliquons avec alors, je vais le définir à 150 pixels et ensuite, sur ce fichier, vous pourrez voir le résultat. Maintenant, appliquez-le, nous pouvons changer la couleur de fond. Nous pouvons également postuler auprès de. Sinon, nous ne pouvons pas appliquer les propriétés de thèse, telles que le texte, la taille de police, etc. Je vais commenter la phrase. Je n'en ai pas besoin. Ce n'est qu'un exemple, et vous devez vous en souvenir. Parlons maintenant de la dernière propriété de BSB, qui est le cache de table Nous pouvons définir un titre en utilisant ce cliché. Pour cela, dans cette balise de table, je vais prendre une balise profonde, DP, et ici, je vais définir un identifiant appelé caption. Ensuite, dans cette légende, je vais passer trois balises. Vous pouvez emporter n'importe quelle étiquette auditive. Pour l'instant, je vais en prendre trois et saisir aujourd'hui. Informations sur les étudiants Pour définir cette légende, nous devons sélectionner le nom de la classe. Dans notre section sur le style, tapant une légende à points à l'intérieur des versets de la voiture, je vais passer devant la propriété. Afficher et ici, nous devons utiliser l' endroit où vous appelez le libellé du tableau. Légende du tableau celui-ci. Je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Je veux aussi créer ce centre de capture ici, je tape une ligne de texte, un centre d'alignement de texte. Ensuite, je veux le mettre en majuscules, donc je vais taper du texte, transformer et appliquer des majuscules Ensuite, je vais changer la couleur de la police et je veux dire couleur de police, couleur , et je veux la couleur verte. Je vais régler celui-ci. Ici, vous pouvez voir que nous avons créé avec succès le libellé du tableau. Nous créons l'en-tête du tableau, le pied de page du tableau, nous pouvons regrouper les lignes Comme nous pouvons regrouper les colonnes. Nous pouvons tout faire en utilisant cette propriété de table. Ici, nous n'avons pas besoin de créer structure de table appropriée en utilisant la technologie TA, balise DD, nous pouvons faire la même chose en utilisant la balise Dip. J'espère que ce tutoriel vous plaira. Merci d'avoir regardé cette vidéo Sadiun pour le prochain tutoriel 141. Tutoriel de couleur de l'accent CSS: Bonjour, les gars. C'est bon de te voir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons apprendre une nouvelle propriété appelée ascent color Comme vous le savez, dans un tag Fronk stable, nous devons distinguer deux tags spéciaux L'une est la case à cocher et l'autre la radio. Ils sont tous deux des balises d'entrée. Si nous voulons obtenir plusieurs valeurs à partir de plusieurs options, nous utilisons la case à cocher et le bouton radio lorsque nous devons obtenir une seule valeur de l'option multiple Et partout où nous cochons cette case, sinon, cliquez sur ce bouton. Par défaut, il renvoie la couleur bleue. Mais si vous souhaitez attribuer des couleurs différentes, comme le rouge, le vert, le violet, le jaune, dans ce cas, le CSS a introduit une nouvelle propriété, nous appelons couleur ascendante Avant la propriété de couleur ascendante, aucune propriété ne permet de modifier les couleurs des chapebx ou des boutons radio Nous ne pouvons pas modifier la couleur par défaut plus tôt. Pour modifier cette couleur, CSS a introduit cette propriété ascent color Commençons donc par la pratique et voyons comment appliquer cette propriété. Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code is studio et mon navigateur en utilisant l'extension Light Server, et je crée déjà un document TML nommé index point HTML Ainsi, dans notre balise body, nous n'avons qu'une seule balise d'en-tête, et à l'intérieur de la balise body, nous voyons ici pour la zone familiale et pour une taille de 16 pixels. Maintenant, à l'intérieur de l'étiquette corporelle , dans un premier temps, je vais prendre de l'étiquette de. Puis à l'intérieur de l'étiquette fro. Tout d'abord, je vais passer un niveau. Je vais dire niveau Hobbs. Ensuite, je vais prendre la balise d'entrée, entrée, et notre type d'entrée est Jack Wox Et aussi, dans l'ensemble, un nom pour ce type d'entrée : hobby. En ce qui concerne les loisirs, je vais d'abord taper « sports ». Ensuite, je cite cette phrase plusieurs fois et notre prochain hobby est la musique, et notre dernier passe-temps, les livres Comme vous le savez, si vous utilisez la case à cocher, l'utilisateur peut sélectionner plusieurs options Ensuite, pour les radiotans, je vais passer à un autre niveau. Je vais prendre une autre lèvre. Pour l'étiquette, je vais taper gingembre. Genre et ici, je vais taper le type de saisie. Celui-ci est du radium. Sur ce, nous devons transmettre le nom de famille Zina. Ensuite, pour passer, Valu mâle, et nous devons également passer le let Min. Ensuite, je duplique cette ligne. Cette fois, je change juste le nom de la valeur, femelle. FE, pas R, femelle, jusqu'à ce que je définisse ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Ils sont sur mon option de case et ces deux sont lus grâce à l'option du bouton Maintenant, si je clique sur une option, sinon sur une option multiple, et si je prends des boutons radio, comme vous pouvez le voir, cela renvoie une couleur bleue. Il s'agit de la couleur par défaut. Je vais maintenant styliser ces balises d'entrée. Dans cette balise de style, je vais sélectionner la balise d'entrée , puis vous définissez les versets de Cali Dans un premier temps, je vais attribuer 15 pixels à weed, nous. Je vais également prendre une hauteur 15 pixels. Je vais configurer ce fichier. Comme vous pouvez le voir, j'ai défini ce fichier, il augmente la taille de la case à cocher et des boutons radio. Maintenant, je veux changer la couleur par défaut. Comme je vous l'ai dit, nous pouvons changer de couleur, nous devons utiliser une propriété appelée ascend c Ascend cur et vous pouvez mettre un nom, n'importe quel nom de couleur, sinon n'importe quel code xa, RG Value, etc. Je vais taper red cn, red, et je veux satisfaire. Une fois satisfait, si je clique sur une case à cocher, comme vous pouvez le voir maintenant, elle est assise sur du courn rouge Également des boutons radio Wi. Vous pouvez utiliser n'importe quel type de couleur. Vous pouvez utiliser HixA RGB, RGB, etc. Il y a juste une chose dont tu dois te souvenir. Nous ne pouvons appliquer cette propriété qu'avec ces deux balises de saisie, case à cocher et radio. Nous ne pouvons pas l'utiliser avec du texte, du texte, des chiffres, etc. Nous ne pouvons l'appliquer qu' en cochant la case et en le faisant. C'est tout pour ce tutoriel. Merci d'avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. 142. Tutoriel des préférences CSS: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS. Dans ce didacticiel, nous allons découvrir une nouvelle propriété, à savoir cri de couleur préféré Maintenant, qu'est-ce que Color Scream ? Si vous êtes un utilisateur Windows, sinon un utilisateur rencontré, votre interface utilisateur propose un mode bicolore au total, le mode couleur Lightp et le mode couleur Darkap Dans le thème du mode Light aap, notre navigateur et notre disposition de navigateur sont de couleur claire, et dans le mode Darkap, notre navigateur et notre disposition extérieure du navigateur sont de couleur plus foncée Selon le choix de l'utilisateur, l'utilisateur peut sélectionner n'importe quel mode d'éclairage. En gros, avant cette règle multimédia, nous créons un site Web selon mode Light App, quelque chose comme ça. Ici, nous utilisons un fond de couleur blanche et du texte de couleur noire. Mais que se passe-t-il si les utilisateurs sélectionnent le mode Dark App ? Dans ce cas, nous devons faire des compromis en termes de visibilité. Quelque chose comme ça. Comme vous pouvez le voir, le texte rend les rayons visibles par rapport à la lumière en mode car cette fois, il est livré avec une couleur de fond foncée. Notre texte et l'arrière-plan sont tous deux de couleur foncée. Mais maintenant, lorsque nous appliquons le mode sombre de l'application, je change automatiquement la couleur du texte, quelque chose comme ça. Non seulement la couleur du texte, nous pouvons changer la couleur fine de ce site Web. Nous pouvons également modifier n'importe quelle propriété CSS. C'est possible uniquement pour notre nouvelle règle multimédia, connue sous le nom de palette de couleurs préférée. Pour utiliser cette règle multimédia, vous devez d'abord taper sur le média ate. Ensuite, à l'intérieur de la cavité ronde, vous devez passer le schéma de couleurs préféré, et vous devez passer un identifiant. Il est livré avec un total de deux vagues prédéfinies, claire et foncée Si vous choisissez le mode clair, quel que soit le code CSS que vous écrivez dans la classe, il ne s'appliquera qu'en mode clair si vous choisissez le mode foncé, puis il ne s'appliquera qu'en mode sombre. Appliquons maintenant cette nouvelle règle relative aux médias. Mais avant d'appliquer cette nouvelle règle médiatique, je voudrais vous montrer quelque chose. Comme vous pouvez le voir, ouvrez mon navigateur et vous remarquerez que tous sont de couleur claire. Maintenant, je vais changer le mode couleur de mon système et pour changer le mode couleur, il suffit de rechercher le noir. Ensuite, allez à la session SSW et ici, vous devez rechercher dans le noir et à partir de là, vous devez sélectionner cette option Activez le mode sombre. Après avoir ouvert ce paramètre, à partir de là, vous pouvez choisir n'importe quel mode. Comme vous pouvez le voir, Hart a fourni une liste déroulante et par défaut, nous sélectionnons déjà le mode couleur claire Si je sélectionne le mode couleur foncée, vous pouvez voir que cela change automatiquement la couleur de notre navigateur par défaut. Maintenant, notre navigateur devient sombre. Disposition intérieure La disposition extérieure devient sombre. De même, si je reviens au mode couleur blanche, laissez-moi vous le montrer. Je vais sélectionner à nouveau la lumière. Maintenant, vous pouvez remarquer que notre navigateur est à nouveau de couleur claire. Maintenant, selon ce mode couleur, nous pouvons définir différents CSS pour notre site Web. Commençons par la pratique et voyons comment nous pouvons l'appliquer. Comme vous pouvez le voir côte à côte, j'ouvre l' éditeur de code de mon studio utilisateur et mon navigateur en utilisant l' extension if server et je crée déjà un document eSTIML nommé index point HTML Maintenant, comme vous pouvez le voir sur notre étiquette corporelle, nous avons une étiquette de titre 2 et un Panagra Maintenant, dans un premier temps, je vais attribuer une couleur de fond par défaut à ce corps. Donc, dans cette balise de style, je vais d'abord lier le corps, je vais sélectionner le corps à l'intérieur des classes. Je vais attribuer une propriété d'arrière-plan, ce rond et je veux attribuer une couleur orange, et je vais définir ce fichier Pour utiliser la règle des médias, comme je vous l'ai dit, nous devons d'abord taper au débit média. Ensuite, à l'intérieur des versets ronds ici, nous devons taper « préférer la couleur ». Schéma ici, je vais appliquer une couleur claire. Puis, à l'intérieur de la voiture, je veux changer la propriété de la chambre. Je vais copier le type de corps avec la propriété de la chambre puis dans le CSS, je vais le coller ici et cette fois, je veux appliquer de la couleur rose. Je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Maintenant, il applique la couleur rose car si je recherche dans notre tableau des couleurs, vous pouvez maintenant voir la ligne de nos corps de couleur. C'est pourquoi il applique la couleur rose. Maintenant, de la même manière, je veux créer une sélection pour le mode sombre. Pour cela, ici, je vais débgate cette section et cette fois, je vais sélectionner Dark, celle-ci Je veux aussi changer le nom de la couleur, du rose au vert clair. Celui-ci, et je vais configurer ce fichier. Après avoir défini ce fichier, comme vous pouvez le voir, il n'y a aucun changement dans mon navigateur. Mais quoi ? Si je change l'ambiance des couleurs, laisse-moi te montrer. Je vais ouvrir ce paramètre et maintenant je vais changer le mode couleur clair en mode foncé. Après avoir appliqué le noir, vous pouvez voir le résultat. Désormais automatiquement, vous pouvez le voir appliquer la couleur vert clair comme couleur de carrosserie par défaut. Et de la même manière, encore une fois, nous sélectionnons le mode d'éclairage, laissez-moi vous le montrer. Puis, comme vous pouvez le voir, revenons à la couleur rose du corps. Comme je vous l'ai dit, vous pouvez appliquer n'importe quel CSS ici. Supposons que je veuille changer la couleur de police lorsque nous appliquons le mode couleur foncée, couleur de type Sumo et que je veuille du gris clair gris clair De plus, je vais changer la couleur d' arrière-plan et appliquer une couleur gris foncé. Donc, à partir du mot couleur, je veux appliquer ce type de couleur foncée, celle-ci, ce code couleur. Je vais régler ça très bien. Après avoir défini ce fichier, si je change le mode de couleur, laissez-moi vous montrer le clair au foncé, vous pourrez voir le résultat. Maintenant tu peux voir mon navigateur. Maintenant, c'est clairement visible. Ici, nous avions l'habitude d'opter pour la couleur. Pour le fond, nous utilisons une couleur foncée et pour le texte, nous utilisons une couleur gris clair. C'est ainsi que nous pouvons utiliser cette règle des médias. J'espère que vous comprenez maintenant comment nous pouvons l'utiliser. Merci d'avoir regardé cette statue vidéo pour notre prochain tutoriel. 143. Tutoriel sur le ratio d'aspect: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS avancé. Et dans ce tutoriel, nous allons apprendre une nouvelle propriété appelée rapport hauteur/largeur. Essayons maintenant de comprendre ce qu'est le format d'image. Supposons que je veuille créer un carré parfait. Pour créer le carré parfait, nous avons besoin d'une hauteur et d'une largeur égales. Supposons que nous prenions une largeur de 200 pixels et une hauteur de 200 pixels. C'est ainsi que nous pouvons créer un carré. Nous avons maintenant une nouvelle façon de créer ce carré, maintenant de créer ce type de carré, abord pour se marier. Supposons que dans notre cas, 200 pixels, mais pour la hauteur, je ne vais prendre aucune propriété de hauteur. Ici, nous allons utiliser notre nouveau ratio Aspec, quelque chose comme ça, le ratio Aspec un par un Nous n'allons pas utiliser la propriété de hauteur pour créer cette boîte carrée. Dans la propriété des proportions, nous passons un ratio dans lequel je veux prendre la hauteur et u. Comme vous pouvez le voir, nous utilisons un ratio, c'est-à-dire un. Notre premier représente le mariage et le second la hauteur. Je veux dire, selon la largeur, nous allons utiliser la même hauteur. Ici, vous pouvez passer n'importe quel ratio en fonction de vos besoins. Permettez-moi de vous donner un autre exemple. Supposons, dans ce cas, je crée ici un autre élément profond. Cette fois, je vais prendre 200 pixels et ici je vais prendre la hauteur deux fois, puis avec la longueur pour deux fois, puis avec la longueur à ce type de structure utilisant le rapport hauteur/largeur Dans ce cas, nous devons prendre le rapport hauteur/largeur un par deux, un c'est deux, deux En gros, nous allons prendre double avec la valeur de la hauteur. Si vous voulez prendre de la hauteur, habotez avec la longueur, dans ce cas, tapez simplement un uri pour inverser le large, puis tapez deux par un. Maintenant, vous savez peut-être pourquoi j'utilise cette propriété ? Nous pouvons faire la même chose en utilisant la propriété de hauteur. En gros, nous utilisons cette propriété pour les sites Web réactifs. Permettez-moi de vous montrer un exemple. Ce DV est un élément DV carré. Mais lorsque nous parlons de site Web réactif, plupart du temps, nous devons suivre résolution mobile, sinon la résolution de l'ordinateur portable. Comme vous le savez, nos smartphones ont une résolution différente. Leur largeur est différente. Mais la majeure partie de la résolution du smartphone est de 322400-80 pixels. Ainsi, lorsque nous concevons pour les appareils mobiles, la plupart des coques sont réglées à 100 %. La largeur est donc devenue réactive, mais comment peut-elle créer un carré parfait en l'utilisant ? Parce que notre taille est toujours de 200 pixels. Maintenant, la largeur est de 100 %, mais la hauteur est fixe. Ici, nous pouvons donc utiliser notre nouvelle propriété comme faux ratio. Maintenant, il augmente ou diminue automatiquement la hauteur en fonction de la largeur et de la longueur, et il crée un carré parfait. Quelle que soit la solution que nous avons, nous n'avons pas à nous inquiéter. Cela va créer un carré parfait. Nous utilisons principalement cette propriété pour rendre nos images réactives. Sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons appliquer cette propriété Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Life Server, et j'ai déjà créé un point d'index de nom de document d'estimation DM. Maintenant, à l'intérieur de l'étiquette corporelle, je vais faire une déviation. Tapez Su pour taper. Et aussi, je vais attribuer un identifiant au type S, HTag, et notre nom d'identification est taste Dans cette variable, je vais prendre un paragraphe, taper Sue, EM, et je veux dix mots Je vais également styliser cet élément en utilisant son nom d'identifiant. Je copie le nom de l'identifiant et le haut du corps, je vais sélectionner ce nom d'identifiant et c'est le cals qui est la première propriété que je vais utiliser W W 200 pixels Ensuite, je vais dire que c'est background uber background, et je veux que u Ballard aussi je veux dire que c'est border. Bordure. Je veux une bordure solide de deux pixels. Solide, et la couleur de notre bordure est le noir, Hatag 000. Je vais configurer ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat dans le navigateur de nuit. Et maintenant, je veux transformer cet élément en carré parfait. Pour cela, je n'utiliserai pas la propriété height. Sans utiliser la propriété de hauteur, je vais utiliser une propriété appelée ratio Astete. Rapport hauteur/largeur un par un, et je vais définir celui-ci. Après avoir configuré ce fichier, vous pouvez voir le résultat dans votre navigateur. Ici, la première valeur 1 représente V et la seconde valeur 1 représente le haut. Et maintenant je décide d' augmenter la hauteur de ce rectangle. Pour cela, maintenant je veux deux fois la hauteur en fonction de la largeur et de la longueur. Ici, je vais changer le ratio un par deux et définir ce fichier. Après avoir défini ce fichier, vous pouvez voir le résultat. Si je le triple, il suffit de passer trois ici et de définir ce fichier. Maintenant, vous pouvez remarquer hauteur est trois fois plus grande que la largeur. Nous pouvons également faire le contraire. Oui Si vous souhaitez attribuer une hauteur de 50 pixels à cela, entrez simplement le type 21. Si vous définissez ce fichier, vous pouvez voir le résultat. Maintenant, désolé, le Wi fait 200 pixels et la hauteur devient cent pixels car ici vous définissez 200 pixels. Permettez-moi de vous dire une chose. Supposons que vous vouliez créer un carré, un carré parfait. Dans ce cas, vous ne pouvez remporter qu'une seule victoire. Supposons que je n' en prenne qu'une. Après avoir défini ce fichier, vous pouvez toujours voir ce carré. Si les deux valeurs sont identiques, dans ce cas, vous ne pouvez prendre une valeur numérique qu'une seule fois Maintenant, laissez-moi vous montrer autre chose. Maintenant, vous pouvez voir que vous avez un texte limité dans cet élément de base de données, et je vais augmenter la taille du texte. Je vais donc dupliquer cette section plusieurs fois, et je vais définir ce fichier. Après avoir défini ce fichier, il va augmenter la hauteur de cet élément. Laisse-moi te montrer. Comme vous pouvez le voir, maintenant, nous sommes toujours à 200 pixels et la hauteur devient supérieure à 200 pixels parce qu' elle utilise le rapport hauteur/largeur un. Si nous utilisons le rapport hauteur/largeur 1, notre contenu ne débordera pas de ce conteneur Cela va augmenter la hauteur de ce conteneur. Donc, dans notre cas, le rapport hauteur/largeur fonctionnera comme propriété de hauteur minimale. Il attribuera toujours une hauteur minimale de 200 pixels et le contenu l'est . Si le contenu est plus grand que sa surface, il augmentera la hauteur. Mais quoi ? Si vous ne souhaitez pas augmenter la hauteur, dans ce cas, vous pouvez utiliser la propriété overflow Il suffit de taper overflow, overflow auto. Si vous le réglez automatiquement, vous pouvez voir la barre d'alerte dans votre Delem Encore une fois, nous passons à 100 pixels en hauteur à cause du rapport hauteur/largeur. Non seulement cela, cette probabilité de rapport hauteur/largeur fonctionne également avec la hauteur, laissez-moi vous montrer. Dans ce cas, je vais attribuer la taille et le poids. Je commente l'épaisseur de cette ligne et hauteur de son texte, 300 pixels. De plus, je vais valider la propriété de débordement. Ici, je vais les prendre un par un, un c'est deux, un. Si je prends ce ratio, si je définis ce fichier, encore une fois, cela créera un carré parfait. Parce que cette propriété fonctionnera avec un ratio. Si vous fournissez l'une des valeurs en fonction de ce ratio de valeurs, l' autre valeur de propriété sera créée. Si vous souhaitez diminuer la largeur, tapez simplement un texte uniforme, interchangez simplement le ratio deux Si vous définissez ce fichier, vous verrez le résultat. Maintenant, il a attribué une largeur de 100 pixels à cet élément. Mais cette fois, vous pouvez remarquer que nos données débordent de ce conteneur car nous attribuons ici une hauteur fixe à ce conteneur Et si vous voulez résoudre ce problème, il vous suffit d'utiliser le même débordement de propriétés pour résoudre le problème Au lieu de diminuer la largeur de cet élément, si vous souhaitez l'augmenter, vous devez prendre une valeur supérieure à 40 avec un ratio. Supposons que je veuille une largeur trois fois plus grande par rapport à la hauteur. Ici, passez trois à un et définissez ce fichier et vous pouvez voir ce résultat. Maintenant, la largeur de la suite devient 900 pixels. Comme trois fois sur 300 est 901 de la chose la plus importante dont vous devez vous souvenir, vous ne pouvez pas utiliser les propriétés de hauteur et de largeur ensemble Dans ce cas, cette propriété de rapport de spécification ne fonctionnera pas. Laisse-moi te montrer. Je vais appliquer les deux propriétés. Si je l'enregistre, comme vous pouvez le voir, largeur devient maintenant 200 pixels et la hauteur 300 pixels. Maintenant, notre ratio Espe ne fonctionnera pas. Si j'essaie de le rendre parfaitement carré, cela ne marchera toujours pas. Mais quoi ? Si nous n' appliquons pas les deux propriétés, laissez-moi vous montrer. Je ne vais pas appliquer à la fois la propriété et la commenter, donc je la commente et je définis ce fichier, maintenant vous pouvez voir le résultat. Vous pouvez maintenant voir qu'il crée un carré parfait Ag. Maintenant, par défaut, rapport hauteur/largeur dit à la valeur wid Otto et en fonction de la valeur wid, il augmente la hauteur C'est pourquoi il est nécessaire de créer une boîte carrée parfaite. Maintenant, nous dépendons de la taille du contenu de ce paragraphe. Si je fais glisser et que j'augmente la taille de la fenêtre, comme vous pouvez le voir, fonction de la taille du contenu, cela augmente la hauteur et la largeur de ce conteneur. Voyons maintenant comment nous pouvons adapter nos images. Dans un premier temps, je vais supprimer cet élément profond. Ensuite, je vais également commenter ces lignes. Ensuite, dans la balise body, je vais prendre une image tag.yimageimage, et comme source, comme vous pouvez le voir dans mon répertoire de travail actuel, il y a une image nommée Je vais passer le chemin de la source de l'image : nature, point, point JPG. Si je place ce fichier, vous pouvez voir l'image dans mon navigateur. Et comme vous pouvez le voir ici, vous pouvez remarquer l'image Wi est supérieure à la hauteur de l'image. Maintenant, je veux faire de cette image un carré parfait. À l'intérieur de cette étiquette de cravate et où créer une sélection à l'aide de son étiquette Nom image. Il a noué Image. Est-ce que le carnaval est la première propriété que je vais utiliser, et je vais installer 400 pio Je vais configurer ce fichier. Avant de configurer ce fichier, vous pouvez voir le résultat. Selon l'image, cela a changé la hauteur de l'image. Mais je veux en faire un carré parfait. Pour cela, je vais utiliser une propriété appelée rapport hauteur/largeur. Je vais prendre le ratio un par un et je vais sous-traiter ce fichier. Après avoir défini ce fichier, vous pouvez remarquer ici qu'il a fait un carré, mais le problème est qu'il a étiré l'image. Maintenant, un DO élevé est égal, mais cela a détruit l'image. Maintenant, comment pouvons-nous résoudre ce problème ? Pour résoudre le problème, nous avons une autre propriété, connue sous le nom d'ajustement à l'objet. Et ici, je vais taper cover object feed cover. Si j'ai défini ce fichier, vous pouvez maintenant voir le résultat. Maintenant, vous pouvez voir que nous avons l'image carrée et que cela va également déformer l'image Si je réduis l'image de 200 pixels, vous pouvez également voir que cela déforme l'image Nous avons toujours une boîte carrée. Nous pouvons également modifier le ratio. Supposons que je veuille créer un rectangle, ici je vais passer un ratio de un par deux et définir ce fichier. Vous pouvez maintenant voir le résultat. Sans déformer l'image, il s'ajuste dans n'importe quel rectangle ou case carrée Je vais maintenant transformer cette image en image réactive. Pour l'instant, je vais utiliser cette cravate une par une, et pour les tests mobiles, je vais utiliser un hémotype media qui indique le rythme, le skin multimédia, et pendant les rondes, je vais définir Helm tape max avec et je vais dépasser les 500 pixels. Cela signifie que si le Wi est inférieur à 500 pixels, nous pouvons appliquer un CSS différent à cet élément. Est-ce que c'est le calibrage que je vais monter jusqu'à ceci, je vais monter différemment vers cette image Je vais d'abord sélectionner l'image ING, puis à l'intérieur du calibrs, le type de héros à 100 % Chaque fois que l'écran devient inférieur à 500 pixels, cette image est réglée à 100 %. Comme vous pouvez le constater, nous utilisons le ratio attendu un pour un. Configurons donc le fichier. Après avoir défini le fichier, vous pouvez maintenant voir que notre image est au carré. Si je réduis la largeur du navigateur, laissez-moi vous le montrer . Ainsi, à partir de l'inspection, je vais changer la dimension de ce navigateur. Je vais réduire la largeur du navigateur. Comme vous pouvez le constater, chaque fois que ce vio signifie « en dessous de 500 pixels », cela signifie « largeur de l'image, 100 % », quelque chose comme ça. Comme vous pouvez le voir ici, nous utilisons le format d'image, c'est pourquoi nous avons créé un carré parfait. C'est ainsi que nous pouvons adapter notre image en fonction de l'écran du mobile. Et si j'augmente la largeur de la fenêtre du navigateur, encore une fois, cela devient une petite image carrée. J'espère donc que vous savez maintenant comment utiliser correctement le format d'image pour rendre nos images et notre site Web réactifs Merci d'avoir regardé ce programme vidéo pour nos deux prochaines éditions. 144. Règle @media en mode affichage CSS: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons apprendre à désapprendre le CSS. Il s'agit d'une nouvelle règle médiatique. Essayons maintenant d'en comprendre le sens. Qu'est-ce que cette démo ? Lorsque nous devons ouvrir un site Web, nous devons utiliser un logiciel spécial appelé navigateur Actuellement, nous avons plusieurs options de navigateur sur le marché, telles que Chrome, Age, Safari, Firefox, Opera. Ce sont tous des navigateurs populaires sur le marché. Sans cela, il y a d'autres navigateurs. Mais si vous remarquez, vous pouvez voir dans tous les navigateurs que nous avons un contrôle commun, cette barre de contrôle. Chaque navigateur est livré avec cette barre d'URL. Ici, nous pouvons fournir l'URL et accéder au site Web. En outre, il est livré avec un bouton de navigation et certaines options. Également sur le côté droit, il propose l'option Open Netap, l'option signet et l'option de menu Maintenant, les CSS nous permettent de contrôler la mise en page du navigateur. Si vous voulez tous les masquer, vous pouvez les appeler ainsi et nous pouvons changer le mode du navigateur de trois manières différentes. La première valeur est le navigateur. Il s'agit de la valeur par défaut. Si nous utilisons un navigateur, il fournit toutes les commandes. Il fournit la navigation dans la barre d'URL, signets, Nutap, etc. Il s'agit du mode par défaut, connu sous le nom de mode d'affichage du navigateur. Ensuite, nous avons une autre option appelée interface utilisateur minimale. Si nous utilisons ce mode, de navigation, la barre d' URL et l'option de signet seront supprimées Cela montrera qu'il y a plus de contrôle dans notre navigateur. Enfin, nous avons un autre mode d'affichage , le mode plein écran. Lorsque vous ouvrez un site Web dans notre navigateur et que nous louons la touche F 11, cela fait passer la fenêtre de notre navigateur en mode plein écran après avoir activé le mode plein écran, cela masque toutes les commandes. Désormais, en fonction du mode d'affichage de votre site Web, vous pouvez modifier la conception de l'interface utilisateur de votre site Web. Je tiens à dire que vous pouvez modifier le style CSS de votre site Web. C'est pourquoi le CSS a introduit une nouvelle requête multimédia connue sous le nom de mode d'affichage. Voyons maintenant comment utiliser ce mode. Dans un premier temps, nous devons taper au rythme des médias. Ensuite, dans le processus du tour, nous devons utiliser une propriété appelée mode d'affichage. Ici, vous pouvez utiliser n'importe laquelle de ces valeurs. Supposons que vous puissiez utiliser une interface utilisateur et un navigateur minimaux en plein écran. En fonction de cette valeur, vous pouvez modifier la propriété CSS. Vous définissez une couleur de dégradation différente en mode plein écran. Ainsi, lorsque l'utilisateur clique sur la touche F 11, votre navigateur passe en mode plein écran. En outre, cela va changer la couleur d'arrière-plan de votre site Web. Commençons maintenant par le côté pratique et voyons comment utiliser ces trois modes différents. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code Visual Studio et mon navigateur en utilisant l'extension Live Server et je crée déjà un point d'index de nom de document TML DML Comme vous pouvez le voir dans notre balise body, nous avons une balise de titre à l'intérieur de la balise de style, son style étant la section du corps. Il a assigné une zone de typographie fabuleuse. Je vais maintenant définir un mode d'affichage dans notre balise de style. Il tape au rythme du média et à l'intérieur des ronders, ici je vais taper le mode d'affichage, mode d'affichage, et je vais attribuer le plein écran Celui-ci. Ensuite, à l'intérieur du coless, nous pouvons personnaliser selon nos besoins. Ensuite, je vais me procurer cette diapositive. Cette étape, je vais configurer le navigateur, par défaut. Et ici, je tape navigateur. Ensuite, je vais dupliquer à nouveau cette ligne et cette fois je vais passer en mode réglage, interface utilisateur minimale. Ensuite, en mode plein écran, je souhaite changer la couleur de police. Ici, je suis en train de taper, d'abord je veux sélectionner le titre, une balise H, puis à l'intérieur du Calibra, je vais utiliser une propriété appelée color, color et je vais la définir en vert Ensuite, je copie cette sélection et je la colle dans un autre mode d'affichage. Ici, je vais mettre la couleur rouge. Enfin, je vais le configurer pour une interface utilisateur minimale, je vais le mettre en bleu et je vais définir ce fichier. Après avoir défini ce fichier, vous pouvez maintenant le voir activer notre mode par défaut, le navigateur Mins. C'est pourquoi la couleur de notre police est devenue rouge. Comme je vous l'ai dit, c' est le mode par défaut. Vous pouvez voir ici toutes les commandes de mon navigateur. Vous pouvez voir ici les boutons de navigation, option de rechargement, la barre d'URL. Et d'autres options. Maintenant, je vais faire l'éloge après avoir sélectionné le navigateur F 11. Si je fais l'éloge de F 11, vous pouvez maintenant voir notre navigateur passer en mode affichage complet, et vous pouvez également remarquer que c'est toujours la couleur de la police. Maintenant, les couleurs de nos polices se transforment en vert. Comme vous pouvez le constater, il n'y a pas de barre d' URL ni d'autres options, et elle occupe tout l' écran du navigateur. Si vous souhaitez revenir au mode par défaut normal, encore une fois, vous devez faire l'éloge du bouton F 11. J'espère que vous comprenez maintenant quelle est la différence entre le mode plein écran et le mode navigateur ? Enfin, nous avons une autre option appelée interface utilisateur minimale. Cela fonctionne lorsque vous convertissez notre site Web en WAP. Sinon, nous pouvons créer un raccourci, une icône dans Textop. Nous avons besoin d'un vrai serveur pour appliquer une interface utilisateur minimale. Sinon, nous ne pouvons pas créer le raccourci et l'ouvrir en tant qu'interface utilisateur minimale. Mais je peux vous donner une petite démonstration à quoi ressemble une interface utilisateur minimale. Passons à l'éditeur de code is Studio. Comme vous pouvez le voir, la façon dont nous créons un nom de bouton ouvre une fenêtre minimale et, dans ce bouton, établissez un lien avec cette fonction, ouvrez une fenêtre personnalisée. Et ici, nous utilisons un code Java Script. Nous créons une fonction. Nous allons ouvrir une fenêtre personnalisée Au début, nous créons une fenêtre vide et je l'ai définie avec 500 pixels et une hauteur de 300 pixels et nous l' appelons ma fenêtre minimale. Ensuite, dans cette fenêtre, nous écrivons un contact. Ici, nous écrivons une balise stimaltag H, et ins estimate avec type, c'est mon code HTML personnalisé Je vais configurer ce fichier. Après avoir défini ce fichier, si j'essaie de cliquer sur Ouvrir la fenêtre minimale comme vous pouvez le voir, voici à quoi ressemble une fenêtre minimale. Cette fenêtre est différente d'une fenêtre à quatre écrans. Nous n'avons aucune barre de navigation dessus. Comme nous n'avons pas d'option de menu dans la barre d'URL, nous avons l'option de minimisation, l'option de maximisation, la barre de fermeture et le bouton de fermeture. Mais le problème est qu'il est ouvert par un serveur en direct. C'est pourquoi je ne peux pas y appliquer cette règle médiane. Ici, j'essaie juste de vous montrer à quoi ressemblera une fenêtre minimale. C'est tout pour ce tutoriel. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 145. Tutoriel de Pseudo cours CSS plein écran: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CSS, et dans ce tutoriel, nous allons apprendre une nouvelle classe Posido, qui est en plein écran Voici la liste des classes Posido disponibles en CSS, et j'ai déjà abordé de nombreuses classes Posido dans nos Et dans cette liste, le CSS ajoute une nouvelle classe de posidoclasse, connue sous le nom de plein écran Voyons maintenant, qu' est-ce que le mini-oct ? Que peut-on faire avec Positoglass en plein écran ? Supposons que nous ayons un navigateur et qu'à l'intérieur de ce navigateur, nous ayons un élément DV Dans ce Deelement, il est peut-être rempli de texte, sinon d'images Comme vous pouvez le constater, il y a un bouton en dessous. Maintenant, si je clique sur ce bouton, je veux afficher en plein écran cet élément profond Quelque chose comme ça, et pour le faire en plein écran, nous devons utiliser un peu de JavaScript. Maintenant, après l'avoir rendu en plein écran, je veux changer le CSS tiny. Supposons que je veuille changer la couleur de fond, sinon, je souhaite changer la couleur du texte et pour rendre cela possible, CSS présente ce Posidoglass en plein écran Une fois que nous aurons converti cette plongée en écran, il activera cette Posidoclasse selon ce lien Posidocls, il appliquera ces styles à Commençons par la pratique et voyons comment appliquer ce PosidOCass Comme vous pouvez le voir côte à côte, j'ouvre mon éditeur de code isal studio et mon navigateur en utilisant l'extension de serveur if, et je crée déjà un document tM nommé index point TM Et comme vous pouvez le voir dans notre body tag, nous créons ici une boîte profonde. À l'intérieur de cette profondeur, nous avons également un paragraphe. Là, nous créons un bouton, passons en plein écran, et je stylise déjà cet élément profond et notre section du corps dans notre section de style. Maintenant, le problème est que notre bouton ne fonctionne pas. Nous devons utiliser JavaScript pour que cela fonctionne. Si vous ne connaissez pas JavaScript, faites exactement ce que je fais. Je veux faire ce plein écran en profondeur lorsque je clique sur ce bouton. Je vais utiliser un événement de JavaScript, type en cochant celui-ci. C'est méchant chaque fois que je clique sur ce bouton. Ensuite, nous devons cibler cette boîte à l'aide de son nom d'identification. Pour cela, nous devons utiliser le document point get element by ID. Dans les versets ronds, dans les codes uniques, je vais taper la case contenant le nom de l'identifiant. Après avoir ciblé cette case, je souhaite appliquer une nouvelle méthode à partir de Java Screen, connue sous le nom de plein écran. Le point de type Sumo est une méthode de demande de type somme en plein écran, celle-ci De plus, nous devons utiliser des presses rondes car il s'agit d'une méthode et d'un point-virgule pour entrer dans Dans un premier temps, nous ciblons cet élément, l'élément box deep, en utilisant son nom d'identifiant. Je tape document point get element par ID. Je vais maintenant configurer ce fichier. Après avoir défini ce fichier, si je clique sur ce bouton, cet élément profond passera en mode plein écran, quelque chose comme ça. Si vous souhaitez quitter ce mode plein écran, il suffit de cliquer sur la touche Scape. Nous sommes maintenant en mesure d'appliquer ce verre posito pour écran. Je souhaite modifier la couleur de fond de cet élément profond. Pourquoi le fabriquons-nous pour Spin ? Maintenant, créons ce sélecteur. Je vais d'abord y aller. Je vais utiliser la classe Posito pour le spin. Je vais utiliser la classe Posito avec tag , box, colon Ensuite, à l'intérieur du carlivore, nous pouvons appliquer les propriétés. Maintenant, je veux changer la couleur de fond. Alors tapez background, et je veux le rendre vert clair, de cette couleur. Je souhaite également modifier la taille de la police. Taille de police, je veux qu'elle soit de 22 pixels. Maintenant, configurons le fichier. Après avoir configuré ce fichier, je vais cliquer à nouveau sur ce bouton, en plein écran. Comme vous pouvez le voir, maintenant, sa couleur de fond devient verte, vert clair. En outre, cela augmente la taille de la police. S est une classe de posito en plein écran. Si vous souhaitez citer cet écran en plein écran, louez simplement Scape Key. Et ensuite, je veux ajouter un titre et une balise dans cette boîte. Permettez-moi de vous montrer un tag H one et dans ce tag H one, je vais taper hello world. Je vais le sauvegarder à nouveau. Maintenant, je décide quand je le crée pour l'écran, je veux changer uniquement la couleur du paragraphe, la couleur du texte du paragraphe. Pour cela, nous devons créer un autre sélecteur. Laisse-moi te montrer. Pour cela, je duplique d'abord cette section, puis je vais cibler uniquement ce paragraphe. Donc dans cette boîte Posidoglass en plein écran, je veux cibler le paragraphe, donc je tape P puis je veux changer la couleur de police Je vais taper la couleur et je veux la rendre rouge. Je vais configurer ce fichier. Après avoir défini ce fichier, si je le repasse en plein écran, vous pouvez maintenant voir qu'il n'a changé que la couleur de police du paragraphe. Je le fais rouge. Voici comment nous pouvons utiliser ce Positoclass. De plus, vous pouvez utiliser la même classe de positoles sans positoles. Laisse-moi te montrer. Supposons que je fasse une section we et qu'ici, je vais utiliser une autre positoclass, pas Si la boîte est nulle, alors à l'intérieur des rondresses, je vais déplacer ce positoclas Ensuite, je cible ce tag P avec ce tag box, et je veux le créer Je veux changer de couleur. Je veux le rendre vert. Donc, si je définis ce fichier, maintenant vous pouvez voir, maintenant vous pouvez voir le paragraphe, il a la couleur de police. Cela le rend vert parce que nous n'activons pas le mode plein écran dessus, et si je le fais en plein écran, il deviendra rouge. Si je reviens à l'ancienne scène, encore une fois, elle redevient verte. C'est ainsi que nous pouvons utiliser cette classe POSIDOclass. Nous pouvons utiliser ce PositoClass avec n'importe quelle autre propriété CSS J'espère que c'est clair pour toi maintenant. Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 146. Tutoriel d'introduction au Sass: Bonjour, les gars. Bon retour. Dans ce tutoriel, je vais vous présenter qu'est-ce que SAS ? Pourquoi devons-nous utiliser SAS ? Et comment utiliser le CAS ? Notre première question est la suivante : qu'est-ce que SAS ? SAS est l'abréviation de syntaxtically awesome style sheets. Il s'agit essentiellement d'une extension CSS. Nous allons faire le même travail dans le fichier CAS. Comme nous le faisons dans le fichier CSS. Sinon, nous pouvons l'appeler préprocesseur CSS. De nos jours, il est très nécessaire que vous connaissiez n'importe quel préprocesseur CSS Il existe deux préprocesseurs CSS célèbres, SAS et moins. En comparaison, SAS est plus populaire car les SS sont dotés de fonctionnalités plus avancées que moins. Si vous terminez ce cours, je tiens à dire que si vous apprenez le CS automatiquement, vous comprendrez moins. Vous devez juste faire face à une petite différence de syntaxe, rien d'autre. Maintenant, la question est, comme je vous l'ai dit plus tôt, cela fonctionne comme du CSS. Alors pourquoi CS est plus populaire que CSS ? Parce qu'il y a des raisons. Laisse-moi te montrer. Tout d'abord, il est très facile à gérer. Lorsque nous travaillons avec du CSS, cela crée de très longs fichiers. Il est parfois très difficile de gérer de longs fichiers. Mais si nous parlons de SAS, il est très facile à gérer. La prochaine raison qui l' a rendu plus populaire, c'est qu'il augmente notre vitesse de codage par rapport au CSS normal. Mais c'est efficace lorsque vous travaillez sur de grands projets, et non sur de petits projets. Ce n'est pas très pratique pour les petits projets. Supposons que vous souhaitiez créer un site Web de cinq pages. Dans ce cas, ce n'est pas très pratique. Mais si vous travaillez avec un site Web complexe et multipage, c'est très pratique. La dernière chose qui l' a rendu plus populaire, c'est la compatibilité entre navigateurs. Lorsque vous utilisez le CSS, certaines fonctionnalités ne sont pas prises en charge dans l'ancien navigateur. Parfois, cela crée un gros problème, mais SAS ne pose aucun problème pour sa fonctionnalité intégrée, il fonctionne avec n'importe quel ancien navigateur Supposons que vous travailliez avec Internet Explorer 7, sinon, si vous travaillez avec la version Letters du navigateur Chrome, vous ne verrez aucune différence dans le résultat. Cela fonctionne de la même manière que dans la version en lettres. Voyons maintenant comment utiliser le fichier CS dans notre fichier STL. qui est étrange, c'est que nous ne pouvons pas utiliser fichier CS dans un fichier sml. Oui, c'est vrai. Nous ne pouvons pas utiliser le fichier CS directement dans Atmel. Même le navigateur ne peut pas comprendre le code SAS. Le navigateur ne peut comprendre que les fichiers CSS, pas le fichier CS. Donc, pourquoi nous avons besoin de créer un fichier CS, nous avons besoin d'un compilateur SAS. Il compile le fichier CS et le convertit en fichier CSS. Vous devez donc injecter le fichier CSS sur votre document ETL, et non sur le fichier CS Mais vous devez taper votre code dans le fichier CAS, pas dans le fichier CSS. Ensuite, vous compilez le code SAS et le convertissez en fichier CSS. Maintenant, la question est : qu'est-ce que le compilateur SAS ? Dans la vidéo suivante, nous verrons ce qu' est le compilateur Cs. Parlons maintenant des fonctionnalités OSS, et nous allons aborder ces fonctionnalités dans nos prochains tutoriels. Notre première caractéristique concerne les variables. Nous pouvons stocker de la valeur dans des variables comme dans un langage de programmation. Notre deuxième fonctionnalité est la nidification. En utilisant l'imbrication, nous pouvons assigner une classe à une autre classe. Sinon, nous pouvons utiliser une classe dans un autre identifiant. Il s'agit d'un cas d'utilisation de la nidification. Notre prochaine fonctionnalité concerne les entrées partielles. Nous pouvons créer un petit fichier cs et l'importer sous forme de modules. Notre quatrième fonctionnalité est celle des renardes. À l'aide de mixins, vous pouvez réutiliser votre code plusieurs fois. Notre cinquième fonctionnalité est l'extension. Supposons que vous saisissiez du code dans une classe, mais que vous souhaitiez réutiliser ces codes dans une autre classe. Dans ce cas, vous pouvez utiliser des extensions. Notre prochaine fonctionnalité concerne les opérateurs. Opérateur désigne les opérateurs arithmétiques. Si vous devez exécuter un calcul, dans ce cas, vous pouvez utiliser ces fonctionnalités telles que l'addition, la multiplication, la division, etc. Notre prochaine fonctionnalité concerne les fonctions. Nos SAS sont dotés de certaines fonctions voilées, que vous pouvez utiliser Comme vous pouvez créer vos propres fonctions comme le langage de programmation. Ensuite, notre avant-dernière fonctionnalité concerne les directives conditionnelles. Si vous souhaitez exécuter un travail conditionnel tel que Is condition, vous pouvez utiliser cette fonctionnalité, et notre dernière fonctionnalité concerne les boucles. Je sais que vous connaissez déjà JavaScript et d'autres langages de programmation. Alors je n'ai pas besoin d'expliquer ce que sont les boucles et à quoi servent les boucles. Vous pouvez utiliser n'importe quel type de boucle, comme une boucle à quatre boucles, une boucle Di, une boucle While, etc. Ils sont tous disponibles en SAS. Parlons maintenant de la syntaxe SAS. Fondamentalement, CSR était livré avec deux types de syntaxe, la syntaxe SCSS et la syntaxe SASS Il s'agit essentiellement d'extensions. SCS SAS. En gros, ils sont là, mais il y a une petite différence. Supposons que nous ayons une syntaxe CSS. Et comme vous pouvez le constater, nous prenons au total trois types de sélecteurs différents : NeBul Nb AI et Neb Comme vous pouvez le voir, nous devons d'abord taper les valeurs CSS NeBul. Ensuite, nous devons taper la valeur CSS Nb AI. Enfin, vous devez taper les valeurs CSS d'ancrage Neb. Mais si nous devons utiliser le même code dans la syntaxe SCSS dans ce cas, nous devons taper comme ceci Nous devons sélectionner le type d' élément Nab 1. Ensuite, à l'intérieur des alives, nous devons taper toute la syntaxe, UL, LI et A. En gros, nous appelons ce système Nous allons en apprendre davantage à ce sujet dans nos prochains tutoriels. Mais si vous tapez la syntaxe de la cellule dans du code SAS, vous devez taper comme ceci. Vous n'avez pas besoin d'utiliser de calivrass ni de point-virgule. Il n'est pas nécessaire d'utiliser un point-virgule après une propriété. C'est assez similaire au langage de programmation Python. Mais pour ce tutoriel, je vais utiliser la syntaxe SCSS, celle-ci Sinon, cela risque de vous embrouiller. Maintenant, parlons du type de connaissances dont vous avez besoin pour démarrer avec nous. Pour le CAS, vous devez avoir des connaissances de base STML et vous devez avoir une bonne connaissance du CSS Comme je vous l'ai dit plus tôt, en fin de compte, le fichier CS est compilé dans un fichier CSS. Vous devez donc connaître la syntaxe CSS appropriée. Et si je parle de codditor, vous pouvez utiliser n'importe quel Pour ce tutoriel, je vais utiliser le code VS. Vous pouvez utiliser n'importe quel éditeur de code. Voilà pour ce tutoriel. Dans le prochain tutoriel, je vais parler de ce qu'est compilateur CAS et du compilateur que nous allons utiliser pour ce didacticiel. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 147. Téléchargez et installez sass compile: Bonjour, les gars. C'est bon de te revoir. Dans ce didacticiel, nous allons apprendre ce qu'est compilateur SAS et comment télécharger le compilateur SAS, qui peut nous aider à compiler notre fichier CS dans un fichier CSS. Comme vous pouvez le voir dans mon navigateur, j'ouvre le site officiel de SAS, SAS hyphen lang.com Comme vous pouvez le constater, il fournit une introduction de base à SAS. Si tu as le temps, tu peux le lire. Ensuite, vous pouvez voir ici une option nommée Install. Il suffit de cliquer sur. Ensuite, il est redirigé vers cette page. Si vous faites défiler l'écran un peu vers le bas, vous pouvez voir ici une autre méthode. Vous pouvez voir ici une liste de compilateurs, et ici vous pouvez voir une autre méthode installer votre SAS à l'aide de NPM Pour ce tutoriel, je n' utiliserai aucun package de nœud. J'aimerais utiliser un compilateur, et je vais utiliser un autre compilateur, pas celui-ci, et le nom de notre compilateur est Koala Comme vous pouvez le constater, ce sont la plupart des compilateurs payants. C'est pourquoi je vais utiliser un compilateur gratuit, Koala Il vous suffit de rechercher le compilateur Koala SS dans votre navigateur, puis de cliquer sur ce lien, qualaapp.com Ceci est le site officiel de ce compilateur. Comme vous pouvez le constater, Koala est une application graphique pour SAS Compass et CoffeeScript Nous l'utilisons à des fins de compilation pour ces langages, et vous savez que ce sont tous des langages de préprocesseur En gros, en utilisant cette application, nous pouvons compiler toutes ces langues. Dans un premier temps, nous devons télécharger cette application. Pour le téléchargement, vous devez cliquer sur ce bouton vert, Télécharger. Comme vous pouvez le constater, notre téléchargement a déjà commencé. Ensuite, vous devez ouvrir votre dossier de téléchargement, et ici vous pouvez voir la configuration de cette application, Koala setup Je vais maintenant installer cette application sur mon ordinateur. Le processus d'installation est très simple, vous devez double-cliquer dessus. Après cela, vous devez cliquer sur Suivant, puis vous pouvez choisir répertoire dans lequel vous souhaitez l'installer. Il s'agit de l'emplacement par défaut, il suffit de cliquer sur Suivant. Comme vous pouvez le constater, j'ai déjà installé cette application Je ne souhaite donc pas la réinstaller, mais vous devez terminer le processus d'installation. peut prendre deux ou trois minutes Le processus d' installation peut prendre deux ou trois minutes , et une fois le processus d'installation terminé, il s'ouvre automatiquement. Pour l'instant, je vais l'annuler. Donc, une fois le processus d'installation terminé, vous devez cliquer sur l'icône Koala pour l'ouvrir Il suffit de double-cliquer dessus. Comme vous pouvez le constater, la première fois est totalement vide. Et à partir de là, vous pouvez ajouter n'importe quel fichier SAS ou un fichier IS. Dans un premier temps, je vais me lancer dans mon éditeur et créer un fichier CS. Comme vous pouvez le voir, il existe un dossier Nam Demo, et à l'intérieur de ce dossier Devo, il y a un autre dossier Nam CSS Et dans ce dossier CSS, je vais créer un fichier CS. Créons un nouveau fichier dans ce dossier. Point de style SCSS. Sinon, vous pouvez également utiliser la syntaxe SASS. Mais comme je vous l'ai dit plus tôt, pour ce tutoriel, je vais utiliser la syntaxe SSS. Vous pouvez également voir l'icône SAS à cet endroit. Ajoutons maintenant du code SAS dans ce document. J'ai déjà copié du code SAS et je vais le coller ici. Ce code est destiné à une démonstration, vous n'avez donc pas besoin de le comprendre. Dans la prochaine vidéo, je vais en parler. Comme vous pouvez le constater, nous avons créé notre fichier CS avec succès. Maintenant, nous devons créer un fichier CSS dans le même dossier avec le même nom. Je vais créer un fichier CSS dans ce dossier, style point CSS. C'est ça. Et nous devons garder ce fichier vide. Nous n'avons pas besoin de taper de code CSS dans ce fichier. Nous devons le laisser vide, et maintenant nous devons ouvrir notre KoalaOptare Je vais ouvrir notre KoalaOptare. Comme vous pouvez le voir, j'ouvre côte à côte mon Qarafopter et mon répertoire de travail actuel Et ici, vous pouvez voir deux fichiers différents sous forme de fichier et un fichier CSS. Et maintenant, nous devons déplacer ce dossier CSS dans cette application. Je vais juste faire glisser ce dossier et le placer ici. C'est ça. Ici, vous pouvez le voir apparaître automatiquement dans tous les fichiers CSS et CS. Je vais maintenant retourner dans notre éditeur de code et apporter quelques modifications à notre fichier CS. Ici, vous pouvez voir dans mon éditeur que j'ouvre mon fichier CS. Avec cela, j' ouvre également mon fichier CSS. Si je vous montre mon fichier CSS, comme vous pouvez le voir, il est maintenant totalement vide. Maintenant, je vais revenir au fichier CS et je vais définir ce fichier, contrôler. Donc, si je définis ce fichier et que je vous montre mon fichier CSS, vous pouvez voir ici le code CSS approprié. Cette application Kana compile donc le code SAS et le convertit en code CSS Ici, vous pouvez voir qu'avec la balise Nap, elle sélectionne UltaGo, mais dans notre fichier CS, à l'intérieur de la balise Nap, nous utilisons la balise UL Comme vous pouvez le voir dans notre fichier CS, nous utilisons Napkword une fois Mais si je vous montre un fichier CSS, vous pouvez voir ici qu'il a utilisé la balise Nap trois fois avec la balise UL avec la balise LI avec la balise ANCA. Apportons maintenant quelques modifications à notre fichier CS et voyons ce qui s'est passé. Ici, je veux augmenter UL Paddy de 20 pixels, type Summer, 20 pixels Si je définis ce fichier et que je vous montre mon fichier CSS, vous pouvez voir ici que nos modifications sont correctement reflétées dans le fichier CSS. Vous devez juste vous rappeler que vous n'avez rien à changer dans votre fichier CSS. La meilleure option est de fermer votre fichier CSS, puis de travailler avec le fichier CS. J'espère que vous comprenez maintenant comment fonctionnent les compilateurs CS Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 148. Tutoriel sur les variables Sass: Bonjour, les gars, c'est bon de vous revoir. Dans ce didacticiel, nous allons apprendre les variables SAS. Mais dans un premier temps, essayons de comprendre ce que sont les variables et pourquoi nous devrions les utiliser. Ici, vous pouvez voir que nous créons un sélecteur de body tag. Dans ce sélecteur, nous définissons la couleur d'arrière-plan, rouge et l'antenne de la famille de polices Sur ce, je vais prendre deux autres sélecteurs H, un sélecteur et un Spenselector Maintenant, si vous remarquez, vous pouvez voir qu'il y a une chose commune. Ce sont des couleurs, de couleur rouge. Pour le corps, j'utilise une couleur de fond rouge, et pour chaque balise, j'utilise une couleur de police rouge, et j'utilise également la même couleur pour la balise span. Comme vous pouvez le constater, le rouge est la couleur courante. Supposons que nous ayons utilisé la même couleur à dix endroits. Et maintenant, nous devons changer de couleur. Ensuite, il faut aller à dix endroits pour changer de couleur, et cela prend beaucoup de temps. Pour cela, sus introduit des variables. Dans les variables, nous prenons le nom d'une valeur. Dans notre cas, couleur rouge, et le nom de notre variable est la couleur principale du tiret. Et vous devez vous rappeler que pour le nom de la variable, vous devez utiliser le signe du dollar. Dans un premier temps, nous devons prendre un nom de variable, puis nous devons stocker la valeur dans cette variable. Ensuite, nous devons appuyer sur le nom de la couleur par le nom de cette variable Le principal avantage de l'utilisation de la variable est lorsque nous devons changer la couleur primaire. Supposons que je veuille changer la couleur primaire rouge en bleu. Ensuite, nous devons simplement modifier les variables, pas tous les sélecteurs Nous n'avons pas besoin de taper le nom de la couleur bleue sur les lieux. Il vous suffit d'apporter des modifications à la variable. Cette fonctionnalité est également introduite dans le CSS, mais les anciens navigateurs ne la supportent pas . Mais SAS le pourrait. Sans perdre votre temps, commençons par l'aspect pratique et voyons comment fonctionnent les variables dans SAS. Ici, vous pouvez voir côte à côte, j'ouvre mon Visual Studio Ceaor et mon navigateur et vous pouvez déjà voir que je crée une mise en page Web de base Ici, vous pouvez voir l' en-tête, un fumier, une barre latérale, ainsi que la partie contenu et un pied Si vous remarquez, vous pouvez voir qu'il existe une couleur commune dans en-tête et le pied de page de cette page Web Si je survole ces liens, vous pouvez voir le fond de cette balise d'ancrage de la même couleur fond de cette balise d'ancrage de la De plus, si je passe le curseur sur mes accessoires, vous pouvez voir la même couleur marron De plus, si je sélectionne tout le contenu, vous pouvez voir la même couleur d'arrière-plan derrière le contenu. Je vais maintenant vous montrer comment utiliser les variables. Donc, comme vous pouvez le voir, notre couleur primaire est le marron, nous devons donc trouver la couleur marron. Ici vous pouvez voir le nom de la couleur marron. Nous utilisons cette couleur dans le survol d'ancre, section d'en-tête, la section de pied de page, en grande partie Maintenant, je veux remplacer cette valeur de couleur par le membre variable. Pour cela, nous devons créer une variable. Donc ici, je vais créer une variable. Au début, nous devons utiliser le signe du dollar, dollar et notre membre variable est la couleur principale. Couleur minimale. Je vais utiliser la couleur marron. Je vais maintenant remplacer le nom des couleurs par nom de la variable, couleur principale. Donc, je vais d'abord remplacer le sélecteur, la couleur ou le nom de variable d'Anchor Hover dans la barre supérieure couleur ou le nom de variable Je vais également le remplacer dans le sélecteur d'en-tête, couleur principale Ensuite, dans notre élément de liste de menu. Ensuite, je souhaite le remplacer dans notre section de contenu. Et je vais aussi le remplacer dans notre barre latérale. Ensuite, je vais le remplacer dans notre section de pied de page. C'est donc chose faite. Si je configure ce fichier et que je recharge mon navigateur, vous pouvez voir qu'il n'y a aucun changement Vous pouvez voir la même couleur d'en-tête, la même couleur de pied de page, et si j'utilise mon mignon dans les liens de mon menu, vous pouvez voir la couleur et si j'utilise mon mignon dans les liens de mon menu, d'arrière-plan. Il est également brun. J'ai réussi à remplacer notre valeur de couleur par une variable. Maintenant, je veux changer la couleur principale de ce site, du marron au bleu. Lorsque je barre mon curseur dans les éléments de menu, je veux une couleur bleu-brun. En gros, je veux dire que je veux changer la couleur principale, du brun au bleu. Je vais taper des cheveux bleus. Si je configure ce fichier et recharge mon navigateur, vous pouvez voir le résultat Vous pouvez également voir la couleur bleue dans la section d'en-tête, la section pied de page, la section de menu et la section de la barre latérale Maintenant, nous n'avons pas besoin de changer la couleur plusieurs fois car nous utilisons maintenant une variable. Maintenant, vous pouvez mettre n'importe quelle couleur pour une seule fois, et cela reflétera toutes les pages. C'est l'avantage de l'utilisation de variables. Il vous suffit d'utiliser le nom de la variable comme valeur. Maintenant, si je vous montre mon fichier CSS, vous pouvez voir ici qu'il n' y a pas de variables. Vous pouvez juste voir les noms des couleurs, fond bleu. Il ne s'agit pas seulement de travailler avec les couleurs. Vous pouvez mettre n'importe quel type de valeur dans une variable. Supposons que je veuille changer le style de police sur toute la page Web. Dans ce cas, nous pouvons utiliser une variable. Je vais créer une autre variable, et le nom de notre variable est main font, Dollar, main font. Colon. Pour l'instant, je vais utiliser aerial et maintenant je vais remplacer toutes les valeurs de police par cette variable. Je vais remplacer la police aérienne par cette variable, la police principale. Et nous devons également remplacer dans le sélecteur d'en-tête la police principale Enfin, je vais le remplacer dans notre en-tête de contenu. Police minimale. Si je configure ce fichier et que je recharge mon navigateur, comme vous pouvez le voir, il n'y a aucun changement. Cela a parfaitement fonctionné. Vous pouvez le voir imprimer une vraie police sur toute la page Web. Maintenant, si nous devons modifier la famille de polices, nous devons la modifier plusieurs fois. Maintenant, changeons la famille de polices sur l'ensemble de la page Web, et je vais utiliser autre chose qu'une police. Si je configure ce fichier et que je recharge mon navigateur, vous pouvez voir le style de police Comme vous pouvez le constater, il remplace la police Areal par VardanaFont. Maintenant, c'est clair pour vous, à quoi sert une variable dans sas ? Cela nous permet non seulement de gagner du temps, mais également d'améliorer notre productivité. Nous pouvons changer des milliers de lieux en changeant un seul endroit. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 149. Tutoriel d'imbrication de SAS: Bonjour, les gars. Bon retour. Encore une fois, je suis de retour avec un nouveau tutoriel sur le SAS et dans ce tutoriel, nous allons apprendre le SAS Nesting. Vous pouvez voir ici trois sélecteurs différents. Comme vous pouvez le voir dans notre premier sélecteur, j'utilise un tag Nap avec un tag UL, et dans notre second sélecteur, j'utilise un tag Nap avec un tag Ali, et dans notre dernier sélecteur, et dans notre dernier sélecteur, nous utilisons un tag Nap avec un tag Quel est le point commun entre les trois ? C'est quoi Nap tag. Comme vous pouvez le voir, si nous utilisons la syntaxe SS, nous devons utiliser le tag Nap trois fois. Mais si nous tapons le même code dans SAS, nous devons taper comme ceci et nous appelons cette méthode d'imbrication. Ici, vous pouvez voir qu'au début, nous lançons le tag Nap, puis dans le Caliss, nous personnalisons tous ces sélecteurs Vous allez sélectionner notre sélecteur d'ancrage Ali Selector. Si nous utilisons la nidification, nous n'avons pas besoin de taper le mot clé dep trois fois et dans le Liverss nous devons sélectionner tous les autres sélecteurs Ce qui est lié au naptag. Mais lorsque je définis le fichier CS, il renvoie ce type de code CSS. Cela va réduire une partie du code de programmation, mais cela donnera le même résultat. Enfin, sans perdre votre temps, étudions la pratique et voyons comment cela fonctionne. Vous pouvez donc voir ici côte à côte que j'ouvre mon créateur de vis visuel et mon navigateur et que je crée déjà une mise en page Web de base. Et dans mon studio visuel Cdiator, vous pouvez voir iPent 35, notre document d'estimation, notre fichier CSS et notre fichier CSS Vous savez, j'utilise cette mise en page dans notre précédent tutoriel, vous pouvez voir les variables que j'ai créées dans notre précédent tutoriel. Mais dans ce contrat de studio, nous allons apprendre comment utiliser la nidification. Mais dans un premier temps, nous devons trouver la position où nous pouvons utiliser la nidification. Je vais faire défiler la page un peu vers le bas. Ici, vous pouvez voir le sélecteur Br supérieur. Comme vous pouvez le constater, après le sélecteur de Br supérieur, nous utilisons la barre supérieure avec UL, UL Li, étiquette d'ancrage et Hover C'est la bonne méthode d'imbrication. Dans un premier temps, je vais copier le CSS UL. Copiez, puis je vais le coller dans le sélecteur Tobar car tobr est la balise courante Maintenant, ce sélecteur n' est plus nécessaire, je vais donc le supprimer Ensuite, vous pouvez voir à l'intérieur de l'étiquette UL qu'il y a une étiquette LI. Comme vous pouvez le constater, j'utilise déjà le tag UL dans la barre supérieure. Maintenant, je vais copier uniquement le sélecteur d'IA de cette position vers cette position Copie. Je vais le coller dans le tag UL. Au début, notre sélecteur tobr et à l'intérieur du sélecteur tobr, je place le sélecteur UL, puis dans le sélecteur UL, je place le sélecteur AI. Maintenant, je n'ai plus besoin de ce sélecteur de thèse, je vais donc le supprimer Et maintenant, vous pouvez voir qu'à l'intérieur du sélecteur Tobar, nous avons une balise d'ancrage Maintenant, je vais copier uniquement le sélecteur de balise d' ancrage, et je vais le coller en dehors de la balise UL Je vais supprimer ce code. Je n'en ai pas besoin maintenant. Vous pouvez maintenant voir un sélecteur Hobart C'est un sélecteur Hober d'ancrage, pas le sélecteur TBarhber pas le sélecteur TBarhber Je vais copier ce sélecteur Hobart, et je vais l'utiliser le tag nga dans et je vais l'utiliser dans le tag nga dans cette position. Je vais supprimer celui-ci. Et maintenant je voudrais vous dire une chose nouvelle. Comme vous pouvez le voir, à l'intérieur de la balise d'ancrage, nous créons la balise Anchor Hobert Il n'est donc pas nécessaire d'utiliser à nouveau la balise d'ancrage pour pouvoir supprimer la balise Anca. Ici, nous pouvons utiliser le signe de la personne, quelque chose comme ça. Cela signifie que nous utilisons cet effet Her avec le tag parent. Cela va créer le tag Her de son tag parent. Si je configure ce fichier et actualise mon navigateur, vous pouvez voir ici qu'il n' y a aucun changement. C'est le travail tel qu'il est. Nous appelons cette méthode la nidification. De même, nous allons suivre le même processus pour la section d'en-tête. Je vais copier le tag H one et le coller dans le tag à en-tête. Je vais supprimer celui-ci. Comme je vais suivre le même processus pour la section du menu. Au début, je vais copier la partie UL de ce menu et la coller dans la section du menu, je vais supprimer l'ancienne. Ensuite, je vais copier la partie AI de ce menu et je vais la coller dans la section du menu. Ensuite, je vais retirer celui-ci. Notre prochain choix est le sélecteur d'ancrage, qui se trouve à l'intérieur du sélecteur LI Je vais donc copier la balise d'ancrage, et je vais la coller dans la balise LI. Ensuite, je vais retirer celui-ci. Et notre prochaine sélection est le tag Anchor Hobart. Je vais donc copier ce sélecteur. Comme vous pouvez le voir, c'est la balise Hobart d'ancrage, nous devons donc la coller à l' intérieur de la balise d'ancrage Ensuite, nous devons retirer l'étiquette aérienne, et nous pouvons utiliser une personne ici. Pour l'instant, celui-ci ne sert à rien, je veux donc le supprimer. Donc, en gros, il s'agit de créer notre code CSS très gérable. Si je configure ce fichier et que je recharge mon navigateur, comme vous pouvez le voir, il n'y a aucun changement Et maintenant, nous n'avons plus besoin d'utiliser ce sélecteur de menu plusieurs fois. Ensuite, je vais suivre le processus d' imbrication de notre section de contenu Donc, dans un premier temps, je vais copier le sélecteur s two. Ensuite, je vais le coller dans la section du contenu, je vais supprimer celui-ci. Ensuite, vous pouvez voir un pseudosélecteur nommé selection. Vous pouvez voir que nous utilisons cette sélection dans toute la section du contenu, je vais copier uniquement le pseudo sélecteur Je vais le coller dans la section de contenu, pas dans la section ST. Ensuite, je vais le retirer. Comme vous le savez, pour le pseudo sélecteur, nous devons utiliser le signe de la personne, donc je vais taper person ici Si j'enregistre ce fichier et que je recharge mon navigateur, vous verrez qu'il n'y a aucun changement J'espère que vous comprenez maintenant ce qu'est nidification et comment nous pouvons l'utiliser Merci d'avoir regardé cette vidéo. Restez à l'affût de notre prochain studio. 150. Tutoriel des partiels Sass et des importations: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au SAS, et dans ce tutoriel, nous allons apprendre ce qui est partiel et ce qui est importé. Donc, dans un premier temps, concentrons-nous sur le partiel. Partiel signifie parties. Je tiens à dire que certaines parties de SS vont bien. Supposons que nous ayons un fichier CS et notre fichier soit un fichier CS à points principaux, et qu'il s'agisse de notre fichier principal. Et comme vous le savez, si nous créons un site Web, notre site Web divisé par en-tête, contenu, accessoires et pieds de page, nous devons parfois créer différents modèles pour différentes pages Mais le problème, c'est que lorsque nous tapons tout le code dans un seul fichier ? Cela rend notre fichier très lourd et désordonné. Nous devons faire défiler notre page plusieurs fois vers le haut et vers le bas. Donc, pour résoudre ce problème, nous séparons notre mise en page. Pour l'en-tête, nous créons un fichier d'en-tête pour le contenu, nous créons un fichier différent pour la barre latérale et pour le pied Si nous travaillons avec des variables, nous créons également un autre fichier pour les variables. En gros, il s'agit d'organiser notre code et de réduire la maladresse Supposons que nous complétions le style de la section d' en-tête, puis que nous devions l'ouvrir à nouveau. Nous pouvons ouvrir la pièce spécifiée. Pourquoi devons-nous changer ? C'est le concept de partiel. Parlons maintenant des importations. Après avoir créé les différentes parties, nous devons les saisir dans notre fichier principal. Pour cela, nous devons utiliser un mot clé spécial, input. Lors de la saisie du débit, nous devons taper l'en-tête du nom du fichier. Il y a une chose importante dont tu dois te souvenir. Vous devez créer ce même fichier d'extension. Je veux dire fichier CS, pas fichier CSS. Vous ne pouvez pas saisir de fichier CSS dans le fichier principal. De toute évidence, vous devez créer un fichier CS. Et une autre chose dont vous devez souvenir lorsque vous créez votre fichier séparé, vous devez d'abord utiliser undersco. Je veux dire underscohader point SCSS. Notre signe de soulignement reconnaît qu'il ne s' agit pas du fichier principal Notre compilateur CS a donc réussi à identifier qu'il s'agit d'un fichier partiel et d'un fichier partiel et que nous devons l'inclure dans notre fichier principal C'est pourquoi nous n'avons pas besoin d'un fichier CSS distinct pour les fichiers partiels. Si vous utilisez la syntaxe SASS, votre fichier partiel vous devez également utiliser la syntaxe SASS pour Donc, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons utiliser les partiels et les entrées. Comme vous pouvez le voir, j' ouvre déjà mon application KOA, et j'ouvre notre dossier CSS dans cette application Avec cela, j'ouvre également l'éditeur de code Visual Studio. Comme vous pouvez le voir, il s'agit de notre Min CSF, style point Sss. Et maintenant je vais diviser ce fichier avec pas. Dans un premier temps, je vais commencer par ces variables. Je souhaite créer un fichier CS distinct pour nos variables. Dans un premier temps, je vais créer un nouveau fichier dans notre dossier CSS. Et le nom de notre fichier est variables. Comme je vous l'ai dit plus tôt, pour créer un fichier partiel, nous devons utiliser des variables undersco soulignées. Point, notre extension est C is is, puis je vais appuyer sur Entrée. Comme vous pouvez le voir, cela a détruit notre fichier, puis je vais supprimer mes variables de ce fichier, et je vais les coller dans le fichier de variables Et je vais le supprimer de notre fichier principal. Donc, je vais d'abord enregistrer ce fichier. Ensuite, nous devons inclure ce fichier dans notre fichier de style. Pour cela, nous devons d'abord taper sur le signe rouge, puis nous devons taper Importer. Importez à l'intérieur des codes doubles. Nous devons taper le nom du fichier, mais nous n'avons pas besoin d' utiliser UnderscoSign, nous devons taper des variables Il n'est pas nécessaire de mentionner l'extension du fichier. Notre compilateur est suffisamment intelligent pour comprendre l'extension du fichier, puis vous devez utiliser un point-virgule pour terminer cette ligne Ensuite, je vais créer un nouveau fichier pour notre section d'en-tête. Je vais donc taper l'en-tête undersco. Dans ce cas, je vais appuyer sur Entrée. Comme vous pouvez le voir, cela a créé un nouveau fichier, et maintenant je veux séparer notre section d'en-tête. Pour cela, je vais sélectionner dans la barre supérieure. section de la barre supérieure, je souhaite copier notre en-tête, ainsi que le menu. Je vais le couper et coller dans le fichier d'en-tête. C'est ça. Pour notre partie d'en-tête, nous sélectionnons la section d'en-tête Tobb, également la section de menu Ensuite, nous devons importer le fichier dans notre fichier principal, qui est de style point Sss. Je vais taper en rouge, Importer puis dans le double cours, nous devons taper le nom du fichier, qui est l'en-tête, puis le point-virgule deux dans cette ligne Maintenant, pour notre section de contenu, je vais créer un autre fichier. Dans le dossier CSS, je vais créer du contenu Undersco SCS, puis appuyer sur Entrée Comme vous pouvez le constater, il crée un nouveau fichier. Ensuite, je reviens à mon fichier de style SSS, et je vais couper cette partie du contenu Et je vais le coller dans le fichier SCSS à points de contenu Je vais également définir ce fichier. la même manière, nous devons saisir ce fichier dans notre fichier principal. Je vais donc dupliquer cette ligne et ici je vais taper contain. Ensuite, nous devons créer un fichier pour notre section Side Wars. Je vais créer un nouveau fichier dans notre dossier CSS. Soulignez la barre latérale Sass . Comme vous pouvez le voir, nous créons un nouveau fichier pour notre barre latérale, puis nous devons couper la section latérale du fichier de style CSS Je vais couper cette section latérale de ce fichier. Et je vais le coller dans ce fichier Sidewd. Ensuite, je vais configurer ce fichier. Nous devons maintenant saisir ce fichier dans notre fichier de style. Je vais commencer cette ligne, et là je vais enfin taper sidebard, je vais créer un nouveau fichier pour notre section de pied Donc, dans ce dossier***, encore une fois, je vais créer un nouveau fichier, UnderScoefter, Dans ce fichier, je souhaite styliser notre partie de pied de page. Je vais couper cette partie, je la colle dans la section du pied de page Ensuite, je vais configurer ce fichier. Alors que je vais revenir à notre fichier principal, un fichier CS stylisé. Je dois maintenant saisir la section de pied de page dans notre fichier principal. Donc dupliquez cette ligne et ici je vais taper le pied de page. Je vais configurer ce fichier. Enfin, vous pouvez voir la section des requêtes multimédia. Nous l'utilisons à des fins réactives. Si vous souhaitez séparer cette partie, oui, vous le pouvez. Créons un autre fichier pour la section des requêtes multimédia. Dans ce dossier***, je vais créer un autre dossier. Je vais créer un fichier undersco media. Dot SCs puis je vais appuyer sur Entrée. Ensuite, je vais couper la section des requêtes multimédia et je vais la coller dans ce fichier multimédia. Je vais régler celui-ci. Comme vous le savez, nous devons saisir ce fichier dans notre fichier principal. Je vais dupliquer cette ligne ici. Je vais taper notre ligne fine, qui est média. Et je vais appuyer sur Ctrl S pour configurer ce fichier. En utilisant une technique partielle, nous avons réussi à séparer notre mise en page Web. Nous séparons notre section d'en-tête, section de contenu, notre section de barre latérale, section de pied de page, ainsi que les requêtes multimédia et les variables C'est la maladresse de notre site web. Si j'ouvre mon fichier SML, laissez-moi vous le montrer. Comme vous pouvez le constater, il s' agit de notre mise en page TML. Rechargeons le fichier. Comme vous pouvez le constater, il n'y a aucun changement. C'est L tel qu'il est. Supposons maintenant que vous souhaitiez modifier la couleur d'arrière-plan de l'en-tête et du pied Dans ce cas, vous devez ouvrir le fichier de variables. Et à partir de là, vous pouvez changer votre couleur principale. Je veux du vert, quelque chose comme ça. Si je place cette pile, puis que je retourne dans le navigateur et que je recharge mon navigateur, vous pouvez voir le résultat ici Cela a changé notre couleur principale. Si je vous montre mon fichier CSS, laissez-moi vous montrer le style point CSS. Ici, vous pouvez le voir suivre la séquence de nos fichiers d'entrée. D'abord, Tpbard, puis l'en-tête, puis le contenu, puis le pied de page de l'Atlas dans la barre latérale, puis notre requête multimédia Après une requête médiatique, comme vous pouvez le voir, notre corps a été sélectionné et notre rappeur sélectionné. Si je vous montre le fichier de style SAS, vous pouvez suivre la séquence. Tout d'abord, l'en-tête de nos variables contient la requête multimédia du pied de page de la barre latérale et, comme vous pouvez le voir, notre section corps et notre section rappeur J'espère que vous comprenez maintenant ce qui est partiel et ce qui importe. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 151. Tutoriel de Sass Mixins: Bonjour, les gars, c'est bon de vous revoir. Dans ce tutoriel, nous allons découvrir une nouvelle fonctionnalité Vlated SAS Dans ce tutoriel, nous allons apprendre que les renards sont une fonctionnalité très utile Supposons que nous ayons deux classes différentes, la classe 1 et la classe 2. Comme vous pouvez le voir, j'utilise propriété botter radius dans les deux classes Pour la première classe, j'utilise un rayon de bordure de cinq pixels, et pour la classe deux, j'utilise un rayon de bordure de dix pixels Vous pouvez donc voir que j'utilise des propriétés similaires dans les deux classes. Leurs propriétés sont les mêmes, mais leur valeur est différente. Pour notre ancien navigateur Chrome, nous utilisons Ber radius avec webkit, et pour nos anciens navigateurs Mozilla , nous utilisons Boerradius Il s'agit donc d'une méthode CSS simple. Mais le problème est que si nous devons utiliser les mêmes propriétés dix fois, alors quoi ? Ensuite, nous devons taper 30 lignes de code. Pour résoudre ce problème, nous introduisons des mélanges. Les mixages fonctionnent essentiellement comme des fonctions. Si vous connaissiez JavaScript, vous connaissez déjà les fonctions. Permettez-moi de clarifier ce concept. Je vais vous montrer un exemple. Si vous souhaitez créer un mixage dans SAS, vous devez d'abord taper add mixins, puis prendre le nom du mix Tu peux prendre n'importe quel nom. Dans notre cas, BD radius. N'oubliez pas de ne pas laisser d' espace dans ce nom, puis vous devrez participer à des courses rondes ce qui est totalement facultatif. Si vous souhaitez prendre un paramètre, vous devez transmettre le nom de la variable. Comme vous pouvez le voir, dans notre cas, valeur, nous devons utiliser ces trois propriétés dans ce mélange. Vous pouvez également transmettre le paramètre avec cette propriété. De cette façon, nous pouvons créer notre fonction de mixage. Maintenant, la question est de savoir comment utiliser cette fonction de mixage dans notre code CSS ? Laisse-moi te montrer. Pour cela, je vais utiliser la première classe. Si je veux utiliser ce mixage, nous devons taper au taux include, puis notre nom de mixage border radius. Entre parenthèses, nous devons transmettre la valeur du rayon de bordure comme une fonction similaire Lorsque j'appelle cette fonction de mélange, nous devons passer une valeur en tant que paramètre, puis nous pouvons utiliser ce paramètre comme valeur, valeur pour trois propriétés différentes. Sans perdre votre temps, commençons par l'aspect pratique et essayons de comprendre comment nous pouvons utiliser les mixins Comme vous pouvez le voir, côte à côte, j'ouvre mon Visual Studio Corretor et mon navigateur et je crée déjà un nouveau document DML Et ici, vous pouvez voir dans mon navigateur que nous avons déjà créé trois div différents pour cet exemple, et nous avons également défini trois identifiants différents pour ces trois div. Pour notre premier dif, nous avons réglé en premier. Pour le second, nous mettons le deuxième, et pour le dernier si nous définissons le troisième, et je lie également notre fichier CSS à ce document. Passons donc au fichier CS et essayons d' explorer le fonctionnement du mixage. Dans un premier temps, je veux définir idées de bordure pour ces trois D. Pour cela, je vais utiliser la méthode de mixage. Créons un mixage. Ajoutez le taux de mélange. Ensuite, après avoir mixé Qard, nous devons prendre le nom du mixage et notre nom de mixage est BD radius Ensuite, nous devons utiliser des parenthèses pour nos paramètres. C'est assez similaire à la fonction JavaScript. Ensuite, dans le Kaliss, je vais définir notre première propriété et le nom de notre première propriété est Dash Web Keith Ber Pour l'instant, je vais définir le rayon de la barre par pixel, et je vais dupliquer cette ligne pour taper. Au début, j'utilise le préfixe pour notre ancien navigateur Crone, puis je vais utiliser le préfixe pour le navigateur Mozilla, donc je vais Enfin, je vais utiliser le rayon exact des limites de la propriété. Notre mélange est maintenant prêt à être utilisé. N'oubliez pas que nous n' utilisons aucun paramètre dans cette fonction de mixage car pour l'instant, je ne souhaite pas passer de valeur en paramètre. Dans un premier temps, je vais utiliser cette fonction de mixage lors de notre premier clic. Pour cela, nous devons d'abord taper Include Keyword au taux d'inclusion. Après le mot clé Include, nous devons taper le nom du mixage, et notre nom de mixage est VD radius. Puis entre parenthèses et subagins pour terminer cette ligne. N'oubliez pas que si vous souhaitez appeler ce mixage en fonction, vous devez toujours utiliser le mot clé add the red include. Maintenant, si je configure ce fichier et recharge mon navigateur, vous pouvez voir le résultat Vous pouvez voir le rayon de la frontière lors de notre premier saut. Et maintenant, je vais appeler la même fonction de mixage dans notre deuxième et notre troisième profondeur. Si je configure ce fichier et que je réécris mon navigateur, vous pouvez voir le même résultat, toutes ces trois profondeurs Maintenant, je veux trois radios frontalières différentes pour ces trois profondeurs et maintenant je veux trois radios frontalières différentes pour ces trois profondeurs Supposons que pour notre premier AF, je veuille un rayon de bordure de cinq pixels. Pour notre deuxième sourd, je veux un rayon de boer de dix pixels, et pour notre troisième, je veux un rayon de bordure de 15 pixels Dans ce cas, nous devons utiliser le paramètre dans notre fonction de mixage. Nous devons définir un nom de variable en tant que paramètre. Pour cela, nous devons utiliser le signe dollar, dollar et le nom de notre variable est valeur. Ensuite, je vais copier cette valeur, et je vais l'utiliser comme valeur de propriété. Quelque chose comme ça. Nous devons maintenant transmettre la valeur lorsque nous appelons la fonction de mixage. Pour le premier, je vais dire cinq pixels. De même, pour notre deuxième DVD, je souhaite utiliser un rayon de boer de dix pixels, dix Et pour notre dernier DVD, je souhaite utiliser un rayon de bordure de 15 pixels. Si je configure ce fichier et recharge mon navigateur, vous pouvez voir le résultat Comme vous pouvez le constater, nous avons configuré avec succès trois radios frontalières différentes pour ces trois actes. C'est le cas d'utilisation de la fonction de mixage dans SAS. J'espère que c'est clair pour toi maintenant. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain studio. 152. Tutoriel Sass Extend: Bonjour, les gars. C'est bon de te revoir. Il s'agit d'un autre didacticiel lié à SAS. Et dans ce tutoriel, vous allez apprendre une fonctionnalité très utile, à savoir l'étendue. Supposons que nous ayons une classe nommée class one, et comme vous pouvez le voir, nous utilisons quatre propriétés dans cette classe, la couleur, la taille de police, le rembourrage et la hauteur de ligne Avec cela, nous avons une autre classe, et notre nom de classe est classe deux. Comme vous pouvez le voir, dans notre première classe, nous utilisons la couleur rouge, et dans notre classe deux, nous utilisons la couleur orange. Ici, vous pouvez voir que sans propriété de couleur, toutes les propriétés et leur valeur sont identiques. Leur taille de police, leur rembourrage et leur peluche . Tout est pareil. Supposons maintenant que nous ayons une autre classe, la classe trois. De même, sans couleur, toutes les propriétés sont identiques, leur taille de police, leur rembourrage et leur hauteur de ligne Nous répétons donc leur probité et leur valeur dans le temps. Je tiens à dire que nous devons taper six lignes supplémentaires pour cela. Donc, pour gérer ce genre de situation, CS a introduit une nouvelle méthode, qui existe déjà. Pourquoi devons-nous travailler avec le fichier CS au début, nous devons créer plus un tel quel. Mais lorsque nous créons notre classe deux, nous devons d'abord remplacer la propriété de couleur car je ne veux pas répéter cette couleur rouge pour ce DV C'est pourquoi j'utilise cette couleur. Ensuite, vous devez utiliser le mot clé extend, à l'extension rouge, et je souhaite étendre cette classe avec la propriété class one. C'est pourquoi je tape classe 1. Vous pouvez étendre avec un identifiant de classe, comme vous le souhaitez. De même, pour notre troisième classe, il suffit de remplacer la couleur verte, puis suivre le même processus Ajoutez l'extension rouge ou la classe 1. Cela signifie que je veux utiliser une propriété de classe un dans la classe trois. Donc, sans perdre votre temps, commençons par l'aspect pratique et essayons de comprendre comment nous pouvons utiliser la méthode d'extension. Comme vous pouvez le voir, côte à côte, j'ouvre mon créateur Visual Studio et mon navigateur en utilisant l'extension de serveur IF, et j'ouvre également notre application Koala Comme vous pouvez le constater, nous devons distinguer trois profondeurs différentes avec leur couleur de fond différente et leur taille différente. Pour ces trois Deep, nous utilisons trois identifiants différents, le premier, le deuxième et le troisième. Il s'agit de notre fichier CSS, style point CSS. Si je vous montre mon fichier CSS, vous pouvez voir ici, lors de notre premier plongeon, notre couleur de fond est le gris et avec cela 300 pixels. De même, pour notre deuxième immersion, nous utilisons un fond de couleur orange et de 400 pixels. Et pour notre troisième plongée, nous utilisons la couleur de fond rouge et 600 pixels. Sans ces deux propriétés, toutes les propriétés et leurs variantes sont identiques. Vous pouvez le remarquer : 15 pixels , rayon de bordure de 10 pixels, famille de polices aérienne, taille de police 20 pixels Si nous suivons cette méthode normale, nous devons taper huit lignes supplémentaires. Pour résoudre ce type de problème, SAS introduit Extend. Revenons au fichier CS. Nous n'allons rien changer dans notre premier if, mais dans notre second Dave, je vais utiliser la méthode extend. Laisse-moi te montrer. Dans un premier temps, je vais supprimer ces quatre lignes, en ajoutant le rayon de bordure, la famille de polices et les côtés de police Ensuite, je vais utiliser le mot clé, at extend. Et maintenant, je veux étendre ce deuxième identifiant avec le premier identifiant. Ici, nous devons d'abord taper has tag. Puis un point-virgule pour terminer cette ligne. Si je définis ce fichier, vous pouvez voir ici qu'il n'y a aucun changement. Cela a parfaitement fonctionné. Ensuite, je vais suivre ce processus similaire pour notre troisième profondeur. Je vais supprimer les propriétés, et je vais étendre vers le rouge, étendre et je veux d'abord étendre notre troisième e avec notre première balise D has. Puis un point-virgule pour terminer cette ligne. Si je configure ce fichier, vous pouvez voir qu'il n'y a aucun changement dans notre navigateur. Nous avons donc réussi à étendre notre premier identifiant. Mais si je vous montre mon fichier CSS, laissez-moi vous montrer comment vous pouvez le voir créer une combinaison de sélecteur d'ID, premier, deuxième et troisième, vous pouvez également voir deux identifiants différents en deuxième et troisième Il est simplement utilisé pour remplacer la couleur d'arrière-plan et la profondeur avec 400 pixels, 600 pixels, fond rouge et arrière-plan orange Comme vous pouvez le constater, c'est très utile. Si vous remarquez, vous pouvez voir que c'est assez similaire avec les mixes, mais il y a une différence entre les mixes et les extend. Quelle est la différence ? La première différence est que nous pouvons transmettre une valeur en tant que paramètre dans les mixins, mais nous ne pouvons pas transmettre la valeur en tant que paramètre dans l'étendue La deuxième différence est que nous pouvons utiliser un sélecteur combiné en extension Mais dans les mixins, nous ne pouvons pas utiliser de sélecteur combiné, et maintenant je vais vous montrer une autre méthode, comment nous pouvons utiliser extend Vous connaissez donc déjà le processus, comment nous pouvons utiliser l'extension. Au début, nous devons créer une classe, puis en utilisant cette classe, nous pouvons étendre cette classe avec une autre classe et vous connaissez le processus. Supposons maintenant que vous décidiez ne pas afficher la classe 1 dans votre fichier CSS, mais d'utiliser leurs propriétés dans les classes deux et trois. Dans ce cas, vous devez utiliser le signe du pourcentage avant le nom de la classe. Désormais, la classe 1 est réutilisable , comme les mix ins. C'est ce que nous appelons le hoolder BathodPlace. Maintenant, l'espace réservé, ne reflétera pas dans votre fichier CSS Si vous souhaitez étendre votre propriété avec cet espace réservé, vous devez utiliser à l'aide l'extension, le signe de pourcentage et le nom de classe Il vous suffit de vous souvenir de l'espace réservé et d'étendre le travail ensemble. Je vais donc vous montrer la démonstration proprement dite. Une fois de plus, je suis de retour chez mon coordinateur de studio visuel. Donc, d'abord, je vais créer un espace réservé, donc je vais supprimer ce hashtag, puis je vais utiliser PercentiSge Nous transformons maintenant notre premier identifiant en un espace réservé, et je vais utiliser cet espace réservé lors de notre deuxième immersion Et si vous souhaitez utiliser un espace réservé avec extend, vous devez utiliser la percentisine Maintenant, notre deuxième div s'étend avec cet espace réservé. Je souhaite également prolonger notre troisième plongeon avec cet espace réservé Je vais utiliser le percentisg ici . Je ne définis pas ce fichier. Si je définis d'abord ce fichier, il détruira ces propriétés profondes car nous transformons notre premier identifiant en un espace réservé Comme je vous l'ai dit plus tôt, notre espace réservé ne se reflétera pas dans notre fichier CSS Si je configure ce fichier, vous pouvez voir le résultat. Tout d'abord, il détruit notre première profondeur, mais il a conservé la propriété précédente pour le deuxième et le troisième plongeon. Si je vous montre mon fichier CSS, vous pouvez voir le résultat ici. Ici, vous pouvez voir que le nom IDF a été sélectionné. Vous ne pouvez voir que deux sélecteurs, l' ID le deuxième et l'ID le troisième abord, il crée une combinaison en utilisant le deuxième identifiant et le troisième identifiant, puis il crée un deuxième sélecteur d'identifiant et un troisième sélecteur d'identifiant pour remplacer la couleur et la largeur de l'arrière-plan En utilisant un espace réservé, nous pouvons créer un code réutilisable, et nous pouvons l'utiliser plusieurs fois. J'espère que vous comprenez maintenant clairement ce que sont l'étendue et l'espace réservé Dans le prochain tutoriel, nous allons apprendre les opérateurs SAS. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 153. Tutoriel des opérateurs de SAS: Bonjour, les gars. C'est bon de te revoir. Il s'agit d'un autre didacticiel lié au CS, et dans ce didacticiel, nous allons apprendre les opérateurs CS. Ici, vous pouvez voir que nous avons au total cinq opérateurs différents. Notre premier nom d'opérateur est opérateur d'égalité. Viennent ensuite l'opérateur relationnel, l'opérateur numérique, l'opérateur de chaîne et l'opérateur wllian Et dans ce tutoriel, nous allons apprendre l'opérateur d'égalité, l'opérateur relationnel et l'opérateur Wollan Mais dans un premier temps, essayons de comprendre ce que sont les opérateurs du méninguum Dans un premier temps, je vais parler d'opérateur d' égalité et d'opérateur relationnel Comme vous pouvez le voir dans notre opérateur d' égalité, nous avons deux types d'opérateurs, double égal à l'opérateur et non égal à l'opérateur. Dans l'opérateur égal à, nous devons utiliser deux fois le sinus égal. Mais dans l'opérateur not equal to, nous devons d'abord utiliser l'explication sinus, puis nous devons utiliser le sinus égal. C'est méchant, pas égal. En utilisant l'opérateur égal à, nous pouvons comparer les valeurs. Supposons que notre première valeur soit cinq, cinq égale cinq, alors elle renverra vrai car les deux valeurs sont identiques. De même, si j'utilise pas égal à sinus, cela renverra également une valeur vraie ou fausse fonction de la comparaison. Il s'agit de l'utilisation de l'opérateur d'égalité. Nous allons en apprendre davantage à ce sujet dans nos travaux pratiques. D'autre part, nous avons des opérateurs relationnels. Et il est livré avec quatre opérateurs différents. Inférieur à l'opérateur, supérieur à l'opérateur, inférieur à l'opérateur, supérieur à égal à l'opérateur. Tout cet opérateur d'égalité et cet opérateur relationnel utilisent avec la condition IP dans SAS, nous l'appelons fonction I. Dans nos prochains tutoriels, nous allons en apprendre davantage à ce sujet. Dans ce didacticiel, nous allons apprendre, comment pouvons-nous utiliser des conditions avec cela ? Sans perdre votre temps, passons à l'aspect pratique. Ici, vous pouvez voir que j'ai déjà mis mon dossier CSS dans ce compilateur SS Quala, et vous pouvez également voir que j'ouvre notre fichier CS et notre fichier CSS côte à côte, et ici vous pouvez voir un sélecteur de classe, la classe 1 Je vais maintenant commencer par cet opérateur pratique avec l'égalité. Laisse-moi te montrer. Dans un premier temps, je vais prendre une propriété CSS, qui est le padding Rembourrage, dix pixels équivalent à dix pixels. Ici, je vais comparer deux valeurs. Si je définis ce fichier, vous pouvez voir ici dans notre fichier CSS qu'il s'agit d'un rembourrage écrit, c'est vrai Ici, nous faisons correspondre dix pixels à dix pixels Lorsque j'ai défini ce fichier, c'est écrit vrai. Oui. La condition est vraie, mais nous n'utilisons pas cet opérateur de cette façon. Si vous connaissez JavaScript, vous le savez. Si vous connaissez JavaScript, vous connaissez déjà la condition p, et nous allons en apprendre davantage à ce sujet dans nos prochains tutoriels. Ici, je vous explique simplement comment utiliser les opérateurs de comparaison. Ici, vous pouvez voir que nous comparons dix pixels à dix pixels, mais si je change la valeur dix pixels par dix EM, si je définis ce fichier, vous pouvez maintenant voir qu'il s'agit d'un fichier de remplissage écrit parce que la valeur de dix pixels et la valeur de 10 h 00 ne sont pas sûres. De même, si je compare dix pixels avec 15 pixels, je vais vous montrer que je vais définir ce fichier Il est également écrit faux car 15 pixels sont supérieurs à dix pixels. Mais si j'utilise l'opérateur not equal to, laissez-moi vous le montrer puis définir ce fichier. Dans ce cas, c'est écrit vrai parce que notre condition est vraie. Dix pixels ne sont pas égaux à 15 pixels. Comme vous pouvez le voir, nous comparons ici notre valeur avec une valeur numérique, mais nous pouvons également utiliser une valeur de chaîne. Laisse-moi te montrer. Ici, je vais taper le nom de la police AL Je vais comparer, donc je vais utiliser égal à sinus avec antenne. Si je définis ce fichier, vous pouvez voir ici qu'il est écrit vrai car les deux polices sont vendues. Mais si j'utilise la police Roboto, laissez-moi vous montrer que j'ai configuré ce fichier, maintenant il est écrit faux Non seulement la valeur d'une chaîne, nous pouvons également comparer une valeur complexe. Laisse-moi te montrer. À l'intérieur des lacets, je vais taper quatre pixels, six pixels et deux pixels, je vais copier cette diapositive, et je vais la coller ici Si je définis ce fichier, comme vous pouvez le voir, il est écrit vrai car les deux valeurs sont vraies. Mais si je change une valeur, sept pixels, puis que je définis ce fichier, vous pouvez maintenant voir qu'il est écrit faux. Mais si j'utilise is not equal to sine, puis définissez ce fichier. Maintenant, il est écrit deux parce que les deux conditions ne sont pas similaires. C'est pourquoi il est écrit deux. Voici nos opérateurs d'égalité, et maintenant je vais vous montrer ce que sont les opérateurs relationnels Fondamentalement, les opérateurs relationnels fonctionnent avec des valeurs numériques. Nous ne pouvons pas l'utiliser avec une valeur de chaîne. Pour cela, laissez-moi vous montrer un exemple. Je vais supprimer celui-ci et ici je vais taper 50 supérieur à quatre. Je veux dire si le nombre 50 est supérieur à quatre ? Si j'ai défini ce fichier, comme vous pouvez le voir, il est écrit deux. Mais si je passe 60 et que je définis ensuite ce fichier. Comme vous pouvez le voir, cela s'écrit fw Parce que dans notre condition précédente, 50 est supérieur à quatre, mais dans cette condition, 50 n' est pas supérieur à 60 C'est pourquoi nous conditionnons les formulaires écrits. Non seulement cela, nous pouvons utiliser cette valeur avec une unité. Laissez-moi vous montrer 50 pixels et 60 pixels. Si je définis ce fichier, vous pouvez voir qu'il est écrit fg. Mais si je passe 40 semaines ici et que je configure ce fichier, maintenant vous pouvez voir que c'est écrit vrai Non seulement cela, vous pouvez comparer avec différentes unités. Laisse-moi te montrer. Supposons que je veuille comparer avec 1 000 millisecondes supérieures à 1 seconde Si je place ce fichier, vous pouvez voir ici qu'il est écrit vrai. Comme vous pouvez le voir, leur unité est différente, s et, mais leur valeur est la même. C'est pourquoi c'est écrit vrai, ici j'utilise un opérateur relationnel supérieur à égal aide de cet opérateur, nous pouvons comparer si 1 000 s est supérieur à un, dans ce cas , va renvoyer vrai, sinon, si 1 000 s égal à un est, dans ce cas, va renvoyer vrai. Mais si je passe deux secondes ici et que je place ensuite ce fichier, comme vous pouvez le voir, c'est un formulaire de retour. Parce que 1002e n'est pas supérieur à deux secondes. Ici, vous pouvez voir que nous pouvons comparer deux valeurs unitaires différentes avec la même catégorie. Nous pouvons comparer la seconde à minute, à la microseconde, etc. Mais si j'essaie de comparer s avec un pixel, laissez-moi vous montrer 1 000 ms de plus que deux pixels. Ensuite, si je définis ce fichier, vous pouvez maintenant voir qu'il s'agit d'une erreur écrite car leur catégorie est différente, nous ne pouvons pas comparer le temps avec la région. C'est pourquoi nous devons utiliser la même catégorie. Parlons maintenant opérateurs de Bullion et de la façon dont nous pouvons les utiliser Dans SAS, nous devons identifier trois types d' opérateurs Bollier ou non, et le résultat est toujours écrit vrai ou faux Nous pouvons utiliser tous les opérateurs booléens avec plusieurs conditions Je tiens à dire que si vous souhaitez vérifier plusieurs conditions, vous pouvez utiliser ces opérateurs. Nous utilisons un opérateur si les deux conditions sont vraies, puis si elles sont écrites vraies, sinon elles sont écrites fausses. Non seulement deux conditions, vous pouvez en ajouter d'autres avec cet opérateur. Laissez-moi vous montrer l'exemple. Supposons qu'il s' agisse de la première condition et que j' utilise un opérateur, et que ce soit la deuxième condition. Dans notre condition un, cinq pixels équivalent à cinq pixels. Je veux dire, la condition est vraie et dans notre deuxième condition, police aérienne est égale à une forme réelle Ici, nous comparons à une valeur numérique et ici nous comparons à une valeur de chaîne Comme vous pouvez le constater, les deux conditions sont vraies. Dans ce cas, le résultat reviendra. Et si une condition ne renvoie pas vrai, dans ce cas, elle renverra faux. Ensuite, parlons de notre opérateur de lingots. Si l'une des conditions est vraie, elle est écrite vraie. Sinon, c'est écrit faux. Supposons que nous devions conditionner condition 1 et la condition 2. Dans notre première condition, je compare cinq pixels à 15 pixels et dans notre deuxième condition, nous comparons la police de zone à la zone quatre. Dans ce cas, vous savez que l'une des conditions est vraie, la police aérienne est égale à la police aérienne. Parce que l'une des conditions est vraie, c'est pourquoi elle est écrite vraie. Et si les deux conditions écrites échouent, dans ce cas, le renvoi échouera, et notre dernier opérateur n' est pas opérateur. Il est toujours écrit en valeur opposée. Si la réponse est vraie, elle renverra une fausse réponse, et si la réponse était fausse, elle renverra une réponse vraie. En gros, c'est écrit la réponse opposée. Donc, sans perdre votre temps, étudions la pratique et voyons comment cela fonctionne. Comme vous pouvez le constater, une fois de plus, je suis de retour à mon éditeur de code Visual Studio. Et maintenant je vais utiliser une condition avec l'opérateur Boulan Dans un premier temps, je vais utiliser cette condition 1 000 millisecad de mieux que 1 seconde Ismein va renvoyer le vrai résultat, comme vous pouvez le voir, c'est Avec cela, je vais utiliser l'opérateur final et cinq pixels , soit cinq pixels. Si je définis ce fichier, comme vous pouvez le voir, il est écrit vrai car les deux conditions sont vraies. Mais si je fausse une condition, je veux donc changer cinq pixels égaux à six pixels , puis définir ce fichier. Maintenant Seton tombe. Maintenant, les deux conditions ne sont pas vraies, notre première condition est vraie, mais notre deuxième condition échoue. C'est pourquoi son écriture échoue parce que nous avons utilisé un opérateur. Mais si j'ai utilisé un opérateur, alors quoi ? Je vais maintenant utiliser notre opérateur. Ou si je définis ce fichier, il renverra deux car, comme vous le savez, si l'une des conditions est vraie, il en renverra deux. Et si les deux conditions échouent, laissez-moi vous montrer. Je vais changer deux secondes puis configurer ce fichier comme vous pouvez le voir, son écriture échoue. Et si les deux conditions sont vraies, dans tous les opérateurs, dans ce cas, encore une fois, et si vous combattez le pixel puis définissez ce fichier, comme vous pouvez le voir, il est écrit vrai. Donc, dans notre opérateur, à la fois la condition ou l'une des conditions est vraie, dans ce cas, elle va redevenir vraie. Je vais maintenant vous montrer le dernier opérateur allégé qui n'est pas utilisable et comment nous pouvons l'utiliser Donc, dans un premier temps, je vais dupliquer cette diapositive, et je vais commenter la précédente. Ici, je vais utiliser not operator. Je souhaite supprimer cette condition et d'abord, je vais taper non. Comme vous le savez, l'opérateur n'écrit pas toujours le résultat opposé. Donc cinq pixels sont égaux à cinq pixels. Comme vous le savez, la condition est vraie. Si je définis ce fichier, vous pouvez voir ici qu'il s'agit de formes écrites car il est écrit toujours en sens inverse. Mais si la condition échoue et si j'utilise l'opérateur pas égal à cinq pixels, cinq pixels différents de cinq pixels et que je définis ce fichier, maintenant il est écrit vrai. Comme la condition échoue, c'est pourquoi elle est également renvoyée. Cela renvoie toujours le résultat opposé. J'espère que vous comprenez maintenant ce que sont les opérateurs de Bollan. Merci donc d' avoir regardé cette vidéo, restez à l'affût de nos prochains tutoriels. 154. Tutoriel des opérateurs de Sass II: Bonjour, les gars. C'est bon de te revoir. Ceci est un autre tutoriel, associé à l'opérateur CS. Et dans ce tutoriel, nous allons apprendre l' opérateur numérique CS et l'opérateur de chaîne SS. Comme je vous l'ai dit, dans mon précédent tutoriel, nous avons cinq opérateurs différents dans SAS : opérateur d'égalité, opérateur relationnel, opérateur numérique, opérateur chaîne et opérateur Wulian Nous avons déjà abordé l'opérateur d'égalité, l'opérateur relationnel et un opérateur dans notre précédent didacticiel Dans ce didacticiel, nous allons aborder l' opérateur numérique et l'opérateur de chaîne . Commençons. Dans un premier temps, je vais parler de l'opérateur de chaîne. L'opérateur de chaîne signifie opérateur de concaténation et nous définissons cet opérateur en utilisant Nous utilisons cet opérateur pour ajouter une chaîne à une autre chaîne. En utilisant cet opérateur, nous pouvons rejoindre une rue différente. Non seulement cela, nous pouvons joindre une valeur numérique à la chaîne el. Non seulement cela, en utilisant cet opérateur, nous pouvons joindre une valeur numérique à une chaîne viel Si vous connaissez JavaScript, vous le savez déjà. Permettez-moi de vous montrer un exemple. Ici, vous pouvez voir 50 pixels plus. Ici, nous voulons joindre une chaîne hel à une onde numérique. Par conséquent, il a renvoyé 50 pixels. D'autre part, nous avons les opérateurs numériques, l'addition, la soustraction, la multiplication, la division, le module, sinon nous appelons Nous utilisons cet opérateur pour les calculs arithmétiques. Commençons par la pratique et essayons de comprendre comment nous pouvons l'utiliser. Comme vous pouvez le voir, j' ouvre déjà mon logiciel de compilation CS Koala, vous pouvez également le voir côte à côte dans mon coretor Visual Studio, j'ouvre mon fichier CS et mon fichier CSS Donc, dans un premier temps, je vais vous montrer comment nous pouvons utiliser les opérateurs de chaîne. Pour cela, je vais créer deux variables. Un dollar, un colon, et je vais en prendre 50. Ensuite, je vais supprimer cette ligne, et voici les deux. Ici, je vais en prendre cinq. Il s'agit de la variable 1, et il s'agit de la variable 2. Maintenant, je vais le styliser class dot class one. Ensuite, en ce qui concerne les foies, je vais prendre une propriété du NCSS Supposons une marge pour la valeur, je vais utiliser la variable un, un. Un. Ensuite, je vais utiliser la concaténation Après la concaténation sine, je vais passer px. Ici, vous pouvez voir notre valeur numérique écrite V un, et je veux concaténer Var un avec j'ai configuré ce fichier, comme vous pouvez le voir, il est écrit Margin 50 pixels. Nous joignons donc ici deux types de valeurs différents en utilisant opérateur de chaîne et nous appelons cette méthode la concaténation Sur ce, je vais vous montrer comment utiliser les opérateurs numériques Donc, avec elle, je veux ajouter 2,02$. Jusqu'à deux, encore une fois, je vais utiliser concatenate Maintenant, le signe 1-2 n'est pas un signe de concaténation C'est un sinus d'addition, mais ce signe va agir comme un signe de concaténation Donc, si je définis ce fichier, vous pouvez voir ici que notre marge est de 55 pixels. Donc, comme vous le savez, en utilisant l'opérateur d' addition, nous pouvons ajouter deux valeurs, mais maintenant je vais utiliser l'opérateur de soustraction. Minus. Si j'ai configuré ce fichier, vous pouvez maintenant voir que notre nouvelle marge est de 45 pixels. C'est un rayon de 5 pixels à partir de 50 pixels. C'est pourquoi il est écrit 45 pixels. C'est le cas d'utilisation de l'opérateur de substruction, et de cette façon, nous pouvons l'utiliser De même, nous pouvons utiliser le côté multiplication. Si je configure ce fichier, vous pouvez voir le résultat, 250 pixels. Si j'utilise le sinus de division puis que je définis ce fichier, vous pouvez voir que la réponse est dix pixels et maintenant je vais utiliser notre opérateur de luxure, qui est le module Laissez-moi vous montrer comment faire. Si nous utilisons le signe du module, il vous rappellera jusqu'à la division Si je configure ce fichier, comme vous pouvez le voir, il n'y a aucun rappel, c'est pourquoi il renvoie zéro pixel. Mais si je change la valeur de Var un, 54, puis que je définis ce fichier, vous pouvez maintenant voir que le rappel est de quatre. C'est donc le cas d'utilisation de l'opérateur de module. Donc, en gros, nous n'utilisons pas cet opérateur numérique de cette façon Nous l'utilisons lorsque nous créons des designs complexes. Laisse-moi te montrer. Donc, pour cet exemple, je vais prendre une nouvelle propriété, qui est la taille de police. Taille de police, et je vais utiliser Var One. Congélatinez avec un pixel. Si je configure ce fichier, vous pouvez voir le résultat. La taille de police de classe 1 est de 54 pixels. Mais pour notre balise header one, je veux deux fois la taille de police, puis la classe un. Permettez-moi de vous montrer la taille de police. Dollar un, multipliez par deux pixels concaténés concaténés. Si je définis ce style, vous pouvez voir le résultat. Maintenant, la taille de police de notre titre 1 est de 108 pixels car je veux afficher deux fois la taille de police puis la classe 1, puis la classe 1. C'est pourquoi j'utilise un opérateur de multiplication. Dans notre première classe, cela s'écrit 54 pixels et dans notre titre 1, il est écrit 108 pixels. De cette façon, nous utilisons des variables et un opérateur numérique ensemble, plupart du temps nous l'utilisons avec condition p sinon des boucles, et nous allons en apprendre davantage à ce sujet dans notre prochain tutoriel, c' est donc tout pour ce Dans le prochain tutoriel, nous allons apprendre un nouveau concept de flux lié à un nouveau concept, à savoir l'interpolation. Restez à l'affût pour notre prochain tutoriel. Merci d'avoir regardé cette vidéo. 155. Tutoriel d'interpolation Sass: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au SAS, et dans ce tutoriel, nous allons apprendre l'interpolation, l'interpolation SAS Dans notre précédent tutoriel, nous avons appris les opérateurs de chaînes de caractères. Avec cela, nous apprenons les opérateurs de concaténation de chaînes. En utilisant la concaténation de chaînes, nous pouvons ajouter une valeur de chaîne avec une valeur numérique comme vous pouvez voir le résultat. Vous pouvez le voir ici. Comme vous pouvez le voir ici, 50 concatent avec le pixel et, par conséquent, le résultat est de 50 pixels Mais le problème est que nous ne pouvons pas utiliser concatation sinusoïdale dans les propriétés CSS Nous ne pouvons l'utiliser que dans les valeurs CSS. De plus, nous ne pouvons pas utiliser la concaténation sinusoïdale dans le sélecteur CSS. Permettez-moi de vous montrer un exemple. Ici, vous pouvez voir que je prends une marge de nom de propriété, un trait d'union de marge, une concaténation sinusoïdale, et j'appelle une Vous pouvez mettre n'importe quelle valeur ici, lab, en haut, à droite, je veux dire, en supposant une marge supérieure à 20 pixels, mais nous ne pouvons pas utiliser la concaténation sinusoïdale à cet endroit Permettez-moi de vous montrer un autre exemple avec un sélecteur. Supposons qu'il existe une classe nommée image point image hyphen concatenate with imaging, mais que nous ne pouvons pas utiliser concaténation Nous ne pouvons utiliser la concaténation que dans nos vannes. Mais pour ce type de conversation SAS introduit l' interpolation Si vous voulez entrer en contact avec des propriétés, sinon des classes, dans ce cas, nous devons utiliser la méthode d' interpolation et nous devons utiliser ce signe, ce hashtag et ce clirass À l'intérieur de la calrass, nous devons placer la variable line, puis nous pouvons regrouper nos propriétés et nos classes. Permettez-moi de vous montrer l'exemple. Si vous souhaitez regrouper ces propriétés et la classe, dans ce cas, nous devons taper En fusionnant le hashtag du trait d'union dans le calirass, nous devons passer la position variable du membre C'est pour la propriété. De même, pour une classe, nous devons suivre la même méthode. Après le hashtag, nous devons utiliser Calirasis, puis à l'intérieur du calirasis, nous devons passer le nom de la variable Alors, sans perdre votre temps, commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, j' ouvre déjà mon application Kuala, et dans mon éditeur de code Visual Studio, j'ouvre côte à côte le fichier CS et notre fichier CSS Commençons par la pratique et voyons comment utiliser l' interpolation. Dans un premier temps, je vais déclarer un mixage. Au mixage en D. Et le nom de notre mixage est Margin. Et entre cette parenthèse, je veux passer deux paramètres ou la première variable m est la position, et notre deuxième variable m est l'unité Je vais aussi parler du mixage dans notre classe. Laisse-moi te montrer. Je vais sélectionner une classe point class one. Dans les alias, je vais inclure le mixage. Ajoutez le rouge, incluez, et le nom de notre mixage est margin. Dans un premier temps, je vais transmettre la valeur de la position. Notre position est gauche. Après la position, nous devons passer l'unité ici, je vais passer 20 puis un point-virgule pour terminer cette ligne Maintenant, dans ce mixage, je vais prendre notre propriété CSS qui est la marge. Marge, tiret, ici je vais utiliser la méthode de l'interpolion Hashtag Cariss. Maintenant, je veux concatérer la marge avec une autre variable, et ici je vais passer la variable de position, Comme vous pouvez le voir, dans notre variable de position, nous passons la valeur gauche, puis après colonne pour valeur, je vais utiliser la variable d'unité. Unité de dollar. Je veux congaténer avec un pixel Puis un point-virgule pour terminer cette ligne. Si je définis ce fichier, comme vous pouvez le voir dans mon fichier CSS, il imprime une marge de 20 pixels. Maintenant, nous pouvons changer de position en tapant simplement le nom. Supposons que je passe le sommet et qu'ici je passe les 40. Si je définis ce fichier, vous pouvez maintenant voir la marge supérieure à 40 pixels. Ici, vous pouvez le voir, nous utilisons un mixage appelé margin et à l'intérieur de ce mixage, nous utilisons la méthode d'interpolation Et nous transmettons la valeur de ce mélange et nous nous contentons avec la propriété CSS, et nous condensons également la chaîne avec l'unité. Il s'agit de l'interpolation uskSot, c'est l'interpolation uskaso. Dans cet exemple, nous utilisons interpolion avec la propriété CSS, et maintenant je vais utiliser interpolion Pour cela, je vais créer un autre mixage. Au rouge, mixez, et notre nom de mixage est set image, SET IMG. Ensuite, à l'intérieur du caliass et entre parenthèses, je veux passer un paramètre, et le nom de notre paramètre est dollar mail Maintenant, dans les alias, je veux regrouper notre sélecteur, point, image, tiret , tag Dans la liste, je vais appeler le nom de l'image. Nous utilisons donc ici l'interpolation pour confiner notre sélecteur. Ensuite, dans le foie, je vais utiliser une propriété CSS, qui est une image de fond Arrière-plan, image, et je vais utiliser l'URL Vu pour l'image d'arrière-plan. URL entre parenthèses, à l'intérieur des codes doubles, nous devons indiquer l'emplacement du fichier, et l'emplacement de notre fichier est image, couper notre image Ici, nous pouvons également utiliser méthode Interpoliion pour prendre le nom de l'image. Laisse-moi te montrer. Hashtag dans les alias, je vais passer la variable, qui est le nom Après le nom de l'image, nous devons transmettre l'extension de l'image, et notre extension est JPG. Nous devons maintenant appeler ce mixage et transmettre le nom de l'image. Pour appeler le mixage, tapez au tarif inclus. Ensuite, nous devons transmettre le nom du mixage, définir l'image, définir l'image. Nous devons également transmettre le nom de l'image. Supposons que le nom de notre image soit Cloud. Et puis le point-virgule deux sur cette ligne. Si je définis ce fichier, comme vous pouvez le voir, il crée d' abord un sélecteur CSS, image Cloud, puis il crée le nom de l'image cloud point JPG En utilisant l'interpolation, nous pouvons concaténer le sélecteur CSS, et nous pouvons également l'utiliser comme nom d'image car nous ne pouvons pas utiliser le signe plus pour concaténer le sélecteur CSS et les propriétés C'est pourquoi CS a introduit l'interpolation CSS. J'espère que c'est clair pour toi maintenant. Merci d'avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 156. Tutoriel des fonctions Sass: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel concernant SAS. Dans ce tutoriel, nous allons apprendre les fonctions SAS. Si vous connaissez déjà JavaScript, vous savez ce qu'est une fonction. Je vais donc vous montrer comment créer des fonctions dans SAS. Pour créer une fonction dans SAS, vous devez d'abord utiliser un mot clé et dilater la fonction, puis le nom de votre fonction N'oubliez pas de ne pas laisser d'espace entre les noms. Vous pouvez l'utiliser autrement sous sco sine, mais ne fournissez aucun espace. Ensuite, entre parenthèses, vous pouvez prendre un paramètre, plusieurs paramètres, sinon aucun paramètre Cela dépend de vous. Pour cet exemple, j'ai pris un paramètre, c'est-à-dire une variable, et le nom de notre variable est value. Ensuite, vous devez utiliser des étalonnages. Si vous vous souvenez, la fonction et le mixage sont assez similaires, mais il y a une différence. Fondamentalement, la fonction peut renvoyer un Val. Il peut renvoyer des calculs arithmétiques, mais pas le mixage Mais les mixages impriment toujours ce qui a déjà été écrit lors du mixage, mais les fonctions écrivent des valeurs, et nous pouvons utiliser cette valeur dans nos prochains codes Supposons que je crée un nom de classe un tiers et qu'à l'intérieur de ce sélecteur, comme vous pouvez le voir, j'utilise une propriété nommée avec nous appelons notre fonction et nous passons une valeur 1 200 Ensuite, notre fonction va diviser cette valeur par trois et renvoyer 400, puis elle concatène le nombre en pixels dans notre CSS, elle passe à Laissez-moi vous montrer un scénario qui peut dissiper vos doutes. Supposons que nous ayons un conteneur parent et que sa largeur soit de 1 200 pixels, et maintenant je veux diviser cette largeur en trois parties. Dans ce cas, chaque cellule prend 400 pixels. Pour cela, nous pouvons créer une fonction qui peut diviser notre conteneur en trois par. Si nous changeons la largeur de ce continuateur, il le divise automatiquement en trois par. De même, si nous voulons diviser ce continuateur en deux parties, dans ce cas, nous devons créer une fonction qui peut diviser notre valeur en deux parties. Supposons qu'à l'avenir, vous souhaitiez modifier l'identifiant externe. Quelque chose de 1 500 pixels. Dans ce cas, notre fonction va détourner le continu avec une taille égale, 500 pixels, 500 pixels et 500 pixels C'est le cas d'utilisation de la fonction, nous n'avons donc pas besoin de taper la largeur des cellules manuellement. Nous allons le calculer à l' aide de la fonction. Commençons donc par la pratique et voyons comment nous pouvons l'utiliser. Une fois de plus, je suis de retour chez mon coordinateur de studio visuel. côte, j'ouvre le fichier style point S et le fichier style CSS. Dans un premier temps, je vais définir une largeur de conteneur. Pour cela, je vais prendre une variable. Et notre variable nm est la largeur CN , deux points et pour notre largeur continue, je vais prendre 1 000. Pour l'instant, je vais prendre n'importe quelle unité comme le pixel, le M, etc. Je vais maintenant créer une fonction qui va diviser mon continuari en trois parties Donc, pour créer une fonction, je vais taper AdErdFunction, et le nom de notre fonction est un tiers, un tiers Puis, entre parenthèses, l'utilisateur va passer un paramètre Pour ce paramètre, je vais prendre une herbe à dollar variable. Ensuite, dans les alias, quel que soit l'utilisateur à transmettre, je veux le diviser en trois parties Donc, pour cela, je vais utiliser le mot clé return. Au retour rouge. Ensuite, la largeur du dollar est divisée par trois, parce que je veux diviser également la largeur de la suite en trois parties, puis je vais utiliser concaténer s C'est pour l'unité car, par conséquent, je souhaite renvoyer l'unité en pixels. Nous avons donc réussi à créer notre fonction et le nom de notre fonction est un tiers, et maintenant je veux appeler cette fonction. Pour appeler la fonction, nous devons donner un style à une classe, et le nom de notre classe est un tiers de weed. Ensuite, à l'intérieur de la voiture, résistez, je vais l'appeler propriété et nom de notre propriété est le même. Quoi. Maintenant, je vais appeler notre fonction, et le nom de notre fonction est un tiers, un tiers. Ensuite, dans cette parenthèse, je vais passer cette variable Avant de définir ce fichier, permettez-moi de modifier la largeur du conteneur. Je vais remplacer 1 000 par 1 200. Si je définis ce fichier, comme vous pouvez le voir, largeur d'un tiers de notre conteneur est de 400 pixels. Donc, à l'avenir, si je change la largeur du conteneur, 1 200 pixels à 500 pixels, puis que je définis ce fichier , vous pouvez voir qu'il est toujours écrit au tiers de la largeur de ce conteneur, soit 500 pixels. C'est le cas d'utilisation de la fonction. De même, si vous souhaitez diviser la largeur de votre conteneur en deux parties, dans ce cas, vous devez créer une autre fonction. Certains pour dupliquer cette fonction, et je vais changer le nom de la fonction, et le nom de notre fonction est. Mais cette fois, nous devons diviser la largeur du continuateur en deux parties. Je vais donc diviser par deux. Comme je vais créer et aussi créer un sélecteur pour cela. Laisse-moi te montrer. Le nom positif que nous avons sélectionné est largeur du hub, largeur du hub. À l'intérieur des aliras, je vais appeler la largeur En tant que valeur, je vais appeler notre nouvelle fonction et le nom de notre nouvelle fonction est hub. Et entre parenthèses, je vais passer ici notre largeur de conteneur variable Et aussi, je vais changer la largeur du conteneur, 1 500 pixels à 1 200 pixels. Si je configure ce fichier, vous pouvez voir le résultat. Ici, vous pouvez voir notre fonction hub diviser notre conteneur en deux parties et renvoyer 600 pixels pour une partie, et notre troisième fonction diviser notre conteneur en trois parties, et chacune des parties à 400 pixels. Vous savez maintenant comment utiliser les fonctions pour les calculs arithmétiques Dans le prochain tutoriel, nous allons donc apprendre les fonctions du voile SAS. Merci donc d' avoir regardé cette vidéo, restez à l'affût de nos prochaines tribus. 157. Tutoriel des fonctions de numéro de SAS: Bonjour, les gars. C'est bon de te revoir. Il s'agit d'un autre didacticiel lié à CS, et dans ce didacticiel, nous allons apprendre les fonctions numériques SAS Ici, vous pouvez voir que les C ont un total de six dans la fonction val, la fonction des nombres, la fonction chaîne, la fonction de couleur, la dernière fonction, la fonction sélection, et le dernier est l'intropetion Dans ce tutoriel, nous allons apprendre uniquement les fonctions numériques. Voyons combien de fonctions numériques nous avons dans CS. Comme vous pouvez le voir, nous avons un total de 11 fonctions numériques dans CS, et nous allons aborder toutes ces fonctions dans ce didacticiel. Commençons par l'aspect pratique avec la fonction Avis. Physiquement, Avis fonctionne sous forme de volonté absolue écrite. Commençons la pratique. Comme vous pouvez le voir, j'ouvre déjà mon éditeur de code User Studio et côte à côte, j'ouvre Styloid SS Pile et Styled Dans un premier temps, je vais créer une classe point class one. Ensuite, à l'intérieur des calices, je vais d'abord prendre AcSSPProperty et je vais Rembourrage. Notre première fonction est Avis qui signifie fonction absolue. Tabs de type Sham Row. Cette fonction écrit toujours une valeur absolue. Si je passe une valeur négative, laissez-moi vous montrer -14 pixels Si je définis ce fichier, comme vous pouvez le voir, il est écrit en valeur absolue, 14 pixels. Il a supprimé la valeur négative et écrit 14 pixels. Si je supprime le signe moins puis que je définis ce fichier, comme vous pouvez le voir, c'est toujours une valeur absolue écrite. Passons maintenant à notre prochaine fonction, qui est L. Mais avant, je vais dupliquer cette ligne et commenter la précédente. Ici, je vais utiliser la fonction cellulaire C CEL. Ensuite, dans les versets ao, je vais passer une valeur flottante. Laisse-moi te montrer. 5.3. Et même si je définissais ce fichier, laissez-moi vous le montrer. Si je définis ce fichier, comme vous pouvez le voir, il est écrit avec six feuilles Si j'utilise la fonction de cellule à chaque fois qu'elle renvoie une valeur supérieure. Si j'utilise 5.9 et que je définis ce fichier, il renvoie également six Mais si j'utilise 5.1 et que je définis ce fichier, il renvoie également six. Il est toujours écrit au-dessus de la valeur. Mais si je passe la version 5.0 puis que je définis ce fichier, maintenant il n'en écrit que cinq. Si je passe une valeur flottante dans la fonction de cellule, elle est toujours écrite au-dessus de la valeur. De même, nous avons une fonction opposée. Pour cela, je vais dupliquer cette ligne et commenter la précédente. Et ici, je vais taper floor function FL W R. Ensuite, à l'intérieur de la rondeur je vais passer quatre et sept Cette fonction est toujours écrite en dessous de la valeur. Si je définis ce fichier, comme vous pouvez le voir, il n'en écrit que quatre. Sans zéro, la valeur que nous utiliserons après le point ne renverra que quatre. Si je passe neuf ici, c'est aussi écrit quatre. Passons à la fonction suivante, qui est la fonction ronde pour demander cette ligne et commenter la précédente Et ici, je vais taper round function. Si je place ce fichier, comme vous pouvez le voir, il est écrit cinq. Cette fonction est une combinaison de la fonction d'étanchéité et de la fonction de flotteur. Après Dhimil, si la valeur est supérieure à quatre, la valeur a est toujours écrite Mais un Djimil, si la valeur est inférieure à cinq, il renverra la valeur wow Laissez-moi vous montrer que si je passe, 4.4 ici, puis que je place ce fichier, comme vous pouvez le voir, maintenant il n'en est écrit que quatre. Mais si je passe 415 et que je place ensuite ce fichier, vous pouvez voir qu'il est écrit cinq. C'est le cas d'utilisation de la fonction ronde. J'espère que vous comprenez maintenant comment fonctionnent les fonctions de vente et de gestion. Notre fonction suivante est la fonction maximale. Je veux que tu commences cette ligne et que tu retrouves la précédente. Et ici, je vais appeler max function. Cette fonction renvoie toujours la valeur maximale. Supposons que nous ayons trois valeurs, laissez-moi vous montrer un pixel, trois pixels et cinq pixels. Si je disais ce fichier, comme vous pouvez le voir, il est écrit en cinq pixels. Il est toujours écrit la valeur maximale à partir de la valeur la plus faible. la même manière, nous avons une fonction opposée, qui est la fonction min. Sonnez cette ligne et commentez la précédente, et ici je vais appeler notre fonction Min. Si je définis ce fichier, comme vous pouvez le voir, il est écrit avec la valeur la plus basse de cette liste. Il s'agit toujours de la valeur la plus basse. En gros, nous n'utilisons pas cette fonction comme ça. Lorsque nous devons travailler avec des calculs arithmétiques complexes, nous utilisons cette fonction Parlons maintenant de notre fonction suivante, qui est percentis So, pour commencer cette ligne et commenter la précédente Et ici, je vais taper les percentis. Cette fonction renvoie toujours la valeur en pourcentage. Si je passe la version 0.3, je place ce fichier, comme vous pouvez le voir, il est écrit à 30 %. De plus, si je travaille avec le calcul arithmétique, laissez-moi vous montrer 200 pixels divisés par 50 pixels Si je définis ce fichier, comme vous pouvez le voir, il est écrit à 400 %. Cette fonction renvoie toujours un pourcentage. Notre fonction suivante est comparable. Pour cela, je vais dupliquer cette ligne et commenter la précédente. Ici, je vais taper comparable. Grâce à cette fonction, nous pouvons comparer deux unités. Si les unités correspondent, elles sont écrites, vraies, sinon, ce sont des formes écrites. Je vais vous montrer la démonstration. Ici, je vais passer deux pixels et notre prochaine valeur est quatre pixels. Si je définis ce fichier, comme vous pouvez le voir, il est écrit vrai car leurs unités sont les mêmes, pixel et pixel. Mais si je passe l'unité EM puis que je définis ce fichier, EM et que je définis ce fichier, comme vous pouvez le voir, maintenant c'est écrit sous forme de fobs Parce que leur unité est différente. C'est pourquoi nous n'avons pas pu le comparer. Mais si je passe la valeur centimétrique ici, CM, et si je passe l'unité MM, puis que je définis ce fichier, comme vous pouvez le voir, il est maintenant écrit parce que nous pouvons comparer centimètre par millimètre C'est pourquoi c'est écrit. Parlons de notre prochaine fonction, qui est aléatoire. Je vais dupliquer cette ligne et commenter la précédente. Je vais donc taper au hasard. Cette fonction écrit toujours une valeur aléatoire. Si je place cette pile, comme vous pouvez le voir, elle est écrite avec une valeur aléatoire. Si je définis à nouveau ce fichier, vous pouvez voir qu'il est écrit avec une valeur aléatoire différente. Par défaut, la fonction aléatoire écrit la valeur 0-1. C'est pourquoi il s'agit d'une valeur flottante écrite. Mais si je passe un chiffre, quelque chose 12, puis que je place ce fichier, maintenant il est écrit un chiffre de 0 à 12 Il peut s'agir de n'importe quel chiffre de 0 à 12, et dans notre cas, il s'écrit dix Si je configure à nouveau ce fichier, vous pouvez maintenant voir qu'il en a été écrit un. Parlons de notre prochaine fonction, qui est l'unité. Pour cela, je vais modifier cette ligne et commenter la précédente Et ici, je vais taper unité. Pour cet exemple, je vais passer un chiffre, qui est 22. Si je définis ce fichier, comme vous pouvez le voir, il n'est écrit que les codes doubles, pas le nombre car nous ne transmettons aucune unité, mais si je passe le pixel PH puis que je définis ce fichier, comme vous pouvez le voir, il n'est écrit que le pixel unitaire. La fonction de l'unité écrit toujours l'unité. De même, si je passe le centimètre, le cm, puis que je place ce fichier, vous pouvez voir ici qu'il est écrit centimètre Parlons maintenant de notre dernière fonction, qui est une unité inférieure. Pour cela, je vais dupliquer cette ligne et commenter la précédente. Et ici, je vais taper unitless. En gros, cette fonction va revenir à la valeur, soit vraie, soit fausse. En gros, cette fonction va vérifier, fournissons-nous à l'unité cette valeur ou non ? Si je définis ce fichier, comme vous pouvez le voir, il est écrit faux. Parce que nous fournissons une unité, c'est pourquoi elle est écrite fausse. Mais si je ne fournis pas l'unité, j'ai défini ce fichier, comme vous pouvez le voir, maintenant il est écrit vrai. Nous pouvons utiliser cette fonction avec des conditions IP. Dans le prochain tutoriel, nous allons apprendre les fonctions liées aux chaînes de caractères. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 158. Tutoriel des fonctions de chaîne de caractères Sass Part1: Bonjour les gars, content de vous voir B. Encore une fois, je suis de retour avec un nouveau tutoriel lié au CAS. Et dans ce tutoriel, nous allons apprendre la fonction de chaîne CS. Vous pouvez voir ici la liste des fonctions invalides de SAS. Dans nos précédents tutoriels, nous allons en apprendre davantage sur la fonction numérique. Et dans ce tutoriel, nous allons apprendre les fonctions de chaîne. Voyons donc les fonctions de chaîne. Comme vous pouvez le voir, nous avons un total neuf fonctions de chaîne dans SAS. Fonction Cote en majuscules, fonction index STR, fonction en minuscules, fonction insertion en étoile, fonction d'identification unique, fonction Star len, fonction uncoat et fonction Star slice et Sans perdre votre temps, passons à l'aspect pratique. Comme vous pouvez le voir, je suis dans mon coordinateur de studio visuel, et côte à côte, j'ouvre Stylar CS et le fichier de style CSS Donc, d'abord, je vais créer une classe, et notre nom de classe est class one. Ensuite, dans le fichier arise, je vais utiliser la propriété CSS, et le nom de notre propriété est famille de polices. Famille de polices. Mais ici, je ne vais pas utiliser directement le nom de la famille de polices. Pour cela, je vais utiliser une fonction de chaîne et nom de notre fonction de chaîne est co Quote. Ensuite, à la place des parenthèses, je vais appeler le nom de la famille de polices et le nom de notre famille de polices est Ariel En gros, la fonction de code va envelopper cette chaîne avec des codes doubles. Si je place ce fichier, vous pouvez voir le résultat ici. Famille de polices à l'intérieur des codes doubles al. Dans le cas contraire, nous avons une autre fonction, qui est uncode Si j'utilise uncode et que j'insère ce nom de police dans les codes doubles, puis que je définis ce fichier, comme vous pouvez le voir, cela supprime le guillemet de la chaîne C'est le cas d'utilisation de la fonction uncode. Passons à la fonction suivante, qui est composée de deux majuscules Ici, je vais attacher deux majuscules. Affaire. En gros, cette fonction va convertir cette chaîne en majuscules Si je place ce fichier, comme vous pouvez le voir, toutes les lettres sont en majuscules la même manière, nous avons une fonction opposée, qui est composée de deux minuscules Si je tape deux lettres plus petites, puis que je place ce fichier, comme vous pouvez le voir, il convertit notre lettre majuscule A en minuscule. En gros, il convertit les majuscules en minuscules. Passons à la fonction suivante, qui est la longueur de chaîne. Ici, je veux taper notre fonction suivante, qui est St length. Longueur de l'étoile. Quelle que soit la valeur de chaîne que nous transmettons dans cette fonction de chaîne, elle compte le caractère de la chaîne et renvoie la longueur en nombre. Comme vous pouvez le voir dans le monde aérien, nous avons un total de cinq personnages. Si je définis ce fichier, oups, il y a une erreur. L'orthographe de l'objectif n'est pas correcte, LONGUEUR. Si je configure ce fichier, vous pouvez voir le résultat. Il est trois et cinq ans. C'est le cas d'utilisation de la fonction de longueur STR. Parlons de notre prochaine fonction, qui est string index. Je vais appeler cette fonction string index. Ensuite, entre parenthèses, dans cette fonction en tant que premier paramètre, nous devons passer cette chaîne J'ai déjà copié une chaîne et je vais la coller ici. C'est un abruti de La Mpsum. Mais d'abord, commençons par le mot wrap. En utilisant cette fonction, nous pouvons rechercher un caractère ou un mot cette chaîne et son numéro d'index écrit. Comme vous pouvez le voir, en tant que premier paramètre, nous passons cette chaîne. Ensuite, dans notre deuxième paramètre, je veux rechercher le mot factice Dans les accords doubles, je vais dépasser Dummi. Si j'ai défini ce fichier, comme vous pouvez le voir, il est écrit 23. C'est écrit le numéro d'index d'un foutu texte. Si vous comptez les caractères, D serait 23, laissez-moi vous montrer un autre exemple. Maintenant, je veux rechercher le mot Lorem dans le stream. Je vais donc taper Loren. Si je définis ce fichier, comme vous pouvez le voir, il en est écrit un parce que mots Lem commencent à partir du premier index. C'est pourquoi il en a été écrit un. N'oubliez pas qu'il s'agit également de compter l'espace entre les mots. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, je vais aborder la fonction d'insertion de chaîne, la fonction QQ ID et la fonction de tranche de chaîne Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 159. Tutoriel des fonctions de chaîne de caractères Sass Part2: Bonjour les gars, c'est bon de vous revoir. Il s'agit de la deuxième partie de SAStringFunctions. Et dans ce didacticiel, nous allons apprendre la fonction d' insertion de chaîne, la fonction d'identification unique et la fonction de tranche de chaîne. Alors, sans perdre votre temps, étudions la pratique. Comme vous pouvez le constater, à l'intérieur de la visière, j' ouvre nos Donnez du style à votre fichier CS et à votre fichier de thèse. Supposons que je veuille insérer un mot dans cette chaîne. Pour cela, nous devons utiliser la fonction d'insertion de chaînes. Donc ici, je vais taper string insert. Je souhaite ajouter un mot de bonjour. Alors voilà, je vais taper bonjour. Je veux ajouter le mot bonjour au début de cette chaîne. Pour cela, il faut passer un autre paramètre. Donc ici je vais taper une virgule, et ici je vais passer le numéro d'index Premièrement, je vais fournir un espace à cet endroit. Et aussi, je vais fournir de l'espace après O. Donc, si je configure ce fichier, vous pouvez voir le résultat. En utilisant la fonction Insérer, nous pouvons insérer un mot ou un caractère dans ce flux, et nous devons transmettre le numéro d'index. C'est ça. Laissez-moi vous le montrer encore une fois. Supposons que cette fois je veuille ajouter mot Ipsum dans ce flux Je copie ce mot et je le supprime, et ici je vais passer le mot Ipsum Et maintenant, je veux insérer le mot Ipsum jusqu'à uen. Pour cela, je vais compter les numéros d'index exacts un, deux, trois, quatre, cinq, six. Alors voilà, je vais passer devant Sebin parce que je veux aussi fournir un espace up uen Donc, si je configure ce fichier, vous pouvez voir le résultat Lorem Ipsum C'est donc le cas d'utilisation de la fonction d'insertion. Parlons de notre prochaine fonction. Notre fonction suivante est string slice. Ici, je vais taper STR slice. Supposons que je veuille découper le mot Lorem de cette chaîne. Dans ce cas, nous devons passer aux deux paramètres. Laisse-moi te montrer. Dans notre premier paramètre, nous devons transmettre notre chaîne, et dans notre second paramètre, nous devons transmettre le numéro d'index. Comme vous pouvez le voir, le mot Lorem se termine au cinquième index. Alors voilà, je vais en passer six. Si je définis ce fichier, vous pouvez maintenant le voir supprimer Lem Word et imprimer est simplement dammitext Mais dans notre exemple suivant, je voudrais renvoyer un mot. Dans ce cas, nous devons transmettre un total de trois paramètres, notre numéro d'index de départ et notre numéro d'index de fin, qui est neuf. Si je définis ce fichier, comme vous pouvez le voir, le retour est. Ainsi, en utilisant cette fonction, nous pouvons découper n'importe quelle section de notre chaîne. Parlons de notre dernière fonction, qui est l'identifiant unique. Dans un premier temps, je vais les supprimer tous, et ici je vais taper un identifiant unique. pièce d'identité. Ensuite, notre parenthèse et notre point-virgule deux sur cette ligne Si je définis ce fichier, comme vous pouvez le voir, il contient un identifiant unique. Elle renvoie des caractères aléatoires. Si je reconfigure ce fichier, chaque fois qu'il est écrit un nouvel identifiant, et Bt fold, cette fonction écrit toujours un identifiant unique à neuf caractères. En gros, nous utilisons cette fonction avec des conditions IP. Je couvre toutes ces fonctions de chaîne. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 160. Tutoriel des fonctions de couleur de Sass: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un nouveau tutoriel passionnant lié à CS. Et dans ce tutoriel, nous allons apprendre les fonctions de couleur CS. Comme je vous l'ai dit plus tôt, CS est livré avec des fonctions non valides. Fonction numérique, fonction de chaîne, fonction de couleurs, fonctions de liste, fonction d' électeur et fonction d'introspection Nous avons terminé la fonction numérique et la fonction chaîne dans notre précédent tutoriel. Dans ce tutoriel, nous allons apprendre la fonction des couleurs. Sans perdre votre temps, voyons combien de fonctions de couleur nous avons dans notre CAS. Dans ce didacticiel, nous allons aborder les fonctions CS de base mais importantes, à savoir éclaircir, assombrir, ajuster, saturer, désaturer, mélanger Je sais que nous avons besoin de plus de sept couleurs liées aux fonctions dans SAS, mais ce sont les plus importantes. C'est pourquoi je vais aborder ces sept fonctions. Commençons donc par l'aspect pratique et voyons comment cela fonctionne. Ici, vous pouvez voir côte à côte que j'ouvre mon Visual Studio Coreator et mon navigateur en utilisant l'extension de serveur if J'ai déjà créé un document HTML nommé index point HTML. Avec cela, je crée déjà un Style Door CS et un fichier CSS stylisé Comme vous pouvez le voir dans mon navigateur, nous devons faire deux D, classe un et classe deux. première classe était remplie d'une couleur de fond rose et la classe deux était d'une couleur de fond vide. Passons au fichier CS et voyons ce que nous avons fait. Comme vous pouvez le constater, dans un premier temps, nous créons une couleur de base variable pour les membres, et notre couleur de base est le rose. Ensuite, nous personnalisons nos trempettes et définissons une bordure. Ensuite, dans notre première classe, nous définissons la couleur d'arrière-plan, qui est notre couleur de base rose, et nous ne définissons aucune couleur de fond dans notre classe deux. Maintenant, je vais modifier cette couleur et je veux remplir ce champ avec la forme foncée de cette couleur rose. Pour cela, je vais utiliser une fonction nommée darken. Donc, d'abord, je vais utiliser la propriété CSS, qui est l'arrière-plan. Contexte, et je vais appeler notre fonction. Ici, je vais taper Darken. Ensuite, entre parenthèses, nous devons fournir une couleur Pour la couleur, je vais utiliser la même couleur, qui est la couleur de base. Je vais copier la variable et la coller ici. Ensuite, dans notre deuxième paramètre, nous devons fournir la valeur 0-100 % Donc, ici, je veux passer les 30 %. Donc, si je mets ce fichier, vous pouvez voir ici notre conteneur rempli 30 % de découpe foncée en plus que le précédent. Et si je vous montre mon style ou mon fichier CSS, comme vous pouvez le voir, cela crée une nouvelle couleur. Encore une fois, je vais revenir à mon style ou à mon fichier CS. Donc, comme vous pouvez le voir, si j'applique 30 % de couleur foncée à cette couleur de base, cela renvoie ce type de couleur De même, si j'applique 70 % puis que je configure ce fichier, vous pouvez voir la différence. Maintenant, il y a encore dix couleurs foncées. Je vous montre deux degrés car c'est la couleur d'origine et c' est la partie foncée de cette C'est le cas d'utilisation de Dark in Function. Notre fonction suivante est la fonction d'allégement . Laisse-moi te montrer. Donc, d'abord, je vais dupliquer cette ligne et commenter la précédente. Et là, je vais associer Lighten. Et je vais passer une valeur de 30 % ici. Si je définis ce fichier, comme vous pouvez le voir, il éclaircit la couleur de 30 % par rapport à notre couleur de base Si je vous montre mon fichier CSS, comme vous pouvez le voir, il est écrit en blanc pur car notre couleur rose est déjà une couleur plus claire Si j'utilise la couleur bleue, laissez-moi vous montrer la couleur de base bleue. Dans ce fichier, vous pouvez maintenant voir la partie lumineuse de cette couleur bleue. Et si je vous montre le fichier CSS, vous pouvez voir le code coloré. Nous pouvons utiliser ces fonctions avec Hova Effects. Parlons de notre prochaine fonction, qui consiste à ajuster la teinte. abord, je vais dupliquer cette ligne et commenter la précédente, et ici je vais taper adjust Hue. Teinte. Si j'ai configuré ce fichier, comme vous pouvez le voir, il a changé de couleur. En gros, en utilisant cette fonction, quelle que soit la couleur que nous passons dans notre premier paramètre, elle peut renvoyer une partie assombrie ou éclaircir une partie de cette couleur en fonction de cette Et dans notre deuxième paramètre, nous devons transmettre la valeur avec le degré. Si je passe 20 ici, puis que je configure ce fichier, vous pouvez voir la différence. Son retour n'assombrira pas le précédent. Si je passe les 70 degrés, voyons ce qui se passe. Si je définis ce fichier, il renvoie une partie plus claire de cette couleur. En utilisant la fonction H, nous pouvons faire pivoter les couleurs. Comme vous pouvez le voir, comment nous pouvons utiliser la fonction Hu. Parlons de notre prochaine fonction, qui est la saturation. Dans un premier temps, je vais dupliquer cette ligne et commenter la précédente. Ici, je vais taper saturate. En gros, cette fonction augmente la luminosité de cette couleur. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, il renvoie toujours la même couleur. Changeons la couleur. Ici, je vais utiliser une couleur marron. Je vais fournir une valeur hexadécimale qui a AD 4038. Si j'ai configuré ce fichier, vous pouvez maintenant voir la différence de couleur. Il s'agit de la couleur de base et celle-ci est saturée à 70 % de la couleur de base. Il augmente la luminosité de cette couleur brune et renvoie la couleur rouge. De même, nous avons une fonction opposée, qui est désaturée. Laisse-moi te montrer. Je vais dupliquer cette ligne et commenter précédente. Ici, je vais taper désaturate Je vais également changer la couleur de base, qui est le bleu. Si je définis ce fichier, comme vous pouvez le voir, cette fonction réduit la luminosité de cette couleur et renvoie cette couleur. fonction saturée augmente toujours la luminosité de cette couleur et la fonction de désaturation diminue toujours la luminosité de cette Si nous réduisons la valeur de 20 %, puis que nous définissons ce fichier, il essaie maintenant de correspondre à la couleur de base. Mais si vous augmentez la valeur de 90 % et définissez ce fichier, vous pouvez maintenant voir la différence. Cela a réduit la luminosité de cette couleur. Mais si je passe une valeur nulle et que je définis ce fichier. Maintenant, vous pouvez voir qu'est écrite la couleur d'origine, la couleur de base, la couleur bleue. Mais si j'utilise la valeur totale, 100% et que je définis ce fichier, maintenant vous ne pouvez voir que la couleur grise d'Itrton Parlons maintenant de notre prochaine fonction, qui est le mix. Je voudrais oblitérer cette ligne et commenter la précédente. Alors voilà, je vais taper mix. Grâce à cette fonction, nous pouvons mélanger différentes couleurs. Dans cette fonction, nous devons essentiellement passer trois paramètres au total. Donc, avec la couleur de base, je veux ajouter, comme vous pouvez le voir, notre couleur de base est le bleu. Je veux ajouter de la couleur rouge. Ici, je vais taper du rouge, une virgule, puis nous devons transmettre la valeur en pourcentage Donc, ici, je vais passer les 50 %. Cela signifie la quantité de bleu que je veux ajouter à la couleur rouge. Si je place ce fichier, comme vous pouvez le voir, il est écrit en violet. Si nous mélangeons la couleur rouge et la couleur bleue, dans ce cas, elle redevient violette je diminue la valeur du pourcentage de 20 %, puis que je définis ce fichier, vous pouvez maintenant le voir revenir en rose rougeâtre Il a appliqué 20 % de couleur ouest à cette couleur rouge. Si j'augmente la valeur 90 % puis que je définis ce fichier, vous pouvez maintenant voir le résultat différent. Maintenant, vous pouvez voir que notre nouvelle couleur est beaucoup plus forte que le rouge et qu'elle est écrite presque en bleu. C'est ainsi que vous pouvez utiliser la fonction mixte. Parlons maintenant de notre fonction de luxure, qui est une matrice transparente. Je vais dupliquer cette ligne, et je vais commenter la précédente. Ici, je vais taper des liens transparents en arrière-plan. En gros, en utilisant cette fonction, nous pouvons rendre notre couleur transparente. Si vous connaissez déjà le CSS, vous connaissez la valeur GVA, et A signifie Alpha Val, et nous pouvons rendre notre couleur transparente en utilisant la valeur Alpha De même, nous avons une fonction dans SAS, qui est transparente, oui. Ici, nous devons passer par les deux paramètres, la couleur et la valeur. Pour la couleur, je vais utiliser notre couleur de base, et ici nous devons passer la valeur 0-1 Donc, tapez Hemo zéro point, quatre, je veux dire, c'est 40 % transparent Configurons le fichier et voyons s' il fonctionne correctement ou non. Comme vous pouvez le constater, notre couleur de fond est transparente à 40 % . Et si je vous montre mon fichier CSS, ici vous pouvez le voir utiliser valeur Rgvia, ici vous pouvez voir qu'il est écrit en valeur Alpha 0,6 Et si je veux que ce soit complètement transparent, dans ce cas, nous devons passer la valeur 1. Si j'ai configuré ce fichier, vous pouvez maintenant voir qu'il est complètement transparent. Mais si je vous montre mon fichier CSS et que je le compare à la valeur Alpha, vous pouvez voir ici qu'il est écrit zéro. En CSS pour une transparence totale, nous devons utiliser zéro, mais en SAS pour une transparence totale, nous devons en utiliser un. De toute évidence, cela ne fonctionne que pour cette fonction. C'est tout pour ce tutoriel. J'espère que vous comprenez maintenant ce que sont les fonctions de couleur CS. Merci d'avoir regardé cette vidéo. Dans notre prochain tutoriel, nous aborderons les fonctions de CS List. Restez donc à l'affût pour notre prochaine vidéo. 161. Tutoriel des fonctions de liste de Sass Part1: Bonjour, les gars, c'est bon de vous revoir. Une fois de plus, je suis de retour avec un nouveau tutoriel passionnant sur les fonctions SAS. Et dans ce tutoriel, nous allons apprendre les fonctions SSList Comme je vous l'ai dit plus tôt, nous devons six fonctions dans SAS, une fonction numérique, une fonction de chaîne, une fonction de couleur, une fonction de liste, une fonction de sélection et une fonction d'introspection Dans ce tutoriel, nous allons apprendre la fonction de liste. Ce sont toutes des fonctions. Mais avant de comprendre ce qu'est une liste. Si vous connaissez JavaScript, vous connaissez déjà les tableaux tableau signifie que dans une seule variable, nous pouvons stocker plusieurs valeurs. Et si vous voulez faire la même chose dans SAS, nous avons List. Ici, vous pouvez voir que nous prenons d'abord une variable puis une liste, et à l'intérieur de cette variable, nous définissons pour indiquer trois valeurs, cinq pixels, dix pixels et 15 pixels. Il s'agit de la première méthode que vous pouvez créer en dernier dans SAS. Je vais vous montrer cette deuxième méthode. Ici, vous pouvez utiliser un séparateur entre les valeurs. Vous pouvez utiliser une virgule Vous pouvez donc utiliser des valeurs sans virgule. Sinon, vous pouvez utiliser une valeur avec une virgule. Et il existe un autre moyen de créer une liste dans CAS. Laisse-moi te montrer. Vous pouvez également utiliser des adresses carrées pour créer une liste dans CS. Et maintenant je vais vous montrer les fonctions de la liste. En utilisant la fonction de liste, vous pouvez manipuler votre liste. Vous pouvez ajouter une nouvelle valeur à votre liste. Sinon, vous pouvez supprimer une valeur de cette liste. Vous pouvez faire beaucoup de choses en utilisant ces fonctions. Notre première fonction est la fonction de longueur. De là vient la Nème fonction. Ensuite, fonction Seth N, fonction join, appNFunction, fonction, fonction d' index, fonction du moindre séparateur, et notre dernière fonction est une fonction entre crochets Nous avons donc le total de la ligne la moins fonctionnelle dans CS et je vais aborder tout cela dans ce didacticiel. Sans perdre votre temps, c'est commencer par la pratique et voir comment ça marche. Enfin, je suis dans un studio de codage visuel. côte, j'ouvre le stylet cs et le fichier style point css Dans un premier temps, je vais créer une liste de noms de variables Dollar ist. Ensuite, deux points ici, je vais définir quelques valeurs. Cinq pixels, espace, dix pixels, espace, 15 pixels. Puis un point-virgule deux dans cette ligne. Maintenant, je vais créer une classe point class one, puis dans l'alirass je vais appeler une propriété CSS. Ici , Ici , je vais utiliser toutes les fonctions de liste une par une Appelons notre première fonction de liste, qui est la longueur. Ici, je vais taper la longueur. En utilisant la fonction de longueur, nous pouvons compter le nombre total de valeurs dans notre liste. Si je passe la variable am dollar list et que je définis ce fichier, comme vous pouvez le voir, il est écrit « bourrer trois parce que nous devons indiquer trois valeurs dans notre liste Si j'augmente la valeur de 20 pixels puis que je définis ce fichier, comme vous pouvez le voir, il est écrit quatre. Comme vous pouvez le constater, il compte plusieurs valeurs. De plus, si je supprime le pixel unitaire, laissez-moi vous le montrer puis définir ce fichier. Comme vous pouvez le voir, il est écrit quatre parce que cette fonction est suffisamment intelligente pour identifier les valeurs. C'est pourquoi sans unité, il peut compter nos valeurs. Et si j'utilise une virgule entre eux puis que je définis ce fichier, comme vous pouvez le voir, maintenant il est également écrit quatre parce que nous pouvons créer notre liste en utilisant l'espace sinon en utilisant une virgule Revenons à la position précédente. Je vais appuyer sur Ctrl Z. De plus, nous pouvons transmettre propriétés et des valeurs dans la fonction de longueur Laisse-moi te montrer. Tout d'abord, je vais utiliser des bretelles rondes À l'intérieur des accolades rondes, je vais d'abord utiliser avec une propriété de dix pixels Je vais également utiliser la propriété de hauteur. Hauteur, cinq pixels. Si je définis ce fichier, comme vous pouvez le voir, il réaccorde deux car nous passons deux valeurs totales dans cette fonction, largeur et hauteur Cette fonction est assez incorrecte pour identifier ces valeurs. Il s'agit de notre fonction de longueur qui peut compter les valeurs de nos listes. Parlons maintenant de notre prochaine fonction, qui est NIT. Mais d'abord, je vais dupliquer cette ligne et commenter précédente. Je vais taper NI. En gros, nous passons à deux paramètres dans la fonction N. Dans notre premier paramètre, nous devons transmettre la valeur de la liste et dans notre second paramètre, nous devons transmettre l' index. Laisse-moi te montrer. Dans notre premier paramètre, je vais transmettre la liste Dollar list. Et dans notre deuxième paramètre, je vais transmettre le numéro d'index, donc je vais en transmettre deux. Si je définis ce fichier, comme vous pouvez le voir, il est écrit en dix pixels. Maintenant, le quotien est la raison pour laquelle il est écrit dix pixels. Parce que comme vous pouvez le voir dans ma liste à l'index deux, nous avons une valeur de dix pixels. C'est pourquoi il est écrit dix pixels. Nous devons indiquer quatre valeurs dans ma liste. Cela signifie que nous devons indiquer quatre index dans cette liste. Dans notre deuxième paramètre, si je passe le numéro d'index, en fonction du numéro d'index, il renvoie la valeur. De même, si je change le numéro d'index, quatre, puis que je définis ce fichier, vous pouvez maintenant le voir renvoyer 20. Non seulement cela, nous pouvons également transmettre une valeur négative. Si je passe moins un puis que je définis ce fichier, vous pouvez maintenant le voir renvoyer 20 une fois de plus. Mais la question est de savoir pourquoi ? Parce que du côté gauche, on compte les valeurs positives. Dans le cas contraire, nous comptons les valeurs négatives à partir du côté droit. C'est donc notre moins un, c'est moins deux, c'est moins trois, et c'est moins quatre. Si je passe moins trois et que je place ce fichier, vous pouvez voir qu'il est écrit dix. Nous pouvons donc imprimer la valeur de cette façon, sinon de cette façon. Parlons maintenant de notre prochaine fonction, qui est de la configurer. Je voudrais commencer cette ligne et commenter la précédente. Si vous souhaitez ajouter une nouvelle valeur à notre liste existante, vous pouvez dans ce cas utiliser la fonction Seth Neh. Ici, je vais taper Seth Ne set nth. À l'intérieur des presses, nous devons passer trois paramètres. D'abord, notre liste, puis le numéro d'index, où souhaitez-vous vous placer ? Je veux le mettre à l'index deux. C'est pourquoi j'en passe deux. Dans notre troisième paramètre, nous devons transmettre la nouvelle valeur, et notre nouvelle valeur est 30 EM. Ici, je veux remplacer dix pixels par 30 heures. Si je configure ce fichier, vous pouvez voir le résultat. Cinq pixels, 30 am, 15 pixels, 20 pixels. À l'aide de cette fonction, vous pouvez remplacer une valeur de votre liste existante. Comme vous pouvez passer une valeur négative ici. Si je passe moins un puis que je configure ce fichier, vous pouvez maintenant le voir remplacé par 20 pixels par 30 heures. Parlons de notre quatrième fonction, Joan. Je vais dupliquer cette ligne et commenter la précédente. Ici, je vais appeler Joan Function. En utilisant la fonction conjointe, nous pouvons joindre plusieurs listes et créer une seule liste. Pour cela, je vais créer une autre variable, qui est deux. Je vais également modifier ces différents pixels, 50 pixels, 100 pixels, 150 pixels et 200 pixels Ici, nous devons passer le paramètre dollar deux, Liste un et Liste deux, Dollar, ist, virgule, et notre deuxième paramètre, nous devons passer notre deuxième liste est deux, dollar, est deux Donc, si je définis ce fichier, vous pouvez voir qu'il a écrit une nouvelle liste, et nous avons un total de huit valeurs dans cette liste. Cinq pixels, dix pixels, 15 pixels, 20 pixels, 50 pixels, 100 pixels, 150 pixels et 200 pixels. Vous pouvez voir qu'il n'y a pas de virgule entre ces valeurs. Fondamentalement, cette fonction s'est combinée pour créer une liste et a écrit une nouvelle liste. Mais quoi ? Si nous utilisons une virgule, dans notre première liste, laissez-moi vous montrer et dans notre deuxième liste, j'utilise simplement l'espace pour séparer les valeurs Si je définissais ce fichier, comme vous pouvez le voir dans notre nouvelle liste, il utilisait des virgules dans toute notre liste pour séparer les valeurs Nous pouvons également transmettre un autre paramètre dans notre fonction conjointe, qui est séparé. Supposons que je ne veuille pas de virgule entre ces valeurs. Dans ce cas, dans notre troisième paramètre, nous devons laisser passer de l'espace. Si je définis ce fichier, comme vous pouvez le voir dans notre nouvelle liste, il sépare notre valeur en utilisant un espace et non une virgule Comme vous pouvez utiliser la valeur automatique, il s'agit de la valeur par défaut. Je suis donc là pour taper auto. Si je définis ce fichier, vous pouvez maintenant voir qu'il s'agit d'une virgule entre les valeurs Mais si je n'utilise pas de virgule dans notre première liste et que je définis ensuite ce fichier, par défaut, comme vous pouvez le voir, c'est de l'espace écrit Il sépare notre valeur en utilisant l'espace. Mais maintenant, je veux séparer cette valeur par une virgule. Dans ce cas, nous devons passer une virgule ici. Si je définis ce fichier, vous pouvez maintenant voir qu'il fournit des virgules entre les valeurs Notre troisième paramètre représente donc le séparateur. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons aborder une fonction stylo, une fonction zip, une fonction d'index, une fonction de séparation et une fonction entre crochets Merci donc d' avoir regardé cette vidéo, restez connectés pour nos prochains tutoriels. 162. Tutoriel des fonctions de liste de SAS partie 2: Bonjour, les gars. Une fois de plus, je suis de retour dans mon coordinateur de studio visuel, et comme vous pouvez le voir, j'ouvre côte à côte le fichier de style SSPle et le fichier Stylo CSS Dans notre précédent didacticiel, nous allons en apprendre davantage sur la fonction Length, la fonction Nth, la fonction set N et la fonction de jointure Mais dans ce tutoriel, nous allons aborder les autres : la fonction APN, la fonction Z, la fonction d'index, la fonction séparation et sa fonction de crochet Donc, sans perdre votre temps, étudions de manière pratique. Dans un premier temps, je vais commencer par la fonction APN. Je vais donc configurer cette ligne et commenter la précédente. Et ici je vais taper Ajouter. Ensuite, nos cuivres ronds. Supposons que si vous souhaitez ajouter une nouvelle valeur dans la liste existante, dans ce cas, vous pouvez utiliser la fonction AVN. Supposons que dans notre première liste, je souhaite ajouter 30 pixels à 20 pixels. Dans ce cas, nous pouvons utiliser cette fonction. Laissez-moi vous montrer comment faire. Cette fonction ajoute une valeur unique. Dans notre premier paramètre, nous devons transmettre la liste, qui est une liste en dollars. Puis une virgule, puis nous devons transmettre la nouvelle valeur, qui est de 30 pixels Si je définis ce fichier, comme vous pouvez le voir dans le fichier CSS, il est écrit de 30 à 20 pixels. Cela ajoute une nouvelle valeur à notre liste. Nous pouvons ajouter une nouvelle valeur à l'aide de cette fonction. Nous avons également un troisième paramètre que nous pouvons utiliser séparément. Laisse-moi te montrer. Comme vous pouvez le voir, nos valeurs sont divisées par un espace Je vais donc utiliser ici notre troisième paramètre, qui est une virgule Si je configure ce fichier, vous pouvez voir le résultat. Vous pouvez maintenant voir que nos valeurs sont séparées par. Vous pouvez utiliser n'importe quelle valeur ici, auto , espace. Parlons de notre prochaine fonction, qui est la fonction Z. Je vais passer à cette ligne et commenter la précédente. abord, je vais inventer celle-ci et je vais taper Z. En gros, cette fonction va joindre deux valeurs Je veux dire qu'il avait cinq pixels avec 50 pixels, dix pixels avec 100 pixels, 15 pixels avec 150 pixels et 20 pixels avec 200 pixels. Ici, je vais passer deux paramètres. Notre premier paramètre est la liste des dollars, et notre deuxième paramètre est le dollar égal à deux. Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, il combinait cinq pixels avec 50 pixels, dix pixels avec 100 pixels, 15 pixels avec 150 pixels, 20 pixels avec 200 pixels. Permettez-moi de vous montrer un bon exemple à cet égard. Ici, je vais prendre un nom de couleur. Dans les presses rondes, je vais prendre le rouge, le vert et le bleu. Je vais également prendre une autre liste. Si les ronders sont pour le rouge, je vais en prendre 120 Pour le vert, je vais utiliser 255, et pour le bleu, je vais en utiliser 70. Si je définis ce fichier, vous pouvez maintenant voir que la valeur de la couleur rouge est 120, valeur de la couleur verte est 255 et la valeur de la couleur bleue est 70. C'est le bon cas d'utilisation de la fonction zip. Si vous n'utilisez pas de virgule à des fins de séparation, laissez-moi vous le montrer. Je vais donc révoquer cette virgule et utiliser de l' espace Dans ce cas, vous pouvez retirer les bretelles rondes. Si j'ai défini ce fichier, comme vous pouvez le voir, il a également parfaitement fonctionné. Tout dépend donc de vous, que vous soyez l'aise avec le séparateur ou non. Vous pouvez utiliser une virgule ou un espace Web. Parlons de notre septième fonction, qui est l'indice. Je vais vous demander cette phrase et commenter la précédente. Et ici je vais taper index. Supposons que vous souhaitiez effectuer une recherche dans votre liste. Dans ce cas, vous pouvez utiliser la fonction d'index. Donc, en tant que paramètre, nous devons d'abord fournir le nom de la liste, et le nom de notre liste est dollar list. Dans notre deuxième paramètre, nous devons passer le mot clé, que je veux trouver. Je veux trouver 15 pixels. Si je définis ce fichier, comme vous pouvez le voir, c'est un numéro d'index écrit. J'ai trouvé notre mot-clé à l'index trois. Si je retire l'unité puis que je recherche le fichier, comme vous pouvez le voir, il est également écrit trois. Mais si j'essaie de trouver un résultat qui n'existe pas dans cette liste, laissez-moi vous en montrer 40 puis définir ce fichier. Comme vous pouvez le voir, rien n'est écrit. Si cela existe, c'est écrit, sinon rien n'est écrit. Parlons maintenant de notre huitième fonction, qui est son séparateur. Je vais donc dupliquer cette ligne et commenter la précédente, et ici je vais taper List separator. Séparateur de listes. Le séparateur de liste renvoie essentiellement le nom du séparateur. Ici, nous devons transmettre le nom de la liste, puis il retournera le séparateur que nous utilisons dans cette liste. Je vais faire passer une liste de dollars. Si je définis ce fichier, comme vous pouvez le voir, c'est de l'espace écrit. Donc, ici, vous pouvez voir dans notre liste une, que nous utilisons l'espace pour séparer nos valeurs. Mais si j'utilise le virgule dans notre liste deux, et que nous passons ici la liste deux, puis que nous définissons ce fichier. Vous pouvez maintenant voir son titre car ici nous utilisons des virgules pour séparer nos valeurs Il faut distinguer deux types de séparateurs, sinon l'espace. Je vais maintenant parler de notre dernière fonction, qui est entre crochets Je vais donc dupliquer cette ligne et commenter la précédente. Et ici, je vais taper si entre crochets est entre crochets. En gros, cette fonction revient à la valeur. C'est vrai ou faux. Il s'agit essentiellement de vérifier si nous utilisons le carré *** dans notre liste ou non ? Ici, je vais passer le nom de notre liste, Dollar list. Si je définis ce fichier, vous pouvez maintenant voir qu'il s'agit d'un faux résultat écrit. Mais si j'utilise aussi le carré*** dans notre liste, laissez-moi vous le montrer puis le transmettre, et si je passe deux dans cette fonction et que je définis ce fichier, comme vous pouvez le voir, c'est écrit vrai. En gros, nous utilisons cette fonction avec la condition, et nous allons en apprendre davantage dans nos prochains tutoriels. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons apprendre certaines fonctions. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 163. Tutoriel des fonctions de sélection de Sass partie 1: Bonjour, les gars, c'est bon de vous voir. Une fois de plus, nous sommes de retour avec un nouveau tutoriel lié à SAS. Et dans ce didacticiel, nous allons apprendre les fonctions du sélecteur SAS Mais avant de comprendre ce qui est sélectionné. Ici, vous pouvez voir l'intérieur de la classe 1, nous avons ncatag, nous avons dit bonjour et nous avons dit bonjour, et nous avons notre balise Anca, qui se trouve dans cette classe Notre étiquette Anca est notre sélecteur. Mais SAS fournit des fonctions invitées qui peuvent manipuler nos sélecteurs Permettez-moi de vous montrer la fonction. Comme vous pouvez le constater, nous avons sept fonctions de sélection dans CS, le sélecteur suivant, le sélecteur ajouté, le remplacement du sélecteur est super sélectionné, les sélecteurs simples, les sélecteurs unifiés et le sélecteur Nous allons de l'avant et commençons nos travaux pratiques. Ici, vous pouvez voir que j' ouvre déjà mon application Kuala, et côte à côte, j'ouvre fichier CS stylé et un fichier de style CSS Effacons d'abord une variable dans notre fichier CS. Dollar et le nom de notre variable sont sélectionnés. Puis le côlon. Dans un premier temps, je vais vous montrer à quoi sert la fonction Selector Nest Ici, je vais taper Selector List. En gros, dans cette fonction de nidification de sélecteur, nous passons au total deux paramètres, et les deux paramètres doivent être sélecteurs Pour notre premier paramètre, je vais prendre des codes doubles pour notre premier paramètre, je vais utiliser L et pour notre deuxième paramètre, je vais utiliser I puis Semgoron deux dans cette ligne En gros, cette fonction de sélection va créer notre premier paramètre parentag et faire de notre deuxième paramètre une balise enfant de notre premier Je tiens à dire que cela va créer un tag UL, parentag et un tag LI child tag Il va combiner à la fois le tag et créer une sélection. Pour l'appliquer, nous devons créer une classe. Pour cela, je vais utiliser la méthode d'interpolation. Donc, d'abord, je vais taper has tag et dans les alias, je vais utiliser notre variable, qui est sélecteur, sélecteur de dollars Donc, quelle que soit la valeur que nous avons dans la variable sélectionnée, elle va la coller ici. Dans cette fonction sélective, je vais utiliser une propriété. Vous pouvez utiliser n'importe quelle propriété. Pour l'instant, je vais utiliser la hauteur. Hauteur : pixel de teinte. Définissons le fichier et voyons ce que nous obtenons dans notre fichier CSS. Si je définis ce fichier, vous pouvez voir ici dans le fichier CSS qu'il crée UltaGparnTag et Litag child Il combinait à la fois le sélecteur et le sélecteur combiné Made. En gros, il s'agit de l'utilisation de la fonction Selector Nest. Permettez-moi de vous montrer un autre exemple de cette fonction. Je vais supprimer celui-ci et définir ce double code. Je vais suivre le cours Totter Two. Notre première classe est XYZ et notre deuxième classe est point ABC. Et maintenant je vais prendre notre deuxième paramètre. Je veux utiliser une virgule et entrer dans le code de la tour. Notre deuxième paramètre est le tag P. Si je définis ce fichier, vous pouvez le voir ici dans mon fichier CSS de style, ici vous pouvez le voir créer deux groupes de classes différents abord, il sélectionne notre balise de paragraphe, qui se trouve dans notre classe XYZ, puis il sélectionne une autre balise de paragraphe, qui se trouve dans la classe ABC Si vous souhaitez utiliser la classe sudo, oui, vous le pouvez. Laisse-moi te montrer. Tout d'abord, je vais supprimer cette classe, et je vais utiliser uniquement la classe XYZ Ensuite, dans notre deuxième section de paramètres, je vais taper N person, colon, notre Psotoelector, qui est Hober colon, notre Psotoelector, Si je définis cette ligne, vous pouvez voir ici qu'elle utilise le sélecteur Ober avec la classe XYZ Ici, vous pouvez voir si vous souhaitez ajouter deux paramètres Pour cela, vous devez utiliser N person sine. Permettez-moi de clarifier cette section une fois de plus. Supposons qu'avec XYZ, je souhaite ajouter le trait de soulignement ABC. Permettez-moi de vous montrer alors de prononcer : « Personne ne souligne ABC ». Si je définis ce fichier, vous pouvez voir ici qu'il crée une nouvelle classe XYZ underscore ADC C'était notre première fonction qui est Selectnnst. Parlons d' une autre fonction qui est le sélecteur apène Ici, je vais supprimer SelectOnNst et je vais taper selector apin De même, dans cette fonction, nous devons passer aux deux paramètres. Et cette fonction appen va combiner ces deux paramètres Laisse-moi te montrer. Dans notre premier paramètre, je vais utiliser la balise de paragraphe. Dans notre deuxième paramètre, je vais utiliser une classe. Ici, je vais taper le point ABC. fonction Selector Nest fournit essentiellement de l'espace entre deux paramètres Mais dans la fonction d'ajout, elle combinera les deux paramètres Si je configure ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, il n'y a pas d'espace entre le tag P et la classe ABC. Je tiens à dire que cela crée une sélection unique. Cela signifie que toutes les balises de paragraphe avec la classe ABC doivent avoir une hauteur de 20 pixels. Permettez-moi de vous donner un autre exemple. Supposons que je vais utiliser la classe point XY Z. Dans notre deuxième paramètre, je vais utiliser le soulignement Copy Si je définis ce fichier, comme vous pouvez le voir, il crée une nouvelle classe, XYZ undersco copy Dans notre fonction précédente, nous devons utiliser N person sinus pour joindre ces deux paramètres. Mais dans cette fonction, nous n'avons pas besoin d' utiliser person sine. Maintenant, permettez-moi de modifier ce sélecteur et de passer à l'étape suivante. Super copie, je vais utiliser Coma, et ici je vais taper underscoimage Comme vous pouvez le constater, dans notre deuxième paramètre, nous utilisons deux noms différents, copy undisco copy et underscoimage Tu peux prendre n'importe quel nom comme tu veux. je définis ce fichier, comme vous pouvez le voir, il crée au total deux sélecteurs différents, copie de soulignement XYZ et une image de soulignement En gros, il combine notre premier paramètre avec la copie, et encore une fois, il combine notre premier paramètre avec l'image et crée deux sélecteurs différents C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons découvrir les sélecteurs restants Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 164. Tutoriel des fonctions de sélection de Sass partie 2: Bonjour, les gars. C'est bon de te revoir. Encore une fois, nous sommes dans l'éditeur de code de mon studio vidéo, et comme vous pouvez le voir, côte à côte, j'ouvre le fichier style point cs et le fichier stylet CSS Dans ce didacticiel, nous allons continuer avec la fonction de sélection. Je vais commencer ce tutoriel avec sélecteur RiplesFunction. Laisse-moi te montrer. Pour cela, je vais taper le sélecteur tiret place. C'est compréhensible d'après le nom lui-même, cela remplacera quelque chose. Dans cette fonction, nous passons essentiellement trois paramètres au total. Supposons que dans notre premier paramètre, je passe le point C XYZ C'est le nom de notre classe. Dans le deuxième paramètre, nous devons passer celui que nous devons remplacer. Supposons que je veuille remplacer la classe point XYZ. Ici, je vais attacher le point XYZ. Maintenant, dans notre troisième paramètre, nous devons transmettre la nouvelle valeur, et ici vous devez transmettre la valeur par laquelle vous souhaitez remplacer. Je veux remplacer point yate par point ABC. Si je place ce fichier, vous pouvez voir le résultat ici. Comme vous pouvez le voir, il n'y a pas de nom de classe c point XYZ. Il remplace point yate par point ABC. C'est pourquoi il a dépassé le point c ABC. Permettez-moi de vous donner un autre exemple. S'il n'y a pas de classe H one, H un dans notre premier paramètre, dans ce cas, si je définis ce fichier, comme vous pouvez le voir, il ne remplace pas le point XYZ par ABC Il s'agit simplement d'imprimer le point C XYZ car cette fonction de réponse ne trouve pas H un dans notre premier paramètre C'est pourquoi il imprime des ADT. Ce sont les utilisations de la fonction Selector Repres. Parlons de notre prochaine fonction de sélection, qui est le super sélecteur E. Ici, je vais attacher son sursélecteur de tiret. En gros, nous utilisons le sélecteur à des fins de test, non à des fins de modification, et il n'est écrit qu'un seul avec l'une ou l'autre des chutes, et pour le comprendre, nous devons passer par les deux paramètres Dans notre premier paramètre, nous devons passer un sélecteur, mais nous appelons notre premier sélecteur superselector Supposons que notre super sélecteur soit A, et que nous appelions notre deuxième sous-sélecteur de paramètres Et dans notre sous-sélecteur, je vais passer un point, et je vais également définir une classe X Y Z. Si je définis ce fichier, il retournera vrai Mais pourquoi le quotien ? Parce que cette fonction va rechercher notre super sélecteur dans notre sous-sélecteur Si un sursélecteur existe dans notre sous-sélecteur, dans ce cas, c'est Définissons ce fichier. Comme vous pouvez le voir, c'est écrit dans l'air. En gros, nous utilisons cette fonction avec une condition IP. Mais si je remplace leur poste, à XYZ. Si je supprime XY de notre sous-sélecteur et que je définis ce fichier, comme vous pouvez le voir, il est écrit tombe car ce super sélecteur n' existe pas dans ce sous-sélecteur C'est pour ça que c'est écrit Falls. Il s'agit de l'utilisation du super sélecteur. Parlons de notre prochain sélecteur, qui est un sélecteur simple Je vais supprimer celui-ci et je vais taper un simple sélecteur de tiret Grâce à cette fonction de sélection, nous pouvons diviser nos sélecteurs Si nous passons le sélecteur combiné ici, cela divisera les sélecteurs. Laisse-moi te montrer. Supposons que je passe par ABC. Si je définis ce fichier, vous pouvez le voir ici diviser nos sélecteurs Il crée un sélecteur A et un autre point de sélection ABC. Il s'agit de l'utilisation d'un sélecteur simple. C'est tout pour ce tutoriel. Dans notre prochain tutoriel, je vais aborder les fonctions de sélection restantes, Selector Unify et Selector Extend Merci d'avoir regardé cette vidéo, Stu pour notre prochain tutoriel 165. Tutoriel des fonctions de sélection de Sass partie 3: Bonjour, les gars. C'est bon de te revoir. Il s'agit de notre troisième tutoriel, relatif à la fonction de sélection Sas Dans ce didacticiel, nous allons apprendre à sélectionner Unify et la fonction d'étendue du sélecteur Passons à l'éditeur de code Visual Studio et voyons comment utiliser cette fonction. Dans un premier temps, je vais appeler la fonction Unifi sélectionnée, sélecteur Dans cette fonction, nous devons passer deux paramètres au total. Supposons que dans notre premier paramètre, j'utilise la balise d'ancrage, et dans notre second paramètre, j'utilise les informations par points. En gros, cette fonction essaie de créer une correspondance entre les deux paramètres. Si je définis ce fichier, comme vous pouvez le voir, cela crée une correspondance et crée un nouveau sélecteur, à info Permettez-moi de vous montrer d'autres exemples liés à cette fonction. Supposons que dans notre premier paramètre, je vais taper ad active. Et dans notre deuxième paramètre, je vais passer à l'info. Si je définis ce fichier, comme vous pouvez le voir, il crée un nouveau sélecteur, adt active point info qui signifie qu'il va sélectionner la balise d'ancrage avec Active Plus, sinon la classe info. Ensuite, il va appliquer le CSS. Mais si je passe à un autre sélecteur, laissez-moi vous montrer la balise d'ancrage dans notre premier paramètre et la balise H une dans notre deuxième paramètre Si je définis ce fichier, comme vous pouvez le voir, il est écrit en flèche car il n'a créé aucune combinaison entre deux paramètres. Il s'agit de l'utilisation de la fonction Unify. Parlons de notre dernière fonction de sélection, qui est Selector Extend Je vais supprimer le sélecteur Unify et ici je dois taper extend Cette fonction fonctionne également comme la fonction unifiée sélectionnée. En gros, cette fonction essaie d'étendre une classe et de créer un nouveau sélecteur Et dans cette fonction, nous pouvons utiliser un total de trois paramètres. Supposons que notre premier paramètre soit l'information sur le point d'ancrage, et que dans notre second paramètre, je transmette la balise Anger. R, et dans notre troisième paramètre, je vais transmettre un lien point de classe. Donc, cette fonction essaie de faire correspondre le deuxième paramètre à notre premier paramètre. S'ils ont trouvé une correspondance, il imprime l'IA, puis il essaie de créer une combinaison avec le point de classe de liens. Si je définis ce fichier, comme vous pouvez le voir, il crée d' abord une combinaison dans info. qui signifie qu'il s'imprime tel car il a trouvé une étiquette de colère dans notre premier paramètre. C'est pourquoi il imprime Asit, puis il crée une combinaison point d'information point L. Il s'agit d'un autre sélecteur Cette fonction crée toujours une combinaison étrange. Permettez-moi de vous donner un autre exemple. Maintenant, dans notre deuxième paramètre, je vais passer H une balise, et dans notre troisième paramètre, je vais passer H deux balises. Si je définis ce fichier, comme vous pouvez le voir, il imprime notre premier paramètre tel quel, et il n'essaie pas d' étendre notre sélecteur Parce qu'il n'a trouvé aucune correspondance dans notre deuxième paramètre. C'est pourquoi il ne peut pas étendre notre sélecteur. Fondamentalement, nous n'utilisons pas cette fonction de sélection complexe dans notre projet, et la plupart du temps, nous utilisons la fonction selecto next, sélecteur APenFunction et la fonction selector repress et C'est tout pour ce tutoriel. Dans notre prochain didacticiel, nous allons démarrer les fonctions cartographiques. Merci d'avoir regardé cette vidéo, restez à l'affût de notre prochain tutoriel. 166. Tutoriel sur les fonctions de carte Sass: Bonjour, les gars. C'est bon de te voir. Encore une fois, je suis de retour avec un nouveau tutoriel lié à ce tutoriel, et dans ce tutoriel, nous allons apprendre le fonctionnement des cartes. Essayons d'abord de comprendre ce qu'est une carte. Dans notre précédent tutoriel, nous allons découvrir la fonction de liste. Voici un exemple de fonction de liste. Comme vous pouvez le voir, dans une variable, nous disons un total de trois pixels el, dix, 20 et 30 pixels. Comme vous le savez, nous pouvons stocker plusieurs valeurs dans la fonction de liste. De même, dans notre fonction cartographique, nous pouvons stocker plusieurs val. Mais le processus est différent. Laisse-moi te montrer. Comme vous pouvez le voir, il s'agit d'un exemple de fonction cartographique et nous disons ici un total de deux valeurs, 405 cents. Mais il y a une autre valeur dans les codes inversés. L'un est régulier et l'autre est moyen. Ce sont des clés. Ce sont des clés cartographiques et des valeurs. La valeur normale moyenne est de 400 et la valeur moyenne est de 500. Comme vous le savez, dans notre liste, nous avons un index. Par exemple, notre indice à dix valeurs est un, l' indice à 20 valeurs est deux, indice à 30 valeurs est trois. En utilisant l'index, nous pouvons spécifier la position de ce v. En utilisant leur position, vous pouvez obtenir les valeurs. Si vous souhaitez extraire la troisième valeur d'index, elle renvoie 30 pixels. Mais dans les cartes, nous n'utilisons pas d'index. Ici, nous utilisons des clés. Ici, nous pouvons définir un nom différent pour nos clés. Il s'agit d'un autre exemple. Ici, vous pouvez voir que nous utilisons le nom de couleur vert et que pour le vert, nous utilisons la valeur x disial De même, pour le bleu, utilisez une valeur décimale hexadécimale. Également une fonction sur notre carte, similaire à la liste. Et il a également une fonction non virale. Ici, vous pouvez voir nous avons six fonctions cartographiques différentes : porte cartographique, fusion de cartes, suppression de cartes, clés de carte, valeurs cartographiques, et la dernière est la carte a. Nous allons aborder tout cela un par un. Sans perdre votre temps, passons à l'aspect pratique. Comme vous pouvez le constater, j' ouvre déjà mon application Kuala. Maintenant, vous pouvez voir côte à côte, j'ouvre un fichier de style CS et un fichier de style CSS. Au début, je vais créer une variable et le nom de notre variable est font to it, dollar, font wait. Puis le côlon. Une fois que deux points ont été pressés à l'intérieur des rondes, je vais d'abord créer notre clé et notre première touche sera normale. Avec cela, je vais passer notre première valeur et notre première valeur est 400. Ensuite, je vais créer notre deuxième clé, qui est moyenne. De plus, notre valeur est 500 et notre dernière clé est en gras. Et la valeur est de 700. Puis Semgram jusqu'à cette ligne. Voici notre carte, et maintenant je vais utiliser cette carte. Pour cela, je vais créer une classe dot taste. Ensuite, dans la liste, je vais utiliser un corps CSS qui est une police Poids de police. Je vais maintenant appeler notre première fonction cartographique, qui est Map Gate. Ensuite, à l'intérieur des robes rondes, nous devons passer le nom de notre carte et le nom de la clé. Comme vous pouvez le constater, le nom de notre carte est Font Weight. Ici, je vais transmettre le poids de la police. Dans notre deuxième paramètre, nous devons passer la clé et pour la clé, je vais passer bool Dans le cadre du double parcours, je vais passer en gras. Si je définis ce fichier, comme vous pouvez le voir, notre police est 700. Dans la fonction Mp gate, nous devons passer aux deux paramètres, le nom de la carte FontUo et la clé Cette fonction écrit toujours la valeur de cette clé, comme vous le savez, notre valeur de clé mondiale est 700. Mais que se passe-t-il si je passe une clé différente qui n'existe pas dans cette fonction cartographique ? Ici, je vais passer des os. Si je définis ce fichier, comme vous pouvez le voir, il n'est rien écrit car il n'y a pas de noms de clés. Si la clé existe, alors la fonction map gate est écrite b. Maintenant, parlons de notre fonction suivante, qui est map Key. Ici, je vais taper la clé de la carte. Dans la fonction Mp keys, nous devons passer à un seul paramètre, uniquement le nom de la carte. Si je définis ce fichier, comme vous pouvez le voir, toutes les clés de cette carte sont écrites. Notre première touche est normale, ou la deuxième clé est moyenne, et notre troisième touche est en gras. Il s'agit de l'utilisation de la fonction Mapey. Le nom de toutes les clés est écrit. Parlons de notre prochaine fonction, qui est map ils. Alors voilà, je vais passer ls. C'est aussi une fonction de touche cartographique semblable à un mot. Si je définis ce fichier, comme vous pouvez le voir, il renvoie toutes les valeurs. Et ici, nous n'avons besoin de passer qu' un seul paramètre, comme les clés. C'est tout pour ce tutoriel. Dans notre prochain didacticiel, je vais aborder les fonctions restantes, à savoir la fusion de cartes, la suppression de cartes et la clé de hachage de carte Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 167. Tutoriel des fonctions de carte Sass Part2: C'est bon de vous voir, les gars. Dans ce didacticiel, nous allons aborder les fonctions cartographiques restantes, à savoir la fusion de cartes, la suppression de cartes et le haski de cartes Revenons à l'éditeur de code de Visor Studio. Enfin, nous sommes dans l'éditeur de code Visu Studio, et nous allons commencer par la fonction de fusion de cartes Cette fonction va fusionner pour différencier une carte et renvoyer une carte. Nous devons donc créer une autre carte. Pour cela, je vais prendre une variable, et le nom de notre variable est léger. Poids Après le point-virgule, vous avez dit les robes rondes, notre premier kinome est le plus léger, notre valeur est 100 et notre deuxième kinome est li et la valeur est 300 et le point-virgule Je vais maintenant utiliser la fonction de fusion de cartes. Ici, je vais taper map merge. Et si je passe un autre paramètre, comme vous le savez, dans cette fonction, nous devons passer aux deux paramètres. Ici, je vais passer un autre paramètre, qui est une autre carte, c'est-à-dire le poids. Je copie le nom de la variable et je vais le coller ici. Mais il n'y a aucun problème. Si je définis ce fichier, il renverra une flèche. Laisse-moi te montrer. Si je définis ce fichier, comme vous pouvez le voir, il est écrit en forme de flèche car la fonction de fusion de cartes renvoie un nouvel homme, pas une valeur. C'est pourquoi nous ne pouvons pas l' imprimer directement sous forme de valeur. Nous devons créer une nouvelle variable pour stocker cette nouvelle carte. Laisse-moi te montrer. Je vais créer une fusion de noms de variables. Et maintenant je vais appeler cette fonction. Je vais supprimer cette fonction de cet endroit, et je vais la coller ici. En gros, cette fonction a fusionné avec des cartes et a écrit une nouvelle carte, et maintenant je vais appeler MapKisFunction Ici, je vais taper les clés de la carte. Et ici, nous devons passer notre nouveau Mug variable. Voilà, je vais passer Mug. Si je configure ce fichier, comme vous pouvez le voir, il renvoie toutes les clés de notre nouvelle carte. Comme vous pouvez le constater, il imprime d'abord format moyen en gras normal du recto sur la carte humide, puis il imprime la plus claire et la plus claire de la carte claire sur la carte humide. Il s'agit de l'utilisation de la fonction map Merch. Parlons de notre prochaine fonction, qui est la suppression de cartes. Nous ne pouvons pas appeler directement la fonction de suppression de carte. De même, nous devons créer des variables, donc je vais dupliquer cette ligne, et je vais changer le nom de la variable. Thèmve. Et ici, je vais appeler map remove function, map, remove. Dans cette fonction, nous devons passer deux paramètres au total. Dans notre premier paramètre, nous devons transmettre le nom de la carte. Dans notre cas, il s'agit de la police, mais dans notre deuxième paramètre, nous devons transmettre le nom de la clé. Quelle clé je souhaite supprimer ? Supposons que je veuille supprimer la touche en gras. Alors là, je vais faire une cravate audacieuse. Et si j'appelle notre nouvelle variable remove dans notre sélecteur de test, puis que je place ce fichier, comme vous pouvez le voir, utilisez uniquement les touches normale et moyenne Je supprime la touche en gras. Voici donc l'utilisation de la fonction de suppression. En gros, nous transmettons le nom de la clé que nous voulons supprimer. Parlons maintenant de notre dernière fonction, qui est la clé de hachage de la carte Donc ici, je vais taper la clé de hachage de la carte. En gros, le retour de cette fonction au type de valeur devient soit vrai. Dans cette fonction, nous devons passer aux deux paramètres. Donc, comme premier paramètre, je vais transmettre le poids des polices, et comme deuxième paramètre, nous devons transmettre le kiname. Je vais passer la touche en gras Si la touche Bol existe dans notre carte de polices, elle est écrite vraie Configurons donc le fichier. Comme vous pouvez le voir, c'est écrit vrai. Mais si je passe un mauvais nom de clé, plus en gras puis que je place ce fichier, comme vous pouvez le voir, il est écrit faux Il s'agit donc de l'utilisation de la fonction de hachage de la carte. C'est donc tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons apprendre cette fonction d' introspection. Merci donc d' avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 168. Tutoriel sur les fonctions d'introspection Sass: Bonjour les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au SAS, et dans ce tutoriel, nous allons apprendre la fonction d'introspection SAS Nous en savons déjà plus sur la fonction numérique, la fonction de chaîne, la fonction de couleur, la fonction de liste, sélection, la fonction de carte Dans ce tutoriel, nous allons aborder la fonction d' introspection. Voyons combien de fonctions nous avons dans la fonction d' introspection. Comme vous pouvez le constater, nous avons au total six fonctions dans l'introspection Fondamentalement, la fonction utilise des conditions. Et c'est toujours une valeur booléenne écrite à la suite d' autres échecs Commençons par l' aspect pratique et essayons de comprendre comment nous pouvons utiliser ces fonctions. Ici, vous pouvez voir que nous sommes dans éditeur de code Visual Studio et côte à côte, j'ouvre le fichier style point cs et le fichier style point css. Comme vous pouvez le voir dans notre fichier CSS à points de style, nous créons déjà une variable num, une variable char, une variable de liste, une variable de carte. Avec cela, nous créons un mélange dans le rayon de la bordure des noms. Créez également un nom de fonction sum. Comme vous pouvez le voir dans notre variable num, nous économisons 15 pixels et dans notre variable char, nous enregistrons un flux, roboto Dans notre variable de liste, nous créons une liste en utilisant des valeurs multiples, 15 pixels, 25 pixels, 30 pixels, et dans notre variable de carte, nous créons une carte. Dans un premier temps, je vais créer une classe dans laquelle je vais vérifier notre fonction d' introstection point taste Dans le cali resis, je vais utiliser une propriété CSS, qui est Tout d'abord, je vais commencer par la fonction variable exist. Ici, je vais taper variable exist, et ici nous devons transmettre le nom de la variable. En gros, nous utilisons cette fonction avec des conditions p et c'est toujours vrai ou faux Cette fonction va vérifier si le nom de la variable existe dans ce fichier, puis elle va renvoyer true. Dans le cas contraire, la valeur renvoyée sera fausse. Vérifions la variable. Ici, je vais transmettre le nom du dollar ou de la variable is map. Si je définis ce fichier, vous pouvez voir, oups, nous devons supprimer le signe du dollar , puis définir ce fichier Maintenant, vous pouvez voir que c'est écrit vrai. Si je passe une valeur qui n' existe pas dans notre fichier, dans ce cas, laissez-moi vous montrer des cartes, puis définir ce fichier, comme vous pouvez le voir, il est écrit faux. Permettez-moi de vous montrer une chose. Comme vous pouvez le constater, nous vérifions notre variable cartographique. Mais si je coupe cette variable de carte à cet endroit et que je la colle dans ce sélecteur, puis que je définis ce fichier, comme vous pouvez le voir, il renvoie également vrai car si les variables existent n'importe où dans notre fichier, dans ce cas, elles retourneront vrai Il s'agit de notre variable globale, mais maintenant la carte est notre variable locale. Passons à une autre fonction qui est variable globale exist. Laisse-moi te montrer. Ici, je vais taper la variable globale exist. Si je définis ce fichier, il renverra false. Laisse-moi te montrer. Comme vous pouvez le voir, c'est écrit faux, mais vous pouvez voir notre variable cartographique existe dans notre fichier. Alors quel est le problème ? Parce que notre variable cartographique n'est plus une variable globale. C'est maintenant une variable locale. Désormais, nos variables globales sont la variable num, variable char et la variable list. Si je passe num ici puis que je définis ce fichier, comme vous pouvez le voir, il est maintenant écrit vrai. Passons maintenant une autre fonction qui est mix in exist. Ici, je vais taper mix in exist. Dans cette fonction, nous devons transmettre un nom de mixage. Ici, je vais copier le nom du mixage du rayon de bordure, et je vais le coller ici. Si j'ai configuré ce fichier, comme vous pouvez le voir, c'est écrit vrai. Mais si je supprime le rayon puis que je définis ce fichier, comme vous pouvez le voir, c'est écrit des chutes. De même, nous avons une autre fonction qui est function exist. Si la fonction existe dans notre fichier, dans ce cas, elle renverra true. Fonction Si je passe le nom de la fonction et que le nom de notre fonction est sum puis que je définis ce fichier, comme vous pouvez le voir, c'est écrit vrai. Passons à notre cinquième fonction, qui est le type off. Ici, je vais taper un conseil. Dans cette fonction, nous passons essentiellement un membre variable. Ici, nous devons transmettre la variable lime. Par erreur, j'ai configuré ce fichier, c'est pourquoi il est écrit sur cette erreur et notre variable lime est dollar list. Si je passe cette variable et que je définis ce fichier, comme vous pouvez le voir, il est écrit notre type de variable, qui est liste. De même, si je passe variable char limb puis que je définis ce fichier, vous pouvez le voir ici écrit sous forme de chaîne. Notre type de variable char est une chaîne de caractères. Cette fonction est toujours écrite en type variable. Passons maintenant à notre dernière variable qui est en jeu. Ici, je vais taper spat. Je ne trouve aucune utilisation appropriée de cette fonction car elle est imprimée comme Vail Si je configure ce fichier, vous pouvez le voir ici sur Roboto. Nous ne l'utilisons qu'à des fins d'inspection. Si je passe le dernier ici et que je configure ensuite ce fichier, comme vous pouvez le voir, il s' imprime le moins tel quel. Je pense que ce n'est pas une fonction très importante. C'est tout pour ce tutoriel. Merci d'avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 169. Tutoriel de la directive Sass @contenu !: Bonjour les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel lié au SAS Dans ce tutoriel, nous allons apprendre les directives relatives au contenu du SAS. Nous avons déjà découvert le mixage SAS dans nos précédents tutoriels. En mélangeant, nous pouvons créer un cône réutilisable. Nous pouvons l'utiliser comme fonctions. Comme vous pouvez le voir, nous créons un mixage nommé BDI radius, et à la place du mixage, comme vous pouvez le voir, nous utilisons différentes propriétés pour différents navigateurs Ici, nous utilisons un préfixe. Pour Chrome, nous utilisons une clé Web. Pour Mozilla, nous utilisons mose, puis j'utilise le rayon de bordure réel de la propriété Comme vous pouvez le voir, nous définissons également la valeur. Chaque fois que nous devons appeler le mixage dans notre sélecteur, nous devons passer la valeur en paramètre Par conséquent, dans notre fichier CSS, il est écrit comme ceci. Rayon de bordure de cinq pixels. À partir de là, nous pouvons transmettre plusieurs valeurs. Mais à partir de là, nous ne pouvons transmettre aucune propriété CSS. Supposons que je veuille définir le style de bordure en utilisant ce mixage, mais cela n'est pas possible et pour résoudre ce problème, SAS a introduit des voyages directs de contenu. En gros, nous l'utilisons pour envoyer des données supplémentaires sans mélanger les valeurs. Je tiens à dire qu'avec cette valeur, nous pouvons envoyer des données supplémentaires. Permettez-moi de vous montrer l'exemple. Comme vous pouvez le constater, nous utilisons le même mixage, mais ici nous utilisons des directives de contenu. Pour cela, nous devons taper au contenu rouge. Quoi que nous adoptions , l'intégrer à ces VLT est le moyen d'envoyer des données à cette directive Comme vous pouvez le voir, nous appelons notre rayon de bordure de mixage et nous définissons une valeur de cinq pixels. Ensuite, nous utilisons des tiss dans les caliss dont nous avons besoin pour transmettre les valeurs de directive Border style Il s'agit de nos données relatives aux directives relatives au contenu. Si je définis ce fichier, il renverra ce code CSS. Après le rayon de bordure, il définit les jours de style de bordure. Comme vous pouvez le voir, il transmet nos données supplémentaires après le rayon de la frontière. Commençons par l'aspect pratique et voyons comment nous pouvons l'utiliser. Comme vous pouvez le voir, nous sommes dans l'éditeur Leo Cod de mon utilisateur, et côte à côte, j'ouvre Stylod CS et le fichier CSS Styload J'ai déjà créé un mixage nommé border radius, BD radius. Et aussi, j'appelle cela le mixage dans notre sélecteur. Et ici, vous pouvez voir le résultat dans notre fichier CSS. Et maintenant, je veux envoyer des données supplémentaires avec ce mixage, car nous devons utiliser Cali Races Et ici, je vais passer le style de bordure, donc le type, bordure, le style de bordure, dst Comme vous pouvez le constater, nous envoyons des données supplémentaires grâce à ce mixage. Mais si vous souhaitez imprimer les données supplémentaires lors du mixage, vous devez pour cela utiliser les directives de contenu. Pour cela, nous devons taper au contenu rouge. Si je configure ce fichier, comme vous pouvez le voir, maintenant c'est print boda style dans, nous envoyons les données supplémentaires via les directives de contenu Nous pouvons maintenant envoyer plusieurs propriétés grâce à ce mélange. Permettez-moi de vous donner un autre exemple. Cette fois, je vais envoyer un sélecteur complet via ces directives de contenu Pour cela, je vais commenter toutes les lignes. Ici, je vais créer un nouveau mix à la vitesse de mixage . Notre nom de mixage est taste. À l'intérieur du calicis, je vais utiliser uniquement des directives de contenu, ajoutant le taux Pour utiliser ce mélange, je vais taper include, ajouter le taux, inclure notre nom de mixage est taste. Ensuite, à l'intérieur du calicis, je vais d'abord prendre un sélecteur et le nom que nous avons sélectionné est Classe 1, puis à l'intérieur du Cali Resist, je vais utiliser une couleur appropriée. Couleur y : comme vous pouvez le voir ici, en utilisant ce mélange, nous allons passer le sélecteur complet avec les propriétés Si je définis cette valeur, comme vous pouvez le voir, cela crée une classe point classe un et dans cette classe un, vous définissez une couleur de propriété. Et pour exécuter ce contenu supplémentaire, nous utilisons des directives de contenu. Permettez-moi de vous montrer un autre exemple façon dont nous pouvons utiliser les directives de contenu. Supposons que notre sélecteur de classe 1 se trouve dans l'ID one, pour envoyer ce contenu dans l'ID, nous pouvons l'utiliser de cette façon. Laisse-moi te montrer. Je veux définir un IDH DAG et notre nom d'identification est men. Ensuite, à l'intérieur de la résine de Cali, je vais faire passer ce contenant Je vais couper ce contenu et le coller ici. Si je définis ce fichier, comme vous pouvez le voir, il affiche le contenu de la directive dans l'ID du menu. C'est pourquoi il imprime d'abord le menu. Nous pouvons également utiliser les directives de contenu de cette manière. Maintenant, le menu devient le sélecteur parent et la classe 1 devient le sélecteur enfant Permettez-moi de vous montrer un autre exemple d'utilisation des directives de contenu. Je vais commenter ces lignes. Dans un premier temps, je vais créer un bouton de sélection de boutons à points. Ensuite, dans l'alyss, je vais d'abord utiliser la propriété border Bordure d'un pixel. Je vais utiliser une bordure unie, fils, et je veux une couleur de bordure. Dans le même temps, je souhaite créer un sélecteur Hober pour ce bouton Ici, je vais parler de mixage , mais je ne le crée pas. Au rouge, incluez. Include et notre nom de mixage est Hober. Ce sont les alias, je vais définir bordure par bordure par bordure de deux pixels Je vais maintenant créer le nom de mixage Her. Ici, je vais taper sur le mixage rouge. Mixage en survol. Ensuite, à l'intérieur des étalonnages, je vais créer un sélecteur Posito pour notre classe Pour cela, nous devons utiliser la colonne Person Sign in Person Hoger Ensuite, à l'intérieur des calices, je vais transmettre le contenu au rythme du contenu Nous utilisons ce signe de personne car nous devons créer le sélecteur Her à l'aide d'un bouton Si je définis ce fichier, comme vous pouvez le voir, il crée d' abord un sélecteur de boutons, puis il crée un sélecteur de boutons, et Boden avec nos données de contenu supplémentaires C'est tout pour ce tutoriel. Dans notre prochain tutoriel, nous allons en apprendre davantage à ce sujet . Merci d' avoir visionné cette vidéo, restez connectés pour notre prochain tutoriel. 170. Tutoriel de la directive Sass @contenu 2: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec un nouveau tutoriel relatif aux directives de contenu. Comme vous pouvez le voir, nous sommes déjà dans mon éditeur de code Visual Studio, côte à côte, j'ouvre Style lot, le fichier cs et le fichier CSS Styllod La plupart du temps, nous utilisons des directives de contenu avec Media Query. Permettez-moi de vous montrer un exemple avec une requête multimédia. Pour cela, je vais commenter tous les codes précédents, et ici je vais prendre un body tag. Ensuite, à l'intérieur de l'alyss, je veux définir une couleur de fond Contexte. Fond gris. Maintenant, je vais créer trois requêtes média différentes. Sur l'écran multimédia rouge, et à l'intérieur des versets ronds, je vais utiliser MaxWPPTY max W Je veux régler un maximum de 1 300 pixels. Ensuite, dans les alias, je vais passer un sélecteur et le nom de notre sélecteur Je vais utiliser le même sélecteur et la même propriété. C'est pourquoi je vais copier cette section et la coller dans les alias ici, je vais définir la couleur de fond rouge Ainsi, lorsque notre résolution d'écran correspond à cette requête multimédia, elle définit notre couleur d' arrière-plan en rouge, et maintenant je vais créer deux autres requêtes multimédia pour une résolution différente. Je vais donc dupliquer cette section, et ici je vais définir 1 000 pixels. Je veux dire couleur de fond bleu. Bleue. Ainsi, à 1 000 pixels couronne du Brésil a défini notre couleur de fond en bleu Encore une fois, je vais définir une autre requête multimédia. Je vais donc dupliquer cette portion, et ici je vais dire 800. À 800 pixels, je veux dire couleur de fond verte. Ici, je vais taper en vert. Il s'agit d'une méthode CSS normale. Si je place ce fichier, vous pouvez voir le résultat ici. Comme vous pouvez le voir dans notre fichier CSS, il s'imprime tel quel, mais maintenant je vais utiliser les directives de contenu pour le quadrage multimédia. Pour utiliser les directives de contenu, nous devons créer un mix in. Dans un premier temps, je vais créer un mixage au taux de mixage. Je souhaite utiliser ce mix pour l'écran multimédia. C'est pourquoi je vais définir le nom du média de mixage. Ensuite, à l'intérieur des robes rondes, je vais passer un paramètre, et notre variable de paramètre est weep Dans les alorss, je vais transmettre ce code, écran multimédia Copiez ce code et je vais le coller ici. Ici, je vais passer à la variable. Dollar. Ensuite, dans les calibres je vais utiliser des directives de contenu, au taux contenu Puis le point-virgule deux sur cette ligne. Si vous souhaitez utiliser ce mixage, vous devez l'inclure. Mais d'abord, je vais commenter les lignes, les requêtes des médias. Je n'en ai pas besoin maintenant. Maintenant, je vais inclure ce mixage avec Include QR, au tarif inclus. Et le nom de notre mixage est media. Ensuite, entre parenthèses, nous devons transmettre la valeur Comme vous pouvez le constater, notre premier maximum est de 1 300 pixels. Ici, je vais passer 1 300 px. Ensuite, dans les calibrages, je vais transmettre ici notre contenu supplémentaire pour les directives de contenu Notre première sélection est Body. À l'intérieur du Calibrass, je veux dire « arrière-plan ». Contexte. Tarif. Comme vous pouvez le constater, nous utilisons total de trois résolutions d'écran multimédia, 1 300 pixels, 1 000 pixels et 800 pixels Je souhaite dupliquer cette section deux fois. Ici, je veux passer 1 000 pixels. À 1 000 pixels, je veux dire que c'est la couleur de fond bleu. Bleue. Dans notre dernier capital de Meteor, je veux dépasser 800 Value Max avec 800 et ici je veux définir la couleur de fond verte. Si je définis ce fichier, comme vous pouvez le voir, il repose sur le même résultat. J'imprime tel quel. Mais cette fois, nous n'avons pas besoin d'utiliser plusieurs fois le mot de requête multimédia. Nous transmettons notre contenu par le biais de directives de contenu, et nous créons déjà un mixage pour les requêtes multimédia. Dans la section Inclure, vous pouvez modifier la taille de l'écran. Supposons que je passe à 700 pixels. Si je définis ce fichier, comme vous pouvez le voir, il définit notre requête multimédia de 700 pixels. Non seulement cela, vous pouvez transmettre plusieurs propriétés. Laisse-moi te montrer. Avec le contexte, je veux dire bordure. Bordure de deux pixels. Solide. Et la couleur de notre bordure est le blanc. Je vais configurer ce fichier, et vous pouvez voir le résultat ici. Maintenant à 700 pixels, il définit notre couleur de fond en vert. Il définit également une bordure unie de couleur blanche. Il s'agit de la meilleure utilisation des directives relatives au contenu. J'espère que c'est clair pour toi maintenant. Merci donc d' avoir regardé cette vidéo. Restez à l'affût pour notre prochain tutoriel. 171. Tutoriel sur les directives Sass @media: Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec le nouveau tutoriel lié à SAS. Dans ce tutoriel, nous allons apprendre SAS Media et les directives AT True. Essayons de comprendre ce que sont les directives relatives aux médias. Ici, vous pouvez voir une classe nommée container, et nous disons conteneur de 1 100 pixels et nous centrons notre conteneur en utilisant la marge Si nous créons mediaquery en utilisant CSS, dans ce cas, nous devons utiliser mediaquery Vous pouvez le voir, nous avons défini un point d'arrêt à 1 150 pixels et dans cette requête multimédia, nous avons défini une largeur de conteneur de 900 Lorsque la largeur du navigateur atteint 1 150 pixels, il doit réduire la largeur de notre conteneur de 1 100 pixels à 900 pixels Comme vous le savez, dans un souci de réactivité, nous devons créer plusieurs points d'arrêt pour différentes tailles d'écran Vous devez créer de nombreuses requêtes multimédias. De plus, nous devons saisir la largeur du conteneur à chaque fois. Inutilement, nous devons définir la largeur du conteneur plusieurs fois. Pour résoudre ce type de problème, il est recommandé d' introduire des directives sur les médias. En utilisant la directive sur les médias, nous pouvons gérer cette situation. Voyons donc comment nous pouvons l'utiliser et réduire nos lignes inutiles. Comme vous pouvez le voir, nous sommes enfin dans mon éditeur de code Visual Studio, et côte à côte, j'ouvre style point CS et le fichier style point CSS. J'ouvre déjà mon répertoire CSS dans notre application Koala. Donc, d'abord, je vais créer une classe, et le nom de notre classe est container. Ensuite, à l'intérieur de la résine Cali, je vais définir le conteneur par semaine de 1 100 pixels Je vais également définir Margin. Marge, je veux centrer le conteneur, donc je vais utiliser zéro pixel. De plus, je vais utiliser Auto vile et maintenant je veux définir une requête multimédia différente pour différents points d'arrêt, mais nous allons taper moins de code dans cessation Dans les alias, je vais créer la monnaie multimédia au tarif média Écran multimédia, et dans le cadre du processus du tour, je vais définir le point d'arrêt Je vais taper un trait d' union maximal de 1 150 pixels. C'est donc notre premier point de rupture. Donc, à une largeur de 1 150 pixels, je souhaite réduire la largeur du conteneur Pour cela, nous n'avons pas besoin de taper à nouveau container, nous devons taper avec propriété. Largeur 900 pixels. Comme vous pouvez le voir, elle consomme de la méthamphétamine De même, je vais créer deux autres points de rupture. Je vais donc consulter cette section deux fois. Ici, je vais régler le maximum avec 950 pixels. À une largeur de navigateur de 950 pixels, je souhaite définir une largeur de conteneur de 700 pixels. Comme vous pouvez le constater, nous n'avons pas besoin d' utiliser le sélecteur de conteneur en permanence. De même, à une largeur de 700 pixels, je souhaite définir un conteneur de 500 pixels. En gros, vous pouvez voir dans mon fichier CS nous travaillons avec un seul sélecteur Mais si je définis ce fichier, comme vous pouvez le voir, cela crée au total quatre sélecteurs différents Comme vous pouvez le constater, notre premier sélecteur est notre conteneur, et les trois autres sélecteurs sont nos Dans SAS, si nous utilisons at media à l'intérieur de la section conteneur, nous l'appelons media direct names. Ici, vous pouvez voir la différence. Dans notre fichier CSS, chaque fois que vous entrez dans l'écran multimédia, sélecteur de conteneur est créé Ensuite, à l'intérieur du sélecteur de poursuite, il ajuste le conteneur we Mais dans notre fichier cs, si nous utilisons des directives média, nous n'avons pas besoin d'utiliser le sélecteur continu encore et encore. Il s'agit de l'utilisation des directives relatives aux médias. Essayons de comprendre nos prochaines directives, qui sont les directives root. Dans nos précédents didacticiels, nous allons en apprendre davantage sur l'imbrication SAS Et ici vous pouvez voir l'exemple de la nidification. Comme vous pouvez le constater, il y a une classe pour parents à l'intérieur de la fenêtre réservée aux parents, nous avons une classe pour enfants, et nous avons également une classe pour sous-enfants et une étiquette découpée. Comme vous pouvez le voir dans notre balise parent, nous avons défini 1 100 pixels, dans notre balise enfant nous avons défini la couleur rouge, et dans notre balise sous-enfant, nous avons défini la couleur rose Si je compile ce fichier, il va renvoyer ce code CSS. Comme vous pouvez le voir, il crée au total trois sélecteurs parent-sélecteur parent et sélecteur enfant différents , il crée également un sélecteur parent-enfant et un sélecteur sous-enfant Comme vous pouvez le constater, il est inutile de créer une balise parent dans notre fichier CSS Mais je ne veux pas que les parents soient sélectionnés à chaque fois. Nous pouvons le supprimer en utilisant SAS. Pour résoudre ce problème, SAS a introduit les équipes directes à la racine. Dans le prochain tutoriel, nous allons apprendre comment nous pouvons l'utiliser dans la pratique. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel. 172. Tutoriel sur les directives Sass @at root: C'est bon de vous voir. Dans ce tutoriel, nous allons apprendre à la racine les directives. Comme vous pouvez le voir, côte à côte, j'ai ouvert le fichier style point CS et le fichier style point CSS. Dans un premier temps, je vais créer un groupe de nidification. Au début, je vais prendre un point de classe parent et le nom de notre classe parent est IM. Ensuite, dans les versets de Cali, je vais utiliser la propriété CSS et nom de notre propriété CSS est coloré, coloré en vert Ensuite, dans cette classe parent, je vais créer une autre classe. Je souhaite créer une sous-classe et le nom de notre sous-classe est élément par élément rappeur. Ensuite, dans le caliss, je vais utiliser la propriété CSS et notre propriété CSS est Couleur rouge. Ensuite, je vais utiliser un autre sélecteur dans emballage de notre article, qui est Image à l'intérieur des coraux que je vais prendre avec la propriété, nous, nous, Ensuite, en dehors de cet emballage, je vais suivre un autre cours Je souhaite créer une autre sous-classe de cet article, et le nom de notre sélecteur est point item child Ensuite, dans la classe je vais utiliser un arrière-plan de propriété CSS Fond rose. Si je place ce fichier, comme vous pouvez le voir, il est automatiquement créé sur le quatrième sélecteur Notre premier sélecteur est pour notre article, notre deuxième pour l'emballage de l' article et notre troisième pour l'image, qui se trouve à l'intérieur Notre dernier sélecteur est l'article Child Select. Maintenant, si vous remarquez que vous pouvez le voir, c'est du verre répété à chaque fois. Vous décidez maintenant que vous ne voulez pas de classe d'objet pour cette partie, pour l'objet rappeur et pour notre image. Pour résoudre ce problème, SRS introduit des directives à la racine Vous devez taper ici les directives root. Ici, je vais taper le rouge sur Troop. Ensuite, je lance Calibass nous devons fermer cette classe après le tag image Ici, je vais fermer le cis , puis je vais définir ce fichier. Comme vous pouvez le voir dans mon fichier CSS, il supprime un élément de notre sélecteur Ici, vous pouvez voir qu'il n' y a aucun élément de nom de classe. Il s'agit d'un article imprimé, d' un article ou d'une image, mais dans notre sélecteur américain, vous pouvez à nouveau voir la classe d' article Il s'agit de l'utilisation des directives à la racine. En gros, ce sont des noms de sélecteurs inutiles. J'espère que tu as compris. Permettez-moi de vous montrer un autre exemple de directives à la racine. Pour cela, je vais commenter cette section, je vais configurer ce fichier. Dans un premier temps, je vais passer d'un média à un média publicitaire, le nom de notre média est print. Ensuite, à l'intérieur du Caliss, je vais prendre un objet à points de classe Lepper Ensuite, à l'intérieur du calis, je vais prendre un autre sélecteur, et le nom de notre sélection Ensuite, à l'intérieur des calices, je vais utiliser la propriété CSS et notre propriété CSS est color, color read Si je configure ce fichier, vous pouvez le voir imprimer nos médias. Et à l'intérieur de cette impression, vous sélectionnez article par article. Ensuite, à l'intérieur du caliss, il imprime la couleur rouge. Mais si vous remarquez, vous pouvez voir qu'il n'y a aucune propriété CSS dans notre classe d'emballage d' éléments Cette propriété provient de la classe d'éléments, mais elle permet également de sélectionner ce sélecteur, l'emballage d'articles Mais je ne veux pas ce sélecteur d'emballage d' articles. Si nous voulons supprimer cette classe d'emballage d'éléments, nous devons utiliser les directives at root. Laisse-moi te montrer. Après l'emballage de l'article, nous devons taper les directives rouges à la racine Ensuite, nous devons démarrer notre Calibase nous devons également mettre fin à ce Calibase par la suite Si je définis ce fichier, comme vous pouvez le voir, il supprime le rappeur d'éléments et maintenant il ne sélectionne que la classe d'éléments. Comme vous pouvez le voir, sélectionnez directement le sélecteur d'articles. Il ignore le sélecteur d'élément, ce qui est totalement inutile car il n'y a aucune propriété CSS dans la classe d'emballage d'élément J'espère que c'est maintenant clair pour lui. Une chose dont vous devez vous souvenir, car les directives sont prédéfinies et nous l'appelons « sans ». Permettez-moi de vous montrer l' exemple de son fonctionnement. Dans un premier temps, je vais supprimer ces lignes, emballage de l'article. Ensuite, dans l'impression multimédia , je vais suivre un cours et le nom de notre classe est container. Et à l'intérieur du Cliivess , je vais prendre 22 propriétés Notre première propriété est de 130 pixels. De plus, je vais prendre une autre propriété colorée, lue en couleur. Nous créons cette thèse à des fins d'impression. Si quelqu'un essaie d'imprimer la page, elle imprimera notre conteneur avec 130 pixels et une lecture en couleur. Mais sur notre site web actuel, je ne veux pas cette couleur et nous. Pour cela, je vais utiliser ici nos directives at root. À la lecture à la racine. À l'intérieur des calices je vais utiliser les mêmes propriétés Mais ici, je vais changer les valeurs. Pour nous, je vais utiliser 100 pixels et pour la couleur, je vais utiliser le vert. Cela signifie que si quelqu'un essaie d'imprimer notre page Web, il doit renvoyer 130 pixels avec une couleur rouge. Mais sur notre site Web, cela passe par 100 pixels et par la couleur verte. Je vais maintenant utiliser la valeur prédéfinie des directives at root. À l'intérieur des robes rondes, je vais passer sans, sans et ici il faut passer une valeur nommée media. C'est méchant, cela fait également partie de la classe des conteneurs, mais sans support. Après avoir défini ce fichier, vous pouvez voir le résultat. Comme vous pouvez le constater, notre presse écrite fonctionne jusqu'à présent, puis elle imprime sans support. Il s'agit du CSS de notre site Web et de notre CSS d'impression. J'espère que maintenant c'est clair pour vous dans le prochain tutoriel, nous allons apprendre les directives de contrôle. Merci d'avoir regardé cette vidéo, restez connectés pour notre prochain tutoriel.