1
00:00:00,000 --> 00:00:05,660
>> [Muusika mängib]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Võtame veel ühe
video rääkida veel ühte keelt.

3
00:00:08,740 --> 00:00:10,800
Seekord räägime CSS.

4
00:00:10,800 --> 00:00:13,460
Nii CSS, mis on lühike
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
on teine ​​keel mida me kasutame
ehitamisel veebilehtedele.

6
00:00:16,149 --> 00:00:17,190
Mõtle seda niimoodi.

7
00:00:17,190 --> 00:00:20,900
Kui HTML on see, mida me kasutame, et korraldada
sisu tahame panna meie lehel,

8
00:00:20,900 --> 00:00:25,390
CSS on vahend, mida me tavaliselt kasutada
kohandada, kuidas meie veebilehed välja,

9
00:00:25,390 --> 00:00:30,410
ja kuidas kasutaja kogemus tõesti
on, suheldes meie veebilehel.

10
00:00:30,410 --> 00:00:32,535
>> Sarnaselt HTML, CSS on
ei programmeerimiskeelt.

11
00:00:32,535 --> 00:00:33,451
See ei ole loogiline.

12
00:00:33,451 --> 00:00:34,595
See ei pea muutujaid.

13
00:00:34,595 --> 00:00:38,890
See ei ole mingit et
voolu seotud asju, C teeb.

14
00:00:38,890 --> 00:00:40,150
See on stiil keeles.

15
00:00:40,150 --> 00:00:42,810
Ja tema süntaks on päris
Lihtne ja lihtsalt kirjeldab

16
00:00:42,810 --> 00:00:46,240
kuidas elemendid meie
leheküljel on teatud HTML

17
00:00:46,240 --> 00:00:48,190
elemente tuleks muuta.

18
00:00:48,190 --> 00:00:51,170
Selleks, kui sa ei ole
veel vaatasin meie video HTML,

19
00:00:51,170 --> 00:00:53,290
või tuttavad
HTML üldiselt, siis

20
00:00:53,290 --> 00:00:57,430
võiksite heita pilk selle
Esiteks sellepärast, et see arutelu CSS

21
00:00:57,430 --> 00:01:00,700
läheb sõltub
mõningaid teadmisi HTML.

22
00:01:00,700 --> 00:01:03,740
>> Nii et siin on tõesti
lihtne CSS-stiil.

23
00:01:03,740 --> 00:01:06,480
Isegi kui sa pole kunagi
programmeeritud CSS enne,

24
00:01:06,480 --> 00:01:10,624
Ma olen päris kindel, et saate aru saada
täpselt, mida see laaditabeli teeb.

25
00:01:10,624 --> 00:01:11,290
Mida ta teeb?

26
00:01:11,290 --> 00:01:15,470
Noh, kehale kantud meie veebis
leht on kõik vahel keha sildid

27
00:01:15,470 --> 00:01:19,631
meie HTML, ja see seab
taustavärvi, et leht sinine.

28
00:01:19,631 --> 00:01:21,130
Noh, see on väga lihtne laaditabeli.

29
00:01:21,130 --> 00:01:23,269
See on tegelikult väga inimlik
sõbralik keel, CSS.

30
00:01:23,269 --> 00:01:26,560
Nii et isegi kui sa ei ole kunagi kasutanud seda varem,
siis ilmselt arvas, mida see tegi.

31
00:01:26,560 --> 00:01:30,140
Tegelikult, kui me koormatud lehele, kus
Selle laaditabeli oli põimitud kuidagi,

32
00:01:30,140 --> 00:01:36,240
taustavärvi meie lehel oleks
sinine, ja mitte standard valge.

33
00:01:36,240 --> 00:01:37,670
>> Niisiis, kuidas me ehitada stylesheets?

34
00:01:37,670 --> 00:01:39,700
Noh esiteks, me peame
tuvastada valija.

35
00:01:39,700 --> 00:01:42,970
Viimase näiteks
et valija oli keha.

36
00:01:42,970 --> 00:01:45,050
Siis on meil avatud
lokkis traksidega, ja me oleme

