1
00:00:01,020 --> 00:00:06,030
Dans cette vidéo, nous allons nous concentrer sur trois sélecteurs CSSA.

2
00:00:06,030 --> 00:00:08,490
Ce sont l'ID d'élément en classe.

3
00:00:08,610 --> 00:00:11,610
Il ya donc beaucoup plus d'options pour sélectionner des éléments.

4
00:00:11,730 --> 00:00:15,630
Nous allons en apprendre plus sur eux plus tard, nous allons nous concentrer sur ces trois pour commencer.

5
00:00:15,960 --> 00:00:28,370
Et quand je dis que le sélecteur pense à cette règle générale dont nous avons parlé tout à l'heure quand il a commencé CSSA il ya quelques vidéos où nous avons un sélecteur, puis accolades et puis quelques propriétés.

6
00:00:28,860 --> 00:00:32,660
Nous allons donc voir quelques sélecteurs différents que nous pouvons mettre ici.

7
00:00:33,030 --> 00:00:38,340
Et la façon dont nous allons faire que nous allons réellement construire une liste vraiment simple à faire ensemble.

8
00:00:38,340 --> 00:00:39,980
Je vais donc créer un nouveau dossier.

9
00:00:40,170 --> 00:00:51,740
Je vais le sauver et je vais l'appeler pour faire la liste HMO une fois que nous avons que alors nous allons de l'avant et ajouter le HMO.

10
00:00:52,530 --> 00:01:01,550
Et la façon dont ça va fonctionner, ça va être un H1 et alors nous allons avoir un puits avec les alliés.

11
00:01:02,010 --> 00:01:20,090
Mais dans chaque allié nous allons avoir du texte et nous allons avoir une petite case à cocher afin de voir si vous pouvez vous rappeler comment faire case à cocher, c'est type d'entrée est égale case à cocher et puis en dessous ou après que nous aurons notre texte .

12
00:01:20,220 --> 00:01:30,210
Alors nous allons marcher rouillés alors je vais juste dupliquer cela.

13
00:01:30,210 --> 00:01:39,020
Donc nous allons avoir trois d'entre eux ici marcher Rusty juste pour acheter des produits d'épicerie.

14
00:01:40,590 --> 00:01:48,660
Et puis enfin terminer l'enregistrement voir évaluer Phidias.

15
00:01:48,960 --> 00:01:56,940
Donc, si nous ouvrons ce dans un navigateur, nous allons voir une version de style et de style de notre produit final, mais le squelette est là.

16
00:01:57,090 --> 00:02:01,520
Nous avons nos deux do's et chacun qui est un petit checkbox à côté de lui.

17
00:02:02,650 --> 00:02:03,390
D'ACCORD.

18
00:02:04,050 --> 00:02:08,590
Donc, la prochaine chose que nous voulons faire est de connecter une feuille de style.

19
00:02:09,060 --> 00:02:18,480
Donc, pour ce faire, cette fois, nous allons commencer par connecter une feuille de style non existante, puis nous allons aller de l'avant et de créer une feuille de style.

20
00:02:18,480 --> 00:02:26,960
Donc, certaines personnes appellent ce développement axé sur l'erreur où nous écrivons quelque chose que nous savons ne fonctionnera pas et ensuite nous le faisons travailler après.

21
00:02:26,970 --> 00:02:34,060
Donc, je vais appeler cela pour faire l'évaluation introduire C voir évaluer qui n'existe pas.

22
00:02:34,670 --> 00:02:40,820
La prochaine chose que nous allons faire est d'aller de l'avant et de faire ce dossier à Dewes que C évaluer.

23
00:02:40,920 --> 00:02:43,860
Et ce doit être au même endroit que pour faire une étude.

24
00:02:43,860 --> 00:02:48,550
Tim je vais sauver ça et juste pour m'assurer qu'il est connecté.

25
00:02:48,660 --> 00:02:57,870
Faisons quelque chose comme l'orange de fond de corps juste et vous savez que c'est réellement ce que je parlais dans la vidéo couleur.

