1
00:00:00,000 --> 00:00:05,660
>> [MUZIKO Ludante]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Do ni prenu pli
video paroli pli lingvo.

3
00:00:08,740 --> 00:00:10,800
Ĉi tiu fojo ni parolos pri CSS.

4
00:00:10,800 --> 00:00:13,460
Do CSS, kio estas mallongigo de
Laŭtemaj Sheets,

5
00:00:13,460 --> 00:00:16,149
Estas alia lingvo ni uzas
kiam konstruanta retejojn.

6
00:00:16,149 --> 00:00:17,190
Pensu pri ĝi kiel ĉi.

7
00:00:17,190 --> 00:00:20,900
Se HTML estas kion ni uzas por organizi la
enhavon ni volas meti sur nia paĝo,

8
00:00:20,900 --> 00:00:25,390
CSS estas la ilo kiun ni ĝenerale uzos
agordi kiom niaj retejoj rigardu,

9
00:00:25,390 --> 00:00:30,410
kaj kiel la uzanto sperto vere
estas, interagante kun nia retejo.

10
00:00:30,410 --> 00:00:32,535
>> Similaj al HTML, CSS estas
ne programlingvo.

11
00:00:32,535 --> 00:00:33,451
Ĝi ne havas logikon.

12
00:00:33,451 --> 00:00:34,595
Ĝi ne havas variabloj.

13
00:00:34,595 --> 00:00:38,890
Ĝi ne havas ajnan specon de tiu
flui rilataj aferoj ke C faras.

14
00:00:38,890 --> 00:00:40,150
Estas stilo lingvon.

15
00:00:40,150 --> 00:00:42,810
Kaj ĝia sintakso estas bela
simpla kaj simple priskribas

16
00:00:42,810 --> 00:00:46,240
kiom la elementoj de nia
paĝo havas certajn HTML

17
00:00:46,240 --> 00:00:48,190
elementoj devus esti modifita.

18
00:00:48,190 --> 00:00:51,170
Al tiu fino, se vi ne havas
tamen spektis nia vídeo en HTML,

19
00:00:51,170 --> 00:00:53,290
aŭ ne kutimas
HTML ĝenerale, vi

20
00:00:53,290 --> 00:00:57,430
eble volos preni rigardi ke
unua, ĉar tiu diskuto de CSS

21
00:00:57,430 --> 00:01:00,700
tuj dependos
iun scion de HTML.

22
00:01:00,700 --> 00:01:03,740
>> Do jen vere
simpla CSS stilfolio.

23
00:01:03,740 --> 00:01:06,480
Eĉ se vi neniam
programita per CSS antaŭ,

24
00:01:06,480 --> 00:01:10,624
Mi estas sufiĉe certa ke vi povas diveni
ĝuste kion ĉi stilfolio faras.

25
00:01:10,624 --> 00:01:11,290
Kion ĝi faras?

26
00:01:11,290 --> 00:01:15,470
Nu, aplikita al la korpo de nia retejo
paĝo, ĉiu inter korpo etikedoj

27
00:01:15,470 --> 00:01:19,631
sur nia HTML, kaj ĝi fiksas la
fonkoloro de tiu paĝo al blua.

28
00:01:19,631 --> 00:01:21,130
Nu, estas tre simpla stilfolio.

29
00:01:21,130 --> 00:01:23,269
Ĝi estas fakte tre homa
amika lingvo CSS.

30
00:01:23,269 --> 00:01:26,560
Do eĉ se vi neniam uzis ĝin antaŭ,
vi probable povus diveni kion tio faris.

31
00:01:26,560 --> 00:01:30,140
Fakte, se ni ŝarĝas paĝon, kie
tiu stilfolio estis enigita iel,

32
00:01:30,140 --> 00:01:36,240
la fonkoloro de nia paĝo volus
esti bluaj, ne la norma blanka.

33
00:01:36,240 --> 00:01:37,670
>> Do kiel ni konstruas stylesheets?

34
00:01:37,670 --> 00:01:39,700
Nu unue, ni devas
identigi elektilo.

35
00:01:39,700 --> 00:01:42,970
En la lasta ekzemplo,
ke seleccionador estis korpo.

36
00:01:42,970 --> 00:01:45,050
Tiam ni havas malferman
krispa krampoj, kaj ni estas