37
00:01:45,050 --> 00:01:48,410
alustame määratlemisel
stiili tabeli valija.

38
00:01:48,410 --> 00:01:51,800
Vahel looksulg, me
lihtsalt nimekirja põhiväärtus paari.

39
00:01:51,800 --> 00:01:56,205
Eelmise väärtus paar oli
taustavärvi sinine semikooloniga

40
00:01:56,205 --> 00:01:57,830
kuid me võiksime teha rohkem ja rohkem.

41
00:01:57,830 --> 00:02:02,330
Sa võid olla mitu asja kohaldamisel
Selle tag, et valija keha.

42
00:02:02,330 --> 00:02:05,960
Igaühel neist on eraldatud
semikooloniga ning me kutsume iga üks neist

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

44
00:02:08,949 --> 00:02:12,410
Kui me teinud kõik stiil me
soovite taotleda vastav silt,

45
00:02:12,410 --> 00:02:15,300
meil on lihtsalt sulgeda lokkis
traksidega lõpetada Stiil

46
00:02:15,300 --> 00:02:19,640
Ja ongi määratlemisel laaditabeli
selle konkreetse valija.

47
00:02:19,640 --> 00:02:21,341
>> Millised on mõned ühised CSS omadused?

48
00:02:21,341 --> 00:02:23,590
Noh, võib-olla sa tahad panna
raamiga midagi.

49
00:02:23,590 --> 00:02:26,850
Nii saab öelda, piirivalve,
mis oleks teie võti,

50
00:02:26,850 --> 00:02:29,460
ja siis oma väärtuste oleks,
Mis stiili, värvi ja laiusega

51
00:02:29,460 --> 00:02:30,209
sa tahad seda.

52
00:02:30,209 --> 00:02:33,530
Nii stiil võib olla tahke
line, katkendlik joon, katkendjoonega,

53
00:02:33,530 --> 00:02:36,020
katuseharja joon, mis oleks laineline joon.

54
00:02:36,020 --> 00:02:38,790
Võib-olla sa tahad olla see
sinine või must või roheline.

55
00:02:38,790 --> 00:02:41,490
Võib-olla sa tahad seda olla
1 või 2 või 10 pikslit lai.

56
00:02:41,490 --> 00:02:43,254
Saate määrata kõik need asjad.

57
00:02:43,254 --> 00:02:46,420
Võib-olla soovite seada tausta
värvi oma lehele teatud viisil.

58
00:02:46,420 --> 00:02:49,215
Me juba nägime, et seades
taust keha olema sinine.

59
00:02:49,215 --> 00:02:52,080
>> Siis saate kasutada võtmesõna,
nii CSS on teatud värvid

60
00:02:52,080 --> 00:02:55,950
mis on ehitatud see, sinine, roheline,
must, väga lihtne värvid teame.

61
00:02:55,950 --> 00:02:59,110
Aga sa võid ka täpsustada mis tahes
hex värvi, mida soovite.

62
00:02:59,110 --> 00:03:05,190
Tuletame meelde, et värve on võimalik kindlaks teha
kogum kolm hex numbrid

63
00:03:05,190 --> 00:03:08,500
0-255, rg ja b on
punane, roheline ja sinine komponent.

64
00:03:08,500 --> 00:03:10,590
Ja nii saame täpsustada
mis tahes värvi me tahame poolt,

65
00:03:10,590 --> 00:03:15,520
selle asemel sinine või roheline või must,
kasutades naela ja siis kuus numbrit hex,

66
00:03:15,520 --> 00:03:18,310
ja mis annaks meile
Kuue kohaline värvi.

67
00:03:18,310 --> 00:03:19,850
Nii et taustavärvi.

68
00:03:19,850 --> 00:03:21,975
>> Meil on ka esiplaani
värv, mis on tavaliselt

69
00:03:21,975 --> 00:03:24,140
läheb teksti lehel.

70
00:03:24,140 --> 00:03:28,850
Ja siis võiks samamoodi teha
koos võtmesõna ja või kuuekohaline hex.

