1
00:00:01,300 --> 00:00:04,270
OK, quindi è ora che scriviamo effettivamente C S S.

2
00:00:04,290 --> 00:00:05,400
Molto eccitante.

3
00:00:05,400 --> 00:00:09,000
Prima di farlo, però, abbiamo bisogno di avere un Al di età che possiamo modellare.

4
00:00:09,180 --> 00:00:16,470
Quindi ho intenzione di andare avanti e in sublime creare un nuovo file salvarlo appena messo sul mio tavolo per ora e

5
00:00:16,470 --> 00:00:18,140
lo chiamerò su di me.

6
00:00:18,220 --> 00:00:21,180
HMO.

7
00:00:22,470 --> 00:00:30,400
Usa quel piccolo trucco per ottenere lo scheletro della piastra della caldaia e questa sarà una pagina molto semplice.

8
00:00:30,600 --> 00:00:34,500
Ti sto dicendo che ora non sarà bello quando avremo finito qui.

9
00:00:34,590 --> 00:00:36,110
Cambierà alcuni colori.

10
00:00:36,210 --> 00:00:38,950
Stiamo solo andando oltre le basi di come tutto questo funziona insieme.

11
00:00:39,240 --> 00:00:44,820
Quindi sto andando e ognuno di me e poi

12
00:00:48,450 --> 00:00:52,430
diciamo un prurito per i miei hobby.

13
00:00:52,740 --> 00:00:55,150
Sentiti libero di adattarti a te stesso.

14
00:00:55,530 --> 00:01:12,730
Aggiungiamo una lista e alcuni alleati e andiamo a fare tar cottura al catrame e origami e salvare quel file.

15
00:01:13,110 --> 00:01:14,180
Facciamo un doppio controllo.

16
00:01:14,280 --> 00:01:16,870
Apriamolo.

17
00:01:16,920 --> 00:01:17,480
Grande.

18
00:01:17,550 --> 00:01:19,970
Ecco il nostro meraviglioso sito che stiamo andando a stile.

19
00:01:20,580 --> 00:01:26,650
Quindi, prima di iniziare a scrivere il successo, dobbiamo decidere dove mettere il successo.

20
00:01:26,820 --> 00:01:28,520
E ci sono in realtà alcune scelte.

21
00:01:28,860 --> 00:01:34,800
Quindi nelle note ce ne sono due che sto facendo riferimento a questa pagina e il primo che ti dirò in

22
00:01:34,800 --> 00:01:36,840
questo momento non è una buona idea.

23
00:01:36,840 --> 00:01:41,100
Lo sto mostrando a te solo perché ne sei consapevole per due ragioni.

24
00:01:41,100 --> 00:01:47,430
modellare gli elementi prima del foglio di stile separato e prima che CSSA lo facesse effettivamente in ogni singolo elemento.

25
00:01:47,490 --> 00:01:51,390
Uno di questi è l'unico modo in cui una volta era possibile

26
00:01:51,660 --> 00:01:55,380
Quindi fammi mostrare un esempio.

27
00:01:55,830 --> 00:01:59,140
Voglio rendere questa prima bugia viola.

28
00:01:59,340 --> 00:02:08,000
Direi lo stile e poi nella citazione dico Color Purple e funzionerà.

29
00:02:08,580 --> 00:02:10,800
E questo cambia per essere viola.

30
00:02:11,490 --> 00:02:18,780
Quindi c'è un problema però, che è se voglio che tutti e tre di questi siano viola ho bisogno di andare

31
00:02:18,780 --> 00:02:20,880
avanti e duplicare questo ogni volta.

32
00:02:20,880 --> 00:02:21,910
Il che è molto lavoro

33
00:02:21,990 --> 00:02:27,300
E poi se decido oh no voglio che siano verdi allora ho bisogno di andare e cambiare tre diversi posti

34
00:02:27,870 --> 00:02:28,570
per essere verde.

35
00:02:28,770 --> 00:02:33,960
E ovviamente quel problema è molto peggio quando hai centinaia dello stesso elemento con lo stesso

36
00:02:34,170 --> 00:02:35,940
stile su una determinata pagina.

37
00:02:35,940 --> 00:02:37,200
Quindi questa è una cattiva idea.

