1
00:00:01,020 --> 00:00:06,030
Quindi in questo video ci concentreremo su tre selettori CSSA.

2
00:00:06,030 --> 00:00:08,490
Quelli sono l'ID dell'elemento in classe.

3
00:00:08,610 --> 00:00:11,610
Quindi ci sono molte più opzioni per selezionare gli elementi.

4
00:00:11,730 --> 00:00:15,630
Ne parleremo più tardi, ci concentreremo solo su questi tre per iniziare.

5
00:00:15,960 --> 00:00:21,980
E quando dico che il selezionatore ripensa a questa regola generale di cui abbiamo parlato all'inizio, quando

6
00:00:21,980 --> 00:00:28,370
ha avviato CSSA alcuni video fa, dove abbiamo un selettore e quindi parentesi graffe e poi alcune proprietà.

7
00:00:28,860 --> 00:00:32,660
Quindi vedremo alcuni selettori diversi che possiamo mettere qui.

8
00:00:33,030 --> 00:00:37,440
E il modo in cui lo faremo in realtà creeremo insieme una lista di cose davvero semplice da fare.

9
00:00:38,340 --> 00:00:39,980
Quindi ho intenzione di creare un nuovo file.

10
00:00:40,170 --> 00:00:44,580
Lo salverò e lo chiamerò per fare una lista di HMO una

11
00:00:48,270 --> 00:00:51,740
volta che avremo che poi andremo avanti e aggiungeremo l'HMO.

12
00:00:52,530 --> 00:00:54,930
E il modo in cui funzionerà sarà

13
00:00:58,080 --> 00:01:01,550
un H1 e poi avremo un pozzo con gli alleati.

14
00:01:02,010 --> 00:01:08,880
Ma in ogni alleato avremo un po 'di testo e avremo una piccola casella di controllo, quindi vedi se riesci

15
00:01:08,880 --> 00:01:18,960
a ricordare come fare la casella di controllo è il tipo di input equivale alla casella di controllo e poi al di sotto di quella o dopo avremo il

16
00:01:18,960 --> 00:01:20,090
nostro testo .

17
00:01:20,220 --> 00:01:30,210
Quindi avremo una camminata arrugginita, quindi ho intenzione di duplicarlo.

18
00:01:30,210 --> 00:01:39,020
Quindi avremo tre di loro qui a spasso Rusty solo per comprare generi alimentari.

19
00:01:40,590 --> 00:01:41,490
E poi

20
00:01:45,150 --> 00:01:48,660
finire la registrazione, vedi valutare Phidias.

21
00:01:48,960 --> 00:01:54,990
Quindi se lo apriamo in un browser vedremo una versione blanda e in stile del nostro prodotto finale,

22
00:01:55,440 --> 00:01:56,940
ma lo scheletro è lì.

23
00:01:57,090 --> 00:02:01,520
Abbiamo i nostri due do e ognuno dei quali è una piccola casella di controllo accanto.

24
00:02:02,650 --> 00:02:03,390
OK.

25
00:02:04,050 --> 00:02:08,590
Quindi la prossima cosa che vogliamo fare è connettere un foglio di stile.

26
00:02:09,060 --> 00:02:17,190
Quindi, per fare questo, iniziamo collegando un foglio di stile non esistente e poi andremo avanti e creeremo un

27
00:02:17,400 --> 00:02:18,480
foglio di stile.

28
00:02:18,480 --> 00:02:23,970
Quindi alcune persone chiamerebbero questo sviluppo guidato da errori dove scriviamo qualcosa che sappiamo che non

29
00:02:23,970 --> 00:02:26,960
funzionerà e poi lo faremo funzionare in seguito.

30
00:02:26,970 --> 00:02:34,060
Quindi chiamerò questo per fare la valutazione introdurre C vedere valutare che non esiste.

31
00:02:34,670 --> 00:02:40,820
La prossima cosa che faremo è andare avanti e rendere quel file a Dewes che C valuta.

32
00:02:40,920 --> 00:02:43,860
E questo deve essere nello stesso posto in cui fare uno studio.

33
00:02:43,860 --> 00:02:48,550
Tim lo salverò e solo per assicurarmi che sia connesso.

34
00:02:48,660 --> 00:02:55,980
Facciamo qualcosa come lo sfondo del corpo arancione e sai che questo è in realtà ciò di cui stavo

