1
00:00:00,000 --> 00:00:05,660
>> [TÓNLIST spila]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Svo skulum taka eitt
video til að tala um einn meiri tungumáli.

3
00:00:08,740 --> 00:00:10,800
Í þetta sinn munum við tala um CSS.

4
00:00:10,800 --> 00:00:13,460
Svo CSS, sem er stytting á
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
er annað mál að við notum
við skipulagningu vefsíður.

6
00:00:16,149 --> 00:00:17,190
Hugsaðu um það eins og þetta.

7
00:00:17,190 --> 00:00:20,900
Ef HTML er það sem við notum til að skipuleggja
efni sem við viljum setja á síðuna okkar,

8
00:00:20,900 --> 00:00:25,390
CSS er tól sem við notum almennt
að aðlaga hvernig vefsíður okkar líta,

9
00:00:25,390 --> 00:00:30,410
og hvernig notandi reynsla raunverulega
er, samskipti við heimasíðu okkar.

10
00:00:30,410 --> 00:00:32,535
>> Líkur á HTML, CSS er
ekki forritunarmál.

11
00:00:32,535 --> 00:00:33,451
Það þarf ekki rökfræði.

12
00:00:33,451 --> 00:00:34,595
Það þarf ekki breytur.

13
00:00:34,595 --> 00:00:38,890
Það skiptir ekki hafa allir tegund af að
renna tengjast hlutum sem C er.

14
00:00:38,890 --> 00:00:40,150
Það er hönnun tungumál.

15
00:00:40,150 --> 00:00:42,810
Og setningafræði hennar er nokkuð
einfalt og bara lýsir

16
00:00:42,810 --> 00:00:46,240
hvernig þætti okkar
síðu með ákveðnum HTML

17
00:00:46,240 --> 00:00:48,190
þætti ætti að vera breytt.

18
00:00:48,190 --> 00:00:51,170
Í því skyni, ef þú ert ekki
enn horfði á vídeó okkar á HTML,

19
00:00:51,170 --> 00:00:53,290
eða ert ókunnur með
HTML almennt, þér

20
00:00:53,290 --> 00:00:57,430
mega vilja til taka a líta á það
fyrst, því þetta umfjöllun um CSS

21
00:00:57,430 --> 00:01:00,700
er að fara að ráðast á
sumir þekkingu á HTML.

22
00:01:00,700 --> 00:01:03,740
>> Svo er hér mjög
einfalt CSS stílblað.

23
00:01:03,740 --> 00:01:06,480
Jafnvel ef þú hefur aldrei
forritað með CSS áður,

24
00:01:06,480 --> 00:01:10,624
Ég er nokkuð viss um að þú getur fundið út
einmitt það sem þetta stílblað gerir.

25
00:01:10,624 --> 00:01:11,290
Hvað þýðir það að gera?

26
00:01:11,290 --> 00:01:15,470
Jæja, beitt líkama vefnum okkar
síðu, allt milli líkama þinn

27
00:01:15,470 --> 00:01:19,631
á HTML okkar, og það setur
bakgrunnslit þeirri síðu í blátt.

28
00:01:19,631 --> 00:01:21,130
Jæja, það er mjög einfalt stílblað.

29
00:01:21,130 --> 00:01:23,269
Það er reyndar mjög mannleg
vingjarnlegur tungumál, CSS.

30
00:01:23,269 --> 00:01:26,560
Svo jafnvel ef þú hefur aldrei notað það áður,
þú sennilega gæti giska á hvað það gerði.

31
00:01:26,560 --> 00:01:30,140
Í staðreynd, ef við hlaðinn síðu, þar
þetta stílblað var fellt einhvern veginn,

32
00:01:30,140 --> 00:01:36,240
bakgrunnslit síðunni okkar myndi
vera blár, og ekki staðall hvítt.

33
00:01:36,240 --> 00:01:37,670
>> Svo hvernig gera við að byggja Stílblöð?

34
00:01:37,670 --> 00:01:39,700
Jæja fyrst verðum við að
þekkja val.

35
00:01:39,700 --> 00:01:42,970
Í síðustu dæmi,
sem val var líkami.

36
00:01:42,970 --> 00:01:45,050
Þá höfum við opið
hrokkið Brace, og við erum

37
00:01:45,050 --> 00:01:48,410
að fara að byrja að skilgreina sem
stílblað fyrir að val.

