1
00:00:00,000 --> 00:00:05,660
>> [Speel van musiek]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: So laat ons 'n meer
video om te praat oor 'n meer taal.

3
00:00:08,740 --> 00:00:10,800
Hierdie keer het ons sal praat oor CSS.

4
00:00:10,800 --> 00:00:13,460
So CSS, wat is kort vir
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
is 'n ander taal wat ons gebruik
wanneer die bou van webwerwe.

6
00:00:16,149 --> 00:00:17,190
Dink so daaroor.

7
00:00:17,190 --> 00:00:20,900
As HTML is wat ons gebruik om die te organiseer
inhoud wil ons op ons bladsy te sit,

8
00:00:20,900 --> 00:00:25,390
CSS is die instrument wat ons in die algemeen gebruik
om aan te pas hoe ons webblaaie te kyk,

9
00:00:25,390 --> 00:00:30,410
en hoe die gebruikers ervaring regtig
is, interaksie met ons webwerf.

10
00:00:30,410 --> 00:00:32,535
>> Soortgelyk aan HTML, CSS is
nie 'n programmeertaal.

11
00:00:32,535 --> 00:00:33,451
Dit hoef nie logika.

12
00:00:33,451 --> 00:00:34,595
Dit maak nie veranderlikes.

13
00:00:34,595 --> 00:00:38,890
Dit maak nie enige soort van wat
vloei verwant dinge wat C doen.

14
00:00:38,890 --> 00:00:40,150
Dit is 'n stilering taal.

15
00:00:40,150 --> 00:00:42,810
En sy sintaksis is redelik
eenvoudig, en net beskryf

16
00:00:42,810 --> 00:00:46,240
hoe die elemente van ons
bladsy het sekere HTML

17
00:00:46,240 --> 00:00:48,190
elemente moet verander.

18
00:00:48,190 --> 00:00:51,170
Aan die einde, as jy nie
nog gekyk ons ​​video op HTML,

19
00:00:51,170 --> 00:00:53,290
vertroud met of
HTML algemeen, jy

20
00:00:53,290 --> 00:00:57,430
dalk 'n blik op wat neem
Eerstens, omdat hierdie bespreking van CSS

21
00:00:57,430 --> 00:01:00,700
gaan afhang
kennis van HTML.

22
00:01:00,700 --> 00:01:03,740
>> So hier is 'n baie
eenvoudige CSS style.

23
00:01:03,740 --> 00:01:06,480
Selfs as jy nog nooit
geprogrammeer met CSS voor,

24
00:01:06,480 --> 00:01:10,624
Ek is redelik seker jy kan uitvind
presies wat hierdie style doen.

25
00:01:10,624 --> 00:01:11,290
Wat doen dit?

26
00:01:11,290 --> 00:01:15,470
Wel, toegepas op die liggaam van ons web
bladsy, alles tussen liggaam tags

27
00:01:15,470 --> 00:01:19,631
op ons HTML, en dit stel die
agtergrond van die bladsy na blou.

28
00:01:19,631 --> 00:01:21,130
Wel, dit is 'n baie eenvoudige style.

29
00:01:21,130 --> 00:01:23,269
Dit is eintlik baie menslike
vriendelike taal, CSS.

30
00:01:23,269 --> 00:01:26,560
So selfs as jy nog nooit gebruik voor,
jy waarskynlik kon raai wat dit gedoen het.

31
00:01:26,560 --> 00:01:30,140
In werklikheid, as ons 'n bladsy laai, waar
hierdie style is een of ander manier ingebed,

32
00:01:30,140 --> 00:01:36,240
die agtergrond kleur van ons sou bladsy
wees blou, en nie die standaard wit.

33
00:01:36,240 --> 00:01:37,670
>> So hoe kan ons bou style?

34
00:01:37,670 --> 00:01:39,700
Wel in die eerste, moet ons
identifiseer 'n keurder.

35
00:01:39,700 --> 00:01:42,970
In die laaste voorbeeld,
dat selector was liggaam.

36
00:01:42,970 --> 00:01:45,050
Dan het ons 'n oop
krullerige brace, en ons is