37
00:01:45,050 --> 00:01:48,410
tuj komencos difinanta la
stilfolio por ke elektilo.

38
00:01:48,410 --> 00:01:51,800
Intere la krispa krampoj, ni
nur havas liston de ŝlosila valoro paroj.

39
00:01:51,800 --> 00:01:56,205
La antaŭa valoro paro estis
fonkoloro blua punktokomo,

40
00:01:56,205 --> 00:01:57,830
sed ni povus fari pli kaj pli da tiuj.

41
00:01:57,830 --> 00:02:02,330
Vi povus havi multoblajn aferojn aplikanta
al tiu etikedo, ke elektilo korpo.

42
00:02:02,330 --> 00:02:05,960
Ĉiu el ili estas apartigitaj per
punktokomo, kaj ni nomas cxiun el ili

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

44
00:02:08,949 --> 00:02:12,410
Kiam ni faris kun ĉiuj stilo ni
volas apliki al tiu aparta etikedo:

45
00:02:12,410 --> 00:02:15,300
ni nur havas fermante krispa
stegi fini la stilfolio,

46
00:02:15,300 --> 00:02:19,640
kaj ni faris difinanta la stilfolio
por ke aparta elektilo.

47
00:02:19,640 --> 00:02:21,341
>> Kion estas kelkaj komunaj CSS propraĵoj?

48
00:02:21,341 --> 00:02:23,590
Nu, eble vi volas meti
kiel limon ĉirkaŭ io.

49
00:02:23,590 --> 00:02:26,850
Do vi povas diri, limo,
tio estus via kerna,

50
00:02:26,850 --> 00:02:29,460
kaj tiam viaj valoroj estus,
kion stilo, koloro kaj larĝo

51
00:02:29,460 --> 00:02:30,209
Vi volas ke ĝi estu.

52
00:02:30,209 --> 00:02:33,530
Do la stilo povus esti solida
linio, punktita linio, kuregita linio,

53
00:02:33,530 --> 00:02:36,020
kresto linio, kiu estus ondecaj linio.

54
00:02:36,020 --> 00:02:38,790
Eble vi volas havi ĝin
esti blua aŭ nigra aŭ verda.

55
00:02:38,790 --> 00:02:41,490
Eble vi volas ke ĝi estu
1 aŭ 2 aŭ 10 rastrumeroj larĝa.

56
00:02:41,490 --> 00:02:43,254
Vi povas specifi ĉiujn tiujn aferojn.

57
00:02:43,254 --> 00:02:46,420
Eble vi volas agordi la fonon
koloro de via paĝo en aparta maniero.

58
00:02:46,420 --> 00:02:49,215
Ni jam vidis, ke, metante la
fono de la korpo esti blua.

59
00:02:49,215 --> 00:02:52,080
>> Tiam vi povas uzi ŝlosila vorto,
tiel CSS havas certaj koloroj

60
00:02:52,080 --> 00:02:55,950
ke estas konstruitaj en ĝin, blua, verda,
nigra, tre simplaj koloroj ni konas.

61
00:02:55,950 --> 00:02:59,110
Sed vi povas ankaŭ specifi ajnan
deksesumajn koloro kiu vi ŝatus.

62
00:02:59,110 --> 00:03:05,190
Memoru ke koloroj povas esti identigitaj
per aro de tri deksesumajn nombrojn

63
00:03:05,190 --> 00:03:08,500
de 0 ĝis 255, RG kaj b, la
ruĝa, verda kaj blua komponantoj.

64
00:03:08,500 --> 00:03:10,590
Kaj tiel ni povas specifi
ajna koloro ni volas per,

65
00:03:10,590 --> 00:03:15,520
anstataŭ uzi blua aŭ verda aŭ nigra,
uzante funto kaj tiam ses ciferoj de deksesumajn,

66
00:03:15,520 --> 00:03:18,310
kaj tio donus al ni
la ses cifera koloro.

67
00:03:18,310 --> 00:03:19,850
Do jen la fonkoloro.

68
00:03:19,850 --> 00:03:21,975
>> Ni ankaŭ havas la malfono
koloro, kiu kutime

69
00:03:21,975 --> 00:03:24,140
tuj estos la tekston de via paĝo.

70
00:03:24,140 --> 00:03:28,850
Kaj vi povus simile fari tion
kun ĉefvorto kaj aŭ ses cifera deksesuma.