38
00:01:48,410 --> 00:01:51,800
Á milli hrokkið axlabönd, við
bara hafa lista yfir helstu gildi pör.

39
00:01:51,800 --> 00:01:56,205
Fyrri gildi par var
bakgrunnur litur blár semíkommu,

40
00:01:56,205 --> 00:01:57,830
en við gætum gert meira og meira af þessu.

41
00:01:57,830 --> 00:02:02,330
Þú gætir hafa margar hlutir beita
að þessi merki, að selector líkamanum.

42
00:02:02,330 --> 00:02:05,960
Hvert og eitt þeirra er aðskilin með
semíkommu, og við köllum hvert og eitt þeirra

43
00:02:05,960 --> 00:02:08,949
yfirlýsing, a CSS yfirlýsingu.

44
00:02:08,949 --> 00:02:12,410
Þegar við erum búin með öllum stílun vér
vilt eiga við viðkomandi tag,

45
00:02:12,410 --> 00:02:15,300
við höfum bara lokun Curly
Brace til að ljúka stílblaðið,

46
00:02:15,300 --> 00:02:19,640
og við erum búin að skilgreina stílblaðið
fyrir viðkomandi val.

47
00:02:19,640 --> 00:02:21,341
>> Hvað eru nokkrar algengar CSS eignir?

48
00:02:21,341 --> 00:02:23,590
Jæja, kannski þú vilt að setja
landamæri um eitthvað.

49
00:02:23,590 --> 00:02:26,850
Svo er hægt að segja, landamæri,
það væri lykillinn,

50
00:02:26,850 --> 00:02:29,460
og þá gildi yrðu,
hvað stíl, lit og breidd

51
00:02:29,460 --> 00:02:30,209
þú vilt það til að vera.

52
00:02:30,209 --> 00:02:33,530
Svo stíl gæti verið solid
lína, punktalína sem, með brotalínu,

53
00:02:33,530 --> 00:02:36,020
hálsinn lína, sem væri bylgjaður línu.

54
00:02:36,020 --> 00:02:38,790
Kannski þú vilt hafa það
vera blár eða svartur eða grænn.

55
00:02:38,790 --> 00:02:41,490
Kannski þú vilt það til að vera
1 eða 2 eða 10 punktar á breidd.

56
00:02:41,490 --> 00:02:43,254
Þú getur tilgreint allt þetta.

57
00:02:43,254 --> 00:02:46,420
Kannski þú vilt að setja bakgrunn
litur þinni á ákveðinn hátt.

58
00:02:46,420 --> 00:02:49,215
Við sáum þegar að setja á
bakgrunnur af líkamanum til að vera blár.

59
00:02:49,215 --> 00:02:52,080
>> Þá er hægt að nota lykilorð,
svo hefur CSS ákveðnum litum

60
00:02:52,080 --> 00:02:55,950
sem eru byggð inn í það, blár, grænn,
svartur, mjög einfalt litir sem við vitum.

61
00:02:55,950 --> 00:02:59,110
En þú getur einnig tilgreint hvaða
hex litur sem þú vilt.

62
00:02:59,110 --> 00:03:05,190
Muna að litir geta verið greind
með a setja af þremur HEX tölum

63
00:03:05,190 --> 00:03:08,500
frá 0 til 255, Rg og B, sem er
rauður, grænn og blár hluti.

64
00:03:08,500 --> 00:03:10,590
Og svo getum við skilgreint
hvaða lit sem við viljum eftir,

65
00:03:10,590 --> 00:03:15,520
í stað þess að nota blár eða grænn eða svartur,
nota pund og síðan sex stafirnir álög,

66
00:03:15,520 --> 00:03:18,310
og sem myndi gefa okkur
sex stafa litur.

67
00:03:18,310 --> 00:03:19,850
Svo er það bakgrunnslit.

68
00:03:19,850 --> 00:03:21,975
>> Við höfum einnig forgrunni
lit, sem er yfirleitt

69
00:03:21,975 --> 00:03:24,140
að fara að vera texti á síðuna þína.

70
00:03:24,140 --> 00:03:28,850
Og þú getur á sama hátt gert það
með lykil orð og eða sex stafa álög.