35
00:02:55,980 --> 00:02:57,870
parlando nel video a colori.

36
00:02:57,870 --> 00:03:01,380
Questa è una delle uniche volte in cui vorrei usare un colore come l'arancione.

37
00:03:01,380 --> 00:03:06,780
A prescindere dall'insegnamento, lo userei solo per assicurarmi che qualcosa sia collegato. Voglio solo un colore brillante.

38
00:03:06,930 --> 00:03:11,760
Voglio vedere se questo per usare che C Ss viene referenziato correttamente qui.

39
00:03:11,820 --> 00:03:12,920
Quindi se siamo freschi.

40
00:03:13,170 --> 00:03:16,320
Ok, grandi cose sono collegate.

41
00:03:16,320 --> 00:03:23,580
Quindi, quello che faremo è tornare alle diapositive qui e parlare del selettore degli elementi che è

42
00:03:23,580 --> 00:03:27,180
quello che abbiamo dedicato molto tempo alla preparazione.

43
00:03:27,180 --> 00:03:35,100
È fondamentalmente il tipo di attacco quando si specifica div o paragraph o body e quindi selezionerà tutti

44
00:03:35,100 --> 00:03:38,240
gli elementi corrispondenti tutte le istanze corrispondenti.

45
00:03:38,610 --> 00:03:46,620
Quindi in questo caso abbiamo due div e ogni div ha due paragrafi e quindi impostiamo tutti i div che in

46
00:03:46,620 --> 00:03:53,730
viola per lo sfondo otteniamo due dispositivi viola, impostiamo tutti i paragrafi in COLORE GIALLO otteniamo quattro paragrafi gialli.

47
00:03:55,140 --> 00:03:57,840
Quindi questo è quello che stiamo facendo qui quando selezioniamo il corpo.

48
00:03:57,840 --> 00:04:08,190
Potremmo anche farlo per tutti gli ALWIS e dare loro un ordine o cinguettiamo il bordo di due pixel rosso fisso.

49
00:04:10,910 --> 00:04:14,560
Ora, naturalmente, funziona su tutti gli alleati.

50
00:04:15,360 --> 00:04:15,970
OK.

51
00:04:16,380 --> 00:04:24,180
Quindi la prossima cosa che potremmo voler fare è individuare un alleato o una H-1 o un'istanza di qualcosa.

52
00:04:24,870 --> 00:04:30,510
Quindi in questo esempio selezioniamo la terza bugia e la facciamo diventare gialla.

53
00:04:30,690 --> 00:04:37,020
E il modo in cui lo facciamo è in realtà alterando leggermente la squadra e poi usando un amo che aggiungiamo

54
00:04:37,020 --> 00:04:41,800
alle H T M L e R C Ss facciamo riferimento ad esso e lo ingialliscono.

55
00:04:42,180 --> 00:04:45,700
Quindi il primo passo è aggiungere quel gancio che è chiamato ID.

56
00:04:46,050 --> 00:04:52,420
E quindi il modo in cui funziona un'idea ti aggiunge come attributo a qualsiasi ID di elemento uguale.

57
00:04:52,440 --> 00:04:57,120
E poi tra virgolette qualsiasi nome che vuoi possa essere qualsiasi cosa.

58
00:04:57,360 --> 00:05:03,860
E poi quello che facciamo è riferirsi a quello più tardi scrivendo Octa Thorpe o il segno di hash e

59
00:05:03,870 --> 00:05:08,420
poi il nome dell'ID e che selezionerà l'elemento che corrisponde a quel nome ID.

60
00:05:08,820 --> 00:05:18,510
Quindi, ad esempio, diciamo che voglio che questo alleato finale qui abbia un aspetto leggermente diverso.

61
00:05:19,080 --> 00:05:23,790
Quello che potrei fare è andare qui ad Ally e dargli un ID.

62
00:05:23,970 --> 00:05:25,860
E questo può essere un nome qualsiasi.

63
00:05:25,950 --> 00:05:27,030
speciale non è

64
00:05:29,620 --> 00:05:35,650
davvero un gran nome, ma ti mostra che il punto di utilizzo di un ID è quello di individuare qualcosa.

65
00:05:35,650 --> 00:05:40,210
Chiamiamo questo speciale e il motivo per cui sto dicendo che lo sto chiamando

66
00:05:40,330 --> 00:05:46,490
È un modo per indirizzare un singolo elemento e una nota su un ID.