37
00:01:45,050 --> 00:01:48,410
gaan om te begin die definisie van die
style vir daardie selector.

38
00:01:48,410 --> 00:01:51,800
In tussen die krulhakies ons
net 'n lys van sleutel waarde pare.

39
00:01:51,800 --> 00:01:56,205
Die vorige waarde pair was
agtergrond blou kommapunt,

40
00:01:56,205 --> 00:01:57,830
maar ons kon meer en meer van hierdie dinge te doen.

41
00:01:57,830 --> 00:02:02,330
Jy kan verskeie dinge wat aansoek doen
dat die tag, wat selector liggaam.

42
00:02:02,330 --> 00:02:05,960
Elke een van hulle is geskei deur 'n
kommapunt, en ons elkeen van hulle noem

43
00:02:05,960 --> 00:02:08,949
'n verklaring, 'n CSS verklaring.

44
00:02:08,949 --> 00:02:12,410
Wanneer ons klaar is met al die stilering ons
wil aansoek doen om daardie spesifieke tag,

45
00:02:12,410 --> 00:02:15,300
ons het net 'n sluiting krullerige
gereed om die style eindig,

46
00:02:15,300 --> 00:02:19,640
en ons klaar die definisie van die style
vir daardie spesifieke selector.

47
00:02:19,640 --> 00:02:21,341
>> Wat is 'n paar algemene CSS eienskappe?

48
00:02:21,341 --> 00:02:23,590
Wel, dalk wil jy om te sit
'n grens rondom iets.

49
00:02:23,590 --> 00:02:26,850
Sodat jy kan sê, grens,
dat jou sleutel sou wees,

50
00:02:26,850 --> 00:02:29,460
en dan jou waardes sal wees,
watter styl, kleur, en breedte

51
00:02:29,460 --> 00:02:30,209
jy wil dit te wees.

52
00:02:30,209 --> 00:02:33,530
So die styl kan 'n vaste wees
lyn, 'n stippellyn, 'n gebroke lyn,

53
00:02:33,530 --> 00:02:36,020
'n rif lyn, wat kronkellyn sou wees.

54
00:02:36,020 --> 00:02:38,790
Miskien wil jy dit
wees blou of swart of groen.

55
00:02:38,790 --> 00:02:41,490
Miskien het jy dit wil hê
1 of 2 of 10 pixels wyd nie.

56
00:02:41,490 --> 00:02:43,254
Jy kan al hierdie dinge gee.

57
00:02:43,254 --> 00:02:46,420
Miskien wil jy die agtergrond stel
kleur van jou bladsy in 'n bepaalde manier.

58
00:02:46,420 --> 00:02:49,215
Ons het reeds dat, die opstel van die
agtergrond van die liggaam blou.

59
00:02:49,215 --> 00:02:52,080
>> Dan kan jy 'n sleutel woord te gebruik,
so CSS sekere kleure

60
00:02:52,080 --> 00:02:55,950
wat gebou in dit, blou, groen,
swart, 'n baie eenvoudige kleure wat ons ken.

61
00:02:55,950 --> 00:02:59,110
Maar jy kan ook enige spesifiseer
hex kleur wat jy wil.

62
00:02:59,110 --> 00:03:05,190
Onthou dat kleure geïdentifiseer kan word
deur 'n stel van drie blok getalle

63
00:03:05,190 --> 00:03:08,500
0-255, rg en b, die
rooi, groen en blou komponent.

64
00:03:08,500 --> 00:03:10,590
En so kan ons spesifiseer
enige kleur wat ons wil deur

65
00:03:10,590 --> 00:03:15,520
in plaas van die gebruik van blou of groen of swart,
gebruik van pond en dan ses syfers van blok,

66
00:03:15,520 --> 00:03:18,310
en dit sou ons te gee
die ses syfer kleur.

67
00:03:18,310 --> 00:03:19,850
So wat is die agtergrond.

68
00:03:19,850 --> 00:03:21,975
>> Ons het ook die voorgrond
kleur, wat gewoonlik

69
00:03:21,975 --> 00:03:24,140
gaan na die teks van jou bladsy wees.

70
00:03:24,140 --> 00:03:28,850
En jy kan insgelyks doen
met die sleutel woord en of ses syfer blok.