26
00:02:57,870 --> 00:03:01,380
C'est l'une des seules fois où je voudrais vraiment utiliser une couleur comme orange.

27
00:03:01,380 --> 00:03:06,870
Mis à part l'enseignement, je voudrais juste l'utiliser pour s'assurer que quelque chose est connecté Je veux juste une couleur vive.

28
00:03:06,930 --> 00:03:11,760
Je veux voir si cela à utiliser que C Ss est référencé correctement ici.

29
00:03:11,820 --> 00:03:12,920
Donc, si nous frais.

30
00:03:13,170 --> 00:03:16,320
Ok, de grandes choses sont liées.

31
00:03:16,320 --> 00:03:27,180
Donc, ce que nous allons faire, c'est de revenir aux diapositives ici et de parler du sélecteur d'éléments en premier qui est celui que nous avons consacré beaucoup de temps à être prêt.

32
00:03:27,180 --> 00:03:38,240
C'est essentiellement le type d'attaques que vous spécifiez div ou paragraphe ou corps et puis il va sélectionner tous les éléments correspondants toutes les instances qui correspondent à cela.

33
00:03:38,610 --> 00:03:54,900
Donc, dans ce cas, nous avons deux divs et chaque div a deux paragraphes et donc nous avons mis tous les divs que l'arrière-plan violet que nous obtenons deux dispositif pourpre nous avons mis tous les paragraphes à être de couleur jaune nous obtenons quatre paragraphes jaunes.

34
00:03:55,140 --> 00:03:57,840
C'est ce que nous faisons ici lorsque nous sélectionnons le corps.

35
00:03:57,840 --> 00:04:10,320
Nous pourrions aussi le faire pour tous les ALWIS et leur donner un ordre ou nous allons chirp frontière de deux pixels rouge solide.

36
00:04:10,910 --> 00:04:14,560
Maintenant bien sûr que cela fonctionne sur tous les alliés.

37
00:04:15,360 --> 00:04:15,970
D'ACCORD.

38
00:04:16,380 --> 00:04:24,850
Donc, la prochaine chose que nous pourrions vouloir faire est de sélectionner un allié ou un H-1 ou une instance de quelque chose.

39
00:04:24,870 --> 00:04:30,510
Dans cet exemple, nous sélectionnons le troisième mensonge et le rendons jaune.

40
00:04:30,690 --> 00:04:41,800
Et la façon dont nous faisons cela est en fait en modifiant légèrement l'équipe et ensuite en utilisant un crochet que nous ajoutons à l'H T M L et R S S tous se référer à elle et le tourner en jaune.

41
00:04:42,180 --> 00:04:45,700
Donc, la première étape est d'ajouter ce crochet qui est appelé un ID.

42
00:04:46,050 --> 00:04:52,420
Et ainsi la manière dont une idée fonctionne vous l'ajoute comme attribut à n'importe quel ID d'élément égal.

43
00:04:52,440 --> 00:04:57,120
Et puis entre guillemets tout nom que vous voulez, il peut être n'importe quoi.

44
00:04:57,360 --> 00:05:08,420
Et puis ce que nous faisons est de se référer à cela plus tard en écrivant Octa Thorpe ou signe de hachage, puis le nom de l'ID et qui va sélectionner le d'un élément qui correspond à ce nom d'identification.

45
00:05:08,820 --> 00:05:18,510
Par exemple, disons que je veux que cet allié final soit légèrement différent.

46
00:05:19,080 --> 00:05:23,790
Ce que je pourrais faire, c'est d'aller ici, Ally et de lui donner une pièce d'identité.

47
00:05:23,970 --> 00:05:25,860
Et cela peut être n'importe quel nom du tout.

48
00:05:25,950 --> 00:05:40,210
Appelons juste ceci spécial et la raison que je dis que je l'appelle spécial il n'est pas vraiment un grand nom mais il vous montre que le point d'employer un identifiant est d'isoler quelque chose dehors.

