1
00:00:00,000 --> 00:00:05,660
>> [MUSIK SPELA]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Så låt oss ta en mer
video tala om ytterligare ett språk.

3
00:00:08,740 --> 00:00:10,800
Denna gång ska vi prata om CSS.

4
00:00:10,800 --> 00:00:13,460
Så CSS, som är en förkortning för
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
finns något annat språk som vi använder
när du bygger webbplatser.

6
00:00:16,149 --> 00:00:17,190
Tänk på det så här.

7
00:00:17,190 --> 00:00:20,900
Om HTML är vad vi använder för att organisera
innehåll som vi vill sätta på vår sida,

8
00:00:20,900 --> 00:00:25,390
CSS är det verktyg som vi använder i allmänhet
att anpassa hur våra webbplatser ser,

9
00:00:25,390 --> 00:00:30,410
och hur användarupplevelsen verkligen
är, interagerar med vår webbplats.

10
00:00:30,410 --> 00:00:32,535
>> I likhet med HTML, CSS är
inte ett programmeringsspråk.

11
00:00:32,535 --> 00:00:33,451
Det har inte logik.

12
00:00:33,451 --> 00:00:34,595
Det har inte variabler.

13
00:00:34,595 --> 00:00:38,890
Den har inte någon form av att
flöde relaterade saker som C gör.

14
00:00:38,890 --> 00:00:40,150
Det är en styling språk.

15
00:00:40,150 --> 00:00:42,810
Och dess syntax är ganska
enkel, och bara beskriver

16
00:00:42,810 --> 00:00:46,240
hur delar av vår
sida har vissa HTML

17
00:00:46,240 --> 00:00:48,190
element bör ändras.

18
00:00:48,190 --> 00:00:51,170
För detta ändamål, om du inte
Ännu sett vår video på HTML,

19
00:00:51,170 --> 00:00:53,290
eller är obekant med
HTML allmänhet, du

20
00:00:53,290 --> 00:00:57,430
kanske vill ta en titt på det
första, eftersom denna diskussion av CSS

21
00:00:57,430 --> 00:01:00,700
kommer att bero på
vissa kunskaper i HTML.

22
00:01:00,700 --> 00:01:03,740
>> Så här är ett riktigt
enkel CSS stylesheet.

23
00:01:03,740 --> 00:01:06,480
Även om du har aldrig
programmerad med CSS före,

24
00:01:06,480 --> 00:01:10,624
Jag är ganska säker på att du kan räkna ut
exakt vad detta mallen gör.

25
00:01:10,624 --> 00:01:11,290
Vad gör den?

26
00:01:11,290 --> 00:01:15,470
Tja, appliceras på kroppen av vår hemsida
sida, allt mellan body-taggarna

27
00:01:15,470 --> 00:01:19,631
på vår HTML, och det sätter
bakgrundsfärg på den sidan till blått.

28
00:01:19,631 --> 00:01:21,130
Tja, det är en mycket enkel format.

29
00:01:21,130 --> 00:01:23,269
Det är faktiskt mycket mänsklig
vänligt språk, CSS.

30
00:01:23,269 --> 00:01:26,560
Så även om du har aldrig använt det tidigare,
du förmodligen kunde gissa vad det gjorde.

31
00:01:26,560 --> 00:01:30,140
I själva verket, om vi lastade en sida, där
denna format var inbäddad på något sätt,

32
00:01:30,140 --> 00:01:36,240
bakgrundsfärg på vår sida skulle
vara blå, och inte den vita standard.

33
00:01:36,240 --> 00:01:37,670
>> Så hur bygger vi mallar?

34
00:01:37,670 --> 00:01:39,700
Tja först måste vi
identifiera en väljare.

35
00:01:39,700 --> 00:01:42,970
I det sista exemplet,
att väljar var kropp.

36
00:01:42,970 --> 00:01:45,050
Då vi har en öppen
klammerparentes, och vi är