71
00:03:28,850 --> 00:03:32,140
Hér getur þú skilgreint hvaða lit sem þú
vilja fyrir texta af síðunni þinni

72
00:03:32,140 --> 00:03:36,370
gegn ákveðnu
bakgrunnslit, upp hér að ofan.

73
00:03:36,370 --> 00:03:39,100
Þú getur líka breytt og takast
með leturgerð, og leið texta

74
00:03:39,100 --> 00:03:40,400
er veitt á síðunni.

75
00:03:40,400 --> 00:03:42,010
>> Svo er hægt að breyta leturgerð stærð.

76
00:03:42,010 --> 00:03:46,320
Þú getur notað leitarorð, svo sem auka,
Mjög smá, eða xx Lítil eða Miðlungs,

77
00:03:46,320 --> 00:03:47,660
stór, og svo framvegis.

78
00:03:47,660 --> 00:03:50,750
Þú getur notað fasta punkta, 10
lið, 12 lið, og svo framvegis.

79
00:03:50,750 --> 00:03:55,850
Þú getur notað hlutföll, 80%, 20%,
þar sem 100% er sjálfgefið letur

80
00:03:55,850 --> 00:03:59,220
stærð, sem er yfirleitt að fara til
vera eitthvað eins og 11 eða 12 stig.

81
00:03:59,220 --> 00:04:01,659
Eða þú getur jafnvel byggja hana burt
af nýjustu leturstærð.

82
00:04:01,659 --> 00:04:04,950
Ef þú skrifar bara eitthvað og þú veist
það sem þú vilt er fyrir það að vera minni,

83
00:04:04,950 --> 00:04:08,241
en þú veist ekki nákvæmlega hvaða stærð þig
vilja það að vera vel, þú getur bara sagt,

84
00:04:08,241 --> 00:04:09,330
Leturstærð minni.

85
00:04:09,330 --> 00:04:14,344
Og það mun byggja burt af,
bara upp hér að ofan, það er leturstærð.

86
00:04:14,344 --> 00:04:15,760
Og þú getur fengið minni eða stærri.

87
00:04:15,760 --> 00:04:18,390
Þannig að það er mikið af mismunandi
leiðir til að tilgreina leturstærð.

88
00:04:18,390 --> 00:04:20,690
>> Þú getur einnig tilgreint hvað
Leturfjölskylda þú vilt.

89
00:04:20,690 --> 00:04:23,360
Ef þú hefur ákveðna
nafn, það er leið í CSS--

90
00:04:23,360 --> 00:04:27,270
við erum ekki að fara að tala um það
here-- að skilgreina mjög sérstaka letur

91
00:04:27,270 --> 00:04:28,980
og embed in það inn á síðuna þína.

92
00:04:28,980 --> 00:04:30,620
Þú getur líka notað samheiti.

93
00:04:30,620 --> 00:04:33,540
There 'a einhver fjöldi af vefur öruggum letur
sem eru fyrirfram skilgreind í CSS.

94
00:04:33,540 --> 00:04:36,352
Og ef þú ert notandi af Microsoft
Office á síðustu 20 árum,

95
00:04:36,352 --> 00:04:38,810
þú ert líklega kunnugt
a einhver fjöldi af þessum vefsíðum öruggum letur

96
00:04:38,810 --> 00:04:44,640
nú þegar, Times New Roman, Arial,
Courier New, Georgia, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
og svo framvegis.

98
00:04:45,470 --> 00:04:47,170
Þeir eru öll talin vefur Öryggisskápur letur.

99
00:04:47,170 --> 00:04:49,169
Og í raun hluti af
Ástæðan sem þeir komu til að vera

100
00:04:49,169 --> 00:04:54,140
var að nota til að gera web-- hverri síðu
hafði aðgang að þessum vanræksla setja letur

101
00:04:54,140 --> 00:04:58,480
með ýmsum serifs og allt þetta
letur efni sem við munum ekki komast inn,

102
00:04:58,480 --> 00:05:01,130
en þetta eru yfirleitt
aðgengileg í CSS þinn,

103
00:05:01,130 --> 00:05:04,029
jafnvel ef þú gera ekki
skilgreina annars letur.

104
00:05:04,029 --> 00:05:07,070
Loks er hægt að samræma texta,
í stað þess að það að vera sjálfgefið, takt

105
00:05:07,070 --> 00:05:09,310
til vinstri, þú gætir
samræma það til hægri,

