1
00:00:00,000 --> 00:00:05,660
>> [RIPRODUZIONE DI BRANI MUSICALI]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Allora diamo un altro
il video per parlare di un altro linguaggio.

3
00:00:08,740 --> 00:00:10,800
Questa volta parleremo di CSS.

4
00:00:10,800 --> 00:00:13,460
Così CSS, che è l'abbreviazione di
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
è un altro linguaggio che usiamo
nella costruzione di siti web.

6
00:00:16,149 --> 00:00:17,190
Pensateci come questo.

7
00:00:17,190 --> 00:00:20,900
Se l'HTML è quello che usiamo per organizzare la
contenuti vogliamo mettere sulla nostra pagina,

8
00:00:20,900 --> 00:00:25,390
CSS è lo strumento che generalmente usiamo
per personalizzare i nostri siti web aspetto,

9
00:00:25,390 --> 00:00:30,410
e come l'esperienza utente davvero
è, interagendo con il nostro sito web.

10
00:00:30,410 --> 00:00:32,535
>> Simile a HTML, CSS è
non un linguaggio di programmazione.

11
00:00:32,535 --> 00:00:33,451
Non ha logica.

12
00:00:33,451 --> 00:00:34,595
Non ha variabili.

13
00:00:34,595 --> 00:00:38,890
Essa non ha alcun tipo di quella
flusso che le cose relative C fa.

14
00:00:38,890 --> 00:00:40,150
E 'un linguaggio stile.

15
00:00:40,150 --> 00:00:42,810
E la sua sintassi è abbastanza
semplice, e basta descrive

16
00:00:42,810 --> 00:00:46,240
come gli elementi della nostra
pagina hanno certo HTML

17
00:00:46,240 --> 00:00:48,190
elementi dovrebbero essere modificati.

18
00:00:48,190 --> 00:00:51,170
A tal fine, se non si dispone di
ancora visto il nostro video su HTML,

19
00:00:51,170 --> 00:00:53,290
o non hanno familiarità con
HTML in generale, si

20
00:00:53,290 --> 00:00:57,430
potrebbe voler dare un'occhiata a che
prima, perché questa discussione CSS

21
00:00:57,430 --> 00:01:00,700
sta per dipendere da
qualche conoscenza di HTML.

22
00:01:00,700 --> 00:01:03,740
>> Quindi, ecco un davvero
semplice foglio di stile CSS.

23
00:01:03,740 --> 00:01:06,480
Anche se non avete mai
programmato con i CSS prima,

24
00:01:06,480 --> 00:01:10,624
Sono abbastanza sicuro che si può capire
esattamente ciò che questo foglio di stile fa.

25
00:01:10,624 --> 00:01:11,290
Che cosa fa?

26
00:01:11,290 --> 00:01:15,470
Ebbene, applicato al corpo del nostro web
pagina, tutto tra i tag body

27
00:01:15,470 --> 00:01:19,631
sul nostro HTML, e imposta la
colore di sfondo della pagina di blu.

28
00:01:19,631 --> 00:01:21,130
Beh, è ​​molto semplice foglio di stile.

29
00:01:21,130 --> 00:01:23,269
In realtà è molto umano
lingua amichevole, CSS.

30
00:01:23,269 --> 00:01:26,560
Quindi, anche se non hai mai usato prima,
probabilmente potrebbe indovinare che cosa che ha fatto.

31
00:01:26,560 --> 00:01:30,140
Infatti, se abbiamo caricato una pagina, dove
questo foglio di stile è stato incorporato in qualche modo,

32
00:01:30,140 --> 00:01:36,240
il colore della nostra pagina di fondo sarebbe
essere blu, e non il bianco standard.

33
00:01:36,240 --> 00:01:37,670
>> Quindi, come possiamo costruire fogli di stile?

34
00:01:37,670 --> 00:01:39,700
Ben prima, dobbiamo
identificare un selettore.

35
00:01:39,700 --> 00:01:42,970
Nell'ultimo esempio,
selettore che era il corpo.

36
00:01:42,970 --> 00:01:45,050
Poi abbiamo un open
parentesi graffa, e siamo

37
00:01:45,050 --> 00:01:48,410
andare per iniziare a definire il
foglio di stile per questo selettore.