37
00:01:45,050 --> 00:01:48,410
kommer att börja definiera
formatmall för att väljaren.

38
00:01:48,410 --> 00:01:51,800
Mellan klammerparenteserna, vi
bara har en lista över nyckelpar värde.

39
00:01:51,800 --> 00:01:56,205
Det tidigare värdet Paret var
bakgrundsfärg blå semikolon,

40
00:01:56,205 --> 00:01:57,830
men vi skulle kunna göra mer och mer av dessa.

41
00:01:57,830 --> 00:02:02,330
Du kan ha flera saker tillämpar
till den taggen att väljaren kropp.

42
00:02:02,330 --> 00:02:05,960
Var och en av dem är åtskilda av en
semikolon, och vi kallar var och en av dem

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

44
00:02:08,949 --> 00:02:12,410
När vi är klara med alla styling vi
vill ansöka till just tag,

45
00:02:12,410 --> 00:02:15,300
Vi har bara en avslutande klammer
spänna att avsluta format,

46
00:02:15,300 --> 00:02:19,640
och vi är klara definierar format
för just väljare.

47
00:02:19,640 --> 00:02:21,341
>> Vad är några vanliga CSS-egenskaper?

48
00:02:21,341 --> 00:02:23,590
Tja, kanske du vill lägga
en ram runt något.

49
00:02:23,590 --> 00:02:26,850
Så du kan säga, gränsa,
som skulle vara din nyckel,

50
00:02:26,850 --> 00:02:29,460
och sedan dina värderingar skulle vara,
vilken stil, färg och bredd

51
00:02:29,460 --> 00:02:30,209
du vill att det ska vara.

52
00:02:30,209 --> 00:02:33,530
Så stilen kan vara en fast substans
linje, en prickad linje, en streckad linje,

53
00:02:33,530 --> 00:02:36,020
en nocklinje, vilket skulle vara vågig linje.

54
00:02:36,020 --> 00:02:38,790
Kanske du vill ha det
vara blå eller svart eller grönt.

55
00:02:38,790 --> 00:02:41,490
Kanske du vill att det ska vara
1 eller 2 eller 10 pixlar bred.

56
00:02:41,490 --> 00:02:43,254
Du kan ange alla dessa saker.

57
00:02:43,254 --> 00:02:46,420
Kanske vill du ställa in bakgrunden
färgen på din sida på ett visst sätt.

58
00:02:46,420 --> 00:02:49,215
Vi såg redan att ställa in
bakgrund av kroppen för att vara blå.

59
00:02:49,215 --> 00:02:52,080
>> Då kan du använda ett nyckelord,
så CSS har vissa färger

60
00:02:52,080 --> 00:02:55,950
som är inbyggda i den, blått, grönt,
svart, ett mycket enkla färger vi känner.

61
00:02:55,950 --> 00:02:59,110
Men du kan också ange någon
hex färg som du vill.

62
00:02:59,110 --> 00:03:05,190
Minns att färger kan identifieras
genom en uppsättning av tre hexadecimala tal

63
00:03:05,190 --> 00:03:08,500
från 0 till 255, rg och B, den
röd, grön och blå komponent.

64
00:03:08,500 --> 00:03:10,590
Och så att vi kan ange
vilken färg vi vill med,

65
00:03:10,590 --> 00:03:15,520
istället för att använda blå eller grön eller svart,
med hjälp av pundet och sedan sex siffrorna i hex,

66
00:03:15,520 --> 00:03:18,310
och som skulle ge oss
den sex-siffriga färg.

67
00:03:18,310 --> 00:03:19,850
Så det är bakgrundsfärgen.

68
00:03:19,850 --> 00:03:21,975
>> Vi har också i förgrunden
färg, som vanligtvis är

69
00:03:21,975 --> 00:03:24,140
kommer att vara texten på din sida.

70
00:03:24,140 --> 00:03:28,850
Och du kan på samma sätt göra det
med nyckelord och eller sexsiffrigt hex.