106
00:05:09,310 --> 00:05:13,740
eða þú gætir samræma það miðju, eða
réttlætanlegt svo að hún lenti bæði framlegð.

107
00:05:13,740 --> 00:05:16,800
Þeir eru allir valkostir sem þú getur notað
að breyta því sem textinn lítur út,

108
00:05:16,800 --> 00:05:20,120
og hvernig hún birtist á síðunni.

109
00:05:20,120 --> 00:05:22,180
>> Selectors Ekki
að vera merki aðeins.

110
00:05:22,180 --> 00:05:25,539
Við sáum áður líkama tag
val, og tag val

111
00:05:25,539 --> 00:05:26,580
hjartarskinn útlit bara svona.

112
00:05:26,580 --> 00:05:30,020
Þú nafn merki, og þá
skilgreina stílblað fyrir þessi merki.

113
00:05:30,020 --> 00:05:32,660
En þú getur líka gert eitthvað
kallað ID val.

114
00:05:32,660 --> 00:05:34,390
An ID val lítur mjög svipað.

115
00:05:34,390 --> 00:05:38,100
En eftir, að nú er ég ekki að nota
HTML tag, ég nota, í þessu tilfelli,

116
00:05:38,100 --> 00:05:40,720
#unique eða kjötkássa einstakt.

117
00:05:40,720 --> 00:05:42,930
Ef þú manst frá okkar
vídeó á HTML, talaði við

118
00:05:42,930 --> 00:05:45,620
um hvernig merki geta haft eiginleika.

119
00:05:45,620 --> 00:05:48,340
>> Og eitt eigindi sem gildir
að nánast allar HTML tags,

120
00:05:48,340 --> 00:05:51,440
en við ekki tala um það,
er eitthvað sem kallast kenni tag.

121
00:05:51,440 --> 00:05:55,250
Svo þetta tiltekna CSS myndi
gilda einungis HTML merki sem hafa

122
00:05:55,250 --> 00:05:58,530
mjög sérstakur ID, sem þú hefur nefnt.

123
00:05:58,530 --> 00:06:01,000
Svo ef þú hefur eitthvað
í kóðanum þínum, einhvers staðar

124
00:06:01,000 --> 00:06:06,090
í HTML skrá, merki og þig
tilgreina sem eiginleiki til þess tag,

125
00:06:06,090 --> 00:06:09,060
ID jafngildir einstakt, þetta
einkum stílblað

126
00:06:09,060 --> 00:06:15,030
hér mun aðeins gilda á milli
sem tag með ID einstakt.

127
00:06:15,030 --> 00:06:17,180
>> Þú getur líka gert eitthvað
kallað bekknum val.

128
00:06:17,180 --> 00:06:19,920
Þannig að auk þess að hafa
ID eiginleiki, þú getur líka

129
00:06:19,920 --> 00:06:23,130
bæta bekknum eigindi HTML tags.

130
00:06:23,130 --> 00:06:27,140
Og þegar þú notar bekknum eigindi,
það er hægt að beita til að mörg merki.

131
00:06:27,140 --> 00:06:31,880
Svo ef þú hefur nokkrar hluti sem
eru svipuð, kannski þú vilt segja,

132
00:06:31,880 --> 00:06:35,890
opinn tag bla, bla, bla,
bla, flokkur jafngildir nemendur.

133
00:06:35,890 --> 00:06:38,190
Og þá er þetta tiltekna
stílblað myndi gilda

134
00:06:38,190 --> 00:06:42,041
hverjum tag sem bekknum er nemendur.

135
00:06:42,041 --> 00:06:44,290
Í þessu tilfelli, við myndum stilla
bakgrunnslit til gulur,

136
00:06:44,290 --> 00:06:46,706
og við myndum setja ógagnsæi, sem
er merki við ekki tala um,

137
00:06:46,706 --> 00:06:52,510
en bara fjallar um hvernig gagnsæ
eitthvað er, að 70%, í þessu tilfelli.

138
00:06:52,510 --> 00:06:54,430
>> Það eru tveir möguleikar fyrir
skrifa Stílblöð.

139
00:06:54,430 --> 00:06:56,680
Þú getur skrifað þá
beint inn í HTML kóðanum

140
00:06:56,680 --> 00:06:59,690
með því að setja Stílblöð
á milli stíl tags.