71
00:03:28,850 --> 00:03:32,140
Sodat jy kan enige kleur spesifiseer jy
wil vir die teks van jou bladsy

72
00:03:32,140 --> 00:03:36,370
teen 'n bepaalde
agtergrond, bo.

73
00:03:36,370 --> 00:03:39,100
Jy kan ook verander en te hanteer
met font, en die manier waarop die teks

74
00:03:39,100 --> 00:03:40,400
gelewer op die bladsy.

75
00:03:40,400 --> 00:03:42,010
>> So kan jy jou font grootte te verander.

76
00:03:42,010 --> 00:03:46,320
Jy kan die sleutel woorde, soos ekstra te gebruik,
ekstra klein, of xx klein, medium of,

77
00:03:46,320 --> 00:03:47,660
groot, en so aan.

78
00:03:47,660 --> 00:03:50,750
Jy kan vaste punte te gebruik, 10
punt, 12 punt, en so aan.

79
00:03:50,750 --> 00:03:55,850
Jy kan persentasies, 80%, 20% gebruik,
waar 100% is die standaard font

80
00:03:55,850 --> 00:03:59,220
grootte, wat gewoonlik gaan
wees iets soos 11 of 12 punte.

81
00:03:59,220 --> 00:04:01,659
Of jy kan selfs baseer dit af
van die mees onlangse lettergrootte.

82
00:04:01,659 --> 00:04:04,950
As jy net geskryf iets en jy weet
wat jy wil hê, is om dit te kleiner,

83
00:04:04,950 --> 00:04:08,241
maar jy weet nie presies wat die grootte wat jy
dit wil hê, goed, jy kan net sê,

84
00:04:08,241 --> 00:04:09,330
lettergrootte kleiner.

85
00:04:09,330 --> 00:04:14,344
En dit sal baseer af van die,
net bo, dit is lettergrootte.

86
00:04:14,344 --> 00:04:15,760
En jy kan kleiner of groter te kry.

87
00:04:15,760 --> 00:04:18,390
So daar is 'n baie verskillende
maniere om lettergrootte spesifiseer.

88
00:04:18,390 --> 00:04:20,690
>> Jy kan ook spesifiseer watter
font familie wat jy wil.

89
00:04:20,690 --> 00:04:23,360
As jy 'n bepaalde
naam, daar is 'n manier CSS--

90
00:04:23,360 --> 00:04:27,270
ons gaan nie om daaroor te praat
here-- 'n baie spesifieke font definieer

91
00:04:27,270 --> 00:04:28,980
en embed dit in jou bladsy.

92
00:04:28,980 --> 00:04:30,620
Jy kan ook gebruik generiese name.

93
00:04:30,620 --> 00:04:33,540
Daar is 'n baie veilige web fonts
wat vooraf gedefinieer in CSS.

94
00:04:33,540 --> 00:04:36,352
En as jy 'n gebruiker van Microsoft
Kantoor in die laaste 20 jaar,

95
00:04:36,352 --> 00:04:38,810
is jy waarskynlik vertroud met
'n groot deel van hierdie web veilige fonts

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

97
00:04:44,640 --> 00:04:45,470
en so aan.

98
00:04:45,470 --> 00:04:47,170
Dit is al beskou web veilige fonts.

99
00:04:47,170 --> 00:04:49,169
En eintlik deel van die
Daarom het hulle gekom om te wees

100
00:04:49,169 --> 00:04:54,140
is om gebruik te word om web-- maak elke bladsy
het toegang tot hierdie standaard stel fonts

101
00:04:54,140 --> 00:04:58,480
met verskeie serifs, en dit alles
font dinge wat ons sal nie in,

102
00:04:58,480 --> 00:05:01,130
maar dit is gewoonlik
toeganklik in jou CSS,

103
00:05:01,130 --> 00:05:04,029
selfs as jy dit nie doen nie
die fonts anders definieer.

104
00:05:04,029 --> 00:05:07,070
Laastens, kan jy jou teks te pas,
in plaas van dit wat by verstek in lyn

105
00:05:07,070 --> 00:05:09,310
na links, jy kan
belyn dit na die regte,