71
00:03:28,850 --> 00:03:32,140
Så du kan ange vilken färg du
vill ha för text på din sida

72
00:03:32,140 --> 00:03:36,370
mot en särskild
bakgrundsfärg, upp ovan.

73
00:03:36,370 --> 00:03:39,100
Du kan också ändra och ta itu
med typsnitt, och hur text

74
00:03:39,100 --> 00:03:40,400
återges på sidan.

75
00:03:40,400 --> 00:03:42,010
>> Så du kan ändra teckenstorlek.

76
00:03:42,010 --> 00:03:46,320
Du kan använda nyckelord, såsom extra,
extra små eller xx små eller medelstora,

77
00:03:46,320 --> 00:03:47,660
stora, och så vidare.

78
00:03:47,660 --> 00:03:50,750
Du kan använda fasta punkter, 10
punkt, 12 poäng, och så vidare.

79
00:03:50,750 --> 00:03:55,850
Du kan använda procenttal, 80%, 20%,
där 100% är standardteckensnittet

80
00:03:55,850 --> 00:03:59,220
storlek, som vanligtvis kommer att
vara något i stil med 11 eller 12 poäng.

81
00:03:59,220 --> 00:04:01,659
Eller du kan även basera bort
den senaste teckenstorlek.

82
00:04:01,659 --> 00:04:04,950
Om du bara skrev något och du vet
vad du vill är att det ska vara mindre,

83
00:04:04,950 --> 00:04:08,241
men du vet inte exakt vilken storlek du
vill att det ska vara, ja, du kan bara säga,

84
00:04:08,241 --> 00:04:09,330
teckenstorlek mindre.

85
00:04:09,330 --> 00:04:14,344
Och det kommer att basera bort av,
bara upp ovan, är det teckenstorlek.

86
00:04:14,344 --> 00:04:15,760
Och du kan få mindre eller större.

87
00:04:15,760 --> 00:04:18,390
Så det finns en massa olika
sätt att ange teckenstorlek.

88
00:04:18,390 --> 00:04:20,690
>> Du kan också ange vad
Typsnitt du vill.

89
00:04:20,690 --> 00:04:23,360
Om du har en viss
namn, det finns ett sätt CSS--

90
00:04:23,360 --> 00:04:27,270
Vi kommer inte att prata om det
här-- att definiera en mycket specifik typsnitt

91
00:04:27,270 --> 00:04:28,980
och bädda in den på din sida.

92
00:04:28,980 --> 00:04:30,620
Du kan också använda generiska namn.

93
00:04:30,620 --> 00:04:33,540
Det finns en hel del webbsäkra typsnitt
som är fördefinierade i CSS.

94
00:04:33,540 --> 00:04:36,352
Och om du är en användare av Microsoft
Office under de senaste 20 åren,

95
00:04:36,352 --> 00:04:38,810
Du är förmodligen bekant med
en hel del av dessa webbsäkra typsnitt

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

97
00:04:44,640 --> 00:04:45,470
och så vidare.

98
00:04:45,470 --> 00:04:47,170
De är alla betraktas webbsäkra typsnitt.

99
00:04:47,170 --> 00:04:49,169
Och faktiskt, en del av
Anledningen till att de kom att bli

100
00:04:49,169 --> 00:04:54,140
var att användas för att göra web-- varje sida
hade tillgång till denna standardinställning av typsnitt

101
00:04:54,140 --> 00:04:58,480
med olika seriffer, och allt detta
font saker som vi inte kommer att komma in,

102
00:04:58,480 --> 00:05:01,130
men dessa är oftast
tillgängliga i din CSS,

103
00:05:01,130 --> 00:05:04,029
även om du inte
annars definiera teckensnitt.

104
00:05:04,029 --> 00:05:07,070
Slutligen, kan du anpassa din text,
i stället för att det är som standard, i linje med

105
00:05:07,070 --> 00:05:09,310
till vänster, du kan
rikta den åt höger,