141
00:06:59,690 --> 00:07:03,850
Og þessir stíl skipanir inni
í höfuðið tags vefsíðu þinni.

142
00:07:03,850 --> 00:07:08,240
The kannski meira Æskilegri leið til að gera
það er að skrifa sérstakt CSS skrá,

143
00:07:08,240 --> 00:07:12,360
og þá tengja það inn í þinn
skjal með tengli.

144
00:07:12,360 --> 00:07:14,690
Link merki, aftur, eru
frábrugðin tengla,

145
00:07:14,690 --> 00:07:16,760
ef þú manst frá vídeó okkar á HTML.

146
00:07:16,760 --> 00:07:19,030
Og tengja tags eru hvernig við
draga í sérstökum skrám.

147
00:07:19,030 --> 00:07:23,900
Það er tegund af eins og jafngildi
sem #include fyrir forritun vefnum.

148
00:07:23,900 --> 00:07:27,140
>> Svo skulum taka a líta á table.HTML.

149
00:07:27,140 --> 00:07:29,380
Ef þú manst frá okkar
HTML video, ég sýndi

150
00:07:29,380 --> 00:07:32,000
dæmi um mjög
einfalt margföldun

151
00:07:32,000 --> 00:07:35,160
borð sem leit nokkuð
ljótur, og kannski er það

152
00:07:35,160 --> 00:07:38,650
leið til að gera það betur með
CSS, til að gera það líta raunverulega

153
00:07:38,650 --> 00:07:41,120
meira eins og margföldun
borð, eða eitthvað

154
00:07:41,120 --> 00:07:43,730
sem er ekki bara fastur saman
með enginn raunverulegur deild

155
00:07:43,730 --> 00:07:45,532
milli raða og dálka.

156
00:07:45,532 --> 00:07:47,490
Svo skulum fara yfir til
CS50 IDE, og kíkja

157
00:07:47,490 --> 00:07:50,780
hvernig CSS getur konar, klip
það sem við byrjuðum með áður,

158
00:07:50,780 --> 00:07:53,290
og gera það eitthvað mikið betri.

159
00:07:53,290 --> 00:07:55,650
>> Þannig að við erum í CS50 IDE
nú, og ef ókunnur,

160
00:07:55,650 --> 00:07:58,710
við munum draga upp í þessu
borð sem HTML síðu.

161
00:07:58,710 --> 00:08:01,090
Table.HTML grundvallaratriðum
bara skilgreinir innihald

162
00:08:01,090 --> 00:08:05,044
af a multiple-- það átti að vera
fjögurra af fjórum margföldun borð.

163
00:08:05,044 --> 00:08:06,210
Það er frekar einfalt.

164
00:08:06,210 --> 00:08:09,410
Og við viljum halda að það væri
líta nokkuð vel skipulögð.

165
00:08:09,410 --> 00:08:15,277
En í raun, þegar við forskoða þessa síðu,
sjáum við að það er góður af ljót, ekki satt?

166
00:08:15,277 --> 00:08:16,860
Er augljóst að við höfum raðir og dálka hér.

167
00:08:16,860 --> 00:08:18,350
Það einhvers konar aðskilnað.

168
00:08:18,350 --> 00:08:20,040
En það er ekki þroskandi aðskilnað.

169
00:08:20,040 --> 00:08:23,105
Við erum í raun ekki að fá
of mikið af upplýsingum hér.

170
00:08:23,105 --> 00:08:25,730
Og það er engin aðskilnaður á milli
raðir og dálka í skilmálar

171
00:08:25,730 --> 00:08:28,460
lárétt eða lóðrétt reglum.

172
00:08:28,460 --> 00:08:31,530
Við gætum sennilega gera þetta
líta svolítið betur.

173
00:08:31,530 --> 00:08:32,934
Svo skulum reyna.

174
00:08:32,934 --> 00:08:34,559
Þannig að ég ætla að loka þessum flipa hér.

175
00:08:34,559 --> 00:08:37,434
Og ég ætla að loka table.HTML mína,
og ég hef aðra útgáfu hér

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

177
00:08:39,490 --> 00:08:40,655
Við munum opna það upp.

178
00:08:40,655 --> 00:08:42,530
Líkaminn á síðunni er
laglegur mikill the sami,

