1
00:00:00,000 --> 00:00:05,660
>> [Glazbom]

2
00:00:05,660 --> 00:00:08,740
>> Doug LLOYD: Pa neka je još jedan
Video govoriti o još jednom jeziku.

3
00:00:08,740 --> 00:00:10,800
Ovaj put ćemo razgovarati o CSS.

4
00:00:10,800 --> 00:00:13,460
Dakle CSS, što je kratica za
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
je još jedan jezik koristimo
kod gradnje web stranice.

6
00:00:16,149 --> 00:00:17,190
Razmislite o tome kao što je ovaj.

7
00:00:17,190 --> 00:00:20,900
Ako HTML je ono što ćemo koristiti za organizaciju
Sadržaj želimo staviti na našoj stranici,

8
00:00:20,900 --> 00:00:25,390
CSS je alat koji se uglavnom koriste
prilagoditi kako naše web stranice izgledaju,

9
00:00:25,390 --> 00:00:30,410
i kako je korisničko iskustvo stvarno
je, u interakciji s naše web stranice.

10
00:00:30,410 --> 00:00:32,535
>> Slično HTML, CSS
Ne programski jezik.

11
00:00:32,535 --> 00:00:33,451
To nema logike.

12
00:00:33,451 --> 00:00:34,595
To ne mora varijable.

13
00:00:34,595 --> 00:00:38,890
To ne imati bilo kakve da
teku u vezi stvari koje ne C.

14
00:00:38,890 --> 00:00:40,150
To je jezik styling.

15
00:00:40,150 --> 00:00:42,810
I njegova sintaksa je lijepa
jednostavno, i samo opisuje

16
00:00:42,810 --> 00:00:46,240
kako su elementi našeg
Stranica imaju određenu HTML

17
00:00:46,240 --> 00:00:48,190
elemente treba mijenjati.

18
00:00:48,190 --> 00:00:51,170
U tom smislu, ako niste
Još je gledala naš video na HTML,

19
00:00:51,170 --> 00:00:53,290
ili su upoznati s
HTML općenito, te

20
00:00:53,290 --> 00:00:57,430
svibanj želite pogledati kako
Prvo, jer je ova rasprava o CSS

21
00:00:57,430 --> 00:01:00,700
će ovisiti o
neko znanje o HTML-u.

22
00:01:00,700 --> 00:01:03,740
>> Dakle, ovdje je stvarno
Jednostavan CSS stylesheet.

23
00:01:03,740 --> 00:01:06,480
Čak i ako ste nikada
programiran s CSS prije,

24
00:01:06,480 --> 00:01:10,624
Prilično sam siguran da mogu shvatiti
upravo ono što ovaj stylesheet radi.

25
00:01:10,624 --> 00:01:11,290
Što to radi?

26
00:01:11,290 --> 00:01:15,470
Pa, primjenjuju na tijelo naše web
stranica, sve što je između tijela oznake

27
00:01:15,470 --> 00:01:19,631
na našem HTML, i to postavlja
Boja pozadine toj stranici u plavo.

28
00:01:19,631 --> 00:01:21,130
Pa, to je vrlo jednostavan stilovima.

29
00:01:21,130 --> 00:01:23,269
To je zapravo vrlo humani
prijateljski jezik, CSS.

30
00:01:23,269 --> 00:01:26,560
Dakle, čak i ako nikada niste koristili prije,
vjerojatno bi mogao pogoditi što je to učinio.

31
00:01:26,560 --> 00:01:30,140
U stvari, ako mi učita stranicu, gdje
ovaj stylesheet je ugrađen nekako,

32
00:01:30,140 --> 00:01:36,240
boja pozadine naše stranice bi
biti plava, a ne standardni bijela.

33
00:01:36,240 --> 00:01:37,670
>> Pa kako ćemo graditi stylesheet?

34
00:01:37,670 --> 00:01:39,700
Pa prvo, moramo
identificirati selektor.

35
00:01:39,700 --> 00:01:42,970
U zadnjem primjeru,
da je selektor bio tijelu.