71
00:03:28,850 --> 00:03:32,140
Do vi povas specifi ajnan koloron vi
volas por la teksto de via paĝo

72
00:03:32,140 --> 00:03:36,370
kontraŭ aparta
fonkoloro, super.

73
00:03:36,370 --> 00:03:39,100
Vi povas ankaŭ ŝanĝi kaj trakti
kun tiparo kaj vojon teksto

74
00:03:39,100 --> 00:03:40,400
estas pruntitaj sur la paĝo.

75
00:03:40,400 --> 00:03:42,010
>> Do vi povas ŝanĝi viajn tiparo.

76
00:03:42,010 --> 00:03:46,320
Vi povas uzi ŝlosila vortoj, kiel ekstra,
ekstraj malgrandaj, aŭ xx malgrandaj aŭ mezaj,

77
00:03:46,320 --> 00:03:47,660
granda, kaj tiel plu.

78
00:03:47,660 --> 00:03:50,750
Vi povas uzi fiksaj punktoj, 10
punkto, 12 punkton, kaj tiel plu.

79
00:03:50,750 --> 00:03:55,850
Vi povas uzi procentoj, 80%, 20%,
kie 100% estas la defaŭlta tiparo

80
00:03:55,850 --> 00:03:59,220
grandeco, kiu estas kutime tuj
esti io kiel 11 aŭ 12 poentoj.

81
00:03:59,220 --> 00:04:01,659
Aŭ vi eĉ povas bazi ĝin
de la plej lastatempa tiparo.

82
00:04:01,659 --> 00:04:04,950
Se vi simple skribis ion kaj vi scias
kion vi volas, estas ke ĝi estu pli malgranda,

83
00:04:04,950 --> 00:04:08,241
sed vi ne scias precize kion grandeco vi
volas esti, bone, vi povas nur diri,

84
00:04:08,241 --> 00:04:09,330
tiparo grandeco pli malgranda.

85
00:04:09,330 --> 00:04:14,344
Kaj ĝi bazos ekstere de la,
nur super, estas tiparo.

86
00:04:14,344 --> 00:04:15,760
Kaj vi povas akiri pli malgrandaj aŭ pli grandaj.

87
00:04:15,760 --> 00:04:18,390
Do ekzistas multaj malsamaj
manierojn por specifi tiparo.

88
00:04:18,390 --> 00:04:20,690
>> Vi povas ankaŭ specifi kion
Tiparofamilio vi volas.

89
00:04:20,690 --> 00:04:23,360
Se vi havas apartan
nomo, ekzistas trairejo en CSS--

90
00:04:23,360 --> 00:04:27,270
ni ne tuj paroli pri ĝi
here-- difini tre specifa tiparo

91
00:04:27,270 --> 00:04:28,980
kaj enmeti ĝin en vian paĝon.

92
00:04:28,980 --> 00:04:30,620
Vi povas ankaŭ uzi genraj nomoj.

93
00:04:30,620 --> 00:04:33,540
Ekzistas multe de retejo sekura tiparojn
kiuj pre-difinita en CSS.

94
00:04:33,540 --> 00:04:36,352
Kaj se vi estas uzanto de Microsoft
Oficejo en la lastaj 20 jaroj,

95
00:04:36,352 --> 00:04:38,810
vi probable konas
multe de tiuj ttt sekuraj tiparoj

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

97
00:04:44,640 --> 00:04:45,470
kaj tiel Plu.

98
00:04:45,470 --> 00:04:47,170
Tiuj estas ĉiuj konsideritaj retejo sekura tiparojn.

99
00:04:47,170 --> 00:04:49,169
Kaj fakte, parto de la
Tial ili venis esti

100
00:04:49,169 --> 00:04:54,140
estis esti uzita fari web-- ĉiu paĝo
havis aliron al tiu defaŭlta aro de tiparoj

101
00:04:54,140 --> 00:04:58,480
kun diversaj serifs, kaj ĉio ĉi
tiparo aĵojn ni ne enir,

102
00:04:58,480 --> 00:05:01,130
sed tiuj estas kutime
atingebla en via CSS,

103
00:05:01,130 --> 00:05:04,029
eĉ se vi faras ne
alie difini la tiparoj.

104
00:05:04,029 --> 00:05:07,070
Fine, vi povas vicigi vian tekston,
anstataŭe de ĝi estante, implicite, vicigitaj