106
00:05:09,310 --> 00:05:13,740
of jy kan, sluit dit gesentreer, of
geregverdig sodat dit tref beide marges.

107
00:05:13,740 --> 00:05:16,800
So dit is al die opsies wat jy kan gebruik
om te verander wat jou teks lyk,

108
00:05:16,800 --> 00:05:20,120
en hoe dit vertoon word op jou bladsy.

109
00:05:20,120 --> 00:05:22,180
>> Jou keurders nie
moet net tags wees.

110
00:05:22,180 --> 00:05:25,539
Ons het vroeër gesien het 'n liggaam tag
selector, en tag selector

111
00:05:25,539 --> 00:05:26,580
lyk net soos dit.

112
00:05:26,580 --> 00:05:30,020
Jy noem 'n tag, en dan moet jy
definieer 'n stylblad vir daardie tag.

113
00:05:30,020 --> 00:05:32,660
Maar jy kan ook iets te doen
genoem 'n ID selector.

114
00:05:32,660 --> 00:05:34,390
'N ID selector lyk redelik soortgelyk.

115
00:05:34,390 --> 00:05:38,100
Maar sien, wat nou ek is nie die gebruik van
'n HTML tag, ek gebruik, in hierdie geval,

116
00:05:38,100 --> 00:05:40,720
#unique, of hash uniek.

117
00:05:40,720 --> 00:05:42,930
As jy onthou van ons
video op HTML, het ons gepraat

118
00:05:42,930 --> 00:05:45,620
oor hoe tags eienskappe kan hê.

119
00:05:45,620 --> 00:05:48,340
>> En een kenmerk wat van toepassing is
om pretty much al HTML tags,

120
00:05:48,340 --> 00:05:51,440
maar ons het nie daaroor praat nie,
is iets genaamd 'n ID-tag.

121
00:05:51,440 --> 00:05:55,250
So hierdie spesifieke CSS sou
slegs van toepassing op HTML tag wat

122
00:05:55,250 --> 00:05:58,530
'n baie spesifieke ID, wat jy genoem het.

123
00:05:58,530 --> 00:06:01,000
So as jy iewers
in jou kode, iewers

124
00:06:01,000 --> 00:06:06,090
in jou HTML-lêer, 'n tag en jy
spesifiseer as 'n kenmerk dat die tag,

125
00:06:06,090 --> 00:06:09,060
ID gelyk unieke, hierdie
bepaalde style

126
00:06:09,060 --> 00:06:15,030
hier sal slegs van toepassing tussen
dat tag met die ID van die unieke.

127
00:06:15,030 --> 00:06:17,180
>> Jy kan ook iets te doen
bekend as 'n klas selector.

128
00:06:17,180 --> 00:06:19,920
So bykomend tot met
ID eienskappe, kan jy ook

129
00:06:19,920 --> 00:06:23,130
voeg 'n kenmerk klas HTML tags.

130
00:06:23,130 --> 00:06:27,140
En wanneer jy 'n kenmerk klas te gebruik,
dit toegepas kan word om verskeie tags.

131
00:06:27,140 --> 00:06:31,880
So as jy 'n paar dinge wat
is soortgelyk, miskien jy wil sê,

132
00:06:31,880 --> 00:06:35,890
oop tag blah, blah, blah,
blah, klas gelyk studente.

133
00:06:35,890 --> 00:06:38,190
En dan hierdie spesifieke
style van toepassing sal wees

134
00:06:38,190 --> 00:06:42,041
elke tag wie klas studente.

135
00:06:42,041 --> 00:06:44,290
In hierdie geval, sou ons stel die
agtergrond tot geel,

136
00:06:44,290 --> 00:06:46,706
en ons wil ondeursigtigheid te stel, wat
is 'n tag ons nie praat oor,

137
00:06:46,706 --> 00:06:52,510
maar net te doen het met hoe deursigtig
iets is, tot 70%, in hierdie geval.

138
00:06:52,510 --> 00:06:54,430
>> Daar is twee opsies vir die
skryf style.

139
00:06:54,430 --> 00:06:56,680
Jy kan hulle skryf
direk in jou HTML