38
00:02:37,470 --> 00:02:43,220
E l'altro motivo per cui questa non è una buona idea è che vogliamo separare la nostra h tim L dalla RCA.

39
00:02:43,380 --> 00:02:46,050
È questa idea della separazione delle preoccupazioni.

40
00:02:46,200 --> 00:02:50,030
Vogliamo che il nostro CSSA sia autonomo nel suo stesso file.

41
00:02:50,040 --> 00:02:53,270
Vogliamo invecchiarlo per essere il proprio file con solo la struttura.

42
00:02:53,290 --> 00:02:55,130
C Ss è solo lo stile.

43
00:02:55,230 --> 00:02:58,490
Quindi adesso è una specie di strana miscela dei due.

44
00:02:58,710 --> 00:03:07,010
Quindi mi sbarazzerò di quello e l'altro modo nelle note è qualcosa chiamato attacco di stile.

45
00:03:07,360 --> 00:03:13,740
Quindi un tag di stile ci consente di scrivere la sintassi C Ss in cui selezioniamo effettivamente le cose e abbiamo le parentesi

46
00:03:14,040 --> 00:03:15,580
graffe che non potremmo fare qui.

47
00:03:16,230 --> 00:03:20,590
Ma quello che possiamo fare è farlo all'interno di un documento h tm l.

48
00:03:20,700 --> 00:03:25,530
alcuni tag e selettori C Ss all'interno di qui.

49
00:03:29,940 --> 00:03:40,620
Quindi, se andiamo avanti e creiamo il tag chiamato style e possiamo dargli questo tipo di attributo uguale a text slash

50
00:03:40,890 --> 00:03:43,260
C Ss possiamo ora scrivere

51
00:03:43,470 --> 00:03:52,620
Quindi ricorda che questo è il selettore generale delle regole e quindi abbiamo una proprietà all'interno delle parentesi graffe e poi valore

52
00:03:52,650 --> 00:03:55,240
e quindi un punto e virgola.

53
00:03:55,920 --> 00:03:58,990
Quindi ho intenzione di commentare questo modo di fare commenti.

54
00:03:59,040 --> 00:04:03,870
SS usa la barra e l'asterisco e poi l'asterisco e la barra.

55
00:04:04,230 --> 00:04:06,060
Quindi voglio dire che lascerò questo qui.

56
00:04:06,270 --> 00:04:12,990
E iniziamo cambiando l'H-1 in viola.

57
00:04:13,020 --> 00:04:16,810
Quindi il modo in cui scriviamo che se seguiamo questo modello lo selezioniamo.

58
00:04:17,070 --> 00:04:23,670
Quindi scriverò ognuno di essi e di nuovo passeremo molto tempo su diversi tipi

59
00:04:23,670 --> 00:04:24,680
di selettori.

60
00:04:24,690 --> 00:04:29,640
In questo momento stiamo imparando a conoscere uno chiamato selettore di elementi che ha portato a selezionare

61
00:04:29,760 --> 00:04:32,860
in base a un tipo di elemento che è H-1.

62
00:04:33,300 --> 00:04:38,550
Quindi ora aggiungeremo una proprietà qui e in questo video lo terremo estremamente semplice

63
00:04:38,550 --> 00:04:40,220
e useremo il colore.

64
00:04:40,740 --> 00:04:54,490
che possiamo fare è cambiare tutti gli alleati in modo che siano arancioni e per farlo selezioniamo con un selettore di elementi di nuovo e possiamo farlo subito dopo.

65
00:04:54,490 --> 00:05:03,430
Quindi dirò il colore e poi il viola e salverò il backup o la pagina e otterremo un

66
00:05:03,430 --> 00:05:06,510
H-1 viola Quindi la prossima cosa

67
00:05:06,520 --> 00:05:10,660
Non abbiamo bisogno di virgole o di qualsiasi altra punteggiatura.

68
00:05:10,660 --> 00:05:19,390
Facciamo solo un'altra regola qui applicare le parentesi graffe e questa volta diremo che il colore è arancione.

69
00:05:19,390 --> 00:05:25,780
Quindi il motivo per cui lo stiamo facendo è che voglio mostrarti che questo selettore di Elyse non

70
00:05:25,780 --> 00:05:28,500
solo seleziona una seleziona tutte le bugie.