49
00:05:40,330 --> 00:05:46,490
C'est un moyen de cibler un élément individuel et une note sur un ID.

50
00:05:46,560 --> 00:05:49,300
Il ne peut apparaître qu'une fois sur une page.

51
00:05:49,480 --> 00:05:56,270
Donc, si je fais cela, puis essayer de donner l'ID spéciale à deux éléments qui est effectivement invalides HMO.

52
00:05:56,530 --> 00:05:58,920
Donc, il est toujours censé être là une fois sur la page.

53
00:05:59,130 --> 00:06:02,640
Il est utilisé uniquement pour isoler un seul élément.

54
00:06:02,680 --> 00:06:09,280
Nous pouvons cependant avoir plusieurs ID sur une page tant qu'ils n'apparaissent pas plus d'une fois.

55
00:06:09,590 --> 00:06:09,830
D'ACCORD.

56
00:06:09,850 --> 00:06:12,180
Alors allons avec ce spécial.

57
00:06:12,240 --> 00:06:17,180
Maintenant, nous allons le faire jeter un oeil ici.

58
00:06:17,350 --> 00:06:18,550
C'est le dernier ici.

59
00:06:18,790 --> 00:06:20,390
Donnez-lui une couleur de fond.

60
00:06:20,650 --> 00:06:24,470
Donc, pour faire que Id Le nom est spécial.

61
00:06:24,490 --> 00:06:37,220
Nous allons à notre dossier CSSA et nous écrivons spécial et nous mettons une octave en face de lui et cela nous dit simplement que nous parlons d'un ID.

62
00:06:37,500 --> 00:06:48,020
Donc, tout ce que nous faisons est d'écrire ou C S S ici ici alors faisons la couleur de fond et nous allons le rendre jaune.

63
00:06:48,250 --> 00:06:54,730
Enregistrez l'actualisation du fichier et vous ne pouvez le voir que lorsqu'il est jaune.

64
00:06:54,790 --> 00:06:56,770
Il y a donc quelques choses que je veux souligner.

65
00:06:56,830 --> 00:06:59,890
Le premier est que ce code fonctionne toujours.

66
00:06:59,880 --> 00:07:01,760
Il tourne tous les alliés.

67
00:07:01,930 --> 00:07:05,310
Il leur donne une frontière rouge, y compris celui-ci le dernier.

68
00:07:05,650 --> 00:07:15,520
Et puis nous ajoutons en plus de cela en ajoutant un arrière-plan jaune seulement à la dernière base hors de ce crochet que nous avons ajouté et appelé dans l'ID.

69
00:07:15,580 --> 00:07:24,480
Donc, pour résumer une idée comme un moyen de sélectionner un élément, vous ne pouvez utiliser un ID qu'une fois par page, mais nous pouvons avoir autant d'ID que nous voulons sur une page.

70
00:07:24,730 --> 00:07:34,380
Donc, les ID sont excellents pour isoler les éléments individuels, mais souvent nous voulons avoir plusieurs éléments qui ressemblent, mais nous ne voulons pas tous les alliés par exemple.

71
00:07:34,450 --> 00:07:43,410
Alors disons que je voulais style la moitié des Alliés à sens unique et la moitié d'entre eux une autre façon, nous pourrions utiliser une classe pour y parvenir.

72
00:07:43,420 --> 00:07:51,410
Donc, la façon dont une classe fonctionne, c'est comme un ID, sauf qu'il est appelé une classe et nous pouvons l'appliquer à n'importe quel nombre d'éléments sur une page.

73
00:07:51,430 --> 00:08:05,240
Donc, comme vous pouvez le voir ici, nous appliquons une classe appelée la mise en évidence pour le premier paragraphe et le troisième paragraphe et puis nous nous référons à elle dans notre succès avec un point au lieu d'une octave Thorpe.

74
00:08:05,250 --> 00:08:13,350
Donc encore une fois pour contraster que ici pour sélectionner un ID nous utilisons le signe de hachage ou l'octave Thorpe ici pour sélectionner une classe.