106
00:05:09,310 --> 00:05:13,740
eller så kan du justera den centrerad, eller
motiverad så att den drabbade båda marginaler.

107
00:05:13,740 --> 00:05:16,800
Så de är alla alternativ som du kan använda
att ändra hur din text ser ut,

108
00:05:16,800 --> 00:05:20,120
och hur det visas på din sida.

109
00:05:20,120 --> 00:05:22,180
>> Dina väljare inte
måste vara endast etiketter.

110
00:05:22,180 --> 00:05:25,539
Vi såg tidigare en body-taggen
väljare, och taggväljaren

111
00:05:25,539 --> 00:05:26,580
ser bara sådär.

112
00:05:26,580 --> 00:05:30,020
Du namnger en tagg, och sedan
definiera en formatmall för den taggen.

113
00:05:30,020 --> 00:05:32,660
Men du kan också göra något
kallas ett ID väljare.

114
00:05:32,660 --> 00:05:34,390
En ID-väljare ser ganska likartade.

115
00:05:34,390 --> 00:05:38,100
Men märker, som nu jag inte använder
en HTML-tagg, jag använder, i det här fallet,

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

117
00:05:40,720 --> 00:05:42,930
Om ni minns från vår
video på HTML, vi pratade

118
00:05:42,930 --> 00:05:45,620
om hur taggar kan ha attribut.

119
00:05:45,620 --> 00:05:48,340
>> Och ett attribut som gäller
till ganska mycket alla HTML-taggar,

120
00:05:48,340 --> 00:05:51,440
men vi inte prata om det,
är något som kallas en ID-etikett.

121
00:05:51,440 --> 00:05:55,250
Så denna CSS skulle
endast tillämpas på HTML-tagg som har

122
00:05:55,250 --> 00:05:58,530
en mycket specifik ID, som du har namngett.

123
00:05:58,530 --> 00:06:01,000
Så om du har någonstans
i din kod, någonstans

124
00:06:01,000 --> 00:06:06,090
i HTML-fil, en tagg och du
anger som ett attribut till den taggen,

125
00:06:06,090 --> 00:06:09,060
ID är lika unik, det här
särskilt format

126
00:06:09,060 --> 00:06:15,030
här bara kommer att gälla mellan
den taggen med ID unik.

127
00:06:15,030 --> 00:06:17,180
>> Du kan också göra något
kallas en klass väljare.

128
00:06:17,180 --> 00:06:19,920
Så förutom att ha
ID attribut, kan du också

129
00:06:19,920 --> 00:06:23,130
lägga till en klass attribut till HTML-taggar.

130
00:06:23,130 --> 00:06:27,140
Och när du använder en klass attribut
det kan tillämpas på flera taggar.

131
00:06:27,140 --> 00:06:31,880
Så om du har flera saker som
är liknande, kanske du vill säga,

132
00:06:31,880 --> 00:06:35,890
öppen tag bla, bla, bla,
blah, lika klass studenter.

133
00:06:35,890 --> 00:06:38,190
Och sedan denna
format skulle gälla

134
00:06:38,190 --> 00:06:42,041
varje tagg som klass är studenter.

135
00:06:42,041 --> 00:06:44,290
I det här fallet skulle vi ställa in
bakgrundsfärgen till gul,

136
00:06:44,290 --> 00:06:46,706
och vi skulle sätta opacitet, som
är en tagg som vi inte tala om,

137
00:06:46,706 --> 00:06:52,510
men bara handlar om hur transparent
något är, till 70%, i det här fallet.

138
00:06:52,510 --> 00:06:54,430
>> Det finns två alternativ för
skrivmallar.

139
00:06:54,430 --> 00:06:56,680
Du kan skriva dem
direkt i din HTML

140
00:06:56,680 --> 00:06:59,690
genom att placera mallarna
mellan stil taggar.

141
00:06:59,690 --> 00:07:03,850
Och de stil taggar gå inne i
huvudet taggar på din webbsida.