140
00:06:56,680 --> 00:06:59,690
deur die plasing van die style
tussen styl tags.

141
00:06:59,690 --> 00:07:03,850
En dié styl tags gaan binnekant van
die hoof van die tags jou webblad.

142
00:07:03,850 --> 00:07:08,240
Die miskien meer voorkeur manier om dit te doen
dit is om 'n aparte Css lêer skryf,

143
00:07:08,240 --> 00:07:12,360
en skakel dit dan in jou
dokumenteer behulp skakel tags.

144
00:07:12,360 --> 00:07:14,690
Link tags, weer, is
anders hiperskakels,

145
00:07:14,690 --> 00:07:16,760
As jy onthou van ons video 'n HTML.

146
00:07:16,760 --> 00:07:19,030
En 'n skakel tags is hoe ons
trek in aparte lêers.

147
00:07:19,030 --> 00:07:23,900
Dit soort van soos die ekwivalent van
die include vir web ontwikkeling.

148
00:07:23,900 --> 00:07:27,140
>> So laat ons neem 'n blik op table.HTML.

149
00:07:27,140 --> 00:07:29,380
As jy onthou van ons
HTML video, ek het

150
00:07:29,380 --> 00:07:32,000
'n voorbeeld van 'n baie
eenvoudige vermenigvuldiging

151
00:07:32,000 --> 00:07:35,160
tafel wat mooi gekyk
lelik, en miskien is daar '

152
00:07:35,160 --> 00:07:38,650
'n manier om dit beter te maak met
CSS, maak dit eintlik lyk

153
00:07:38,650 --> 00:07:41,120
meer soos 'n vermenigvuldiging
tafel, of iets

154
00:07:41,120 --> 00:07:43,730
wat nie net saam vas
met geen werklike verdeling

155
00:07:43,730 --> 00:07:45,532
tussen die rye en kolomme.

156
00:07:45,532 --> 00:07:47,490
So laat kop bo aan
CS50 IDE, en neem 'n blik

157
00:07:47,490 --> 00:07:50,780
hoe CSS kan, soort van, tweak
wat ons het begin met voor,

158
00:07:50,780 --> 00:07:53,290
en maak dit iets wat 'n baie beter.

159
00:07:53,290 --> 00:07:55,650
>> So ons is in CS50 IDE
nou, en as onbekende,

160
00:07:55,650 --> 00:07:58,710
ons sal op trek in hierdie
tabel HTML-bladsy.

161
00:07:58,710 --> 00:08:01,090
Table.HTML basies
net definieer die inhoud

162
00:08:01,090 --> 00:08:05,044
van 'n multiple-- dit veronderstel was om te wees
'n vier deur vier vermenigvuldiging tafel.

163
00:08:05,044 --> 00:08:06,210
Dit is redelik eenvoudig.

164
00:08:06,210 --> 00:08:09,410
En ons sou dink dat dit sou
kyk mooi goed georganiseer.

165
00:08:09,410 --> 00:08:15,277
Maar in werklikheid, wanneer ons 'n voorbeeld van hierdie bladsy
sien ons dat dit is soort van lelik, reg?

166
00:08:15,277 --> 00:08:16,860
Duidelik het ons rye en kolomme hier.

167
00:08:16,860 --> 00:08:18,350
Daar 'n soort van skeiding.

168
00:08:18,350 --> 00:08:20,040
Maar dit is nie 'n betekenisvolle skeiding.

169
00:08:20,040 --> 00:08:23,105
Ons is nie eintlik om
te veel inligting hier.

170
00:08:23,105 --> 00:08:25,730
En daar is geen skeiding tussen
die rye en kolomme in terme

171
00:08:25,730 --> 00:08:28,460
horisontale of vertikale reëls.

172
00:08:28,460 --> 00:08:31,530
Ons kan dit waarskynlik '
kyk 'n bietjie beter.

173
00:08:31,530 --> 00:08:32,934
So kom ons probeer.

174
00:08:32,934 --> 00:08:34,559
So ek gaan hierdie blad hier te sluit.

175
00:08:34,559 --> 00:08:37,434
En ek gaan my table.HTML sluit,
en ek het 'n ander weergawe hier

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