71
00:03:28,850 --> 00:03:32,140
Nii saad määrata suvalise värvi
tahad teksti oma lehele

72
00:03:32,140 --> 00:03:36,370
vastu eriti
taustavärvi, kuni eespool.

73
00:03:36,370 --> 00:03:39,100
Saate muuta ka ja tegeleda
font ja tee teksti

74
00:03:39,100 --> 00:03:40,400
osutatakse lehel.

75
00:03:40,400 --> 00:03:42,010
>> Nii saab muuta fondi suurust.

76
00:03:42,010 --> 00:03:46,320
Võite kasutada märksõnu nagu ekstra,
Eriti väike või xx väike või keskmise,

77
00:03:46,320 --> 00:03:47,660
suur, ja nii edasi.

78
00:03:47,660 --> 00:03:50,750
Võite kasutada fikseeritud punktid, 10
punkti, 12 punkti, ja nii edasi.

79
00:03:50,750 --> 00:03:55,850
Võite kasutada protsendid, 80%, 20%,
kus 100% on vaikefondi

80
00:03:55,850 --> 00:03:59,220
suurus, mis on tavaliselt läheb
olla midagi 11 või 12 punkti.

81
00:03:59,220 --> 00:04:01,659
Või saab ka rajada ära
Värskeimate fondi suurust.

82
00:04:01,659 --> 00:04:04,950
Kui sa lihtsalt kirjutasin midagi ja sa tead
mida sa tahad on seda väiksem,

83
00:04:04,950 --> 00:04:08,241
kuid sa ei tea täpselt, milline suurus sulle
tahad seda, noh, sa võid öelda,

84
00:04:08,241 --> 00:04:09,330
fondi suurus väiksem.

85
00:04:09,330 --> 00:04:14,344
Ja ta rajab off,
lihtsalt ülevalt, see on kirjas.

86
00:04:14,344 --> 00:04:15,760
Ja saad väiksem või suurem.

87
00:04:15,760 --> 00:04:18,390
Nii on palju erinevaid
kuidas määrata fondi suuruse.

88
00:04:18,390 --> 00:04:20,690
>> Samuti saab määrata, mida
fondipere soovite.

89
00:04:20,690 --> 00:04:23,360
Kui teil on eriti
nimi, seal on viis CSS--

90
00:04:23,360 --> 00:04:27,270
me ei kavatse rääkida
siin-- määratleda väga konkreetsed fondi

91
00:04:27,270 --> 00:04:28,980
ja põimida oma lehele.

92
00:04:28,980 --> 00:04:30,620
Võite kasutada ka üldnimetused.

93
00:04:30,620 --> 00:04:33,540
Seal on palju web ohutu fonte
mis on eelnevalt määratletud CSS.

94
00:04:33,540 --> 00:04:36,352
Ja kui sa oled kasutajaks Microsoft
Büroo on viimase 20 aasta jooksul,

95
00:04:36,352 --> 00:04:38,810
oled ilmselt tuttav
palju neid web ohutu fonte

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

97
00:04:44,640 --> 00:04:45,470
ja nii edasi.

98
00:04:45,470 --> 00:04:47,170
Need on kõik lugeda web ohutu fonte.

99
00:04:47,170 --> 00:04:49,169
Ja tegelikult, osa
põhjus, miks nad tulid olla

100
00:04:49,169 --> 00:04:54,140
kavatseti kasutada teha web-- igal leheküljel
oli juurdepääs sellele vaikimisi määratud fonte

101
00:04:54,140 --> 00:04:58,480
erinevate serifs, ja kõik see
fondi asju me ei hakka,

102
00:04:58,480 --> 00:05:01,130
kuid üldjuhul on need
kättesaadav oma CSS,

103
00:05:01,130 --> 00:05:04,029
isegi kui sa seda ei tee
muidu määratleda fonte.

104
00:05:04,029 --> 00:05:07,070
Lõpuks saab viia oma teksti,
selle asemel et oleks vaikimisi joondatud

105
00:05:07,070 --> 00:05:09,310
vasakule, siis võiks
viia see õige,