38
00:01:48,410 --> 00:01:51,800
Tra le parentesi graffe, abbiamo
basta avere una lista di coppie di valori chiave.

39
00:01:51,800 --> 00:01:56,205
La coppia valore precedente era
colore di sfondo blu e virgola,

40
00:01:56,205 --> 00:01:57,830
ma potremmo fare di più e più di questi.

41
00:01:57,830 --> 00:02:02,330
Si potrebbe avere più cose applicazione
a quel tag, quel corpo selettore.

42
00:02:02,330 --> 00:02:05,960
Ciascuno di essi è separato da una
virgola, e noi chiamiamo ognuno di loro

43
00:02:05,960 --> 00:02:08,949
una dichiarazione, una dichiarazione CSS.

44
00:02:08,949 --> 00:02:12,410
Quando abbiamo finito con tutte le abbiamo styling
voler applicare a quel particolare etichetta,

45
00:02:12,410 --> 00:02:15,300
non ci resta che una graffa di chiusura
preparatevi per terminare il foglio di stile,

46
00:02:15,300 --> 00:02:19,640
e abbiamo finito la definizione del foglio di stile
per quel particolare selettore.

47
00:02:19,640 --> 00:02:21,341
>> Quali sono alcune proprietà comuni CSS?

48
00:02:21,341 --> 00:02:23,590
Beh, forse si vuole mettere
un bordo intorno a qualcosa.

49
00:02:23,590 --> 00:02:26,850
Così si può dire, di confine,
che sarebbe la chiave,

50
00:02:26,850 --> 00:02:29,460
e poi i valori sarebbero,
ciò che lo stile, il colore, e la larghezza

51
00:02:29,460 --> 00:02:30,209
si vuole che sia.

52
00:02:30,209 --> 00:02:33,530
Quindi lo stile potrebbe essere un solido
linea, una linea tratteggiata, una linea tratteggiata,

53
00:02:33,530 --> 00:02:36,020
una linea di cresta, che sarebbe linea ondulata.

54
00:02:36,020 --> 00:02:38,790
Forse si vuole avere
essere blu o nero o verde.

55
00:02:38,790 --> 00:02:41,490
Forse si vuole che sia
1 o 2 o 10 pixel di larghezza.

56
00:02:41,490 --> 00:02:43,254
È possibile specificare tutte quelle cose.

57
00:02:43,254 --> 00:02:46,420
Forse si vuole impostare lo sfondo
colore della tua pagina in un modo particolare.

58
00:02:46,420 --> 00:02:49,215
Abbiamo già visto che, l'impostazione del
sfondo del corpo per essere blu.

59
00:02:49,215 --> 00:02:52,080
>> Quindi è possibile utilizzare una parola chiave,
così CSS ha determinati colori

60
00:02:52,080 --> 00:02:55,950
che sono costruiti in esso, blu, verde,
nero, a colori molto semplici che conosciamo.

61
00:02:55,950 --> 00:02:59,110
Ma si può anche specificare qualsiasi
colore esadecimale che desideri.

62
00:02:59,110 --> 00:03:05,190
Ricordiamo che i colori possono essere identificati
da un insieme di tre numeri esadecimali

63
00:03:05,190 --> 00:03:08,500
da 0 a 255, e rg b, la
componente rossa, verde e blu.

64
00:03:08,500 --> 00:03:10,590
E così possiamo specificare
qualsiasi colore che vogliamo da,

65
00:03:10,590 --> 00:03:15,520
invece di utilizzare blu o verde o nero,
utilizzando sterlina e poi sei cifre esadecimale,

66
00:03:15,520 --> 00:03:18,310
e che ci darebbe
il colore sei cifre.

67
00:03:18,310 --> 00:03:19,850
Ecco, questo è il colore di sfondo.

68
00:03:19,850 --> 00:03:21,975
>> Abbiamo anche il primo piano
colore, che è di solito

69
00:03:21,975 --> 00:03:24,140
sarà il testo della pagina.

70
00:03:24,140 --> 00:03:28,850
E allo stesso modo si potrebbe farlo
con la parola chiave e o sei cifre esadecimale.