36
00:01:42,970 --> 00:01:45,050
Onda smo otvoreni
kovrčava braće, a mi smo

37
00:01:45,050 --> 00:01:48,410
će početi definiranja
stylesheet za taj odabir.

38
00:01:48,410 --> 00:01:51,800
Između vitičastih zagrada, mi
samo popis ključnih parova vrijednosti.

39
00:01:51,800 --> 00:01:56,205
Prethodna vrijednost Par je
Boja pozadine plava točka i zarez,

40
00:01:56,205 --> 00:01:57,830
ali smo mogli učiniti više i više njih.

41
00:01:57,830 --> 00:02:02,330
Možete imati više stvari primjene
toj oznaci, te mjenjača tijelu.

42
00:02:02,330 --> 00:02:05,960
Svaki od njih je odvojen
točka-zarez, a mi nazivamo svaki od njih

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

44
00:02:08,949 --> 00:02:12,410
Kada ste gotovi sa svim styling mi
Želite se prijaviti na toj oznaci,

45
00:02:12,410 --> 00:02:15,300
imamo samo zatvaranje kovrčavu
brace završiti stilovima,

46
00:02:15,300 --> 00:02:19,640
a mi smo učinili definiranje stilovima
za tu određenu izbornika.

47
00:02:19,640 --> 00:02:21,341
>> Koje su neke zajedničke osobine CSS?

48
00:02:21,341 --> 00:02:23,590
Pa, možda želite staviti
obrub oko nečega.

49
00:02:23,590 --> 00:02:26,850
Tako da mogu reći, granice,
da će biti vaš ključ,

50
00:02:26,850 --> 00:02:29,460
a zatim vaše vrijednosti će biti,
što stil, boja i širina

51
00:02:29,460 --> 00:02:30,209
što želite da bude.

52
00:02:30,209 --> 00:02:33,530
Tako je stil mogao biti solidan
crta, isprekidana crta, isprekidana linija,

53
00:02:33,530 --> 00:02:36,020
greben linija, koja će biti valovita crta.

54
00:02:36,020 --> 00:02:38,790
Možda želite imati
biti plava ili crna ili zelena.

55
00:02:38,790 --> 00:02:41,490
Možda želite da bude
1 ili 2 ili 10 piksela.

56
00:02:41,490 --> 00:02:43,254
Možete navesti sve te stvari.

57
00:02:43,254 --> 00:02:46,420
Možda želite postaviti pozadinu
Boja vaše stranice na određeni način.

58
00:02:46,420 --> 00:02:49,215
Već smo vidjeli da, podešavanje
Pozadina tijela biti plava.

59
00:02:49,215 --> 00:02:52,080
>> Tada možete koristiti ključnu riječ,
tako CSS ima određene boje

60
00:02:52,080 --> 00:02:55,950
koje su ugrađene u njega, plava, zelena,
crni, vrlo jednostavan boje znamo.

61
00:02:55,950 --> 00:02:59,110
Ali, također možete odrediti bilo
hex boja koje želite.

62
00:02:59,110 --> 00:03:05,190
Podsjetimo da boje mogu identificirati
skupom tri hex brojeva

63
00:03:05,190 --> 00:03:08,500
od 0 do 255, RG i B,
crvene, zelene i plave komponente.

64
00:03:08,500 --> 00:03:10,590
I tako možemo odrediti
bilo koje boje želimo strane,

65
00:03:10,590 --> 00:03:15,520
umjesto korištenja plave ili zelene ili crne,
pomoću funta, a potom šest znamenke hex,

66
00:03:15,520 --> 00:03:18,310
i da će nam dati
boja šest znamenkasti.

67
00:03:18,310 --> 00:03:19,850
Tako da je boja pozadine.

68
00:03:19,850 --> 00:03:21,975
>> Također imamo prvom planu
boje, što je obično

69
00:03:21,975 --> 00:03:24,140
će biti tekst na stranici.

70
00:03:24,140 --> 00:03:28,850
A ti isto tako može učiniti
s ključnim riječ i ili šest znamenki hex.

71
00:03:28,850 --> 00:03:32,140
Dakle, možete odrediti bilo koju boju si
Želite za tekst na stranici