105
00:05:07,070 --> 00:05:09,310
al la maldekstra, vi povis
align gxi dekstren,

106
00:05:09,310 --> 00:05:13,740
aŭ vi povus vicigi ĝin centrita, aŭ
pravigis tiel ke ĝi trafis ambaŭ randoj.

107
00:05:13,740 --> 00:05:16,800
Do tiuj estas ĉiuj ebloj vi povas uzi
ŝanĝi kion via teksto aspektas,

108
00:05:16,800 --> 00:05:20,120
kaj kiel ĝi estas montrita sur via paĝo.

109
00:05:20,120 --> 00:05:22,180
>> Via selectores ne
esti etikedoj nur.

110
00:05:22,180 --> 00:05:25,539
Ni antaŭe vidis korpo etikedo
selector, kaj etikedo selector

111
00:05:25,539 --> 00:05:26,580
aspektas ĝuste tiel.

112
00:05:26,580 --> 00:05:30,020
Vi Nomi etikedo, kaj tiam vi
difini stilfolio por tiu etikedo.

113
00:05:30,020 --> 00:05:32,660
Sed vi povas ankaŭ fari ion
nomata ID elektilo.

114
00:05:32,660 --> 00:05:34,390
IRU elektilo ŝajnas sufiĉe similaj.

115
00:05:34,390 --> 00:05:38,100
Sed rimarki, ke nun mi ne uzas
HTML tag, mi uzas, en tiu kazo,

116
00:05:38,100 --> 00:05:40,720
#unique, aŭ hash unika.

117
00:05:40,720 --> 00:05:42,930
Se vi memoras de nia
video en HTML, ni parolis

118
00:05:42,930 --> 00:05:45,620
pri kiel etikedoj povas havi atributojn.

119
00:05:45,620 --> 00:05:48,340
>> Kaj unu atributo kiu aplikas
al preskaux cxio HTML etikedoj,

120
00:05:48,340 --> 00:05:51,440
sed ni ne parolas pri tio,
Estas io nomata ID etikedo.

121
00:05:51,440 --> 00:05:55,250
Do tiu aparta CSS volus
apliki nur al HTML etikedo kiu havas

122
00:05:55,250 --> 00:05:58,530
tre specifa ID, kiun vi jam nomis.

123
00:05:58,530 --> 00:06:01,000
Do se vi havas ie
en via kodo, ie

124
00:06:01,000 --> 00:06:06,090
en via HTML-dosieron, etikedo kaj vi
specifi kiel atributo al tiu etikedo,

125
00:06:06,090 --> 00:06:09,060
ID egalas unika, tiu
aparta stilfolio

126
00:06:09,060 --> 00:06:15,030
tie estos nur apliki intere
ke etikedo kun la ID de unika.

127
00:06:15,030 --> 00:06:17,180
>> Vi povas ankaŭ fari ion
nomata klaso elektilo.

128
00:06:17,180 --> 00:06:19,920
Do krom havi
ID atributoj, vi povas ankaŭ

129
00:06:19,920 --> 00:06:23,130
aldonu klaso atributo al HTML etikedoj.

130
00:06:23,130 --> 00:06:27,140
Kiam vi uzas klaso atributo,
ĝi povas esti aplikita al multoblaj etikedoj.

131
00:06:27,140 --> 00:06:31,880
Do se vi havas plurajn aferojn
estas similaj, eble vi volas diri,

132
00:06:31,880 --> 00:06:35,890
malfermita etikedo bla, bla, bla,
bla, klaso egalas studentojn.

133
00:06:35,890 --> 00:06:38,190
Kaj tiam ĉi tiu aparta
stilfolio aplikus

134
00:06:38,190 --> 00:06:42,041
por ĉiu etikedo kies klaso estas lernantoj.

135
00:06:42,041 --> 00:06:44,290
En tiu kazo, ni volas agordi la
fonkoloro al flava,

136
00:06:44,290 --> 00:06:46,706
kaj ni volas agordi opakeco, kiu
estas etikedo ni ne raporti,

137
00:06:46,706 --> 00:06:52,510
sed gxuste traktas kiel travidebla
io, al 70%, en tiu kazo.

138
00:06:52,510 --> 00:06:54,430
>> Ekzistas du ebloj por
skribo stylesheets.