71
00:03:28,850 --> 00:03:32,140
Così si può specificare qualsiasi colore
desiderare per il testo della pagina

72
00:03:32,140 --> 00:03:36,370
contro una particolare
colore di sfondo, in alto.

73
00:03:36,370 --> 00:03:39,100
È inoltre possibile modificare e trattare
con carattere, e il testo strada

74
00:03:39,100 --> 00:03:40,400
è reso sulla pagina.

75
00:03:40,400 --> 00:03:42,010
>> Quindi è possibile modificare la dimensione dei caratteri.

76
00:03:42,010 --> 00:03:46,320
È possibile utilizzare parole chiave, come in più,
extra small, o xx piccole, o media,

77
00:03:46,320 --> 00:03:47,660
grande, e così via.

78
00:03:47,660 --> 00:03:50,750
È possibile utilizzare punti fissi, 10
punto, punto 12, e così via.

79
00:03:50,750 --> 00:03:55,850
È possibile utilizzare le percentuali, 80%, 20%,
dove 100% è il carattere predefinito

80
00:03:55,850 --> 00:03:59,220
dimensioni, che di solito è andando
essere qualcosa come 11 o 12 punti.

81
00:03:59,220 --> 00:04:01,659
Oppure si può anche basare fuori
della dimensione del font più recente.

82
00:04:01,659 --> 00:04:04,950
Se hai appena scritto qualcosa e si sa
quello che vuoi è per essere più piccolo,

83
00:04:04,950 --> 00:04:08,241
ma non si sa esattamente che misura vi
Voglio che sia, beh, si può solo dire,

84
00:04:08,241 --> 00:04:09,330
dimensione del carattere più piccolo.

85
00:04:09,330 --> 00:04:14,344
E baserà largo della,
appena sopra, è la dimensione del carattere.

86
00:04:14,344 --> 00:04:15,760
E si può ottenere piccole o più grandi.

87
00:04:15,760 --> 00:04:18,390
Quindi c'è un sacco di diverso
modi per specificare la dimensione del carattere.

88
00:04:18,390 --> 00:04:20,690
>> È inoltre possibile specificare cosa
carattere familiare che si desidera.

89
00:04:20,690 --> 00:04:23,360
Se si dispone di un particolare
nome, c'è un modo in CSS--

90
00:04:23,360 --> 00:04:27,270
non stiamo andando a parlarne
qui-- per definire un carattere molto specifico

91
00:04:27,270 --> 00:04:28,980
e incorporare nella propria pagina.

92
00:04:28,980 --> 00:04:30,620
È inoltre possibile utilizzare nomi generici.

93
00:04:30,620 --> 00:04:33,540
C'è un sacco di web font sicuri
che sono pre-definiti nei CSS.

94
00:04:33,540 --> 00:04:36,352
E se sei un utente di Microsoft
Ufficio negli ultimi 20 anni,

95
00:04:36,352 --> 00:04:38,810
siete probabilmente familiarità con
molti di questi font web sicuri

96
00:04:38,810 --> 00:04:44,640
già, Times New Roman, Arial,
Courier New, Georgia, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
Eccetera.

98
00:04:45,470 --> 00:04:47,170
Questi sono tutti considerati web font sicuri.

99
00:04:47,170 --> 00:04:49,169
E in realtà, parte della
ragione per cui è venuto per essere

100
00:04:49,169 --> 00:04:54,140
doveva essere usato per fare web-- ogni pagina
aveva accesso a questo set predefinito dei font

101
00:04:54,140 --> 00:04:58,480
con varie terminazioni, e tutto questo
roba tipo di carattere che non entreremo in,

102
00:04:58,480 --> 00:05:01,130
ma queste sono di solito
accessibile nel CSS,

103
00:05:01,130 --> 00:05:04,029
anche se non lo fai
altrimenti definire i font.

104
00:05:04,029 --> 00:05:07,070
Infine, è possibile allineare il testo,
invece di essere, per impostazione predefinita, in linea

105
00:05:07,070 --> 00:05:09,310
verso sinistra, si potrebbe
allinearlo a destra,

106
00:05:09,310 --> 00:05:13,740
o si potrebbe allinearlo centrato, o
giustificata in modo che entrambi i margini colpito.