71
00:05:28,600 --> 00:05:33,340
Quindi aggiorniamo tutti e tre ora sono arancioni.

72
00:05:33,340 --> 00:05:36,220
Allo stesso modo con l'H-1 se avessimo più h.

73
00:05:36,310 --> 00:05:38,190
Quindi aggiungerò solo tre.

74
00:05:38,260 --> 00:05:42,210
Saranno tutti viola.

75
00:05:42,220 --> 00:05:48,850
Un'altra cosa che ti mostrerò qui è se ho bisogno di trovare un altro stile per ciascuno in seguito e

76
00:05:48,850 --> 00:05:50,380
dico che dovrebbe essere blu

77
00:05:54,130 --> 00:05:54,860
diventa blu.

78
00:05:54,910 --> 00:05:56,020
Tutti diventano blu.

79
00:05:56,080 --> 00:06:00,400
E così questo arriva a qualcosa che impareremo molto di più su ciò che

80
00:06:00,400 --> 00:06:02,680
accade quando ci sono informazioni di stile conflittuali.

81
00:06:02,680 --> 00:06:05,200
E in questo caso li abbiamo cambiati tutti per essere viola.

82
00:06:05,410 --> 00:06:07,870
E poi li cambiamo tutti per essere blu.

83
00:06:07,870 --> 00:06:12,510
Quindi quello che è venuto dopo ha vinto la battaglia immagino.

84
00:06:13,560 --> 00:06:14,040
OK.

85
00:06:14,050 --> 00:06:21,520
Quindi il problema con quello che abbiamo appena fatto sembra buono ma sfortunatamente è ancora nel

86
00:06:21,520 --> 00:06:22,550
nostro HMO.

87
00:06:22,690 --> 00:06:27,940
E ho appena finito di dire pochi minuti fa che vogliamo separarcelo o lasciarlo fuori e R

88
00:06:27,940 --> 00:06:30,210
C S noi non vogliamo che siano collegati.

89
00:06:30,320 --> 00:06:35,000
Bene, vogliamo che siano collegati, non vogliamo che i CC vengano annidati all'interno del suo HMO.

90
00:06:35,440 --> 00:06:38,630
Funziona così esattamente allo stesso modo.

91
00:06:38,800 --> 00:06:46,880
Non vediamo alcuna differenza visiva, ma quello che in realtà vogliamo fare è usare un tag link.

92
00:06:47,290 --> 00:06:53,810
Quindi, ciò che un tag link ci consente di scrivere o vedere SS in un file completamente separato e quindi connesso

93
00:06:53,810 --> 00:06:59,830
con il tag link al posto della nostra testa, che fondamentalmente otterrà il contenuto di quel file, anima e

94
00:07:00,190 --> 00:07:01,580
stile, tutto nella nostra epoca.

95
00:07:01,580 --> 00:07:05,090
Tim L. dato il contenuto di quel file.

96
00:07:07,270 --> 00:07:13,780
nuovo file e inseriremo RC SS qui, quindi lo salveremo e lo chiamerò.

97
00:07:13,780 --> 00:07:17,630
Quindi, per scrivere, possiamo iniziare creando un

98
00:07:17,690 --> 00:07:25,420
C Ss lo chiami come vuoi, ma deve essere dot C Ss e lo metto nella

99
00:07:26,230 --> 00:07:28,960
stessa directory del mio file HDMI.

100
00:07:29,050 --> 00:07:37,360
La prossima cosa che farò è definire alcuni stili e qui H-1 diciamo che

101
00:07:37,400 --> 00:07:42,630
il colore è rosso e il colore è verde.

102
00:07:43,240 --> 00:07:46,870
E mentre siamo qui cambiamo anche per questo.

103
00:07:46,870 --> 00:07:49,330
Colore viola.

104
00:07:49,870 --> 00:07:50,830
Grande.

105
00:07:50,980 --> 00:07:58,180
Quindi abbiamo definito i CSSA qui, ovviamente, e per ora lo commenterò.

106
00:07:58,180 --> 00:08:00,750
Naturalmente anche se non sono collegati in questo momento.

107
00:08:01,120 --> 00:08:04,030
Quindi abbiamo creato un file ma non è collegato.

108
00:08:04,180 --> 00:08:06,550
Quindi per farlo dobbiamo usare il tag link.