139
00:06:54,430 --> 00:06:56,680
Vi povas skribi ilin
rekte al via HTML

140
00:06:56,680 --> 00:06:59,690
metante la stylesheets
intere stilo etikedoj.

141
00:06:59,690 --> 00:07:03,850
Kaj tiuj stilo etikedoj iras ene de
la kapo etikedoj de via retpaĝo.

142
00:07:03,850 --> 00:07:08,240
La eble plej prefera maniero fari
ĝi estas skribi apartan Css dosiero,

143
00:07:08,240 --> 00:07:12,360
kaj tiam ligi ĝin en vian
dokumenti uzante ligilon etikedoj.

144
00:07:12,360 --> 00:07:14,690
Link etikedoj, denove, estas
malsama hiperligiloj,

145
00:07:14,690 --> 00:07:16,760
se vi memoras de nia vídeo HTML.

146
00:07:16,760 --> 00:07:19,030
Kaj karmo etikedoj estas kiel ni
tiri en apartaj dosieroj.

147
00:07:19,030 --> 00:07:23,900
Ĝi ia kiel la ekvivalento de
la include por ttt programado.

148
00:07:23,900 --> 00:07:27,140
>> Do ni rigardu table.HTML.

149
00:07:27,140 --> 00:07:29,380
Se vi memoras de nia
HTML vídeo, mi montris

150
00:07:29,380 --> 00:07:32,000
ekzemplo de tre
simpla multipliko

151
00:07:32,000 --> 00:07:35,160
tablo kiu aspektis bela
malbela, kaj eble tie estas

152
00:07:35,160 --> 00:07:38,650
maniero por fari ĝin pli bone kun
CSS, por fari ĝin vere aspektas

153
00:07:38,650 --> 00:07:41,120
pli kiel multipliko
tablo, aŭ io

154
00:07:41,120 --> 00:07:43,730
kiu ne ĝuste kungluiĝis
sen fakta divido

155
00:07:43,730 --> 00:07:45,532
inter la vicoj kaj la kolumnoj.

156
00:07:45,532 --> 00:07:47,490
Do ni estrus super al
CS50 IDE, kaj rigardu

157
00:07:47,490 --> 00:07:50,780
ĉe kiel CSS povas, ia, tweak
kion ni komencis kun antaŭe,

158
00:07:50,780 --> 00:07:53,290
kaj fari ion multe pli bonan.

159
00:07:53,290 --> 00:07:55,650
>> Do ni estas en CS50 IDE
nun, kaj se ne konas,

160
00:07:55,650 --> 00:07:58,710
ni tiri supren en tiu
tablo ke HTML-paĝo.

161
00:07:58,710 --> 00:08:01,090
Table.HTML esence
nur difinas la enhavon

162
00:08:01,090 --> 00:08:05,044
de multiple-- ĝi laŭsupoze estis
kvar de kvar multipliko tablo.

163
00:08:05,044 --> 00:08:06,210
Ĝi estas bela simpla.

164
00:08:06,210 --> 00:08:09,410
Kaj ni pensus ke estus
belaspektas bone organizita.

165
00:08:09,410 --> 00:08:15,277
Sed fakte, kiam ni antaŭrigardi ĉi paĝo,
ni vidas ke ĝi estas speco de malbelaj, ĉu ne?

166
00:08:15,277 --> 00:08:16,860
Klare ni havas vicoj kaj kolumnoj tie.

167
00:08:16,860 --> 00:08:18,350
Ekzistas ia disiĝo.

168
00:08:18,350 --> 00:08:20,040
Sed ĝi ne estas signfa disiĝo.

169
00:08:20,040 --> 00:08:23,105
Ni fakte ne ricevas
tro da informo ĉi tie.

170
00:08:23,105 --> 00:08:25,730
Kaj ekzistas neniu apartigo inter
la vicoj kaj kolumnoj en terminoj

171
00:08:25,730 --> 00:08:28,460
de horizontala aŭ vertikala reguloj.

172
00:08:28,460 --> 00:08:31,530
Ni povus probable faras ĉi
aspektas iomete pli bone.

173
00:08:31,530 --> 00:08:32,934
Do ni provu.

174
00:08:32,934 --> 00:08:34,559
Do mi tuj fermi ĉi langeto tien.

175
00:08:34,559 --> 00:08:37,434
Kaj mi tuj fermi mian table.HTML,
kaj mi havas alia versio tien

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