142
00:07:03,850 --> 00:07:08,240
Den kanske mer bästa sättet att göra
det är att skriva en separat .css fil,

143
00:07:08,240 --> 00:07:12,360
och sedan länka den till din
dokument med länk taggar.

144
00:07:12,360 --> 00:07:14,690
Länk taggar, återigen, är
skiljer sig från hyperlänkar,

145
00:07:14,690 --> 00:07:16,760
Om du minns från vår video en HTML.

146
00:07:16,760 --> 00:07:19,030
Och länka taggar är hur vi
dra i separata filer.

147
00:07:19,030 --> 00:07:23,900
Det ungefär som motsvarande
#include för webbprogrammering.

148
00:07:23,900 --> 00:07:27,140
>> Så låt oss ta en titt på table.HTML.

149
00:07:27,140 --> 00:07:29,380
Om ni minns från vår
HTML video, visade jag

150
00:07:29,380 --> 00:07:32,000
ett exempel på en mycket
enkel multiplikation

151
00:07:32,000 --> 00:07:35,160
tabell som såg ganska
ful, och kanske finns det

152
00:07:35,160 --> 00:07:38,650
ett sätt att göra det bättre med
CSS, så att det faktiskt ser

153
00:07:38,650 --> 00:07:41,120
mer som en multiplikation
bord, eller något

154
00:07:41,120 --> 00:07:43,730
som inte bara sitter ihop
med inga faktiska division

155
00:07:43,730 --> 00:07:45,532
mellan raderna och kolumnerna.

156
00:07:45,532 --> 00:07:47,490
Så låt oss gå över till
CS50 IDE, och ta en titt

157
00:07:47,490 --> 00:07:50,780
hur CSS kan, typ av, tweak
vad vi började med tidigare,

158
00:07:50,780 --> 00:07:53,290
och gör det något mycket bättre.

159
00:07:53,290 --> 00:07:55,650
>> Så vi är i CS50 IDE
nu, och om främmande,

160
00:07:55,650 --> 00:07:58,710
vi dra upp i detta
tabell som HTML-sidan.

161
00:07:58,710 --> 00:08:01,090
Table.HTML princip
bara definierar innehållet

162
00:08:01,090 --> 00:08:05,044
av en multiple-- det var tänkt att vara
en fyra av fyra multiplikationstabellen.

163
00:08:05,044 --> 00:08:06,210
Det är ganska enkelt.

164
00:08:06,210 --> 00:08:09,410
Och vi skulle kunna tro att det skulle
ser ganska väl organiserad.

165
00:08:09,410 --> 00:08:15,277
Men i själva verket, när vi förhandsgranskar den här sidan,
Vi ser att det finns en slags ful, eller hur?

166
00:08:15,277 --> 00:08:16,860
Klart vi har rader och kolumner här.

167
00:08:16,860 --> 00:08:18,350
Det något slags separation.

168
00:08:18,350 --> 00:08:20,040
Men det är inte en meningsfull separation.

169
00:08:20,040 --> 00:08:23,105
Vi är faktiskt inte får
för mycket information här.

170
00:08:23,105 --> 00:08:25,730
Och det finns ingen separation mellan
rader och kolumner i termer

171
00:08:25,730 --> 00:08:28,460
horisontella eller vertikala regler.

172
00:08:28,460 --> 00:08:31,530
Vi skulle förmodligen göra detta
ser lite bättre.

173
00:08:31,530 --> 00:08:32,934
Så låt oss försöka.

174
00:08:32,934 --> 00:08:34,559
Så jag kommer att stänga den här fliken upp här.

175
00:08:34,559 --> 00:08:37,434
Och jag kommer att avsluta mitt table.HTML,
och jag har en annan version här

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

177
00:08:39,490 --> 00:08:40,655
Vi ska öppna upp det.

178
00:08:40,655 --> 00:08:42,530
Kroppen av sidan är
ungefär samma,