179
00:08:42,530 --> 00:08:44,238
en ég hef breyst a
svolítið efst.

180
00:08:44,238 --> 00:08:47,132
Og ég ætla að fletta upp hér.

181
00:08:47,132 --> 00:08:49,340
Takið eftir að í þetta sinn, ég er
nota embed stíl tags.

182
00:08:49,340 --> 00:08:53,550
Ég hef opnað stíl tag, og ég er nú
skilgreina CSS stílblað bara inni

183
00:08:53,550 --> 00:08:54,310
af því.

184
00:08:54,310 --> 00:08:56,310
Ég er með stílblað sem segir, borð.

185
00:08:56,310 --> 00:08:58,170
Það er tag val mitt.

186
00:08:58,170 --> 00:09:01,340
Ég er ekki að nota punkt eða kjötkássa,
sem ég myndi vera að gera ef ég

187
00:09:01,340 --> 00:09:03,710
var að nota auðkenni eða flokks val.

188
00:09:03,710 --> 00:09:06,190
Ég er með tag val here-- borð.

189
00:09:06,190 --> 00:09:10,090
Þessi stíll er að fara að
eiga við um alla töflu tag.

190
00:09:10,090 --> 00:09:14,950
Virðist ég vil setja einn
punktur að breidd, solid blár landamæri,

191
00:09:14,950 --> 00:09:15,779
inni mitt borð.

192
00:09:15,779 --> 00:09:18,320
Það hljómar eins og það myndi líklega
hjálpa ástandinu, ekki satt?

193
00:09:18,320 --> 00:09:20,320
Við erum að fara að hafa
það líta mikið betur.

194
00:09:20,320 --> 00:09:21,190
Svo er þetta í lagi.

195
00:09:21,190 --> 00:09:23,540
Stylistically, ég hef bara
embed stílblaðið minn hér.

196
00:09:23,540 --> 00:09:25,100
Það er vissulega
ásættanlegt leið til að gera það.

197
00:09:25,100 --> 00:09:26,391
Við skulum sjá hvað þetta lítur út.

198
00:09:26,391 --> 00:09:29,790
Svo ég ætla að fara aftur niður hér, og
Ég mun forsýning table2.HTML mína.

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

200
00:09:32,430 --> 00:09:36,470
Jæja, það er ekki alveg það sem ég vildi,
en það er einmitt það sem við bað.

201
00:09:36,470 --> 00:09:39,530
Við sögðum að þetta stíll er
að fara að beita við borðið okkar.

202
00:09:39,530 --> 00:09:43,810
Borðið okkar hefur nú einn pixla
breiður, solid blár í kringum hana.

203
00:09:43,810 --> 00:09:46,237
Við erum í raun ekki að fá
á töflunnar.

204
00:09:46,237 --> 00:09:47,570
Við erum bara að við borðið.

205
00:09:47,570 --> 00:09:49,310
Svo CSS vann.

206
00:09:49,310 --> 00:09:51,890
Það hefur beitt
stílblað við borðið okkar.

207
00:09:51,890 --> 00:09:53,981
En ekki alveg að gera
það sem við vildum að hún geri.

208
00:09:53,981 --> 00:09:55,730
Hvernig eigum við að fá að gera
það sem við viljum að hún geri?

209
00:09:55,730 --> 00:09:59,287
>> Jæja, við skulum taka a líta á einn meiri
útgáfa af þessu í table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Þannig að ég ætla bara að fara að loka þessum flipa.

211
00:10:00,870 --> 00:10:03,890
Ég ætla að fara aftur hérna að mínum
skrá tré, og opna table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Aftur, það er að fara að líta nokkuð
svipað hér í upphafi.

214
00:10:10,350 --> 00:10:14,460
En takið, í þetta sinn, í stað þess að nota
a stílblað embed rétt þar,

215
00:10:14,460 --> 00:10:18,870
Ég ætla að tengja í
stílblað því að nota tengilinn tag.

216
00:10:18,870 --> 00:10:22,480
Þannig að ég ætla greinilega að tengja í
stílblað heitir tables.CSS,

217
00:10:22,480 --> 00:10:25,090
og þetta vel jafngildir
stílblað bara means-- vel,

218
00:10:25,090 --> 00:10:28,645
hvað er þetta skrá miðað við það sem
Ég doing-- er stílblað sem ég