106
00:05:09,310 --> 00:05:13,740
või siis võiks viia ta keskendunud, või
põhjendatud, nii et see tabas nii marginaalid.

107
00:05:13,740 --> 00:05:16,800
Nii et need on kõik võimalused, mida saab kasutada
muuta seda, mida oma teksti välja näeb,

108
00:05:16,800 --> 00:05:20,120
ja kuidas see kuvatakse teie lehel.

109
00:05:20,120 --> 00:05:22,180
>> Sinu valijad ei
olema sildid alles.

110
00:05:22,180 --> 00:05:25,539
Me varem näinud body
valija ja tag valija

111
00:05:25,539 --> 00:05:26,580
ei vaata lihtsalt niisama.

112
00:05:26,580 --> 00:05:30,020
Sul nimi silt, ja siis
määratleda stiili tabeli tag.

113
00:05:30,020 --> 00:05:32,660
Aga sa võid ka midagi
nimetatakse ID valija.

114
00:05:32,660 --> 00:05:34,390
ID-valija tundub päris sarnased.

115
00:05:34,390 --> 00:05:38,100
Aga teate, et nüüd ma ei kasuta
HTML sildi, ma kasutan, sel juhul,

116
00:05:38,100 --> 00:05:40,720
#unique või hash ainulaadne.

117
00:05:40,720 --> 00:05:42,930
Kui te mäletate meie
Video HTML, me rääkisime

118
00:05:42,930 --> 00:05:45,620
kuidas sildid võivad olla atribuudid.

119
00:05:45,620 --> 00:05:48,340
>> Ja üks omadus, mis kehtib
päris palju kõik HTML sildid,

120
00:05:48,340 --> 00:05:51,440
aga me ei räägi sellest,
on midagi, mida nimetatakse ID tag.

121
00:05:51,440 --> 00:05:55,250
Nii et see eriti CSS oleks
kehtivad ainult HTML tag, mis on

122
00:05:55,250 --> 00:05:58,530
väga spetsiifilise ID, et olete nimega.

123
00:05:58,530 --> 00:06:01,000
Nii et kui teil on kusagil
oma koodi, kuskil

124
00:06:01,000 --> 00:06:06,090
HTML faili, silt ja sa
täpsustada täiendina, et tag,

125
00:06:06,090 --> 00:06:09,060
ID võrdub unikaalne, seda
Eelkõige laaditabeli

126
00:06:09,060 --> 00:06:15,030
Siin kehtib ainult vahel
et silt ID ainulaadne.

127
00:06:15,030 --> 00:06:17,180
>> Võite teha ka midagi
nimetatakse klassi valija.

128
00:06:17,180 --> 00:06:19,920
Nii et lisaks võttes
ID atribuudid, saate ka

129
00:06:19,920 --> 00:06:23,130
lisada klassi atribuut HTML teeke.

130
00:06:23,130 --> 00:06:27,140
Ja kui te kasutate klassi atribuut,
seda saab rakendada mitmeid märke.

131
00:06:27,140 --> 00:06:31,880
Nii et kui teil on mitmeid asju, mis
on sarnased, võib-olla sa tahad öelda,

132
00:06:31,880 --> 00:06:35,890
avatud tag blah, blah, blah,
blah, klassi võrdub õpilastele.

133
00:06:35,890 --> 00:06:38,190
Ja siis see eriti
laaditabeli kehtiks

134
00:06:38,190 --> 00:06:42,041
iga tag kelle klassis on õpilastel.

135
00:06:42,041 --> 00:06:44,290
Sel juhul me määrata
taustavärvi kollane,

136
00:06:44,290 --> 00:06:46,706
ja me tahaks seada läbipaistmatus, mis
on tag me ei räägi,

137
00:06:46,706 --> 00:06:52,510
aga lihtsalt tegeleb, kuidas läbipaistev
midagi on, 70%, käesoleval juhul.

138
00:06:52,510 --> 00:06:54,430
>> Seal on kaks võimalust
kirjalikult stylesheets.

139
00:06:54,430 --> 00:06:56,680
Võite kirjutada neid
otse oma HTML