67
00:05:46,560 --> 00:05:49,300
Può apparire solo su una pagina una volta.

68
00:05:49,480 --> 00:05:56,270
Quindi se faccio questo e poi provo a dare l'ID speciale a due elementi che in realtà sono HMO non validi.

69
00:05:56,530 --> 00:05:58,920
Quindi dovrebbe sempre essere lì una volta sulla pagina.

70
00:05:59,130 --> 00:06:02,640
È puramente usato per separare un singolo elemento.

71
00:06:02,680 --> 00:06:09,280
Possiamo tuttavia avere più ID su una pagina purché non compaiano più di una volta.

72
00:06:09,590 --> 00:06:09,830
OK.

73
00:06:09,850 --> 00:06:12,180
Quindi andiamo con questo speciale.

74
00:06:12,240 --> 00:06:17,180
Ora facciamolo diamo un'occhiata qui.

75
00:06:17,350 --> 00:06:18,550
È quest'ultimo qui.

76
00:06:18,790 --> 00:06:20,390
Diamo un colore di sfondo.

77
00:06:20,650 --> 00:06:24,470
Quindi per farlo Id Il nome è speciale.

78
00:06:24,490 --> 00:06:32,670
Andiamo al nostro file CSSA e scriviamo speciali e mettiamo un'ottava davanti e questo

79
00:06:32,950 --> 00:06:37,220
ci dice che stiamo parlando di un ID.

80
00:06:37,500 --> 00:06:48,020
Quindi tutto ciò che facciamo è scrivere o C S S qui, quindi facciamo il colore di sfondo e rendiamolo giallo.

81
00:06:48,250 --> 00:06:54,730
Salva l'aggiornamento del file e puoi vedere solo questo quando è giallo.

82
00:06:54,790 --> 00:06:56,770
Quindi ci sono alcune cose che voglio sottolineare.

83
00:06:56,830 --> 00:06:59,890
Il primo è che questo codice funziona ancora.

84
00:06:59,880 --> 00:07:01,760
Trasforma tutti gli alleati.

85
00:07:01,930 --> 00:07:05,310
Dà loro un bordo rosso incluso quello finale.

86
00:07:05,650 --> 00:07:12,010
E poi aggiungeremo uno sfondo giallo solo all'ultimo basato su questo hook

87
00:07:12,000 --> 00:07:15,520
che abbiamo aggiunto e chiamato in ID.

88
00:07:15,580 --> 00:07:21,930
un elemento, puoi utilizzare un ID solo una volta per pagina, ma possiamo avere quanti ID vogliamo su una pagina.

89
00:07:21,940 --> 00:07:24,480
Quindi, per riassumere un'idea come metodo per individuare

90
00:07:24,730 --> 00:07:30,820
Quindi gli ID sono grandi per individuare singoli elementi, ma spesso vogliamo avere più elementi che

91
00:07:30,810 --> 00:07:34,380
sembrano simili ma non vogliamo tutti gli alleati, per esempio.

92
00:07:34,450 --> 00:07:41,320
Diciamo che volevo dare uno stile alla metà degli alleati e metà di loro un altro modo in cui

93
00:07:41,320 --> 00:07:43,410
potevamo usare una classe per ottenerlo.

94
00:07:43,420 --> 00:07:48,970
Quindi il modo in cui una classe funziona è come un ID, tranne che si chiama classe e possiamo applicarlo

95
00:07:49,020 --> 00:07:51,410
a qualsiasi numero di elementi in una pagina.

96
00:07:51,430 --> 00:07:57,850
e poi ci riferiamo ad essa nel nostro successo con un punto invece di un'ottava Thorpe.

97
00:07:57,850 --> 00:08:05,240
Quindi come puoi vedere qui stiamo applicando una classe chiamata highlight al primo paragrafo e al terzo paragrafo

98
00:08:05,250 --> 00:08:12,750
Quindi, ancora una volta per contrastare che qui per selezionare un ID usiamo il cancelletto o l'ottava Thorpe qui per selezionare

99
00:08:12,750 --> 00:08:13,350
una classe.

100
00:08:13,380 --> 00:08:14,540
Usiamo il punto.

101
00:08:14,710 --> 00:08:16,600
Altrimenti funzionano allo stesso modo.

102
00:08:16,660 --> 00:08:19,030
Quindi facciamo un esempio.