72
00:03:32,140 --> 00:03:36,370
protiv određenog
boja pozadine, gore iznad.

73
00:03:36,370 --> 00:03:39,100
Također možete promijeniti i nositi
s fontom, a način na tekst

74
00:03:39,100 --> 00:03:40,400
je donesena na stranici.

75
00:03:40,400 --> 00:03:42,010
>> Dakle, možete promijeniti veličinu fonta.

76
00:03:42,010 --> 00:03:46,320
Možete koristiti ključne riječi kao što su extra,
extra mala ili xx male, srednje ili,

77
00:03:46,320 --> 00:03:47,660
velika, i tako dalje.

78
00:03:47,660 --> 00:03:50,750
Možete koristiti fiksne točke, 10
točka, točka 12, i tako dalje.

79
00:03:50,750 --> 00:03:55,850
Možete koristiti postotke, 80%, 20%,
gdje je 100% je zadani font

80
00:03:55,850 --> 00:03:59,220
veličine, što se obično događa da
biti nešto poput 11 ili 12 bodova.

81
00:03:59,220 --> 00:04:01,659
Ili čak možete ga temeljiti off
od najnovijeg veličinu fonta.

82
00:04:01,659 --> 00:04:04,950
Ako ste upravo napisao nešto i znate
ono što želite je da bude manja,

83
00:04:04,950 --> 00:04:08,241
ali ne znate točno što vam veličina
želite da bude, dobro, možete samo reći,

84
00:04:08,241 --> 00:04:09,330
veličina slova manja.

85
00:04:09,330 --> 00:04:14,344
I to će se temeljiti off,
Samo iznad, to je veličina fonta.

86
00:04:14,344 --> 00:04:15,760
A možete dobiti manji ili veći.

87
00:04:15,760 --> 00:04:18,390
Dakle, postoji mnogo različitih
načina da odredite veličinu fonta.

88
00:04:18,390 --> 00:04:20,690
>> Također možete odrediti što
Obitelj fontova želite.

89
00:04:20,690 --> 00:04:23,360
Ako imate određeni
Ime, postoji način na CSS--

90
00:04:23,360 --> 00:04:27,270
nećemo o tome razgovarati
here-- definirati vrlo specifičan font

91
00:04:27,270 --> 00:04:28,980
i ugraditi u svoje stranice.

92
00:04:28,980 --> 00:04:30,620
Također možete koristiti generičke nazive.

93
00:04:30,620 --> 00:04:33,540
Postoji mnogo web sigurnih fontova
koji su unaprijed definirani u CSS.

94
00:04:33,540 --> 00:04:36,352
A ako ste korisnik Microsoft
Ured je u posljednjih 20 godina,

95
00:04:36,352 --> 00:04:38,810
vjerojatno ste upoznati s
puno tih web sigurne fontove

96
00:04:38,810 --> 00:04:44,640
Već, Times New Roman, Arial,
Courier New, Gruziju, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
i tako dalje.

98
00:04:45,470 --> 00:04:47,170
Oni su svi smatraju weba fontove.

99
00:04:47,170 --> 00:04:49,169
I zapravo, dio
Razlog su došli da se

100
00:04:49,169 --> 00:04:54,140
je da se koristi kako bi web-- svaku stranicu
je pristup ovom defaultu skup fontova

101
00:04:54,140 --> 00:04:58,480
s različitim serifs, i sve to
Font stvari nećemo ući,

102
00:04:58,480 --> 00:05:01,130
ali to su obično
dostupan u vašoj CSS,

103
00:05:01,130 --> 00:05:04,029
čak i ako ne
inače definirati fontove.

104
00:05:04,029 --> 00:05:07,070
Konačno, možete poravnati tekst,
umjesto da ga se, po defaultu, usklađen

105
00:05:07,070 --> 00:05:09,310
u lijevo, što bi
poravnajte ga na desno,

106
00:05:09,310 --> 00:05:13,740
ili ste mogli uskladiti to centrirano ili
opravdano da je udario obje margine.