140
00:06:56,680 --> 00:06:59,690
pannes stylesheets
vahel stiilis sildid.

141
00:06:59,690 --> 00:07:03,850
Ja need stiilis sildid minna sees
pea sildid oma veebilehel.

142
00:07:03,850 --> 00:07:08,240
Võib-olla rohkem eelistatud viis seda teha
see on kirjutada eraldi CSS faili,

143
00:07:08,240 --> 00:07:12,360
ja siis siduda see oma
dokumenteerida kasutades link sildid.

144
00:07:12,360 --> 00:07:14,690
Link sildid, jälle, on
erineb hüperlinkide

145
00:07:14,690 --> 00:07:16,760
Kui te mäletate meie video HTML.

146
00:07:16,760 --> 00:07:19,030
Ja link sildid on, kuidas me
tõmba eraldi failides.

147
00:07:19,030 --> 00:07:23,900
See omamoodi nagu samaväärne
#include veebi programmeerimine.

148
00:07:23,900 --> 00:07:27,140
>> Võtame pilk table.HTML.

149
00:07:27,140 --> 00:07:29,380
Kui te mäletate meie
HTML video, ma näitasin

150
00:07:29,380 --> 00:07:32,000
näide väga
lihtne korrutamine

151
00:07:32,000 --> 00:07:35,160
tabel, mis tundus päris
kole, ja võib-olla seal

152
00:07:35,160 --> 00:07:38,650
kuidas teha seda paremini
CSS, et muuta see tegelikult otsima

153
00:07:38,650 --> 00:07:41,120
rohkem nagu korrutamine
lauda või midagi

154
00:07:41,120 --> 00:07:43,730
mis ei ole lihtsalt kokku kleepunud
ilma tegeliku jagunemine

155
00:07:43,730 --> 00:07:45,532
reavahed ja veergu.

156
00:07:45,532 --> 00:07:47,490
Nii saab pea üle
CS50 IDE ja tutvu

157
00:07:47,490 --> 00:07:50,780
kuidas CSS saab, omamoodi, näpistama
mida alustasime enne,

158
00:07:50,780 --> 00:07:53,290
ja muuta see midagi palju paremat.

159
00:07:53,290 --> 00:07:55,650
>> Nii et me oleme CS50 IDE
nüüd, ja kui võõras,

160
00:07:55,650 --> 00:07:58,710
me tõmba selle
tabel, mis HTML lehel.

161
00:07:58,710 --> 00:08:01,090
Table.HTML põhimõtteliselt
lihtsalt määratleb sisu

162
00:08:01,090 --> 00:08:05,044
on multiple-- see pidi olema
nelja neljaga korrutamine tabelis.

163
00:08:05,044 --> 00:08:06,210
See on üsna lihtne.

164
00:08:06,210 --> 00:08:09,410
Ja me ei usu, et see oleks
vaadata päris hästi korraldatud.

165
00:08:09,410 --> 00:08:15,277
Aga tegelikult, kui me eelvaate see leht,
näeme, et see on selline kole, eks?

166
00:08:15,277 --> 00:08:16,860
Ilmselgelt on meil ridu ja veerge siin.

167
00:08:16,860 --> 00:08:18,350
On mingi eraldamine.

168
00:08:18,350 --> 00:08:20,040
Aga see ei ole mõttekas eraldamine.

169
00:08:20,040 --> 00:08:23,105
Me tegelikult ei saada
liiga palju infot.

170
00:08:23,105 --> 00:08:25,730
Ja pole mingit eristamist
ridade ja veergude poolest

171
00:08:25,730 --> 00:08:28,460
horisontaalne või vertikaalne reegleid.

172
00:08:28,460 --> 00:08:31,530
Me võiks ilmselt teha seda
vaatame natuke parem.

173
00:08:31,530 --> 00:08:32,934
Nii proovime.

174
00:08:32,934 --> 00:08:34,559
Nii et ma lähen sulgeda sakk siin.

175
00:08:34,559 --> 00:08:37,434
Ja ma sulen table.HTML,
ja mul on teine ​​versioon siit

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