107
00:05:13,740 --> 00:05:16,800
Così quelli sono tutte le opzioni che è possibile utilizzare
di cambiare ciò che il testo sembra,

108
00:05:16,800 --> 00:05:20,120
e come è visualizzato sulla tua pagina.

109
00:05:20,120 --> 00:05:22,180
>> I vostri selettori non lo fanno
devono essere solo i tag.

110
00:05:22,180 --> 00:05:25,539
Abbiamo già visto un tag body
selettore, e selettore di tag

111
00:05:25,539 --> 00:05:26,580
ha un aspetto proprio così.

112
00:05:26,580 --> 00:05:30,020
È il nome di un tag, e poi si
definire un foglio di stile per il tag.

113
00:05:30,020 --> 00:05:32,660
Ma si può anche fare qualcosa
chiamato un selettore ID.

114
00:05:32,660 --> 00:05:34,390
Un selettore ID sembra piuttosto simile.

115
00:05:34,390 --> 00:05:38,100
A meno di notare, che ora non sto usando
un tag HTML, sto usando, in questo caso,

116
00:05:38,100 --> 00:05:40,720
#unique o hash univoco.

117
00:05:40,720 --> 00:05:42,930
Se vi ricordate dal nostro
video su HTML, abbiamo parlato

118
00:05:42,930 --> 00:05:45,620
su come tag possono avere attributi.

119
00:05:45,620 --> 00:05:48,340
>> E un attributo che si applica
a praticamente tutti i tag HTML,

120
00:05:48,340 --> 00:05:51,440
ma non abbiamo parlato a questo proposito,
è qualcosa che si chiama un tag ID.

121
00:05:51,440 --> 00:05:55,250
Così questo particolare CSS sarebbe
si applicano solo alle tag HTML che ha

122
00:05:55,250 --> 00:05:58,530
un ID molto specifico, che hai chiamato.

123
00:05:58,530 --> 00:06:01,000
Quindi, se avete qualche parte
nel codice, da qualche parte

124
00:06:01,000 --> 00:06:06,090
nel file HTML, un tag e si
specificare come attributo a quel tag,

125
00:06:06,090 --> 00:06:09,060
ID è uguale unico, questo
particolare foglio di stile

126
00:06:09,060 --> 00:06:15,030
qui si applica solo in mezzo
che etichetta con l'ID di unico.

127
00:06:15,030 --> 00:06:17,180
>> È anche possibile fare qualcosa
chiamato un selettore di classe.

128
00:06:17,180 --> 00:06:19,920
Così oltre ad avere
ID attributi, è anche possibile

129
00:06:19,920 --> 00:06:23,130
aggiungere un attributo di classe per i tag HTML.

130
00:06:23,130 --> 00:06:27,140
E quando si utilizza un attributo di classe,
può essere applicato a più tag.

131
00:06:27,140 --> 00:06:31,880
Quindi, se avete parecchie cose che
sono simili, forse si vuole dire,

132
00:06:31,880 --> 00:06:35,890
tag aperto bla, bla, bla,
bla, di classe uguale studenti.

133
00:06:35,890 --> 00:06:38,190
E poi questo particolare
foglio di stile si applica

134
00:06:38,190 --> 00:06:42,041
per ogni tag cui classe è studenti.

135
00:06:42,041 --> 00:06:44,290
In questo caso, avremmo impostato il
colore di sfondo giallo,

136
00:06:44,290 --> 00:06:46,706
e ci piacerebbe impostare l'opacità, che
è una variabile non abbiamo parlato,

137
00:06:46,706 --> 00:06:52,510
ma si occupa solo con il grado di trasparenza
qualcosa è, al 70%, in questo caso.

138
00:06:52,510 --> 00:06:54,430
>> Ci sono due opzioni per
scrittura fogli di stile.

139
00:06:54,430 --> 00:06:56,680
Si possono scrivere
direttamente nel codice HTML

140
00:06:56,680 --> 00:06:59,690
mettendo i fogli di stile
tra tag di stile.

141
00:06:59,690 --> 00:07:03,850
E quei tag di stile vanno all'interno di
i tag head della pagina web.