179
00:08:42,530 --> 00:08:44,238
men jag har ändrat en
liten bit på toppen.

180
00:08:44,238 --> 00:08:47,132
Och jag ska rulla upp här.

181
00:08:47,132 --> 00:08:49,340
Lägg märke till att den här gången, jag är
med hjälp av inbyggda stil taggar.

182
00:08:49,340 --> 00:08:53,550
Jag har öppnat en stil tagg, och jag är nu
avgränsar en CSS format innanför

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

184
00:08:54,310 --> 00:08:56,310
Jag har en formatmall som säger, bord.

185
00:08:56,310 --> 00:08:58,170
Det är min taggväljaren.

186
00:08:58,170 --> 00:09:01,340
Jag använder inte prick eller hash,
som jag skulle göra om jag

187
00:09:01,340 --> 00:09:03,710
använde ett ID eller en klass väljare.

188
00:09:03,710 --> 00:09:06,190
Jag har en kodväljaren här-- bord.

189
00:09:06,190 --> 00:09:10,090
Denna stil kommer att
tillämpas på varje bord taggen.

190
00:09:10,090 --> 00:09:14,950
Tydligen jag vill sätta en
pixel bred, helt blå gränsen,

191
00:09:14,950 --> 00:09:15,779
inuti mitt bord.

192
00:09:15,779 --> 00:09:18,320
Det låter som om det skulle förmodligen
hjälpa situationen, eller hur?

193
00:09:18,320 --> 00:09:20,320
Vi kommer att ha
det ser mycket bättre.

194
00:09:20,320 --> 00:09:21,190
Så det här är bra.

195
00:09:21,190 --> 00:09:23,540
Stilist, jag har bara
inbäddade min stilmall här.

196
00:09:23,540 --> 00:09:25,100
Det är verkligen en
godtagbart sätt att göra det.

197
00:09:25,100 --> 00:09:26,391
Låt oss se vad det ser ut.

198
00:09:26,391 --> 00:09:29,790
Så jag ska gå tillbaka hit ner, och
Jag kommer att förhandsgranska table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Tja, det är inte riktigt vad jag ville,
men det är precis vad vi bad om.

201
00:09:36,470 --> 00:09:39,530
Vi sade att denna stil är
kommer att gälla till vårt bord.

202
00:09:39,530 --> 00:09:43,810
Vårt bord har nu en pixel
bred, helt blå kant runt det.

203
00:09:43,810 --> 00:09:46,237
Vi är faktiskt inte får
på tabellcellerna.

204
00:09:46,237 --> 00:09:47,570
Vi har precis kommit vid bordet.

205
00:09:47,570 --> 00:09:49,310
Så CSS arbetade.

206
00:09:49,310 --> 00:09:51,890
Det har tillämpat en
format till vårt bord.

207
00:09:51,890 --> 00:09:53,981
Men inte riktigt göra
vad vi ville göra.

208
00:09:53,981 --> 00:09:55,730
Hur får vi göra
vad vi vill att det ska göra?

209
00:09:55,730 --> 00:09:59,287
>> Nåväl, låt oss ta en titt på ett mer
version av denna i table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Så jag ska bara stänga dessa flikar.

211
00:10:00,870 --> 00:10:03,890
Jag kommer att gå tillbaka hit till min
filträdet, och öppna upp table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Återigen, det kommer att se ganska
liknande här i början.

214
00:10:10,350 --> 00:10:14,460
Men varsel, den här gången, istället för att använda
en formatmall inbäddad rätt där,

215
00:10:14,460 --> 00:10:18,870
Jag kommer att länka in en
format via länken taggen.

216
00:10:18,870 --> 00:10:22,480
Så jag tydligen bindning i en
format kallas tables.CSS,

217
00:10:22,480 --> 00:10:25,090
och detta väl lika
format bara means-- bra,

218
00:10:25,090 --> 00:10:28,645
Vad är den här filen i förhållande till vad
Jag är doing-- är en formatmall som jag