177
00:08:39,490 --> 00:08:40,655
Ons sal oop te maak.

178
00:08:40,655 --> 00:08:42,530
Die liggaam van die bladsy is
pretty much dieselfde,

179
00:08:42,530 --> 00:08:44,238
maar ek het verander
bietjie aan die bokant.

180
00:08:44,238 --> 00:08:47,132
En ek sal hier blaai.

181
00:08:47,132 --> 00:08:49,340
Let daarop dat hierdie tyd, ek is
met behulp van ingeboude styl tags.

182
00:08:49,340 --> 00:08:53,550
Ek het 'n styl tag geopen, en ek is nou
definisie van 'n CSS style net binne

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

184
00:08:54,310 --> 00:08:56,310
Ek het 'n stylblad wat sê, tafel.

185
00:08:56,310 --> 00:08:58,170
Dit is my tag selector.

186
00:08:58,170 --> 00:09:01,340
Ek is nie die gebruik van dot of hash,
wat ek sou as ek doen

187
00:09:01,340 --> 00:09:03,710
was met 'n ID of 'n klas selector.

188
00:09:03,710 --> 00:09:06,190
Ek het 'n tag selector here-- tafel.

189
00:09:06,190 --> 00:09:10,090
Hierdie styl gaan
van toepassing op elke tafel tag.

190
00:09:10,090 --> 00:09:14,950
Blykbaar wil ek 'n een sit
pixel wye, soliede blou grens,

191
00:09:14,950 --> 00:09:15,779
in my tafel.

192
00:09:15,779 --> 00:09:18,320
Dit klink soos dit sou waarskynlik
help om die situasie reg?

193
00:09:18,320 --> 00:09:20,320
Ons gaan hê
dinge lyk baie beter.

194
00:09:20,320 --> 00:09:21,190
So dit is goed.

195
00:09:21,190 --> 00:09:23,540
Stilisties, ek het net
ingebed my style hier.

196
00:09:23,540 --> 00:09:25,100
Dit is beslis 'n
aanvaarbare manier om dit te doen.

197
00:09:25,100 --> 00:09:26,391
Kom ons kyk wat dit lyk soos.

198
00:09:26,391 --> 00:09:29,790
So sal ek weer hier af te gaan, en
Ek sal gaan n voorbeeld van my table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Wel, dit is nie heeltemal wat ek wou,
maar dit is presies wat ons gevra het.

201
00:09:36,470 --> 00:09:39,530
Ons het gesê dat hierdie styl is
gaan om aansoek te doen om ons tafel.

202
00:09:39,530 --> 00:09:43,810
Ons tafel het nou 'n een pixel
wye, soliede blou grens rondom dit.

203
00:09:43,810 --> 00:09:46,237
Ons is nie eintlik om
by die tafel selle.

204
00:09:46,237 --> 00:09:47,570
Ons is net om by die tafel.

205
00:09:47,570 --> 00:09:49,310
So CSS gewerk.

206
00:09:49,310 --> 00:09:51,890
Dit het 'n aansoek gedoen
style om ons tafel.

207
00:09:51,890 --> 00:09:53,981
Maar nie heeltemal nie
wat ons wou om dit te doen.

208
00:09:53,981 --> 00:09:55,730
Hoe kry ons te doen
wat ons wil om dit te doen?

209
00:09:55,730 --> 00:09:59,287
>> Wel, laat ons neem 'n blik op 'n meer
weergawe van hierdie in table3.HTML.

210
00:09:59,287 --> 00:10:00,870
So is ek net gaan hierdie oortjies toemaak.

211
00:10:00,870 --> 00:10:03,890
Ek gaan hier terug oor gaan na my
lêer boom en maak table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Weereens, dit gaan kyk mooi
soortgelyke hier aan die begin.

214
00:10:10,350 --> 00:10:14,460
Maar kennisgewing, hierdie tyd, in plaas van die gebruik van
'n stylblad ingebed reg daar,

215
00:10:14,460 --> 00:10:18,870
Ek gaan om te skakel in 'n
style met behulp van die skakel tag.

216
00:10:18,870 --> 00:10:22,480
So ek glo in 'n koppel
style genoem tables.CSS,