107
00:05:13,740 --> 00:05:16,800
Dakle, to su sve opcije koje možete koristiti
promijeniti ono što vaš tekst izgleda,

108
00:05:16,800 --> 00:05:20,120
i kako je prikazano na stranici.

109
00:05:20,120 --> 00:05:22,180
>> Vaša selektora ne
moraju biti samo oznake.

110
00:05:22,180 --> 00:05:25,539
Mi smo ranije vidjeli tijelo oznaku
Selektor i selektor oznake

111
00:05:25,539 --> 00:05:26,580
izgleda kao da je.

112
00:05:26,580 --> 00:05:30,020
Vi naziv oznaku, a zatim vam
definirati stilovima za tu oznaku.

113
00:05:30,020 --> 00:05:32,660
Ali, također možete učiniti nešto
naziva selektor ID.

114
00:05:32,660 --> 00:05:34,390
Selektor osobna izgleda prilično slično.

115
00:05:34,390 --> 00:05:38,100
Ali primijetite da sada ne koristim
HTML tag, ja sam koristeći, u ovom slučaju,

116
00:05:38,100 --> 00:05:40,720
#unique ili hash jedinstven.

117
00:05:40,720 --> 00:05:42,930
Ako se sjećate iz naše
Video na HTML, razgovarali smo

118
00:05:42,930 --> 00:05:45,620
o tome kako oznake može imati atribute.

119
00:05:45,620 --> 00:05:48,340
>> A jedan atribut koji se odnosi
da ljepušan velik dio sve HTML oznake,

120
00:05:48,340 --> 00:05:51,440
ali nismo razgovarali o tome,
nešto što se zove osobna oznaka.

121
00:05:51,440 --> 00:05:55,250
Dakle, ovaj CSS bih
primjenjuju se samo u HTML tag koji ima

122
00:05:55,250 --> 00:05:58,530
vrlo specifičan ID, koji ste nazvali.

123
00:05:58,530 --> 00:06:01,000
Dakle, ako imate negdje
u kodu, negdje

124
00:06:01,000 --> 00:06:06,090
u HTML datoteke, oznake i vama
odrediti kao atribut na tu oznaku,

125
00:06:06,090 --> 00:06:09,060
ID jednako jedinstven, ovaj
Posebno stylesheet

126
00:06:09,060 --> 00:06:15,030
Ovdje će se primjenjivati ​​samo između
da oznaka s ID jedinstven.

127
00:06:15,030 --> 00:06:17,180
>> Također možete nešto učiniti
naziva selektor klase.

128
00:06:17,180 --> 00:06:19,920
Dakle, osim što
ID atributa, također možete

129
00:06:19,920 --> 00:06:23,130
dodavanje klasa atribut HTML tagova.

130
00:06:23,130 --> 00:06:27,140
A kada koristite klase atribut,
može se primijeniti na više oznaka.

131
00:06:27,140 --> 00:06:31,880
Dakle, ako imate nekoliko stvari koje
su slične, možda želite reći,

132
00:06:31,880 --> 00:06:35,890
Otvoreno Tag bla, bla, bla,
bla, klasa jednaka studente.

133
00:06:35,890 --> 00:06:38,190
A onda je ovaj
stylesheet će primjenjivati

134
00:06:38,190 --> 00:06:42,041
svakom oznakom čija klasa je studentima.

135
00:06:42,041 --> 00:06:44,290
U ovom slučaju, mi bismo postaviti
Boja pozadine u žutu,

136
00:06:44,290 --> 00:06:46,706
i mi bismo postavili neprozirnosti, koji
je oznaka nismo razgovarali o tome,

137
00:06:46,706 --> 00:06:52,510
ali samo bavi kako prozirno
nešto, do 70%, u ovom slučaju.

138
00:06:52,510 --> 00:06:54,430
>> Postoje dvije opcije za
pisanje stylesheet.

139
00:06:54,430 --> 00:06:56,680
Možete ih napisati
izravno u HTML

140
00:06:56,680 --> 00:06:59,690
stavljanjem stylesheet
između stilu tagova.