219
00:10:28,645 --> 00:10:29,821
använder för min sida.

220
00:10:29,821 --> 00:10:32,320
Så om jag verkligen vill se vad
Jag gör med CSS här,

221
00:10:32,320 --> 00:10:35,010
Jag måste gå öppna att
table.CSS fil också.

222
00:10:35,010 --> 00:10:37,490
Så vi ska gå tillbaka hit
igen till vårt filträdet.

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

224
00:10:38,660 --> 00:10:40,490
Vi kommer att dyka upp den.

225
00:10:40,490 --> 00:10:43,070
Nu ser vi lite av CSS.

226
00:10:43,070 --> 00:10:45,630
Tydligen har jag ett par
saker händer här.

227
00:10:45,630 --> 00:10:48,950
Jag vill uppenbarligen att sätta en fem
pixel bred, fast röd kant,

228
00:10:48,950 --> 00:10:50,287
runt mitt bord.

229
00:10:50,287 --> 00:10:52,870
Vi vet redan att det kommer
att bara gå på omkretsen.

230
00:10:52,870 --> 00:10:56,180
Vi såg att i table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Med varje rad, jag
tydligen vill ange

232
00:10:58,770 --> 00:11:01,950
att radhöjden är 50 pixlar hög.

233
00:11:01,950 --> 00:11:05,680
Så för varje rad, kom ihåg
det är vad tr taggen gör,

234
00:11:05,680 --> 00:11:08,550
Jag gör det 50 pixlar hög.

235
00:11:08,550 --> 00:11:09,804
>> Till sist, jag har den här kommentaren.

236
00:11:09,804 --> 00:11:11,470
Och det är hur vi gör kommentarer i CSS.

237
00:11:11,470 --> 00:11:16,174
Det är mycket lik gripa blockera
kommentarer syntax snedstreck stjärna.

238
00:11:16,174 --> 00:11:17,090
All text du vill.

239
00:11:17,090 --> 00:11:19,470
Det finns ingen snedstreck snedstreck men i CSS.

240
00:11:19,470 --> 00:11:23,400
För korta inline kommentarer, vi har
att använda detta särskilt format här.

241
00:11:23,400 --> 00:11:26,830
Det ser ut som jag gör en
massa saker i mina td taggar.

242
00:11:26,830 --> 00:11:29,710
Kom ihåg td taggar, eller bord
uppgifter, som verkligen är bara

243
00:11:29,710 --> 00:11:32,210
kolumnerna inuti
våra rader och tydligen

244
00:11:32,210 --> 00:11:35,090
för varje del av uppgifter
i mitt bord, jag vill

245
00:11:35,090 --> 00:11:38,850
för att ställa in bakgrundsfärgen till
vara svart, för att färgen vara vit,

246
00:11:38,850 --> 00:11:40,320
färg är förgrundsfärgen.

247
00:11:40,320 --> 00:11:42,360
Så det här kommer att bli
texten på min sida.

248
00:11:42,360 --> 00:11:45,140
Jag vill ha stort typsnitt, 22
punkt teckensnitt, och jag vill

249
00:11:45,140 --> 00:11:47,001
det vara av typsnittsfamilj, Georgien.

250
00:11:47,001 --> 00:11:48,750
Så jag tänker inte
har standardteckensnittet.

251
00:11:48,750 --> 00:11:51,820
Jag kommer att specificera Georgien, som
är en av de webbsäkra typsnitt

252
00:11:51,820 --> 00:11:53,830
att vi har sett förut.

253
00:11:53,830 --> 00:11:57,284
Jag vill att min text som ska anpassas
centralt, i mitten av lådan,

254
00:11:57,284 --> 00:11:59,450
Jag vill inte att det ska vara kvar
linje eller högerjusterat.

255
00:11:59,450 --> 00:12:03,461
Och jag vill att min kolumnbredd
att vara 50 pixlar bred också.

256
00:12:03,461 --> 00:12:05,210
Låt oss ta en titt på
vad det ser ut,