177
00:08:39,490 --> 00:08:40,655
Me avame selle üles.

178
00:08:40,655 --> 00:08:42,530
Keha lehel on
üsna sama,

179
00:08:42,530 --> 00:08:44,238
aga ma olen muutunud
natuke tipus.

180
00:08:44,238 --> 00:08:47,132
Ja ma keri üles siin.

181
00:08:47,132 --> 00:08:49,340
Pange tähele, et sel ajal, ma olen
kasutades sisseehitatud stiilis sildid.

182
00:08:49,340 --> 00:08:53,550
Olen avatud stiilis tag, ja ma olen nüüd
määratledes CSS-stiil just sees

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

184
00:08:54,310 --> 00:08:56,310
Mul on laaditabeli, mis ütleb, laud.

185
00:08:56,310 --> 00:08:58,170
See on minu tag valija.

186
00:08:58,170 --> 00:09:01,340
Ma ei kasuta dot või hash,
mis ma teeks, kui ma

187
00:09:01,340 --> 00:09:03,710
oli kasutades ID või klassi valija.

188
00:09:03,710 --> 00:09:06,190
Mul on silt valija siin-- tabelis.

189
00:09:06,190 --> 00:09:10,090
See stiil läheb
kohaldatakse iga laua tag.

190
00:09:10,090 --> 00:09:14,950
Ilmselt ma tahan panna ühe
piksli laiuseid, tahke sinine raam,

191
00:09:14,950 --> 00:09:15,779
sees minu lauale.

192
00:09:15,779 --> 00:09:18,320
See kõlab nagu oleks ilmselt
aitab olukorda, eks?

193
00:09:18,320 --> 00:09:20,320
Me läheme pea
asju otsima palju parem.

194
00:09:20,320 --> 00:09:21,190
Nii et see on hea.

195
00:09:21,190 --> 00:09:23,540
Stiililiselt, ma olen lihtsalt
varjatud minu laaditabeli siin.

196
00:09:23,540 --> 00:09:25,100
See on kindlasti
vastuvõetav viis seda teha.

197
00:09:25,100 --> 00:09:26,391
Vaatame, mis see välja näeb.

198
00:09:26,391 --> 00:09:29,790
Nii et ma lähen siia tagasi, ja
Ma eelvaate minu table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Noh, see ei ole päris see, mida ma tahtsin,
aga see on täpselt see, mida me palunud.

201
00:09:36,470 --> 00:09:39,530
Me ütlesime, et see stiil on
kavatse taotleda meie lauale.

202
00:09:39,530 --> 00:09:43,810
Meie tabelis on nüüd üks piksel
lai, tahke sinine raam ümber.

203
00:09:43,810 --> 00:09:46,237
Me tegelikult ei saada
laua rakke.

204
00:09:46,237 --> 00:09:47,570
Me lihtsalt saada lauas.

205
00:09:47,570 --> 00:09:49,310
Nii CSS töötanud.

206
00:09:49,310 --> 00:09:51,890
See on kohaldanud
laaditabeli meie lauale.

207
00:09:51,890 --> 00:09:53,981
Aga ei ole päris teha
mida me tahtsime seda teha.

208
00:09:53,981 --> 00:09:55,730
Kuidas me saame seda teha
mida me tahame seda teha?

209
00:09:55,730 --> 00:09:59,287
>> Noh, võtame pilk veel üks
versioon sellest table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Nii et ma olen lihtsalt kavatse sulgeda sakke.

211
00:10:00,870 --> 00:10:03,890
Ma lähen tagasi siia minu
failisüsteemi ja avada table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Jällegi, see läheb vaadata päris
sarnane siin alguses.

214
00:10:10,350 --> 00:10:14,460
Aga teate, seekord kasutamise asemel
laaditabeli varjatud õigus seal,

215
00:10:14,460 --> 00:10:18,870
Ma lähen linki
laaditabeli kasutades linki tag.

216
00:10:18,870 --> 00:10:22,480
Nii et ma olen ilmselt siduda oma
laaditabeli nimetatakse tables.CSS,