141
00:06:59,690 --> 00:07:03,850
A ti stil oznake otići unutar
glava oznake vaše web stranice.

142
00:07:03,850 --> 00:07:08,240
Možda više preferirani način za napraviti
je napisati zaseban .css datoteku,

143
00:07:08,240 --> 00:07:12,360
a zatim ga povezati u vaš
dokumentirati pomoću vezi oznaka.

144
00:07:12,360 --> 00:07:14,690
Link oznake, opet su
razlikuje od hiperveza,

145
00:07:14,690 --> 00:07:16,760
ako sjetiti iz našeg videa HTML.

146
00:07:16,760 --> 00:07:19,030
I link oznake su kako
povucite u zasebnim datotekama.

147
00:07:19,030 --> 00:07:23,900
To je vrsta kao ekvivalent
#include za web programiranje.

148
00:07:23,900 --> 00:07:27,140
>> Tako ćemo pogledati table.HTML.

149
00:07:27,140 --> 00:07:29,380
Ako se sjećate iz naše
HTML video sam pokazao

150
00:07:29,380 --> 00:07:32,000
primjer vrlo
jednostavno množenje

151
00:07:32,000 --> 00:07:35,160
stol koji je izgledao prilično
ružni, a možda postoji

152
00:07:35,160 --> 00:07:38,650
način kako bi se bolje
CSS, kako bi to zapravo izgleda

153
00:07:38,650 --> 00:07:41,120
više kao množenje
stol, ili nešto

154
00:07:41,120 --> 00:07:43,730
da nije samo zaglavi zajedno
bez stvarne podjele

155
00:07:43,730 --> 00:07:45,532
između redaka i stupaca.

156
00:07:45,532 --> 00:07:47,490
Pa neka je nad glavom
CS50 IDE, i pogledati

157
00:07:47,490 --> 00:07:50,780
kako CSS može, nekako, štipanje
ono što smo započeli s prije,

158
00:07:50,780 --> 00:07:53,290
i učiniti ga nešto puno bolje.

159
00:07:53,290 --> 00:07:55,650
>> Tako smo u CS50 IDE
sada, a ako nepoznate,

160
00:07:55,650 --> 00:07:58,710
ćemo povući se u to
tablicu koja HTML stranice.

161
00:07:58,710 --> 00:08:01,090
Table.HTML osnovi
Samo definira sadržaj

162
00:08:01,090 --> 00:08:05,044
se od multiple-- što je trebao biti
četiri od četiri tablica množenja.

163
00:08:05,044 --> 00:08:06,210
To je prilično jednostavan.

164
00:08:06,210 --> 00:08:09,410
I mislim da bi to bi
izgleda prilično dobro organiziran.

165
00:08:09,410 --> 00:08:15,277
Ali, u stvari, kada smo pregledali ovu stranicu,
vidimo da je to vrsta ružno, zar ne?

166
00:08:15,277 --> 00:08:16,860
Očito imamo retke i stupce ovdje.

167
00:08:16,860 --> 00:08:18,350
Postoji neka vrsta odvojenosti.

168
00:08:18,350 --> 00:08:20,040
Ali to nema smisla odvajanje.

169
00:08:20,040 --> 00:08:23,105
Nećemo zapravo uzimajući
previše informacija ovdje.

170
00:08:23,105 --> 00:08:25,730
I nema razdvajanja između
redovi i stupci u smislu

171
00:08:25,730 --> 00:08:28,460
horizontalnih ili vertikalnih propisa.

172
00:08:28,460 --> 00:08:31,530
Mi vjerojatno mogao napraviti ovaj
pogledajte malo bolje.

173
00:08:31,530 --> 00:08:32,934
Dakle, pokušajmo.

174
00:08:32,934 --> 00:08:34,559
Tako ću zatvoriti ovu karticu ovdje.

175
00:08:34,559 --> 00:08:37,434
I ja ću zatvoriti moj table.HTML,
i imam još jednu verziju ovdje

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

177
00:08:39,490 --> 00:08:40,655
Otvorit ćemo to.

178
00:08:40,655 --> 00:08:42,530
Tijelo stranici
ljepušan velik dio isti,