177
00:08:39,490 --> 00:08:40,655
Ni malfermu ke ĝis.

178
00:08:40,655 --> 00:08:42,530
La korpo de la paĝo estas
preskaux la samo,

179
00:08:42,530 --> 00:08:44,238
sed mi ŝanĝis la
iomete ĉe la supro.

180
00:08:44,238 --> 00:08:47,132
Kaj mi rulumu supren tie.

181
00:08:47,132 --> 00:08:49,340
Rimarku ke tiu tempo, mi estas
uzante enigita stilo etikedoj.

182
00:08:49,340 --> 00:08:53,550
Mi malfermis stilo etikedo, kaj mi estas nun
difinanta CSS stilfolio ĝuste interne

183
00:08:53,550 --> 00:08:54,310
de ĝi.

184
00:08:54,310 --> 00:08:56,310
Mi havas stilfolion kiu diras, tablo.

185
00:08:56,310 --> 00:08:58,170
Jen mia etikedo selector.

186
00:08:58,170 --> 00:09:01,340
Mi ne uzas punkton aŭ hash,
kion mi farus se mi

187
00:09:01,340 --> 00:09:03,710
estis uzanta ID aŭ klaso elektilo.

188
00:09:03,710 --> 00:09:06,190
Mi havas etikedo selector here-- tablo.

189
00:09:06,190 --> 00:09:10,090
Tiu stilo tuj
apliki por cxiu tablo etikedo.

190
00:09:10,090 --> 00:09:14,950
Ŝajne mi volas meti unu
rastrumera, solida blua limo,

191
00:09:14,950 --> 00:09:15,779
ene mia tablo.

192
00:09:15,779 --> 00:09:18,320
Tio sonas kiel ĝi volus verŝajne
helpi la situacio, ĉu ne?

193
00:09:18,320 --> 00:09:20,320
Ni tuj devas
tion aspektas multe pli bone.

194
00:09:20,320 --> 00:09:21,190
Do tio estas bone.

195
00:09:21,190 --> 00:09:23,540
Stile, mi ĵus
enigita mia stilfolio tien.

196
00:09:23,540 --> 00:09:25,100
Estas certe
akceptebla maniero fari ĝin.

197
00:09:25,100 --> 00:09:26,391
Ni vidu kion ĉi aspektas.

198
00:09:26,391 --> 00:09:29,790
Do mi reiros tie, kaj
Mi estos antaŭrigardi mia table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Nu, tio ne estas tre kion mi volis,
sed estas precize kion ni petis.

201
00:09:36,470 --> 00:09:39,530
Ni diris ke tiu stilo estas
tuj apliki al nia tablo.

202
00:09:39,530 --> 00:09:43,810
Nia tablo nun havas unu rastrumero
larĝe, solida blua limo ĉirkaŭ ĝi.

203
00:09:43,810 --> 00:09:46,237
Ni fakte ne ricevas
ĉe la tablo ĉeloj.

204
00:09:46,237 --> 00:09:47,570
Ni nur nun ĉe la tablo.

205
00:09:47,570 --> 00:09:49,310
Do CSS laboris.

206
00:09:49,310 --> 00:09:51,890
Oni aplikis
stilfolion al nia tablo.

207
00:09:51,890 --> 00:09:53,981
Sed ne precize fari
kion ni volis fari.

208
00:09:53,981 --> 00:09:55,730
Kiel ni akiras fari
kion ni volas fari?

209
00:09:55,730 --> 00:09:59,287
>> Nu, ni rigardu pli
versio de tiu en table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Do mi simple tuj fermi tiujn langetoj.

211
00:10:00,870 --> 00:10:03,890
Mi tuj reiros tien al mia
file arbo, kaj malfermu table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Denove, ĝi tuj belaspektas
simila tie komence.

214
00:10:10,350 --> 00:10:14,460
Sed avizo, ĉifoje, anstataŭ uzi
a stilfolio enigita dekstre en tie,

215
00:10:14,460 --> 00:10:18,870
Mi tuj ligas en
stilfolio uzante la ligilon etikedo.

216
00:10:18,870 --> 00:10:22,480
Do mi ŝajne interliganta en
stilfolio nomita tables.CSS,

217
00:10:22,480 --> 00:10:25,090
kaj tio bone egalas
stilfolio nur means-- bone,