109
00:08:06,880 --> 00:08:13,810
Quindi mi piacerebbe solo digitare il link e poi premere il tasto e si può vedere che c'è questo importante attributo che il

110
00:08:14,210 --> 00:08:19,570
testo sublime ci vuole compilare, che è chiamato A-Trak e funziona proprio come il trogolo su un tag

111
00:08:19,570 --> 00:08:22,110
di ancoraggio e che sarebbe dagli un arrivo.

112
00:08:22,140 --> 00:08:24,900
Diamo un posto per trovare il file.

113
00:08:24,940 --> 00:08:35,140
Quindi in questo caso questo file è appena chiamato apt, quindi scriviamo semplicemente abducts yes save and refresh.

114
00:08:35,140 --> 00:08:42,540
Ora puoi vedere che abbiamo letto H-1 una pagina viola 4 e alleati verdi, quindi facciamo tutto ciò che faremo.

115
00:08:42,540 --> 00:08:43,920
Per quanto riguarda lo styling per ora.

116
00:08:44,110 --> 00:08:50,440
Quindi per ricapitolare qui la prima cosa di cui abbiamo discusso è usare l'attributo style per aggiungere uno stile in

117
00:08:50,620 --> 00:08:57,070
linea che assomiglia a questo stile e poi dargli una proprietà e questa è una cattiva idea per due ragioni.

118
00:08:57,160 --> 00:09:01,420
Il primo è che non vogliamo ingombrare o H Tim L con un mucchio di stili.

119
00:09:01,480 --> 00:09:02,890
Vogliamo che siano separati.

120
00:09:03,160 --> 00:09:06,860
E la seconda ragione è che è un dolore se vogliamo cambiare le cose.

121
00:09:07,150 --> 00:09:11,500
È un sacco di duplicati se vogliamo rendere tutto un thread 3H.

122
00:09:11,530 --> 00:09:14,850
Dobbiamo copiare quel codice in tre diversi posti.

123
00:09:15,340 --> 00:09:21,550
La prossima cosa che abbiamo imparato è stata l'utilizzo del tag style e il tag style ci ha permesso di scrivere C S

124
00:09:21,640 --> 00:09:23,110
noi all'interno del nostro h Timo.

125
00:09:23,410 --> 00:09:24,940
E funziona bene.

126
00:09:24,940 --> 00:09:30,010
Ci permette di usare la sintassi CSSA in cui possiamo selezionarli tutti in una volta.

127
00:09:30,010 --> 00:09:34,710
Il problema è che non vogliamo mettere R C S S direttamente arrabbiato.

128
00:09:35,230 --> 00:09:39,940
di qualcosa che vuoi aggiungere rapidamente alcuni stili, non vuoi creare un nuovo file e quindi collegarti.

129
00:09:40,180 --> 00:09:42,880
Ma lo userai occasionalmente se stai eseguendo il debug

130
00:09:42,920 --> 00:09:44,480
In seguito lo cancellerai.

131
00:09:44,590 --> 00:09:46,100
Quindi è davvero il momento in cui lo uso.

132
00:09:46,100 --> 00:09:48,530
È solo per scopi di dimostrazione rapidi.

133
00:09:48,730 --> 00:09:53,670
Ma quello che in realtà vogliamo usare è il tag link il tag link.

134
00:09:53,860 --> 00:09:55,810
È solo un riferimento a un altro file.

135
00:09:55,960 --> 00:10:02,020
Quindi abbiamo bisogno che un file pieno di stili abbia bisogno di terminare con Dotsie per valutarlo, salvarlo e quindi

136
00:10:02,020 --> 00:10:05,800
collegarlo con l'attributo ref H e questo è tutto ciò che dobbiamo fare.

137
00:10:05,800 --> 00:10:12,550
Una cosa che ho dimenticato di menzionare è che vuoi assolutamente mettere in testa tag e stili di link.

138
00:10:12,790 --> 00:10:17,110
Questo è davvero il punto della testa, è dove metti le cose che non sono realmente nella pagina,

139
00:10:17,110 --> 00:10:22,600
non gli elementi ma le cose che hanno a che fare con quegli elementi, quindi i font che stai includendo i fogli di

140
00:10:22,900 --> 00:10:24,190
stile e infine quelli di javascript