142
00:07:03,850 --> 00:07:08,240
Il modo forse più preferito da fare
è quello di scrivere un file css separato,

143
00:07:08,240 --> 00:07:12,360
e poi collegarlo nel vostro
documentare utilizzando i tag di collegamento.

144
00:07:12,360 --> 00:07:14,690
Collega variabile, ancora una volta, sono
diverso da collegamenti ipertestuali,

145
00:07:14,690 --> 00:07:16,760
se vi ricordate da nostro video di HTML.

146
00:07:16,760 --> 00:07:19,030
E tag di collegamento sono il modo in cui
tirare in file separati.

147
00:07:19,030 --> 00:07:23,900
E 'un po' come l'equivalente di
la # include per la programmazione web.

148
00:07:23,900 --> 00:07:27,140
>> Quindi, diamo uno sguardo a table.HTML.

149
00:07:27,140 --> 00:07:29,380
Se vi ricordate dal nostro
Video HTML, ho mostrato

150
00:07:29,380 --> 00:07:32,000
un esempio di un
semplice moltiplicazione

151
00:07:32,000 --> 00:07:35,160
tabella che sembrava piuttosto
brutto, e forse c'è

152
00:07:35,160 --> 00:07:38,650
un modo per rendere meglio con
CSS, per farlo apparire effettivamente

153
00:07:38,650 --> 00:07:41,120
più una moltiplicazione
tavolo, o qualcosa del genere

154
00:07:41,120 --> 00:07:43,730
che non è solo bloccato insieme
senza divisione reale

155
00:07:43,730 --> 00:07:45,532
tra le righe e le colonne.

156
00:07:45,532 --> 00:07:47,490
Quindi cerchiamo di testa verso
CS50 IDE, e dare un'occhiata

157
00:07:47,490 --> 00:07:50,780
il modo in cui i CSS può, una sorta di, modificare
quello che abbiamo iniziato con prima,

158
00:07:50,780 --> 00:07:53,290
e ne fanno qualcosa di molto meglio.

159
00:07:53,290 --> 00:07:55,650
>> Quindi siamo in CS50 IDE
ora, e se non familiare,

160
00:07:55,650 --> 00:07:58,710
ci fermiamo a questo
tabella pagina HTML.

161
00:07:58,710 --> 00:08:01,090
Table.HTML fondamentalmente
solo definisce i contenuti

162
00:08:01,090 --> 00:08:05,044
di un multiple-- doveva essere
un tavolo quattro per quattro moltiplicazione.

163
00:08:05,044 --> 00:08:06,210
E 'piuttosto semplice.

164
00:08:06,210 --> 00:08:09,410
E si potrebbe pensare che sarebbe
guardare piuttosto ben organizzato.

165
00:08:09,410 --> 00:08:15,277
Ma in realtà, quando prevediamo questa pagina,
si vede che è una specie di brutto, giusto?

166
00:08:15,277 --> 00:08:16,860
Chiaramente abbiamo righe e colonne qui.

167
00:08:16,860 --> 00:08:18,350
C'è una sorta di separazione.

168
00:08:18,350 --> 00:08:20,040
Ma non è una separazione significativa.

169
00:08:20,040 --> 00:08:23,105
Non stiamo in realtà sempre
troppe informazioni qui.

170
00:08:23,105 --> 00:08:25,730
E non c'è separazione tra
le righe e le colonne in termini

171
00:08:25,730 --> 00:08:28,460
delle regole orizzontali o verticali.

172
00:08:28,460 --> 00:08:31,530
Potremmo probabilmente fare questo
guardare un po 'meglio.

173
00:08:31,530 --> 00:08:32,934
Così proviamo.

174
00:08:32,934 --> 00:08:34,559
Quindi ho intenzione di chiudere questa scheda qui.

175
00:08:34,559 --> 00:08:37,434
E ho intenzione di chiudere la mia table.HTML,
e ho un'altra versione qui

176
00:08:37,434 --> 00:08:39,490
chiamato table2.HTML.

177
00:08:39,490 --> 00:08:40,655
Apriremo che fino.

178
00:08:40,655 --> 00:08:42,530
Il corpo della pagina è
praticamente lo stesso,