217
00:10:22,480 --> 00:10:25,090
ja seda ka võrdne
laaditabeli lihtsalt means-- hästi,

218
00:10:25,090 --> 00:10:28,645
Mis on selle faili suhtes, mida
Ma olen doing-- on laaditabeli, et ma olen

219
00:10:28,645 --> 00:10:29,821
kasutades minu lehele.

220
00:10:29,821 --> 00:10:32,320
Nii et kui ma tõesti tahan näha, mida
Ma teen koos CSS siin

221
00:10:32,320 --> 00:10:35,010
Ma pean minema avatud, et
table.CSS esitada ka.

222
00:10:35,010 --> 00:10:37,490
Nii et me läheme tagasi siia
jälle meie failisüsteemi.

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

224
00:10:38,660 --> 00:10:40,490
Me pop avatud.

225
00:10:40,490 --> 00:10:43,070
Nüüd me näeme veidi CSS.

226
00:10:43,070 --> 00:10:45,630
Ilmselt mul on paar
asju siin toimub.

227
00:10:45,630 --> 00:10:48,950
Ma ilmselt tahan panna viie
piksli laiuseid, soliidset punast piiri,

228
00:10:48,950 --> 00:10:50,287
ümber minu laua.

229
00:10:50,287 --> 00:10:52,870
Me juba teame, et see läheb
minge ümbermõõt.

230
00:10:52,870 --> 00:10:56,180
Me nägime, et table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Iga rida, ma
ilmselt tahavad täpsustada

232
00:10:58,770 --> 00:11:01,950
et järjest kõrgus on 50 pikslit kõrge.

233
00:11:01,950 --> 00:11:05,680
Nii iga rida, mäletan
see on, mida tr tag teeb,

234
00:11:05,680 --> 00:11:08,550
Ma teen seda 50 pikslit kõrge.

235
00:11:08,550 --> 00:11:09,804
>> Lõpuks mul see kommentaar.

236
00:11:09,804 --> 00:11:11,470
Ja see, kuidas me oma kommentaarid CSS.

237
00:11:11,470 --> 00:11:16,174
See on väga sarnane ära blokeerida
kommentaarid süntaks kaldkriipsuga star.

238
00:11:16,174 --> 00:11:17,090
Kõik tekst, mida soovite.

239
00:11:17,090 --> 00:11:19,470
Pole kaldkriipsuga kaldkriipsuga kuigi CSS.

240
00:11:19,470 --> 00:11:23,400
Lühikese inline kommentaarid, meil
kasutada seda kindlas vormingus siin.

241
00:11:23,400 --> 00:11:26,830
Tundub nagu ma teen
palju asju minu td sildid.

242
00:11:26,830 --> 00:11:29,710
Mäleta td sildid või lauda
andmed, mis on tõesti ainult

243
00:11:29,710 --> 00:11:32,210
veerud sees
Meie ridades ja ilmselt

244
00:11:32,210 --> 00:11:35,090
iga tükk andmed
minu laua, ma tahan

245
00:11:35,090 --> 00:11:38,850
seada taustavärvi
must, värvi olema valge,

246
00:11:38,850 --> 00:11:40,320
värv on esiplaani värv.

247
00:11:40,320 --> 00:11:42,360
Nii et see saab olema
teksti minu lehele.

248
00:11:42,360 --> 00:11:45,140
Ma tahan suur font, 22
punkti kirja, ja ma tahan

249
00:11:45,140 --> 00:11:47,001
seda fonti pere, Georgia.

250
00:11:47,001 --> 00:11:48,750
Nii et ma ei kavatse
on vaikimisi fonti.

251
00:11:48,750 --> 00:11:51,820
Ma lähen täpsustada Georgia, mis
on üks neist web ohutu fonte

252
00:11:51,820 --> 00:11:53,830
et me oleme näinud.

253
00:11:53,830 --> 00:11:57,284
Ma tahan, et mu tekst joondatud
tsentraalselt, keset kasti,

254
00:11:57,284 --> 00:11:59,450
Ma ei taha, et see tuleb jätta
joondatud paremale joondatud.