218
00:10:25,090 --> 00:10:28,645
kio estas la dosiero relativa al kio
Mi doing-- estas stilfolio ke mi estas

219
00:10:28,645 --> 00:10:29,821
uzante mian paĝon.

220
00:10:29,821 --> 00:10:32,320
Do, se mi vere volas vidi kia
Mi faras kun la CSS tie,

221
00:10:32,320 --> 00:10:35,010
Mi bezonas iri malfermita tiu
table.CSS file tiel.

222
00:10:35,010 --> 00:10:37,490
Do ni revenu ĉi tien
denove al nia dosiero arbo.

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

224
00:10:38,660 --> 00:10:40,490
Ni pop ĝin malferma.

225
00:10:40,490 --> 00:10:43,070
Nun ni vidas iom el la CSS.

226
00:10:43,070 --> 00:10:45,630
Ŝajne, mi havas paron
de aferoj okazas ĉi tie.

227
00:10:45,630 --> 00:10:48,950
Mi ŝajne volas meti kvin
rastrumera, solida ruĝa limo,

228
00:10:48,950 --> 00:10:50,287
ĉirkaŭ mia tablo.

229
00:10:50,287 --> 00:10:52,870
Ni jam scias ke tio okazas
nur iri sur la perimetro.

230
00:10:52,870 --> 00:10:56,180
Ni vidis, ke en table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Kun ĉiu vico, mi
ŝajne volas specifi

232
00:10:58,770 --> 00:11:01,950
ke la vico alteco estas 50 rastrumeroj alta.

233
00:11:01,950 --> 00:11:05,680
Do por ĉiu vico, memori
jen kion la tr etikedo faras,

234
00:11:05,680 --> 00:11:08,550
Mi faras gxin 50 rastrumeroj alta.

235
00:11:08,550 --> 00:11:09,804
>> Finfine, mi havas komenton.

236
00:11:09,804 --> 00:11:11,470
Kaj jen kiel ni faras komentojn en CSS.

237
00:11:11,470 --> 00:11:16,174
Ĝi estas tre simila al konfiski bloko
komentoj sintakso oblikvo stelo.

238
00:11:16,174 --> 00:11:17,090
La tuta teksto kiun vi volas.

239
00:11:17,090 --> 00:11:19,470
Mankas oblikvo oblikvo kvankam en CSS.

240
00:11:19,470 --> 00:11:23,400
Por mallonga inline komentojn, ni havas
uzi ĉi aparta formato ĉi tie.

241
00:11:23,400 --> 00:11:26,830
Aspektas kiel mi faras
Multon en mia td etikedoj.

242
00:11:26,830 --> 00:11:29,710
Memoru td etikedoj, aŭ tablo
datumo, kiu vere estas nur

243
00:11:29,710 --> 00:11:32,210
la kolumnoj ene de
niaj vicoj, kaj ŝajne

244
00:11:32,210 --> 00:11:35,090
por ĉiu peco de datumoj
en mia tablo, mi volas

245
00:11:35,090 --> 00:11:38,850
por agordi la fonan koloron por
esti nigra, la koloro esti blanka,

246
00:11:38,850 --> 00:11:40,320
koloro estas malfona koloro.

247
00:11:40,320 --> 00:11:42,360
Do tiu tuj estos
la teksto de mia paĝo.

248
00:11:42,360 --> 00:11:45,140
Mi volas grandan tiparon, 22
atentigi tiparo, kaj mi volas

249
00:11:45,140 --> 00:11:47,001
ĝin esti de la tipara familio, Kartvelio.

250
00:11:47,001 --> 00:11:48,750
Do mi ne tuj
havas la defaŭlta tiparo.

251
00:11:48,750 --> 00:11:51,820
Mi tuj entajpi Kartvelio, kiu
Estas unu el tiuj ttt sekuraj tiparoj

252
00:11:51,820 --> 00:11:53,830
ke ni vidis antaŭe.

253
00:11:53,830 --> 00:11:57,284
Mi volas mian tekston vicigitaj
centre, en la mezo de la skatolo,

254
00:11:57,284 --> 00:11:59,450
Mi ne volas ke ĝi restu
vicigitaj aŭ dekstra vicigitaj.

255
00:11:59,450 --> 00:12:03,461
Mi volas mian kolumno larĝa
esti 50 rastrumeroj larĝa tiel.