179
00:08:42,530 --> 00:08:44,238
ma ho cambiato un
po 'in alto.

180
00:08:44,238 --> 00:08:47,132
E farò scorrere qui.

181
00:08:47,132 --> 00:08:49,340
Si noti che questa volta, io sono
utilizzando tag di stile incorporati.

182
00:08:49,340 --> 00:08:53,550
Ho aperto un tag di stile, e sono ora
la definizione di un foglio di stile CSS appena dentro

183
00:08:53,550 --> 00:08:54,310
di esso.

184
00:08:54,310 --> 00:08:56,310
Ho un foglio di stile che dice, tavolo.

185
00:08:56,310 --> 00:08:58,170
Questo è il mio selettore di tag.

186
00:08:58,170 --> 00:09:01,340
Non sto usando punti o hash,
che io farei se io

187
00:09:01,340 --> 00:09:03,710
era utilizzando un ID o un selettore di classe.

188
00:09:03,710 --> 00:09:06,190
Ho un selettore di tag tavolo qui--.

189
00:09:06,190 --> 00:09:10,090
Questo stile sta per
si applicano a tutti i tag table.

190
00:09:10,090 --> 00:09:14,950
A quanto pare voglio mettere uno
pixel di larghezza, bordo blu solido,

191
00:09:14,950 --> 00:09:15,779
dentro il mio tavolo.

192
00:09:15,779 --> 00:09:18,320
Che suona come sarebbe probabilmente
aiutare la situazione, giusto?

193
00:09:18,320 --> 00:09:20,320
Stiamo per avere
le cose sembrano molto meglio.

194
00:09:20,320 --> 00:09:21,190
Quindi questo è bene.

195
00:09:21,190 --> 00:09:23,540
Stilisticamente, ho appena
incorporato il mio foglio di stile qui.

196
00:09:23,540 --> 00:09:25,100
E 'certamente un
modo accettabile per farlo.

197
00:09:25,100 --> 00:09:26,391
Vediamo cosa questo assomiglia.

198
00:09:26,391 --> 00:09:29,790
Quindi io tornerò qui, e
Io voglio vedere in anteprima il mio table2.HTML.

199
00:09:29,790 --> 00:09:32,430

200
00:09:32,430 --> 00:09:36,470
Beh, questo non è proprio quello che volevo,
ma è esattamente quello che abbiamo chiesto.

201
00:09:36,470 --> 00:09:39,530
Abbiamo detto che questo stile è
andando a rivolgersi al nostro tavolo.

202
00:09:39,530 --> 00:09:43,810
Il nostro tavolo ha ora un un pixel
ampia solido confine, blu intorno ad esso.

203
00:09:43,810 --> 00:09:46,237
Non stiamo in realtà sempre
le celle della tabella.

204
00:09:46,237 --> 00:09:47,570
Siamo appena al tavolo.

205
00:09:47,570 --> 00:09:49,310
Così CSS ha funzionato.

206
00:09:49,310 --> 00:09:51,890
Esso ha applicato un
foglio di stile al nostro tavolo.

207
00:09:51,890 --> 00:09:53,981
Ma non riusciva a fare
quello che volevamo che facesse.

208
00:09:53,981 --> 00:09:55,730
Come si arriva a fare
quello che vogliamo fare?

209
00:09:55,730 --> 00:09:59,287
>> Bene, diamo un'occhiata a un altro
versione di questo in table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Quindi Sto solo andando a chiudere queste schede.

211
00:10:00,870 --> 00:10:03,890
Ho intenzione di tornare qui per la mia
file di albero, e di aprire table3.HTML.

212
00:10:03,890 --> 00:10:07,680

213
00:10:07,680 --> 00:10:10,350
Anche in questo caso, sta andando a guardare piuttosto
simile qui all'inizio.

214
00:10:10,350 --> 00:10:14,460
Ma notate, questa volta, invece di utilizzare
un foglio di stile incorporato proprio lì,

215
00:10:14,460 --> 00:10:18,870
Ho intenzione di collegare in un
foglio di stile utilizzando il tag link.

216
00:10:18,870 --> 00:10:22,480
Quindi sono a quanto pare il collegamento in un
foglio di stile chiamato tables.CSS,