255
00:11:59,450 --> 00:12:03,461
Ja ma tahan, et mu Veerulaiuse
olla 50 pikslit lai samuti.

256
00:12:03,461 --> 00:12:05,210
Võtame pilk
mida see välja näeb,

257
00:12:05,210 --> 00:12:07,470
ja vaata, kas see on äkki paranemist.

258
00:12:07,470 --> 00:12:12,890
Nii et ma lähen minema table3.HTML, mis
Meenuta, sisaldab table.CSS lingina,

259
00:12:12,890 --> 00:12:14,830
ja me vaata see.

260
00:12:14,830 --> 00:12:16,800
See on palju parem, eks?

261
00:12:16,800 --> 00:12:20,004
See on tegelikult hakanud vaatama
Palju rohkem nagu korrutustabel.

262
00:12:20,004 --> 00:12:21,920
Mul on see punane ääris
ümber minu laua, kuid nüüd

263
00:12:21,920 --> 00:12:26,700
Mul on ka märgitud, et
iga rida on 50 pikslit lai,

264
00:12:26,700 --> 00:12:30,220
või see 50 pikslit tall-- vabandus
mind-- igas veerus on 50 pikslit lai.

265
00:12:30,220 --> 00:12:34,251
Andmed igas veerus ja ainult
andmeid, on mustal taustal.

266
00:12:34,251 --> 00:12:36,000
Nii et miks need
valged jooned on olemas.

267
00:12:36,000 --> 00:12:38,836
Kuna ruumi
kõikide nende rakkude,

268
00:12:38,836 --> 00:12:40,710
see ei ole piiri
Iseenesest on see lihtsalt

269
00:12:40,710 --> 00:12:43,170
Ma olen ainult täites
rakud, mis tegelikult

270
00:12:43,170 --> 00:12:46,310
teeb tabeli raamid, mis
ilmselt ei eksisteeri kogu aeg, see

271
00:12:46,310 --> 00:12:47,887
oli lihtsalt õhuke valged jooned.

272
00:12:47,887 --> 00:12:48,720
Nüüd on nad nähtavaks.

273
00:12:48,720 --> 00:12:50,380
Nüüd nad pop välja ekraanile.

274
00:12:50,380 --> 00:12:52,920
Ja nii on see väga lihtne
laaditabeli, et ma olen rakendatud,

275
00:12:52,920 --> 00:12:56,850
ja nüüd on mu laua ootab palju nagu
nelja neljaga korrutamine tabelis,

276
00:12:56,850 --> 00:13:00,950
asemel lihtsalt segamini jama, kus
kõik on selge ridu ja veerge,

277
00:13:00,950 --> 00:13:03,717
kuid mitte super hästi korraldatud.

278
00:13:03,717 --> 00:13:06,800
Me oleme alles kriimustamata
mida saate teha CSS siin.

279
00:13:06,800 --> 00:13:10,330
Õnneks CSS dokumentatsioon
on üsna lihtne.

280
00:13:10,330 --> 00:13:14,000
Saate kasutada mitmed selle
atribuudid, üsna sageli.

281
00:13:14,000 --> 00:13:16,087
Need, me rääkisime
varem seda videot.

282
00:13:16,087 --> 00:13:18,170
On mitmeid, et teil
ilmselt ei kasuta üldse.

283
00:13:18,170 --> 00:13:19,469
Ja see on hea, liiga.

284
00:13:19,469 --> 00:13:22,010
Aga tean, et seal on
palju dokumentatsiooni seal.

285
00:13:22,010 --> 00:13:25,110
Nii et isegi kui me ei hõlma kõike,
sa oled kindlasti ei jää oma.

286
00:13:25,110 --> 00:13:26,780
Aga CSS on tõesti lõbus
eksperimenteerida.

287
00:13:26,780 --> 00:13:29,040
Ja Julgustan teid
mängida oma veebilehekülgedele,

288
00:13:29,040 --> 00:13:32,180
ja saad teada, kuidas teha neid
ilme ja parandada kasutaja

289
00:13:32,180 --> 00:13:34,790
kogemus külastavad lehel.

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

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

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