217
00:10:22,480 --> 00:10:25,090
en dit goed gelyk
style net means-- goed,

218
00:10:25,090 --> 00:10:28,645
wat is hierdie lêer relatief tot wat
Ek is doing-- is 'n stylblad dat ek

219
00:10:28,645 --> 00:10:29,821
die gebruik van vir my bladsy.

220
00:10:29,821 --> 00:10:32,320
So as ek wil regtig om te sien wat
Ek doen met die CSS hier

221
00:10:32,320 --> 00:10:35,010
Ek nodig het om oop te gaan wat
table.CSS lêer as well.

222
00:10:35,010 --> 00:10:37,490
So ons sal terug te gaan oor hier
weer ons lêer boom.

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

224
00:10:38,660 --> 00:10:40,490
Ons sal dit pop oop.

225
00:10:40,490 --> 00:10:43,070
Nou ons sien 'n bietjie van die CSS.

226
00:10:43,070 --> 00:10:45,630
Blykbaar, ek het 'n paar
dinge hier aangaan nie.

227
00:10:45,630 --> 00:10:48,950
Ek wil glo 'n vyf te sit
pixel wye, soliede rooi grens,

228
00:10:48,950 --> 00:10:50,287
rondom my tafel.

229
00:10:50,287 --> 00:10:52,870
Ons weet reeds dat dit gaan
om net te gaan op die omtrek.

230
00:10:52,870 --> 00:10:56,180
Ons het gesien dat in table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Met elke ry, ek
blykbaar wil spesifiseer

232
00:10:58,770 --> 00:11:01,950
dat die ryhoogte is 50 pixels hoog.

233
00:11:01,950 --> 00:11:05,680
So vir elke ry, onthou
dit is wat die tr tag doen,

234
00:11:05,680 --> 00:11:08,550
Ek maak dit 50 pixels hoog.

235
00:11:08,550 --> 00:11:09,804
>> Laastens, ek het hierdie kommentaar.

236
00:11:09,804 --> 00:11:11,470
En dit is hoe ons kommentaar in CSS.

237
00:11:11,470 --> 00:11:16,174
Dit is baie soortgelyk aan blok te gryp
kommentaar sintaksis slash ster.

238
00:11:16,174 --> 00:11:17,090
Al die teks wat jy wil.

239
00:11:17,090 --> 00:11:19,470
Daar is geen slash slash al in CSS.

240
00:11:19,470 --> 00:11:23,400
Vir 'n kort inline kommentaar, ons het
hierdie spesifieke formaat hier te gebruik.

241
00:11:23,400 --> 00:11:26,830
Dit lyk asof ek 'n doen
Baie van die dinge in my td tags.

242
00:11:26,830 --> 00:11:29,710
Onthou td tags, of tafel
data, wat eintlik net

243
00:11:29,710 --> 00:11:32,210
die kolomme binnekant van
ons rye, en blykbaar

244
00:11:32,210 --> 00:11:35,090
vir elke stukkie van data
in my tafel, ek wil

245
00:11:35,090 --> 00:11:38,850
op die agtergrond kleur te stel om
wees swart, die kleur wit wees,

246
00:11:38,850 --> 00:11:40,320
kleur is voorgrond kleur.

247
00:11:40,320 --> 00:11:42,360
So dit gaan wees
die teks van my bladsy.

248
00:11:42,360 --> 00:11:45,140
Ek wil 'n groot font, 22
wys font, en ek wil

249
00:11:45,140 --> 00:11:47,001
dit moet wees van die font familie, Georgia.

250
00:11:47,001 --> 00:11:48,750
So ek is nie van plan om
die verstek skrif.

251
00:11:48,750 --> 00:11:51,820
Ek gaan Georgia, spesifiseer watter
is een van daardie web veilige fonts

252
00:11:51,820 --> 00:11:53,830
dat ons voorheen gesien het.

253
00:11:53,830 --> 00:11:57,284
Ek wil my teks in lyn
sentraal, in die middel van die boks,

254
00:11:57,284 --> 00:11:59,450
Ek wil dit nie gelaat word
lyn of regs belyn.