75
00:08:13,380 --> 00:08:14,540
Nous utilisons le point.

76
00:08:14,710 --> 00:08:16,600
Sinon, ils fonctionnent de la même manière.

77
00:08:16,660 --> 00:08:19,030
Alors, faisons un exemple.

78
00:08:19,230 --> 00:08:28,390
Je vais ajouter une classe et la façon dont je veux que cela fonctionne, nous allons faire semblant que ces deux sont cochées.

79
00:08:28,480 --> 00:08:32,720
Donc, je veux qu'il y ait une ligne dans le texte.

80
00:08:32,760 --> 00:08:40,810
Donc, quand on regarde acheter des produits d'épicerie et marchait resti il ​​devrait y avoir une grève en passant par ce texte, mais pas le dernier.

81
00:08:40,840 --> 00:08:44,320
Donc, la façon dont nous faisons cela ou une façon de le faire est avec la classe.

82
00:08:44,400 --> 00:08:58,050
Donc, sur la volée, je vais aller de l'avant et ajouter une classe et il va appeler cela terminé et une autre classe égale terminée et je vais enregistrer que et si je rafraîchir.

83
00:08:58,170 --> 00:09:00,560
Rien ne se passe parce que je n'ai pas de styles.

84
00:09:00,900 --> 00:09:10,850
Donc, maintenant, je vais à mon C Ss et je point droit et ensuite le nom de la classe terminée accolades et maintenant le style.

85
00:09:11,050 --> 00:09:19,920
Donc, je vais présenter quelque chose de nouveau ici qui s'appelle la décoration de texte et la décoration de texte est un moyen d'ajouter une ligne à travers.

86
00:09:20,080 --> 00:09:22,030
Mais il ya quelques choses que vous pouvez faire.

87
00:09:22,020 --> 00:09:35,800
Vous pouvez ajouter un soulignement et vous pouvez ajouter un souligné ondulé Apparemment, je ne savais pas qu'une ligne à travers et une ligne qui est juste comme un soulignement, sauf sur le dessus.

88
00:09:35,800 --> 00:09:40,560
Donc, nous allons utiliser ligne à travers et qui devrait être.

89
00:09:40,810 --> 00:09:42,060
Donc, si je rafraîchir.

90
00:09:42,120 --> 00:09:44,420
Gardez l'œil sur ces deux premiers.

91
00:09:44,470 --> 00:09:46,400
Nous avons maintenant une ligne à travers.

92
00:09:46,840 --> 00:09:49,680
Génial.

93
00:09:49,990 --> 00:09:56,340
Une note rapide pendant que je suis ici est que si je veux que ces cases à cocher soient vérifiées lorsque la page est chargée.

94
00:09:56,500 --> 00:10:06,410
Donc en ce moment ils ne sont pas vérifiés et je dois les vérifier manuellement mais si je veux que les deux premiers soient vérifiés, je peux aller ici et ajouter un attribut appelé vérifié.

95
00:10:06,550 --> 00:10:10,370
Et cela fonctionne sur les entrées case à cocher.

96
00:10:10,380 --> 00:10:15,580
Donc, en faisant cela si j'étais frais Maintenant, quand la page est chargée, ils sont vérifiés.

97
00:10:15,750 --> 00:10:20,450
Alors ne voyons pas vraiment évaluer, mais il est important de savoir que vous pouvez le faire.

98
00:10:20,830 --> 00:10:21,100
D'ACCORD.

99
00:10:21,100 --> 00:10:24,140
Nous allons donc terminer très vite.

100
00:10:24,250 --> 00:10:28,680
Nous avons le sélecteur d'éléments pour sélectionner tout un élément donné.

101
00:10:28,720 --> 00:10:31,780
Tous les ALWIS divs tous les paragraphes.

102
00:10:32,120 --> 00:10:41,120
Nous avons le sélecteur ID qui sélectionnera l'élément avec l'ID correspondant et nous avons toujours besoin d'utiliser une octave pour cela.

103
00:10:41,240 --> 00:10:42,590
Ou un symbole de hachage.