217
00:10:22,480 --> 00:10:25,090
e questo bene è uguale
foglio di stile solo means-- bene,

218
00:10:25,090 --> 00:10:28,645
che cosa è questo file rispetto a quanto
Sono doing-- è un foglio di stile che sono

219
00:10:28,645 --> 00:10:29,821
usando per la mia pagina.

220
00:10:29,821 --> 00:10:32,320
Quindi, se voglio davvero vedere cosa
Che sto facendo con il CSS qui,

221
00:10:32,320 --> 00:10:35,010
Ho bisogno di andare aperto che
table.CSS il file come bene.

222
00:10:35,010 --> 00:10:37,490
Quindi ci torneremo qui
di nuovo al nostro albero di file.

223
00:10:37,490 --> 00:10:38,660
C'è table.CSS.

224
00:10:38,660 --> 00:10:40,490
Ti pop aperto.

225
00:10:40,490 --> 00:10:43,070
Ora stiamo vedendo un po 'di CSS.

226
00:10:43,070 --> 00:10:45,630
A quanto pare, ho un paio
di cose succedendo qui.

227
00:10:45,630 --> 00:10:48,950
Mi pare voglio mettere un cinque
pixel di larghezza, bordo rosso solido,

228
00:10:48,950 --> 00:10:50,287
intorno al mio tavolo.

229
00:10:50,287 --> 00:10:52,870
Sappiamo già che quello che sta succedendo
andare solo sul perimetro.

230
00:10:52,870 --> 00:10:56,180
Abbiamo visto che in table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Con ogni fila, io
a quanto pare voler specificare

232
00:10:58,770 --> 00:11:01,950
che l'altezza della riga è alto 50 pixel.

233
00:11:01,950 --> 00:11:05,680
Così, per ogni riga, ricordare
questo è ciò che il tag TR fa,

234
00:11:05,680 --> 00:11:08,550
Io sto facendo alta 50 pixel.

235
00:11:08,550 --> 00:11:09,804
>> Infine, ho questo commento.

236
00:11:09,804 --> 00:11:11,470
E questo è il modo in cui facciamo i commenti nei CSS.

237
00:11:11,470 --> 00:11:16,174
E 'molto simile a cogliere blocco
commenti sintassi della barra stella.

238
00:11:16,174 --> 00:11:17,090
Tutto il testo desiderato.

239
00:11:17,090 --> 00:11:19,470
Non c'è barra barra se in CSS.

240
00:11:19,470 --> 00:11:23,400
Per brevi commenti in linea, abbiamo
Per utilizzare questo particolare formato qui.

241
00:11:23,400 --> 00:11:26,830
Sembra che sto facendo un
molte cose nei miei tag td.

242
00:11:26,830 --> 00:11:29,710
Ricordate tag td, o tavolo
dati, che in realtà sono solo

243
00:11:29,710 --> 00:11:32,210
le colonne all'interno di
i nostri file, e apparentemente

244
00:11:32,210 --> 00:11:35,090
per ciascun dato
nel mio tavolo, voglio

245
00:11:35,090 --> 00:11:38,850
per impostare il colore di sfondo
essere nero, il colore ad essere bianco,

246
00:11:38,850 --> 00:11:40,320
il colore è colore di primo piano.

247
00:11:40,320 --> 00:11:42,360
Quindi questo sarà
il testo della mia pagina.

248
00:11:42,360 --> 00:11:45,140
Voglio grande fonte, 22
punto di carattere, e voglio

249
00:11:45,140 --> 00:11:47,001
che sia della famiglia di font, Georgia.

250
00:11:47,001 --> 00:11:48,750
Quindi io non ho intenzione di
sono disponibili i font di default.

251
00:11:48,750 --> 00:11:51,820
Io vado a specificare Georgia, che
è uno di quei web font sicuri

252
00:11:51,820 --> 00:11:53,830
che abbiamo visto prima.

253
00:11:53,830 --> 00:11:57,284
Voglio che il mio testo da allineare
centralmente, nel mezzo della scatola,

254
00:11:57,284 --> 00:11:59,450
Io non voglio che sia lasciato
allineato o allineato a destra.

255
00:11:59,450 --> 00:12:03,461
E voglio la mia larghezza della colonna
per essere di 50 pixel di larghezza pure.