219
00:10:28,645 --> 00:10:29,821
nota fyrir síðuna mína.

220
00:10:29,821 --> 00:10:32,320
Svo ef ég vil virkilega að sjá hvað
Ég ætla að gera með CSS hér,

221
00:10:32,320 --> 00:10:35,010
Ég þarf að fara að opna að
table.CSS skrá eins og heilbrigður.

222
00:10:35,010 --> 00:10:37,490
Þannig að við munum fara aftur hérna
aftur til skrá tré okkar.

223
00:10:37,490 --> 00:10:38,660
Það er table.CSS.

224
00:10:38,660 --> 00:10:40,490
Við munum skjóta það opið.

225
00:10:40,490 --> 00:10:43,070
Nú erum við að sjá smá af CSS.

226
00:10:43,070 --> 00:10:45,630
Apparently, ég hafa a par
af hlutum að gerast hér.

227
00:10:45,630 --> 00:10:48,950
Ég vil greinilega að setja fimm
punktur að breidd, solid rautt landamæri,

228
00:10:48,950 --> 00:10:50,287
um mitt borð.

229
00:10:50,287 --> 00:10:52,870
Við vitum nú þegar að það er að fara
að fara bara á jaðar.

230
00:10:52,870 --> 00:10:56,180
Við sáum að í table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Með hverri röð, ég
virðist vilja til að tilgreina

232
00:10:58,770 --> 00:11:01,950
að hæð raðar er 50 punktar á hæð.

233
00:11:01,950 --> 00:11:05,680
Svo fyrir hverja röð, man
það er það sem st tag gerir,

234
00:11:05,680 --> 00:11:08,550
Ég er að gera það 50 punktar á hæð.

235
00:11:08,550 --> 00:11:09,804
>> Loks, ég hef þessa athugasemd.

236
00:11:09,804 --> 00:11:11,470
Og þetta er hvernig við að gera athugasemdir í CSS.

237
00:11:11,470 --> 00:11:16,174
Það er mjög svipuð að grípa blokk
athugasemdir setningafræði rista stjörnu.

238
00:11:16,174 --> 00:11:17,090
Allur texti sem þú vilt.

239
00:11:17,090 --> 00:11:19,470
Það er engin slash slash þó í CSS.

240
00:11:19,470 --> 00:11:23,400
Fyrir stuttu inline athugasemdir, höfum við
til nota með þessari tilteknu sniði hér.

241
00:11:23,400 --> 00:11:26,830
Það lítur út eins og ég er að gera a
fullt af hlutum í TD tags mínum.

242
00:11:26,830 --> 00:11:29,710
Mundu td tags, eða borð
gögn, sem í raun eru bara

243
00:11:29,710 --> 00:11:32,210
dálkarnir inni á
raðir okkar, og virðist

244
00:11:32,210 --> 00:11:35,090
fyrir hvert stykki af gögn
í töflu mínu, ég vil

245
00:11:35,090 --> 00:11:38,850
til að stilla bakgrunnslit til
vera svartur, litur að vera hvítur,

246
00:11:38,850 --> 00:11:40,320
litur er forgrunnslitur.

247
00:11:40,320 --> 00:11:42,360
Þannig að þetta er að fara að vera
texta síðuna mína.

248
00:11:42,360 --> 00:11:45,140
Ég vil stóra leturgerð, 22
benda letur, og ég vil

249
00:11:45,140 --> 00:11:47,001
það að vera leturfjölskyldu, Georgia.

250
00:11:47,001 --> 00:11:48,750
Þannig að ég ætla ekki að fara að
hafa sjálfgefna leturgerð.

251
00:11:48,750 --> 00:11:51,820
Ég ætla að tilgreina Georgia, sem
er einn af þeim vefsíðum öruggum letur

252
00:11:51,820 --> 00:11:53,830
sem við höfum séð áður.

253
00:11:53,830 --> 00:11:57,284
Ég vil texta minn til að vera í samræmi
miðlægt, í the miðja af the kassi,

254
00:11:57,284 --> 00:11:59,450
Ég vil ekki að það að vera vinstri
takt eða hægri takt.

255
00:11:59,450 --> 00:12:03,461
Og ég vil breidd dálki minn
að vera 50 punktar á breidd eins og heilbrigður.