256
00:12:03,461 --> 00:12:05,210
Ni rigardu
kion tio aspektas kiel,

257
00:12:05,210 --> 00:12:07,470
kaj vidi se tiu estas eble plibonigo.

258
00:12:07,470 --> 00:12:12,890
Do mi tuj iras al table3.HTML, kiu
revokon, inkludas table.CSS kiel ligilo,

259
00:12:12,890 --> 00:12:14,830
kaj ni antaŭrigardi ĝin.

260
00:12:14,830 --> 00:12:16,800
Tio estas multe pli bone, ĉu ne?

261
00:12:16,800 --> 00:12:20,004
Tiu estas efektive komencas aspekti
multe pli kiel multipliko tablo.

262
00:12:20,004 --> 00:12:21,920
Mi havas tion ruĝan limon
ĉirkaŭ mia tablo sed nun

263
00:12:21,920 --> 00:12:26,700
Mi ankaŭ indikis, ke
ĉiu vico estas 50 rastrumeroj larĝa,

264
00:12:26,700 --> 00:12:30,220
aŭ ĝi estas 50 rastrumeroj tall-- ekskuzo
kunulinon ĉiu kolumno estas 50 rastrumeroj larĝa.

265
00:12:30,220 --> 00:12:34,251
La datumoj en ĉiu kolumno, kaj nur
la datumoj, havas nigran fonon.

266
00:12:34,251 --> 00:12:36,000
Tial do tiuj,
blankaj linioj estas tie.

267
00:12:36,000 --> 00:12:38,836
Ĉar la spaco en
inter ĉiuj el tiuj ĉeloj,

268
00:12:38,836 --> 00:12:40,710
ĝi ne estas limo en
kaj de sin, estas nur

269
00:12:40,710 --> 00:12:43,170
Mi nur plenigi la
ĉeloj, kiuj reale

270
00:12:43,170 --> 00:12:46,310
faras la limojn de la tablo, kiu
ŝajne ekzistas ĉiuj kune, ĝi

271
00:12:46,310 --> 00:12:47,887
estis nur maldikaj blankaj linioj.

272
00:12:47,887 --> 00:12:48,720
Nun ili estas videblaj.

273
00:12:48,720 --> 00:12:50,380
Nun ili pop off sur la ekrano.

274
00:12:50,380 --> 00:12:52,920
Kaj tiel tio estas tre simpla
stilfolio ke mi aplikis,

275
00:12:52,920 --> 00:12:56,850
kaj nun mia tablo aspektas multe pli kiel
kvar de kvar multipliko tablo

276
00:12:56,850 --> 00:13:00,950
anstataŭ ĝuste senorda amaso, kie
ĉio estas klare vicoj kaj kolumnoj,

277
00:13:00,950 --> 00:13:03,717
sed ne súper bone organizita.

278
00:13:03,717 --> 00:13:06,800
Ni vere nur skrapi la surfaco
de kio vi povas fari kun CSS tie.

279
00:13:06,800 --> 00:13:10,330
Feliĉe la CSS dokumentado
Estas bela simpla.

280
00:13:10,330 --> 00:13:14,000
Vi uzos pluraj de liaj
atributoj, sufiĉe ofte.

281
00:13:14,000 --> 00:13:16,087
La ones ni parolis pri
pli frue en ĉi tiu video.

282
00:13:16,087 --> 00:13:18,170
Ekzistas pluraj kiu vi
probable ne uzos ĉiujn.

283
00:13:18,170 --> 00:13:19,469
Kaj tio estas bone, tro.

284
00:13:19,469 --> 00:13:22,010
Sed ĝuste scias, ke tie estas
Multa dokumentado tie.

285
00:13:22,010 --> 00:13:25,110
Do eĉ se ni ne kovris ĉion,
vi certe ne lasita sur via propra.

286
00:13:25,110 --> 00:13:26,780
Sed CSS estas vere amuza
eksperimenti kun.

287
00:13:26,780 --> 00:13:29,040
Kaj mi forte kuraĝigas vin
ludi proksimume kun viaj retpaĝoj,

288
00:13:29,040 --> 00:13:32,180
kaj vidi kiel vin povas fari ilin
fasadon por plibonigi la uzanto

289
00:13:32,180 --> 00:13:34,790
sperto de viziti vian paĝon.

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

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

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