256
00:12:03,461 --> 00:12:05,210
Diamo uno sguardo a
ciò che questo sembra,

257
00:12:05,210 --> 00:12:07,470
e vedere se questo è forse un miglioramento.

258
00:12:07,470 --> 00:12:12,890
Quindi ho intenzione di andare a table3.HTML, che
richiamo, comprende table.CSS come un link,

259
00:12:12,890 --> 00:12:14,830
e noi Anteprima esso.

260
00:12:14,830 --> 00:12:16,800
Questo è molto meglio, giusto?

261
00:12:16,800 --> 00:12:20,004
Questo è in realtà cominciando a guardare un
molto più simile a una tavola pitagorica.

262
00:12:20,004 --> 00:12:21,920
Ho bordo rosso che
intorno al mio tavolo, ma ora

263
00:12:21,920 --> 00:12:26,700
Ho anche precisato che
ogni riga è largo 50 pixel,

264
00:12:26,700 --> 00:12:30,220
o è 50 pixel tall-- scusa
me-- ogni colonna è larga 50 pixel.

265
00:12:30,220 --> 00:12:34,251
I dati in ogni colonna, e solo
i dati, ha uno sfondo nero.

266
00:12:34,251 --> 00:12:36,000
Ecco perché quelli
linee bianche ci sono.

267
00:12:36,000 --> 00:12:38,836
Poiché lo spazio
tra tutte quelle cellule,

268
00:12:38,836 --> 00:12:40,710
non è un confine
di per sé, è solo

269
00:12:40,710 --> 00:12:43,170
Sto compilando solo in
cellule, che effettivamente

270
00:12:43,170 --> 00:12:46,310
rende i bordi della tabella, che
a quanto pare non esisteva da sempre, è

271
00:12:46,310 --> 00:12:47,887
era solo linee bianche sottili.

272
00:12:47,887 --> 00:12:48,720
Ora sono visibili.

273
00:12:48,720 --> 00:12:50,380
Ora essi pop fuori sullo schermo.

274
00:12:50,380 --> 00:12:52,920
E quindi questo è molto semplice
foglio di stile che ho applicato,

275
00:12:52,920 --> 00:12:56,850
e ora la mia tabella è molto più simile
un tavolo quattro per quattro moltiplicazione,

276
00:12:56,850 --> 00:13:00,950
invece di un pasticcio solo confuso, dove
tutto è chiaramente righe e colonne,

277
00:13:00,950 --> 00:13:03,717
ma non super ben organizzato.

278
00:13:03,717 --> 00:13:06,800
Siamo davvero solo l'inizio
di cosa si può fare con i CSS qui.

279
00:13:06,800 --> 00:13:10,330
Fortunatamente la documentazione CSS
è abbastanza semplice.

280
00:13:10,330 --> 00:13:14,000
Userete molte delle sue
attributi, abbastanza di frequente.

281
00:13:14,000 --> 00:13:16,087
Quelli di cui abbiamo parlato
in precedenza in questo video.

282
00:13:16,087 --> 00:13:18,170
Ci sono molti che si
probabilmente non userà tutti.

283
00:13:18,170 --> 00:13:19,469
E va bene, anche.

284
00:13:19,469 --> 00:13:22,010
Ma è sufficiente sapere, che c'è un
molta documentazione là fuori.

285
00:13:22,010 --> 00:13:25,110
Quindi, anche se non abbiamo fatto coprire tutto,
non sei certo lasciato da solo.

286
00:13:25,110 --> 00:13:26,780
Ma CSS è davvero divertente
a sperimentare.

287
00:13:26,780 --> 00:13:29,040
E vorrei caldamente incoraggiarvi
di giocare con le tue pagine web,

288
00:13:29,040 --> 00:13:32,180
e vedere come si può fare
guardare e sentire per migliorare l'utente

289
00:13:32,180 --> 00:13:34,790
esperienza di visitare la vostra pagina.

290
00:13:34,790 --> 00:13:35,710
Sono Doug Lloyd.

291
00:13:35,710 --> 00:13:37,980
Questo è CS50.

292
00:13:37,980 --> 00:13:40,151