103
00:08:19,230 --> 00:08:26,050
Aggiungerò una lezione e il modo in cui voglio che funzioni, farò finta che questi due

104
00:08:27,310 --> 00:08:28,390
siano spuntati.

105
00:08:28,480 --> 00:08:32,720
Quindi voglio che ci sia una linea attraverso il testo.

106
00:08:32,760 --> 00:08:38,800
Quindi, quando guardiamo i generi alimentari e camminiamo verso il basso, ci dovrebbe essere uno sciopero attraverso

107
00:08:38,800 --> 00:08:40,810
il testo ma non l'ultimo.

108
00:08:40,840 --> 00:08:44,320
Quindi il modo in cui lo facciamo o un modo per farlo è con la classe.

109
00:08:44,400 --> 00:08:52,720
Quindi, al volo, vado avanti e aggiungo una classe e la chiamerò completata e un'altra

110
00:08:52,720 --> 00:08:58,050
classe sarà completata e io lo salverò e se aggiornerò.

111
00:08:58,170 --> 00:09:00,560
Non succede niente perché non ho stili.

112
00:09:00,900 --> 00:09:09,580
sul mio punto C e ho il punto giusto e poi il nome della classe ha completato le parentesi graffe e ora lo stile.

113
00:09:09,650 --> 00:09:10,850
Così ora vado

114
00:09:11,050 --> 00:09:18,030
Quindi presenterò qualcosa di nuovo che si chiama decorazione del testo e la decorazione del testo è un

115
00:09:18,040 --> 00:09:19,920
modo per aggiungere una linea.

116
00:09:20,080 --> 00:09:22,030
Ma ci sono alcune cose che puoi fare.

117
00:09:22,020 --> 00:09:28,710
Puoi aggiungere una sottolineatura e puoi aggiungere una sottolineatura ondulata Apparentemente non sapevo che una

118
00:09:29,200 --> 00:09:35,800
linea attraverso e una linea che è proprio come una sottolineatura, tranne in cima.

119
00:09:35,800 --> 00:09:40,560
Quindi useremo la linea e dovrebbe essere così.

120
00:09:40,810 --> 00:09:42,060
Quindi se mi rinfresco.

121
00:09:42,120 --> 00:09:44,420
Tieni d'occhio questi due top.

122
00:09:44,470 --> 00:09:46,400
Ora passiamo una linea.

123
00:09:46,840 --> 00:09:49,680
Grande.

124
00:09:49,990 --> 00:09:56,340
Una nota veloce mentre sono qui è che se voglio che queste checkbox siano spuntate quando la pagina viene caricata.

125
00:09:56,500 --> 00:10:01,420
Quindi adesso non sono controllati e devo controllarli manualmente, ma se voglio che i primi

126
00:10:02,470 --> 00:10:06,410
due siano controllati posso andare qui e aggiungere un attributo chiamato controllato.

127
00:10:06,550 --> 00:10:10,370
E questo funziona sugli input della casella di controllo.

128
00:10:10,380 --> 00:10:15,580
Così facendo, se fossi fresco Ora, quando la pagina viene caricata, vengono controllati.

129
00:10:15,750 --> 00:10:20,450
Quindi non vediamo davvero la valutazione, ma è importante sapere che puoi farlo.

130
00:10:20,830 --> 00:10:21,100
OK.

131
00:10:21,100 --> 00:10:24,140
Quindi concludiamo molto rapidamente.

132
00:10:24,250 --> 00:10:28,680
Abbiamo il selettore di elementi per selezionare tutto un determinato elemento.

133
00:10:28,720 --> 00:10:31,780
Tutti gli ALWIS divengono tutti i paragrafi.

134
00:10:32,120 --> 00:10:39,730
Abbiamo il selettore ID che selezionerà l'elemento con l'ID corrispondente e abbiamo sempre bisogno di usare

135
00:10:39,730 --> 00:10:41,120
un'ottava per quello.

136
00:10:41,240 --> 00:10:42,590
O un simbolo di hash.

137
00:10:42,970 --> 00:10:48,300
E poi abbiamo il selettore di classe che è molto simile al selettore ID tranne che selezioniamo in base al nome di

138
00:10:48,310 --> 00:10:54,010
una classe e una classe può verificarsi tutte le volte che vogliamo su una determinata pagina a differenza di un ID che è

139
00:10:54,000 --> 00:10:54,790
solo una volta