179
00:08:42,530 --> 00:08:44,238
ali sam promijenio
malo na vrhu.

180
00:08:44,238 --> 00:08:47,132
A ja ću pronaći ovdje.

181
00:08:47,132 --> 00:08:49,340
Obavijest da je ovaj put, ja sam
pomoću ugrađene stil oznake.

182
00:08:49,340 --> 00:08:53,550
Ja sam otvorio stil oznaku, a ja sam sada
definiranje CSS stylesheet samo unutar

183
00:08:53,550 --> 00:08:54,310
od toga.

184
00:08:54,310 --> 00:08:56,310
Imam stilovima koji kaže, stol.

185
00:08:56,310 --> 00:08:58,170
To je moj odabir oznaka.

186
00:08:58,170 --> 00:09:01,340
Ja ne koristite točku ili mljeveno meso,
što bih raditi ako sam

187
00:09:01,340 --> 00:09:03,710
je pomoću ID ili odabir klase.

188
00:09:03,710 --> 00:09:06,190
Imam mjenjača oznaka here-- stol.

189
00:09:06,190 --> 00:09:10,090
Ovaj stil će
primjenjuju se na svaki stol oznaku.

190
00:09:10,090 --> 00:09:14,950
Očigledno želim staviti jedan
Pixel široki, plavi granice,

191
00:09:14,950 --> 00:09:15,779
u mojim stolom.

192
00:09:15,779 --> 00:09:18,320
To zvuči kao da bi vjerojatno
pomoći situaciji, zar ne?

193
00:09:18,320 --> 00:09:20,320
Mi ćemo imati
stvari izgledaju puno bolje.

194
00:09:20,320 --> 00:09:21,190
Dakle, to je u redu.

195
00:09:21,190 --> 00:09:23,540
Stilski, upravo sam
ugrađeni moj stilovima ovdje.

196
00:09:23,540 --> 00:09:25,100
To je svakako
prihvatljiv način to učiniti.

197
00:09:25,100 --> 00:09:26,391
Idemo vidjeti kako to izgleda.

198
00:09:26,391 --> 00:09:29,790
Dakle, ja ću se vratiti ovamo, i
Ja ću se pregledati moju table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Pa, to nije baš ono što sam htjela,
ali to je upravo ono što smo tražili.

201
00:09:36,470 --> 00:09:39,530
Rekli smo da je ovaj stil je
će se primjenjivati ​​na našem stolu.

202
00:09:39,530 --> 00:09:43,810
Naš stol sada ima jedan piksel
široka, plavi obrub oko njega.

203
00:09:43,810 --> 00:09:46,237
Nećemo zapravo uzimajući
stolom stanica.

204
00:09:46,237 --> 00:09:47,570
Mi smo samo dobivanje na stolu.

205
00:09:47,570 --> 00:09:49,310
Tako CSS radio.

206
00:09:49,310 --> 00:09:51,890
To je primijenjena
stylesheet našem stolu.

207
00:09:51,890 --> 00:09:53,981
No, nije baš to
ono što smo htjeli to učiniti.

208
00:09:53,981 --> 00:09:55,730
Kako ćemo dobiti to učiniti
ono što želite to učiniti?

209
00:09:55,730 --> 00:09:59,287
>> Pa, neka je pogledati još jednog
verzija to table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Tako Samo ću zatvoriti ove kartice.

211
00:10:00,870 --> 00:10:03,890
Idem se vratiti ovamo na moj
file stabla, i otvoriti table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Opet, to će izgledati lijepo
Sličan ovdje na početku.

214
00:10:10,350 --> 00:10:14,460
Ali obavijest, ovaj put, umjesto korištenja
stylesheet ugrađen pravo tamo,

215
00:10:14,460 --> 00:10:18,870
Idem povezati u
stylesheet pomoću veze oznaku.

216
00:10:18,870 --> 00:10:22,480
Tako sam očito povezuje u
stylesheet zove tables.CSS,

217
00:10:22,480 --> 00:10:25,090
i to je dobro jednak
stylesheet samo means-- dobro,

