CSS avancé : unités, variables, fonctions, sélecteur

1. Introduction: Je sais que vous connaissez l'unité CSS. Vous connaissez Pixel Parson DEM Val. Mais connaissiez-vous l'unité Femin Vmax, VH W ? Savez-vous comment utiliser les variables CSS dans nos projets ? Êtes-vous intéressé à savoir comment utiliser la fonction calf ? Et êtes-vous intéressé à apprendre une autre fonction CSS, fonction minimale, fonction maximale, fonction clam ? Voulez-vous travailler avec des sélecteurs CSS très avancés tels que le sélecteur simple, le sélecteur de combinateur, le sélecteur d' attribut, les sélecteurs de classe Posi Do et les sélecteurs d'éléments Posido ? Alors ce cours est fait pour toi. Bonjour. Je m'appelle John T Shokar Je suis développeur web full stack et formateur en ligne. Bienvenue dans mon cours, Advanced CSS. Il s'agit de l'un des cours les plus avancés en CSS. Si vous souhaitez améliorer vos compétences en CSS, ce cours est fait pour. 2. Tutoriel sur les unités CSS partie 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 300 pixels de hauteur. Ici, nous utilisons l'unité absolue, et le pixel est une unité absolue fixe. Maintenant, la question est de savoir ce que cela signifie. Que signifie « 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 un exemple d'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. Je vais donc 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. 3. Tutoriel sur les unités CSS partie 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 « we » 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. 4. 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. 5. 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 la même chose avec notre meilleure propriété. 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. 6. Fonction Min(): Bonjour, les gars, c'est bon de vous revoir. Encore une fois, je suis de retour avec une nouvelle fonction CSS liée au tutoriel. Et dans ce didacticiel, nous allons aborder la fonction minimale, la fonction maximale et la fonction clam Voyons maintenant ce qu' est la fonction moyenne. Le nom complet de la fonction Mint est bien minimal. C'est la volonté la plus basse. En gros, dans cette fonction, nous passons plusieurs remplissages numériques et cette fonction renvoie la volonté la plus faible Comment pouvons-nous utiliser cette fonction dans nos projets Wave ? Supposons que nous ayons une profondeur et que dans cette profondeur, je souhaite ajouter de la largeur dynamique et pour cela, nous n'allons pas utiliser Media Quad. Pour cela, cette fonction est introduite. Supposons que dans cette profondeur, je vais attribuer à l'aide de la fonction moyenne Op, 50 % ou 500 pixels. Ensuite, la fonction moyenne va implémenter la valeur la plus basse. Laissez-moi vous l'expliquer plus en détail. Maintenant, comment pouvons-nous mesurer les 50 % ? Il utilisera la largeur de 50 % de l'élément parent deep. Sinon, nous avons un navigateur et dans ce navigateur, nous n'avons qu'une profondeur, puis nous devons compter la largeur de la fenêtre d'affichage de ce navigateur Dans ce cas, la largeur du navigateur est le parent de cette profondeur, puis il va la comparer si les 50 % de la fenêtre du navigateur sont supérieurs à 500 pixels ou non. S'il est supérieur à 500 pixels, il choisira 500 pixels car la fonction Min choisit toujours la valeur la plus faible. Sinon, si 50 % sont inférieurs à 500 pixels, alors il faudra 50 % de large. C'est assez similaire au Vmax et à l'unité de tissage, et nous en avons déjà parlé dans notre section sur les unités Maintenant, permettez-moi de l'expliquer d' une manière plus authentique. Supposons que notre navigateur Vs 900 pixels et si nous extrayons les 50 % de 900 pixels, il renvoie 450 pixels. Ensuite, la fonction principale va vérifier la valeur inférieure. Comme vous pouvez le constater, 450 est une valeur inférieure à 500. Ensuite, il va attribuer une largeur D de 450 pixels. Dans le cas contraire, si largeur de notre fenêtre d'affichage est de 1 200 pixels, nous extrayons les 50 % de 1 200 pixels Comme vous pouvez le voir, il s'agit d' un réaccordage de 600 pixels, et comme vous le savez, 600 est supérieur à 500 pixels Dans ce cas, elle va appliquer une largeur de 500 pixels à ce D. Cette fonction renverra donc toujours dynamiquement une valeur minimale, et nous pouvons utiliser cette fonction avec différents types de propriétés. Nous pouvons l'utiliser avec une marge, rembourrage, pour la taille, l'ombre de la boîte, etc. Nous pouvons également utiliser cette fonction chaque fois que nous utilisons des films numériques Alors, sans perdre votre temps, commençons la pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mes visuels à votre éditeur de code et mon navigateur en utilisant l'extension if server, et je crée déjà un document d' estimation nommé index point stem sur notre page d'estimation, nous avons une balise profonde Et dans cette balise profonde, nous attribuons une classe nommée element. Et nous saisissons également cela dans cette balise profonde hello world. Ensuite, j'ajoute un peu de rembourrage à notre body tag et je mets la marge à zéro Je veux maintenant attribuer un nous dynamique à cet élément. Cela signifie que je veux changer l'élément chaque fois que nous changeons la forme du vent du navigateur. Pour cela, je vais d'abord sélectionner l'élément, la classe element, la classe element, l' élément point Ensuite, à l'intérieur du CalibrAsso, la première propriété est l'arrière-plan. Fond, et ici je vais utiliser du gris clair. Avec cela, je vais utiliser une autre propriété, blé, et je veux découper les mauvaises herbes dynamiques Pour cela, je vais utiliser la fonction mean. Et comme vous le savez, dans la fonction Min, nous devons transmettre plusieurs valeurs. La première valeur, je vais prendre en pourcentage, 50 % et la deuxième valeur, je vais prendre le pixel , soit 500 pixels. Il n'est pas obligatoire de prendre le premier pourcentage et le second le pixel Vous pouvez prendre n'importe quel type de valeur. Ici, vous pouvez prendre les deux valeurs en pixels, sinon les deux valeurs en pourcentages Cela dépend de vous. Si je définis ce fichier avec ça, je vais lui attribuer une petite hauteur. Hauteur ici, je vais utiliser 400 pixels. Définissez ce fichier en haut, comme vous pouvez le voir, il lui attribue une largeur. Je vais maintenant ouvrir ma section d'éléments pour mesurer la largeur de cet élément. Inspectez la section Elément. Chaque fois que j'ouvre mon causaire sur cet élément, comme vous pouvez le voir, il est écrit 380 par 400 Comme vous le savez, nous fixons une hauteur de 400 et notre fonction principale attribue une largeur de 380 pixels car la largeur de notre navigateur de mots est 820 pixels et elle occupe 50 % de la largeur du navigateur. Parce que nous sommes au rembourrage, c'est pourquoi la valeur est inférieure à 50 % Il est écrit 480. Mais si je supprime le rembourrage puis que je configure ce fichier, j'ouvre maintenant mon Carson dessus, et maintenant vous pouvez voir qu'il est écrit en 410 pixels Cela prend 50 % de ce navigateur. Donc, fonction minimale, prenez la valeur minimale. Mais quoi ? Si j'augmente la largeur du navigateur, laissez-moi vous le montrer. Je vais maintenant agrandir le navigateur W. Comme vous pouvez le constater, après avoir augmenté la largeur du navigateur, cette fois, notre fonction ne prend pas les 50 % du navigateur W. Si je survole ma voiture dessus, comme vous pouvez le voir, il mesure 500 pixels de largeur et 400 pixels de hauteur, car la largeur totale de notre structure est estimée à car la largeur totale de notre structure est estimée 1 518 pixels Et si vous renvoyez le 50 % de 1 518, ce serait 759 pixels 759 pixels est supérieur à 500 pixels. Et comme je vous le disais, notre fonction principale prend toujours la valeur minimale. Dans ce cas, 500 est la valeur minimale. C'est pourquoi il est dit 500 pixels. J'espère que tu comprends maintenant. Mais si je réduis à nouveau le navigateur, vous pouvez maintenant voir que la largeur de notre fenêtre d'affichage est de 614 pixels et que 50 % de 640 pixels sont de 307 pixels Comme je vous l'ai dit, cette fonction prend toujours la valeur minimale. C'est pourquoi il a indiqué la largeur de l'élément, 50 % de la fenêtre du navigateur. J'espère que le sujet principal de la fonction est clair pour vous. Regardons le code de Visual Studio. Je vais maintenant accrocher cet élément profond à un autre élément profond. Ici, nous l'utilisons directement dans notre body tag. Je vais couper cette portion, couper et d'abord, je vais attribuer un identifiant à cet Astag profond et notre nom profond est paren Ensuite, à l'intérieur de cet élément profond, je vais coller le profond. Nous avons maintenant l'élément parent deep et l'élément childp. Je vais maintenant attribuer un poids fixe à cette profondeur parentale. Ici, je vais taper ATagParin. Ensuite, dans le Cal sis, je vais d' abord attribuer, nous, et je vais attribuer avec 600 pixels. Pour comprendre cette structure, je vais également attribuer une bordure. Bordure, je veux une bordure solide d'un pixel et je veux une couleur noire. Et je vais configurer ce fichier. Si je vous montre mon navigateur, comme vous pouvez le voir, notre Wi parent mesure 600 pixels et 50 % de la largeur du parent est de 300 pixels, et la fonction minimale renvoie toujours le minimum, et 300 est la valeur minimale par rapport à 500. C'est pourquoi dans notre élément childp, il est dit que 50 % de largeur signifient 300 pixels Mais quoi ? Si j'augmente la largeur de l'élément parentip, laissez-moi vous le montrer Cette fois, je vais définir la largeur de l'élément parentp, 1 200 pixels, et je vais sous-traiter ce fichier Après avoir configuré ce fichier, si je vous montre mon navigateur, vous pouvez maintenant le voir, maintenant il attribue poids de 500 pixels à cet élément Dip enfant. Si je vous montre mon élément de console et mon cazar sur cet élément enfant, comme vous pouvez le voir, c'est à 500 pixels par semaine car largeur de notre élément parentp est Pourquoi c'est à 1 202 ? Parce que nous prenons une bordure d'un pixel à droite et que nous la soulevons. C'est pourquoi notre parent total est de cent deux. Si nous extrayons 50 % d' el cent deux, cela donnera 601 et 601 est supérieur à 500. Et la fonction principale renvoie toujours la valeur minimale. 500 est la valeur minimale. Je vais maintenant réduire la largeur de la fenêtre d'affichage. Ici, j'ai dit largeur de fenêtre 718 pixels. Si je recouvre ma carte sur cet élément, comme vous pouvez le voir, elle renvoie toujours une largeur de 500 pixels pour l'élément enfant. Maintenant, le quotien est la raison pour laquelle il est écrit 500 pixels. Parce que, comme je vous l'ai dit, fonctions moyennes fonctionnent en fonction de l'élément parent, et cette fois, notre élément parent est aussi profond, pas la fenêtre du navigateur. Et Hero dit valeur fixe. Et c'est pourquoi selon la valeur fixe, il s'écrit 500. Et si j'essaie de réduire davantage l'objet de la fenêtre et que mes voitures sont dessus, vous pouvez quand même voir qu'il est écrit 500 pixels de désherbage parce que dans notre étiquette parent, héros utilisent de l'herbe fixe J'espère donc que maintenant c'est clair 14. Comment utiliser la fonction moyenne ? Merci d'avoir regardé cette vidéo, restez connectés pour le prochain tutoriel. Dans le prochain tutoriel, je vais aborder la fonction maximale. 7. Fonction Max (): Je dois vous soutenir, c' est un autre tutoriel, et dans ce tutoriel, nous allons parler de la fonction maximale. Cette fonction fonctionne à l' opposé de la fonction principale, et le sens complet de la fonction est le maximum el. Dans cette fonction, nous transmettons plusieurs valeurs numériques et la renonciation maximale est écrite Supposons que nous ayons le même type de profondeur dans un navigateur, maintenant je veux dire une fin dynamique à cet élément profond. Et de même, je veux dire que c'est la valeur maximale. Et pour cela, nous utilisons ici la fonction max. Et dans cette fonction maximale, nous devons atténuer deux vagues, 50 % et 500 pixels. Donc, comme vous le savez, cela prendra 50 % de la largeur du navigateur. Supposons que la largeur de notre navigateur soit de 900 pixels et que nous obtenions 50 % de 900 pixels, c'est fait pour 50 pixels. Ensuite, la fonction suivante va vérifier, qui est la valeur maximale 450, sinon, 500. Et comme vous le savez, 500 est supérieur à 450. C'est pourquoi je vais attribuer 500 pixels à ce D. De même, si le navigateur fait 1 200 pixels et que nous extrayons 50 % des 1 200 pixels, cela renvoie 600 pixels. Et comme vous pouvez le constater cette fois, 600 est supérieur à 500. Il va donc attribuer une largeur de 600 pixels à ce D. Commençons donc par l'aspect pratique et essayons de le comprendre. 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à document d'estimation nommé indextdt HTML Comme vous pouvez le voir dans notre balise body, nous avons une balise profonde, et voici la classe City pour cet élément profond. Et comme vous pouvez le voir, dans cet élément, nous disons static en. Et maintenant, je veux parler de « cannabis dynamique ». Pour cela, cette fois je vais utiliser la fonction Max. Maximum. Cette fonction est complètement opposée à la fonction minimale. Dans cette fonction, je dois passer plusieurs vannes ici. Notre première valeur est de 50 % et notre deuxième valeur est de 500 pixels. Si je définis ce fichier, comme vous pouvez le voir, il n'y a aucun changement car notre valeur statique était de 500 pixels, mais comme vous le savez, fonction max prend toujours la valeur maximale. Si je vous montre ma section d' éléments, laissez-moi vous montrer et vous pouvez voir ici que cette fois, la largeur de notre navigateur est de 958 Le 50 % de 958 est inférieur à 500 pixels. C'est pourquoi notre fonction max choisit la valeur maximale, qui est 500. Mais si je réduis la largeur de mon navigateur, laissez-moi vous le montrer. Vous pouvez maintenant voir que la largeur de notre navigateur est 600 pixels et que 50 % de 600 pixels sont de 300. Donc cette fois, notre fonction maximale va choisir 500 car 500 est supérieur à 300. Et n'oubliez pas que les fonctions maximale et minimale fonctionnent en fonction de la taille de l' élément parent. Laisse-moi te montrer. Ici, je vais prendre une autre balise profonde, et je vais déplacer cette balise profonde dans cette balise d'élément parent, une balise de type Dev que je vais également attribuer à une classe parent parent. Ensuite, je vais couper cette section et je vais la coller dans le parentan. Je vais définir ce cinq Je vais maintenant styliser cette balise parent. Je copie donc cette balise parent et HemoTypeParnt. Ensuite, à l'intérieur des clivss, je vais d'abord utiliser la propriété de bordure, la bordure, et je veux une bordure solide d'un pixel Avec ça, je veux de la couleur noire. Ensuite, je vais définir un W W statique et type Hemo de 700 pixels de hauteur, 400 pixels Je vais configurer ce fichier. Je vais maintenant configurer ce fichier et activer le plein écran du navigateur. Si je réduis la largeur et la hauteur du navigateur, cela n'aura aucun effet sur cet élément profond car cette fois, nous avons un élément profond parent la largeur est de 700 pixels et les 50 % de 700 pixels sont de 350 pixels Comme vous pouvez le constater, 500 pixels sont supérieurs à 300 pixels. C'est pourquoi il est dit que la largeur de l' élément enfant est de 500 pixels. Cela fonctionne selon le conteneur Deep parent, et nous l'avons déjà appris dans notre studio de régression Je vais maintenant vous montrer un autre exemple. Passons au code studio de l'utilisateur. Donc, d'abord, je vais commenter cette section réservée aux parents. Et aussi, je vais supprimer cette étiquette parentale de notre corps. Et maintenant, je vais utiliser la fonction minimale avec la fonction maximale. En gros, je veux dire que je veux utiliser les deux fonctions à la fois. Cette fois, je veux dire 80 % de valeur. Notre première valeur est de 80 %. Et dans notre deuxième valeur, je vais utiliser ici la fonction minimale. Ensuite, à l'intérieur de la robe déshabillée , je vais également passer aux deux Notre première valeur est de 50 % et notre deuxième valeur est de 1 000 pixels, et je vais définir ce fichier. Une autre question est de savoir quel type de valeur va être renvoyé ? Au début, il va exécuter la fonction minimale. Supposons que nos navigateurs aient 1 200 pixels, puis que notre fonction minimale renvoie la valeur minimale. 50 % de 1 200 pixels correspondent à 600 pixels. La fonction minimale va sélectionner 600 pixels, puis définir 600 pixels comme deuxième paramètre de la fonction maximale. Pour mieux comprendre, je vais dupliquer cette ligne et commenter et commenter l'une des lignes. Cette fonction minimale va sélectionner la valeur minimale. Cela signifie que si notre navigateur mesure 1 200 pixels, il renverra 600 pixels. Et 80 % de 1 200 pixels correspondent à 960 pixels. Je vais refaire ce fichier et ici je vais taper 960 pixels. Comme vous le savez, la fonction max indique toujours la valeur maximale, c'est-à-dire notre élément de 960 pixels. Revenons au navigateur et voyons ce qu'il a écrit. Comme vous pouvez le voir, notre navigateur à cent pixels. Si j'allume ma console et que je passe mon curseur sur cette section, si vous mesurez la largeur de cet élément, il devient 960 pixels. Mais quoi ? Si je réduis la première valeur de la fonction maximale, laissez-moi vous le montrer. Cette fois, je vais dépasser les 20 %. Maintenant, 20 % de 1 200 pixels correspondent à 240 pixels. Ici, je vais taper 240 pixels. Cette fois, notre fonction maximale va sélectionner la valeur maximale, qui est de 600 pixels. Si je vous montre mon navigateur, comme vous pouvez le voir, cette fois, notre élément est de 600 pixels. C'est ainsi que nous pouvons hériter de plusieurs fonctions à la fois. Ici, nous utilisons ensemble la fonction maximale et la fonction minimale. Non seulement cela, si vous souhaitez transmettre la troisième valeur à cette fonction, oui, vous le pouvez. Ici, je vais utiliser une autre fonction, nous avons apprise dans notre précédent tutoriel, et je vais utiliser la fonction Cal, CALC Ensuite, à l'intérieur des presses rondes, je veux ajouter 500 pixels avec 500 pixels. Et je vais configurer ce fichier. Après avoir défini ce fichier et calculé les deux valeurs V, il retournera 1 000 pixels. Comme vous pouvez le voir, notre valeur maximale va choisir cette fois 1 000 pixels car il s'agit de la valeur maximale. Après l'étape de ce fichier, si je vous montre mon navigateur, comme vous pouvez le voir, maintenant, notre élément devient 1 000 pixels. En gros, dans ces exemples, nous utilisons une fonction maximale et minimale pour le poids de l'élément, mais cette fois, je vais l' utiliser avec le rembourrage Je vais commenter cette ligne et après la hauteur, je vais taper « rembourrage Rembourrage et je vais utiliser la fonction max, Max. Ensuite, à l'intérieur des parois rondes, notre première valeur est de 30 pixels. Dans notre deuxième valeur, je vais utiliser la hauteur de cinq points de vue, V g. Nous avons déjà découvert cette unité dans nos tubules précédents Désolé, ce n'est pas la hauteur de la fenêtre d'affichage. Je vais utiliser viewpot double. Prédéfinissez donc ce fichier. Si je reviens à mon navigateur, vous pouvez voir ici si je survole ma voiture sur cet élément, vous pouvez voir un rembourrage fixe pour ces éléments, et si je réduis la taille de la fenêtre, comme vous pouvez le constater, cela réduit le rembourrage Et si j'augmente la taille de la fenêtre, vous pouvez maintenant voir que cela augmente la taille du rembourrage Mais si je le réduis davantage, alors en un point, notre valeur de rembourrage deviendra 30 pixels Parce que si je vous montre un éditeur de code, je fixe ici la valeur minimale de 30 pixels. Essayons maintenant de comprendre la même chose avec le pourcentage. Encore une fois, je vais obtenir cette ligne, et cette fois, je vais réduire la hauteur à 100 pixels et commenter la ligne précédente. Et dans notre deuxième valeur, je vais prendre 10 % et je vais définir ce fichier. Supposons que notre navigateur mesure 1 000 pixels. Dans la commande, je vais taper 1 000 pixels. Et les 10 % de 1 000 pixels correspondent à 100 pixels. Si notre champ de vision est de 1 000 pixels, alors selon les 10 %, notre deuxième valeur devient 100 pixels. Ensuite, nos formulaires maximum prendront la valeur la plus élevée de 100 pixels. Avec cela, je vais également augmenter notre valeur initiale. Ici, je vais taper 40 pixels. Après avoir défini ce fichier, comme vous pouvez le voir, notre valeur de 10 % est toujours supérieure à 40 pixels. Si je vous montre mon navigateur, vous pouvez maintenant voir qu'il avait rembourrage de 100 pixels dans toutes les directions Et si je l'augmente, cela ajoutera plus de rembourrage et si je le diminue, cela réduira notre rembourrage Mais à un moment donné, si je le place en dessous de 400 pixels, vous pouvez maintenant voir que notre fenêtre de visualisation est inférieure à 400 pixels. 10 % de 400 pixels correspondent à 40 pixels, mais la zone de notre panneau d'affichage est de 388 et 10 % de 88 pixels est de 38,8 pixels 38,8 pixels est inférieur à 40 pixels. C'est pourquoi, si vous remarquez que lorsque je survole cet élément, comme vous pouvez le voir, notre rembourrage est de 40 pixels Si je le réduis davantage, vous pouvez toujours voir que notre rembourrage est de 40 pixels Mais si j'augmente la largeur du navigateur, comme vous pouvez le constater, lorsque je survole mes voitures dessus, notre rembourrage n'est plus réparé, il augmente continuellement lorsque j'augmente la taille de mon navigateur Maintenant, je vais utiliser la même valeur avec une fonction minimale. Dans mon codeur Visual Studio, je vais ici dupliquer cette ligne et commenter la précédente Cette fois, je vais utiliser la fonction Min. Comme vous le savez, la fonction Min renvoie toujours la valeur minimale. À ce stade, si je vous montre mon navigateur et que j' ouvre ma voiture sur cet élément, vous pouvez maintenant voir le pad, notre rembourrage est fixe, 40 pixels Parce que cette fois, nous utilisons la fonction minimale et la valeur minimale est écrite. Il a dit, un rembourrage de 40 pixels pour cet élément. Je vais maintenant utiliser cette fonction avec un raccourci. Passons au code de Visual Studio et je vais reprendre cette ligne. Cette fois, je veux utiliser la sténographie. Donc, de gauche à droite, je veux utiliser la fonction minimale et de haut en bas, je vais utiliser dix pixels. Je vais parcourir ce fichier. Si je reviens à mon navigateur et que je passe mon curseur dessus, maintenant vous pouvez voir de haut en bas, il ajoute 40 pixels et pour la gauche et la droite, il ajoute dix pixels. Donc, lorsque nous augmentons, diminuons la taille de la fenêtre du navigateur, et en fonction de la taille, cela changera le rembourrage en haut et en bas, mais cela fixera un rembourrage de dix pixels à gauche et à droite C'est ainsi que nous pouvons utiliser ces fonctions. En regardant cette vidéo, restez à l'affût de notre prochaine fonctionnalité. Dans le prochain tutoriel, nous aborderons la fonction Clam 8. Pince(): Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec une autre fonction liée au tutoriel. Et dans ce tutoriel, je vais aborder la fonction des palourdes Dans la fonction KLM, nous pouvons définir valeur minimale et une valeur maximale entre elles, nous pouvons utiliser une autre vague et nous l'appelons valeur de référence Si vous souhaitez définir une plage particulière pour cela, nous devons utiliser la valeur de préférence. Permettez-moi de vous montrer un exemple. Supposons que nous ayons un élément profond de notre page Web et que je souhaite définir une valeur dynamique pour cet élément profond. Comme vous pouvez le voir, en utilisant la fonction glam, nous définissons d' abord la limite minimale et enfin la limite maximale La valeur minimale représente, nous ne pouvons pas faire en sorte que la largeur de l' élément profond soit inférieure à 350 pixels et la valeur maximale, nous ne pouvons pas prendre plus de 500 pixels de largeur pour cette profondeur. Et entre eux, nous utilisons ici une valeur de 50 % et la valeur de 50 % dépend de la zone d'affichage du navigateur Donc, chaque fois que la largeur de notre navigateur 700 à 1 000 pixels, dans ce cas, il utilisera Prefer Win est de 700 à 1 000 pixels, dans ce cas, il utilisera Prefer Win parce que 50 % de 700 sont 350, donc nous ne pouvons pas prendre moins de 350 valeurs et les 50 % de 1 000 sont 500 et nous ne pouvons pas prendre plus de 500 valeurs pour cette vue car voici une limite fixée pour cela Permettez-moi de vous donner un autre exemple. Supposons que notre navigateur mesure 900 pixels et que 50 % de 900 pixels soient 450 pixels. Si l' ebot de notre navigateur mesure 900 pixels, dans ce cas, il définira largeur de 450 pixels à l'élément profond De même, dans notre exemple suivant, notre panneau d'affichage est de 1 200 pixels et 50 % de 1 200 pixels sont de 600 pixels Comme vous pouvez le constater, 600 pixels sont supérieurs à 500, ce qui signifie qu'ils vont dépasser la limite maximale. Il ne va donc pas attribuer 600 pixels à cet élément DIP. Il va définir 500 pixels parce que nous avons défini la limite maximale. De même, si notre navigateur mesure 600 pixels et que nous extrayons 50 % de 600 pixels, cela devient 300 pixels. Et selon la limite minimale, il ne définira pas une largeur de 300 pixels pour ce conteneur, car selon la limite minimale, il définira 350 pixels. Sans perdre votre temps, passons à l'aspect pratique. Comme vous pouvez le voir, côte à côte, j'ouvre mes sels à votre éditeur de code et à mon navigateur en utilisant l'extension if server, et j'ai déjà créé un document TML, indextree Et je crée déjà un élément. abord, je vais utiliser D pour cet élément, weed, et pour D, je vais utiliser la fonction CAM. CAM. Donc, dans cette fonction de palourde, je vais d'abord définir la valeur minimale et notre valeur minimale est de 350 pixels De plus, notre valeur maximale est 500 pixels et je veux un viel préféré Je veux une valeur préférée entre ces deux V. Ici, je vais définir 50 %, et je vais définir ce fichier. Ouvrons la section des éléments. Inspectez l'élément. Si je passe mon curseur dessus, comme vous pouvez le voir, fenêtre de notre navigateur fait maintenant 908 pixels Maintenant, je vais faire en sorte que notre fenêtre soit en plein écran. Pour que nos fenêtres soient en plein écran, comme vous pouvez le voir, largeur de notre fenêtre est maintenant de 1 276 et les 50 % de 1 276 sont au-dessus des 600 pixels Si je dépasse mon Gara sur cet élément, comme vous pouvez le voir, cela indique une largeur de 500 pixels parce que nous fixons la limite maximale et que nous utilisons ici la fonction Cal pour définir la valeur maximale On ne peut pas aller plus loin que 500 pixels. De même, si je réduis la taille de ma fenêtre en dessous de 1 000 pixels, vous pouvez maintenant voir qu'elle définit 50 % de largeur pour ce conteneur. Faisons en sorte que notre fenêtre soit de 800 pixels pour mieux la comprendre. Vous pouvez voir que notre quindo W mesure 800 pixels. Si j'ouvre mon curseur sur cet élément profond, comme vous pouvez le voir, notre élément profond mesure 400 pixels. J'ai dit la valeur préférée, qui est de 50 %. Encore une fois, je vais réduire les mauvaises herbes sur les fenêtres. Je vais faire 500 pixels. Comme vous le savez, 50 % de 500 pixels correspondent à 250 pixels, mais nous utilisons la fonction Glam et nous avons défini un minimum à cet élément et la largeur minimale est de 350 pixels C'est pourquoi cette fois notre fonction n'utilise pas la valeur préférée, elle a utilisé la valeur minimale et défini 350 pixels avec cet élément. Et nous pouvons utiliser la fonction clam avec différentes propriétés. Nous pouvons l'utiliser pour le rembourrage, fusion, la taille de police, etc. Mais dans cet exemple, je vais l' utiliser avec la taille de police. Je vais commenter cette ligne. Ensuite, je vais prendre la taille de police, et je vais utiliser la fonction clam Ensuite, les robes en duvet, nous allons d'abord voir la valeur minimale et notre valeur minimale est de 16 pixels. Ici, je vais utiliser une taille de police minimale de 16 pixels, et notre valeur maximale est 50 pixels. Je vais également prendre la valeur préférée, qui est cinq VW signifie cinq ports avec. N'oubliez pas que la taille de police ne doit pas être inférieure à 15 pixels et ne doit pas dépasser 50 pixels. Récupérons le fichier et retournons dans mon navigateur. Si je vous montre mon navigateur, comme vous pouvez le voir, vous pouvez voir la taille de la police. Si je développe ce navigateur, comme vous pouvez le voir, de temps en temps, cela augmente la taille de notre police. Mais à un moment donné, cela arrêtera l' augmentation de la taille de la police. Si je place ma voiture dessus, comme vous pouvez le voir, notre taille de police est maintenant de 50 pixels De même, si je réduis la largeur de ce navigateur et que je place le curseur dessus, vous pouvez maintenant voir notre taille de police passer à 16 pixels fonction de la hauteur et de la largeur de la fenêtre d'affichage, la taille de la police a été modifiée, et nous pouvons également définir limites supérieure et inférieure pour cette taille de police Vous pouvez maintenant voir que la largeur de notre fenêtre d'affichage est de 692 pixels. Si je place le curseur dessus, comme vous pouvez le voir, notre taille de police est de 34,6 pixels, nous pouvons changer dynamiquement la taille de la police et nous pouvons également définir J'espère que vous comprenez maintenant comment nous pouvons utiliser la fonction clam Merci d'avoir regardé cette vidéo, restez pour notre prochain tutoriel. 9. 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'ai ouvert 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é index TML Comme vous pouvez le voir dans notre balise body Abe, balise de paragraphe, P, et elle tape « hello word ». Dans notre section de style, comme vous pouvez le voir, notre famille de polices, notre famille de polices body est L. 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 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, je veux utiliser quel attribut je veux utiliser comme attribut de classe. Classe. Si je place ce fichier, comme vous pouvez le voir, 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 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. Lorsque I H sont mes cartes figurant sur ce paragraphe, je veux afficher le nom de l'attribut. Pour cela, nous devons utiliser Ober positioselector. 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. 10. 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. 11. 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. 12. Tutoriel sur les 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. 13. Sélecteur de pseudo-classes CSS 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 ici 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. 14. Sélecteur de pseudo-classes CSS 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 15. Sélecteur de pseudo-classes CSS partie 4: Bonjour, les gars, c'est bon de vous revoir. Il s'agit d'un autre sélecteur CSS de poseudoglass lié au didacticiel CSS de poseudoglass lié au Dans ce tutoriel, nous allons apprendre les lunettes Posto restantes Nous allons donc commencer par PosidoGlass en lecture seule et en lecture-écriture Dans notre EstimLpm, si nous utilisons l'attribut en lecture seule, nous ne pouvons simplement lire que cette section d'entrée Nous ne pouvons rien écrire dans ce flux d'entrée, et le mode lecture/écriture est le mode par défaut. Revenons au code de Visual Studio et essayons de comprendre à quoi servent les deux sélections. Comme vous pouvez le voir, côte à côte, j'ouvre mon éditeur de code isalts Studio et mon navigateur en utilisant IPServeExtension, et mon navigateur en utilisant IPServeExtension, je crée déjà un nom de document d'estimation document Donc, 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, donc herald type, read only Ce fichier, maintenant vous pouvez voir notre champ de saisie du prénom, n'est pas visible. 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 tape 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 champ de saisie en utilisant PosidoGass. Pour cela, nous devons utiliser Positoglass en lecture seule. Entrée de type petit. Colon, lecture seule. Ensuite, à l'intérieur du clivrass , je vais d' abord dire la frontière Bordure, je veux une bordure d'un pixel, et je veux une bordure solide et la couleur de notre bouteille 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 Posito 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 Posido 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 raconte mon bal de fin d'année, sinon , 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 effacer le nom de quatre pays, à É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 positoclasse américaine. 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. Je ne vais pas l'expliquer Si vous voulez en savoir plus, allez dans la section des variables 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. 16. CSS3 est() amélioré pour une pseudo-classe: 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 voir, nous avons une balise d'en-tête à l'intérieur de taste one Dev, DD et à l'extérieur de Taste One Dev. 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. 17. CSS a une pseudo-classe: Bonjour, les gars. C'est bon de te revoir. Encore une fois, je suis de retour avec un autre Positoselector. Cette fois, nous allons aborder le CSS avec PosidoClass. C'est une autre nouvelle classe de positoclasses en CSS. Essayons maintenant de comprendre ce qu'est le hash PosidoGass. Pour bien le comprendre, laissez-moi vous montrer un exemple. Comme vous pouvez le constater, nous avons mis deux éléments. Ici, ProtoLt met un élément en tête. Comme vous pouvez le constater, le goût des deux se trouve à l'intérieur de cette étiquette, Hello World est le même. Mais dans notre première balise d'en-tête, nous utilisons ici la balise span. Nous déplaçons le monde à l'intérieur de la balise span, et maintenant je veux sélectionner l'élément qui possède cette balise span. Dans notre cas, notre premier élément H one, cette balise car ici nous utilisons la balise span, mais dans notre élément St. H one, nous n'utilisons pas cette balise span. À l'aide de la balise Span, nous allons sélectionner l'élément parent de cette balise span. Dans notre cas, H one tag. Il s'agit d'un sélecteur de parents. Il va sélectionner le premier élément de titre. Alors, comment pouvons-nous l'utiliser ? Parlons de sa syntaxe. abord, nous devons donner un pourboire à H, l'élément principal que je veux sélectionner, puis nous devons taper deux points, a. Ensuite, à l'intérieur du Rundss nous devons transmettre cet élément enfant Dans notre cas, Span. Ensuite, dans le Calviss, vous pouvez implémenter les propriétés CSS S'il y a une balise span à l'intérieur de la balise header one, alors elle sélectionnera la balise header. Sinon, l'élément parent ne sera pas sélectionné. Ici, l'élément cible est H one tag et ce sélecteur est span Ensuite, à l'intérieur du calivs, vous pouvez appliquer n'importe quelle propriété CSS. Dans notre cas, nous appliquons ici la décoration soulignée. Et il va ajouter ce soulignement dans notre première balise H one. Commençons donc 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 en utilisant l'extension Light Server, et j'ai déjà créé un point d'index de nom de document TML TML Maintenant, vous pouvez voir dans notre balise body, ici nous avons deux balises H one, mais dans notre première balise H one, nous avons la balise Span pour ce monde de mots Et nous avons également deux balises de paragraphe. Et dans notre première balise de paragraphe, nous utilisons ici le mot en gras, B, le tag en gras, celui-ci. Mais dans notre balise de deuxième paragraphe, nous n'utilisons ici aucun élément enfant. Passons maintenant à cette section de style. Ici, je vais taper une balise de style. Style. À l'intérieur de cette balise de style, je souhaite sélectionner uniquement cette balise de titre dont l'élément enfant est span. Pour cela, nous devons taper H d'une colonne. Ensuite, nous devons utiliser hash p zero class has. Ensuite, à l'intérieur de la résine ronde, nous devons taper ici le nom de l'élément enfant Dans notre cas, Span. Ensuite, dans le Cariss, nous pouvons utiliser une propriété CSS, par exemple si je lie la couleur . Je vais donc changer la couleur de police de ce titre et le rendre rouge Ensuite, définissez ce fichier, vous pouvez voir le résultat. En utilisant la balise enfant, span, nous sélectionnons ici l'élément parent. la même manière, vous pouvez sélectionner la balise de paragraphe car dans cette balise de paragraphe, elle utilise une balise bool à l'intérieur, B. Je vais obtenir cette section et cette fois, je veux sélectionner la balise de paragraphe, P ici je vais rechercher la balise B, gras, et je vais définir ce fichier Après avoir configuré ce fichier, vous pouvez voir le résultat. De plus, ici, nous pouvons transmettre plusieurs balises à la fois. Supposons qu'avec une balise bool, je souhaite rechercher une balise span, et ici je vais ajouter une balise span, span Et à l'intérieur de la balise span, je vais mettre ce mot. Si je définis ce fichier, il appliquera le même CSS dans notre deuxième paragraphe. Laisse-moi te montrer. Supposons que vous définissiez ce fichier, vous pouvez voir le résultat. Maintenant, la question est pourquoi ? Parce que comme je vous l'ai dit, ici on peut passer plusieurs tags. Maintenant, il va rechercher les paragraphes contenant la balise B et la balise span. C'est pourquoi il sélectionne plusieurs balises de paragraphe. Maintenant, permettez-moi d'attribuer une classe à cette balise de paragraphe. Class et HendTyo. Dans notre deuxième paragraphe, je vais ajouter un identifiant. Identifiant deux. Avec cela, je vais également utiliser la première classe. Je vais satisfaire. Maintenant, je vais sélectionner le paragraphe, sinon les éléments en utilisant son nom de classe. Ici, nous ciblons l' élément en utilisant le nom de balise, mais cette fois, nous allons cibler l'élément en utilisant le nom de classe. Oui, nous pouvons le faire en utilisant cette classe Posido. Laissez-moi vous montrer comment faire. Ici, on en tape un, Colin Hash. Dans ce sélecteur PosidoClass, je veux cibler la balise span span Ensuite, dans le creux de couleur, je vais utiliser la propriété, le texte, la décoration, le soulignement De plus, je vais attribuer la même classe à notre première classe H one tag, et je vais en transmettre une. Maintenant, si je place cette pile, vous pouvez voir le résultat ici. Maintenant, vous pouvez voir que ce sont ces classes qui ont le tag child span. Ici, vous pouvez voir que nous utilisons même nom de classe dans trois balises, une balise H ou une balise de premier paragraphe, et dans notre balise de deuxième paragraphe, nous utilisons le même nom de classe, un, un, un, mais dans notre premier paragraphe, nous n'avons pas de balise de dépense à l'intérieur. C'est pourquoi nous ne le sélectionnons pas. Mais dans notre deuxième paragraphe, nous avons ce stylo à l'intérieur. C'est pourquoi il sélectionne ce paragraphe et le détache. la même manière, il sélectionne le premier tag H one car dans ce tag H one, nous avons ce tag pan. Voici donc comment nous pouvons utiliser cette classe Poseido. Et n'oubliez pas que nous pouvons également y appliquer une sélection anticipée, telle que le sélecteur direct pour enfants, et bien d'autres encore Mais je ne vais pas tout montrer dans ce tutoriel. Mais laissez-moi vous montrer un sélecteur avancé. Voici donc une balise profonde amtype, DV dans cette balise profonde, une section amotype Et dans cette section, je vais mettre notre premier élément profond. Alors voilà, je vais attacher un autre deep tag. À l'intérieur de cette balise profonde , je vais passer ici notre deuxième élément DIP. Je vais déplacer cet élément dans cette balise profonde. Maintenant, je vais recenser toutes les sélections, je vais les enregistrer Ensuite, ici, je vais utiliser Direct Child Selectron Ici, vous pouvez remarquer que dans les deux éléments profonds, nous avons la balise H one. Mais dans notre premier élément, nous utilisons ici la section avant la balise H one. Créons maintenant une sélection has pasito. Tapez donc le hachage point-virgule D. À l'intérieur de la cavité ronde, je vais taper un H. Ensuite, à l'intérieur du Caris, je vais changer la couleur de fond, taper le fond rouge Maintenant, comme vous pouvez le voir, les deux éléments profonds avaient la même balise H one, mais je veux sélectionner les éléments profonds qui ont un sélecteur direct enfant, une balise direct child h one, comme celle-ci Comme vous pouvez le voir, dans notre premier élément div, après cette balise dip, nous avons la balise section. Mais dans notre deuxième élément div, nous avons directement H une balise. Donc, ici, je vais utiliser le sélecteur dichl, celui-ci, et je vais définir ce fichier Après avoir défini ce fichier, vous pouvez voir le résultat ici. Sélectionnez ici ce deuxième élément DIP car à l'intérieur se trouve le sélecteur enfant direct H one tag, mais dans notre premier élément div, nous avons la balise section, puis nous avons H une balise C'est pourquoi il sélectionne celui-ci. Voici donc comment nous pouvons utiliser Hash Persio Selector. Je pense que maintenant c'est clair pour toi. Merci d'avoir regardé cette vidéo Restez connectés pour notre prochain tutoriel. 18. Pseudo-élément 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 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 de combinateur, sélecteur d' attributs, lunettes Busudo 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 et Adalis 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 de paragraphe 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 a appliqué cette première lettre CSS 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 Permettez-moi de vous montrer comment, tout d'abord, je vais sélectionner l'élément P. Ensuite, appelez deux points, je vais taper selection. 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, vous devez utiliser la sélection des codons 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 dernier élément positif, qui est plus ancien. 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 ancienne écurie Dpment qui est une table à points, et vous connaissez déjà cette forme stable Comme vous pouvez le voir dans ce formulaire, nous n'avons pas d' espace réservé dans ce formulaire, ici je vais ajouter un espace réservé Dans notre section de saisie du prénom, je vais utiliser ici un 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 donc 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 parcouru 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 regardé cette vidéo, restez connectés pour notre prochain tutoriel. 19. CSS avant et après les pseudo-éléments: 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. 20. Tutoriel sur les pseudo-éléments 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.