255
00:11:59,450 --> 00:12:03,461
En ek wil my kolomwydte
te wees 50 pixels wyd as well.

256
00:12:03,461 --> 00:12:05,210
Kom ons neem 'n blik op
wat dit lyk,

257
00:12:05,210 --> 00:12:07,470
en kyk of dit is dalk 'n verbetering.

258
00:12:07,470 --> 00:12:12,890
So ek gaan om te gaan na table3.HTML, wat
Onthou, sluit table.CSS as 'n skakel,

259
00:12:12,890 --> 00:12:14,830
en ons sal dit 'n voorbeeld.

260
00:12:14,830 --> 00:12:16,800
Dit is 'n baie beter, reg?

261
00:12:16,800 --> 00:12:20,004
Dit is eintlik begin om 'n lyk
baie meer soos 'n tafel van vermenigvuldiging.

262
00:12:20,004 --> 00:12:21,920
Ek het daardie rooi grens
rondom my tafel maar nou

263
00:12:21,920 --> 00:12:26,700
Ek het ook bepaal dat
elke ry is 50 pixels wyd,

264
00:12:26,700 --> 00:12:30,220
of is dit 50 pixels tall-- verskoning
me-- elke kolom is 50 pixels wyd nie.

265
00:12:30,220 --> 00:12:34,251
Die data in elke kolom, en slegs
die data, het 'n swart agtergrond.

266
00:12:34,251 --> 00:12:36,000
So dit is waarom diegene
wit lyne is daar.

267
00:12:36,000 --> 00:12:38,836
Omdat die ruimte in
tussen al die selle,

268
00:12:38,836 --> 00:12:40,710
dit is nie 'n grens in
en van die self, dit is net

269
00:12:40,710 --> 00:12:43,170
Ek is maar net in te vul die
selle, wat eintlik

270
00:12:43,170 --> 00:12:46,310
maak die grense van die tafel, wat
blykbaar bestaan ​​het nie almal saam, dit

271
00:12:46,310 --> 00:12:47,887
was net dun wit lyne.

272
00:12:47,887 --> 00:12:48,720
Nou is hulle sigbaar.

273
00:12:48,720 --> 00:12:50,380
Nou pop hulle af op die skerm.

274
00:12:50,380 --> 00:12:52,920
En so is dit 'n baie eenvoudige
style wat ek gedoen het,

275
00:12:52,920 --> 00:12:56,850
en nou my tafel lyk baie meer soos
'n vier deur vier vermenigvuldiging tafel,

276
00:12:56,850 --> 00:13:00,950
in plaas van 'n regverdige deurmekaar gemors, waar
alles is duidelik rye en kolomme,

277
00:13:00,950 --> 00:13:03,717
maar nie super goed georganiseer.

278
00:13:03,717 --> 00:13:06,800
Ons is regtig net krap die oppervlak
van wat jy hier kan doen met CSS.

279
00:13:06,800 --> 00:13:10,330
Gelukkig het die CSS dokumentasie
is redelik eenvoudig.

280
00:13:10,330 --> 00:13:14,000
Jy sal 'n paar van die gebruik van sy
eienskappe, redelik gereeld.

281
00:13:14,000 --> 00:13:16,087
Die mense het ons gepraat oor
vroeër in hierdie video.

282
00:13:16,087 --> 00:13:18,170
Daar is verskeie dat jy
sal waarskynlik nie gebruik nie.

283
00:13:18,170 --> 00:13:19,469
En dit is ook goed.

284
00:13:19,469 --> 00:13:22,010
Maar net weet, dat daar 'n
baie dokumentasie wat daar is.

285
00:13:22,010 --> 00:13:25,110
So selfs as ons nie dek alles,
jy beslis nie links op jou eie.

286
00:13:25,110 --> 00:13:26,780
Maar CSS is regtig pret
om te eksperimenteer met.

287
00:13:26,780 --> 00:13:29,040
En ek sou raai u
om te speel met jou web bladsye,

288
00:13:29,040 --> 00:13:32,180
en sien hoe jy hulle kan maak
lyk en voel aan die gebruiker te verbeter

289
00:13:32,180 --> 00:13:34,790
ervaring van die besoek van jou bladsy.

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

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

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