218
00:10:25,090 --> 00:10:28,645
Što je ova datoteka odnosu na ono što
Ja sam doing-- je stylesheet da sam

219
00:10:28,645 --> 00:10:29,821
koristite za moju stranicu.

220
00:10:29,821 --> 00:10:32,320
Dakle, ako sam stvarno želite vidjeti što
Radim s CSS ovdje

221
00:10:32,320 --> 00:10:35,010
Moram ići otvoreno da
table.CSS datoteke kao dobro.

222
00:10:35,010 --> 00:10:37,490
Tako ćemo se vratiti ovamo
Ponovno našem datoteke stabla.

223
00:10:37,490 --> 00:10:38,660
Postoji table.CSS.

224
00:10:38,660 --> 00:10:40,490
Mi ćemo ga pop otvorena.

225
00:10:40,490 --> 00:10:43,070
Mi smo sada vidim malo CSS.

226
00:10:43,070 --> 00:10:45,630
Očigledno, imam par
stvari događa ovdje.

227
00:10:45,630 --> 00:10:48,950
Ja očito žele staviti pet
Pixel široke, čvrste crvene granice,

228
00:10:48,950 --> 00:10:50,287
oko moje stola.

229
00:10:50,287 --> 00:10:52,870
Mi već znamo da to ide
samo ići na perimetru.

230
00:10:52,870 --> 00:10:56,180
Vidjeli smo da je u table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Sa svakom redu, ja
očito žele odrediti

232
00:10:58,770 --> 00:11:01,950
da visina red je 50 piksela visine.

233
00:11:01,950 --> 00:11:05,680
Dakle, za svaki red, ne zaboravite
to je ono što tr oznaka radi,

234
00:11:05,680 --> 00:11:08,550
Ja sam što je 50 piksela visine.

235
00:11:08,550 --> 00:11:09,804
>> Na kraju, ja imam ovaj komentar.

236
00:11:09,804 --> 00:11:11,470
A to je kako ćemo napraviti komentare u CSS.

237
00:11:11,470 --> 00:11:16,174
To je vrlo slično iskoriste blok
komentari sintaksa udarac zvijezda.

238
00:11:16,174 --> 00:11:17,090
Sve tekst koji želite.

239
00:11:17,090 --> 00:11:19,470
Nema slash slash iako u CSS.

240
00:11:19,470 --> 00:11:23,400
Za kratko inline komentare, imamo
koristiti ovu posebnu formatu ovdje.

241
00:11:23,400 --> 00:11:26,830
Izgleda radim
puno stvari u mom TD tagova.

242
00:11:26,830 --> 00:11:29,710
Zapamti td oznake ili stol
Podaci koji su stvarno samo

243
00:11:29,710 --> 00:11:32,210
stupci unutar mjesta
naši redovi, i očito

244
00:11:32,210 --> 00:11:35,090
za svaki komad podataka
u mom stolu, ja želim

245
00:11:35,090 --> 00:11:38,850
postaviti boju pozadine na
biti crna, boja biti bijela,

246
00:11:38,850 --> 00:11:40,320
boja je prednja boja.

247
00:11:40,320 --> 00:11:42,360
Dakle, to će biti
tekst na stranici.

248
00:11:42,360 --> 00:11:45,140
Želim velika slova, 22
veličina slova, a ja želim

249
00:11:45,140 --> 00:11:47,001
da bude u font obitelji, Gruzija.

250
00:11:47,001 --> 00:11:48,750
Dakle, ja ne idem na
ima zadani font.

251
00:11:48,750 --> 00:11:51,820
Idem odrediti Gruziju, što
je jedan od onih sigurnih web fontova

252
00:11:51,820 --> 00:11:53,830
kako smo vidjeli prije.

253
00:11:53,830 --> 00:11:57,284
Želim da moj tekst biti usklađeni
centralno, u sredini kutije,

254
00:11:57,284 --> 00:11:59,450
Ne želim da se ostavi
poravnati ili desno usklađeni.

255
00:11:59,450 --> 00:12:03,461
I želim svoju širinu stupca
da se 50 piksela kao dobro.