257
00:12:05,210 --> 00:12:07,470
och se om detta är kanske en förbättring.

258
00:12:07,470 --> 00:12:12,890
Så jag kommer att gå till table3.HTML, som
minns, innehåller table.CSS som en länk,

259
00:12:12,890 --> 00:12:14,830
och vi kommer att förhandsgranska den.

260
00:12:14,830 --> 00:12:16,800
Det är en mycket bättre, eller hur?

261
00:12:16,800 --> 00:12:20,004
Detta är faktiskt börjar se
mycket mer som en multiplikationstabellen.

262
00:12:20,004 --> 00:12:21,920
Jag har den röd ram
runt mitt bord men nu

263
00:12:21,920 --> 00:12:26,700
Jag har också angett att
varje rad är 50 pixlar bred,

264
00:12:26,700 --> 00:12:30,220
eller är det 50 pixlar tall-- ursäkt
mig-- varje kolumn är 50 pixlar bred.

265
00:12:30,220 --> 00:12:34,251
Data i varje kolumn, och endast
data, har en svart bakgrund.

266
00:12:34,251 --> 00:12:36,000
Så det är därför de
vita linjer finns.

267
00:12:36,000 --> 00:12:38,836
Eftersom utrymmet i
mellan alla dessa celler,

268
00:12:38,836 --> 00:12:40,710
det är inte en gräns på
och för sig, det är bara

269
00:12:40,710 --> 00:12:43,170
Jag bara fylla i
celler, som faktiskt

270
00:12:43,170 --> 00:12:46,310
gör gränserna i tabellen, som
uppenbarligen fanns hela tiden, det

271
00:12:46,310 --> 00:12:47,887
var bara tunna vita linjer.

272
00:12:47,887 --> 00:12:48,720
Nu är de är synliga.

273
00:12:48,720 --> 00:12:50,380
Nu pop de upp på skärmen.

274
00:12:50,380 --> 00:12:52,920
Och så detta är en mycket enkel
formatmall som jag har tillämpat,

275
00:12:52,920 --> 00:12:56,850
och nu mitt bord ser mycket mer ut som
en fyra av fyra multiplikationstabellen,

276
00:12:56,850 --> 00:13:00,950
i stället för en rättvis rörig röra, där
allt är klart rader och kolumner,

277
00:13:00,950 --> 00:13:03,717
men inte super väl organiserad.

278
00:13:03,717 --> 00:13:06,800
Vi är egentligen bara skrapa på ytan
av vad du kan göra med CSS här.

279
00:13:06,800 --> 00:13:10,330
Lyckligtvis CSS dokumentation
är ganska enkelt.

280
00:13:10,330 --> 00:13:14,000
Du kommer att använda flera av dess
attribut, ganska ofta.

281
00:13:14,000 --> 00:13:16,087
De som vi talat om
tidigare i den här videon.

282
00:13:16,087 --> 00:13:18,170
Det finns flera som du
troligen inte kommer att använda alla.

283
00:13:18,170 --> 00:13:19,469
Och det är bra, också.

284
00:13:19,469 --> 00:13:22,010
Men bara vet, att det finns en
mycket dokumentation där ute.

285
00:13:22,010 --> 00:13:25,110
Så även om vi inte täcka allt,
du verkligen inte kvar på egen hand.

286
00:13:25,110 --> 00:13:26,780
Men CSS är riktigt roligt
att experimentera med.

287
00:13:26,780 --> 00:13:29,040
Och jag vill starkt uppmuntra dig
att leka med dina webbsidor,

288
00:13:29,040 --> 00:13:32,180
och se hur du kan göra dem
utseende och känsla för att förbättra användar

289
00:13:32,180 --> 00:13:34,790
upplevelsen av att besöka din sida.

290
00:13:34,790 --> 00:13:35,710
Jag är Doug Lloyd.

291
00:13:35,710 --> 00:13:37,980
Detta är CS50.

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