256
00:12:03,461 --> 00:12:05,210
Við skulum taka a líta á
hvað þetta lítur út eins og,

257
00:12:05,210 --> 00:12:07,470
og sjá hvort þetta er kannski framför.

258
00:12:07,470 --> 00:12:12,890
Þannig að ég ætla að fara að table3.HTML, sem
muna, nær table.CSS sem hlekkur,

259
00:12:12,890 --> 00:12:14,830
og við munum forskoða það.

260
00:12:14,830 --> 00:12:16,800
Það er mikið betra, ekki satt?

261
00:12:16,800 --> 00:12:20,004
Þetta er í raun farin að líta
mikið meira eins og margföldun borð.

262
00:12:20,004 --> 00:12:21,920
Ég hef að rauða landamæri
um mitt borð en nú

263
00:12:21,920 --> 00:12:26,700
Ég líka hef tilgreint sem
Hver röð er 50 punktar á breidd,

264
00:12:26,700 --> 00:12:30,220
eða það er 50 dílar tall-- afsökun
me-- hver dálkur er 50 punktar á breidd.

265
00:12:30,220 --> 00:12:34,251
Gögnin í hverjum dálki, og aðeins
gögn, hefur svartan bakgrunn.

266
00:12:34,251 --> 00:12:36,000
Svo er það hvers vegna þeir
hvítar línur eru.

267
00:12:36,000 --> 00:12:38,836
Þar sem pláss í
milli allra þessara frumna,

268
00:12:38,836 --> 00:12:40,710
það er ekki landamæri í
sjálfu sér, það er bara

269
00:12:40,710 --> 00:12:43,170
Ég er bara að fylla í
frumur, sem í raun

270
00:12:43,170 --> 00:12:46,310
gerir landamæri borðið, sem
virðist ekki vera til alla tíð, það

271
00:12:46,310 --> 00:12:47,887
var bara þunnt hvítar línur.

272
00:12:47,887 --> 00:12:48,720
Nú þeir eru sýnileg.

273
00:12:48,720 --> 00:12:50,380
Nú þeir skjóta burt á skjánum.

274
00:12:50,380 --> 00:12:52,920
Og svo er þetta mjög einfalt
stílblað sem ég hef beitt,

275
00:12:52,920 --> 00:12:56,850
og nú mitt borð lítur mikið meira eins
fjögurra af fjórum margföldun borð,

276
00:12:56,850 --> 00:13:00,950
í stað þess að bara jumbled sóðaskapur, þar
allt er greinilega línur og dálka,

277
00:13:00,950 --> 00:13:03,717
en ekki frábær vel skipulagt.

278
00:13:03,717 --> 00:13:06,800
Við erum í raun bara að klóra yfirborðið
um hvað þú getur gert með CSS hér.

279
00:13:06,800 --> 00:13:10,330
Sem betur fer CSS skjöl
er nokkuð augljóst.

280
00:13:10,330 --> 00:13:14,000
Þú munt nota nokkur af sínum
eiginleika, nokkuð oft.

281
00:13:14,000 --> 00:13:16,087
Þær sem við ræddum um
fyrr í þessu myndbandi.

282
00:13:16,087 --> 00:13:18,170
Það eru nokkrir sem þig
verður að öllum líkindum ekki nota allt.

283
00:13:18,170 --> 00:13:19,469
Og það er allt í lagi líka.

284
00:13:19,469 --> 00:13:22,010
En bara veit, að það er
mikið af gögnum þarna úti.

285
00:13:22,010 --> 00:13:25,110
Svo jafnvel ef við vildum ekki yfir allt,
þú ert örugglega ekki skilið eftir á eigin spýtur.

286
00:13:25,110 --> 00:13:26,780
En CSS er virkilega gaman
að gera tilraunir með.

287
00:13:26,780 --> 00:13:29,040
Og ég myndi eindregið hvetja þig
að leika í kring með þinn vefur blaðsíða,

288
00:13:29,040 --> 00:13:32,180
og sjá hvernig þú getur gert þá
útlit og feel til að bæta notanda

289
00:13:32,180 --> 00:13:34,790
Reynsla af að heimsækja síðuna þína.

290
00:13:34,790 --> 00:13:35,710
Ég er Doug Lloyd.

291
00:13:35,710 --> 00:13:37,980
Þetta er CS50.

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