256
00:12:03,461 --> 00:12:05,210
Idemo pogledati
kako to izgleda,

257
00:12:05,210 --> 00:12:07,470
i vidjeti ako je to možda poboljšanje.

258
00:12:07,470 --> 00:12:12,890
Tako ću ići table3.HTML, koji
Podsjetimo, uključuje table.CSS kao vezu,

259
00:12:12,890 --> 00:12:14,830
a mi ćemo ga pregledati.

260
00:12:14,830 --> 00:12:16,800
To je puno bolje, zar ne?

261
00:12:16,800 --> 00:12:20,004
To je zapravo počinje izgledati
Mnogo više kao tablica množenja.

262
00:12:20,004 --> 00:12:21,920
Imam taj crveni obrub
oko mog stola, ali se sada

263
00:12:21,920 --> 00:12:26,700
Također sam odredio da
svaki redak je širine 50 piksela,

264
00:12:26,700 --> 00:12:30,220
ili da je 50 piksela tall-- isprika
me-- svaki stupac je širine 50 piksela.

265
00:12:30,220 --> 00:12:34,251
Podaci u svakom stupcu, a samo
podataka, ima crnu pozadinu.

266
00:12:34,251 --> 00:12:36,000
Dakle, to je razlog zašto oni
bijele crte su tu.

267
00:12:36,000 --> 00:12:38,836
Budući da je prostor u
između svih tih stanica,

268
00:12:38,836 --> 00:12:40,710
to nije granica u
po sebi, to je samo

269
00:12:40,710 --> 00:12:43,170
Ja punjenje samo u
stanice, što zapravo

270
00:12:43,170 --> 00:12:46,310
čini granice tablice, koje
očito je postojao cijelo vrijeme, to

271
00:12:46,310 --> 00:12:47,887
je samo tanke bijele linije.

272
00:12:47,887 --> 00:12:48,720
Sada su vidljivi.

273
00:12:48,720 --> 00:12:50,380
Sada oni pop off na zaslonu.

274
00:12:50,380 --> 00:12:52,920
I tako to je vrlo jednostavan
stylesheet da sam primijeniti,

275
00:12:52,920 --> 00:12:56,850
a sada mi je stol izgleda puno više kao
četiri od četiri tablica množenja,

276
00:12:56,850 --> 00:13:00,950
umjesto samo zbrkan nered, gdje
sve je jasno redaka i stupaca,

277
00:13:00,950 --> 00:13:03,717
ali ne super dobro organizirana.

278
00:13:03,717 --> 00:13:06,800
Mi smo zapravo samo grebanje površine
što možete učiniti s CSS ovdje.

279
00:13:06,800 --> 00:13:10,330
Srećom CSS dokumentacija
je prilično jednostavan.

280
00:13:10,330 --> 00:13:14,000
Vi ćete koristiti nekoliko svojih
atributa, prilično često.

281
00:13:14,000 --> 00:13:16,087
Oni razgovarali smo o
ranije u ovom videu.

282
00:13:16,087 --> 00:13:18,170
Postoji nekoliko koje vas
vjerojatno neće koristiti sve.

283
00:13:18,170 --> 00:13:19,469
I to je u redu, previše.

284
00:13:19,469 --> 00:13:22,010
Ali samo znam da postoji
Puno dokumentacije vani.

285
00:13:22,010 --> 00:13:25,110
Dakle, čak i ako nismo pokriti sve,
ti sigurno ne ostavi na svoju vlastitu.

286
00:13:25,110 --> 00:13:26,780
Ali CSS stvarno zabavno
eksperimentirati s.

287
00:13:26,780 --> 00:13:29,040
I jako bih vas potaknuti
poigrati sa svojim web stranicama,

288
00:13:29,040 --> 00:13:32,180
i vidjeti kako možete napraviti ih
izgledati i osjećati poboljšanje korisnika

289
00:13:32,180 --> 00:13:34,790
iskustvo posjetiti vašu stranicu.

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

291
00:13:35,710 --> 00:13:37,980
Ovo je CS50.

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