1
00:00:00,000 --> 00:00:05,660
>> [Musik spiller]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Så lad os tage endnu et
video til at tale om endnu et sprog.

3
00:00:08,740 --> 00:00:10,800
Denne gang vil vi snakke om CSS.

4
00:00:10,800 --> 00:00:13,460
Så CSS, som er en forkortelse for
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
er et andet sprog vi bruger
når konstruere hjemmesider.

6
00:00:16,149 --> 00:00:17,190
Tænk over det på denne måde.

7
00:00:17,190 --> 00:00:20,900
Hvis HTML er det, vi bruger til at organisere
indhold, vi ønsker at sætte på vores side,

8
00:00:20,900 --> 00:00:25,390
CSS er det værktøj, vi normalt bruger
at tilpasse, hvordan vores websites ser,

9
00:00:25,390 --> 00:00:30,410
og hvordan brugeroplevelsen virkelig
er, interagere med vores hjemmeside.

10
00:00:30,410 --> 00:00:32,535
>> Svarende til HTML, CSS er
ikke et programmeringssprog.

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

12
00:00:33,451 --> 00:00:34,595
Det har ikke variable.

13
00:00:34,595 --> 00:00:38,890
Det har ikke nogen form for at
flow relaterede ting, som C gør.

14
00:00:38,890 --> 00:00:40,150
Det er en styling sprog.

15
00:00:40,150 --> 00:00:42,810
Og dens syntaks er temmelig
enkel, og bare beskriver

16
00:00:42,810 --> 00:00:46,240
hvordan elementerne i vores
side har visse HTML

17
00:00:46,240 --> 00:00:48,190
elementer bør ændres.

18
00:00:48,190 --> 00:00:51,170
Med henblik herpå hvis du ikke har
endnu set vores video på HTML,

19
00:00:51,170 --> 00:00:53,290
eller ikke er bekendt med
HTML generelt, du

20
00:00:53,290 --> 00:00:57,430
måske ønsker at tage et kig på det
første, fordi denne diskussion af CSS

21
00:00:57,430 --> 00:01:00,700
kommer til at afhænge af
vist kendskab til HTML.

22
00:01:00,700 --> 00:01:03,740
>> Så her er en virkelig
simpel CSS stylesheet.

23
00:01:03,740 --> 00:01:06,480
Selv hvis du aldrig har
programmeret med CSS før,

24
00:01:06,480 --> 00:01:10,624
Jeg er temmelig sikker på, du kan regne ud
præcis, hvad denne typografiark gør.

25
00:01:10,624 --> 00:01:11,290
Hvad gør den?

26
00:01:11,290 --> 00:01:15,470
Nå, anvendt til kroppen af ​​vores web
side, alt mellem krop tags

27
00:01:15,470 --> 00:01:19,631
på vores HTML, og det sætter
baggrundsfarve denne side til blå.

28
00:01:19,631 --> 00:01:21,130
Tja, det er en meget simpel stylesheet.

29
00:01:21,130 --> 00:01:23,269
Det er faktisk meget menneskeligt
venlige sprog, CSS.

30
00:01:23,269 --> 00:01:26,560
Så selv hvis du aldrig har brugt det før,
du sandsynligvis kunne gætte, hvad der gjorde.

31
00:01:26,560 --> 00:01:30,140
Faktisk, hvis vi indlæst en side, hvor
dette stylesheet blev indlejret en eller anden måde,

32
00:01:30,140 --> 00:01:36,240
baggrundsfarve vores side ville
være blå, og ikke standard hvid.

33
00:01:36,240 --> 00:01:37,670
>> Så hvordan kan vi bygger stylesheets?

34
00:01:37,670 --> 00:01:39,700
Nå først, er vi nødt til
identificere en vælger.

35
00:01:39,700 --> 00:01:42,970
I det sidste eksempel,
at vælgeren var organ.

36
00:01:42,970 --> 00:01:45,050
Så vi har en åben
krøllede klammeparentes, og vi er

37
00:01:45,050 --> 00:01:48,410
vil begynde at definere
stylesheet for at vælgeren.

38
00:01:48,410 --> 00:01:51,800
I mellem de krøllede parenteser, vi
bare have en liste over de vigtigste værdi par.

39
00:01:51,800 --> 00:01:56,205
Den tidligere værdi parret var
baggrundsfarve blå semikolon,

40
00:01:56,205 --> 00:01:57,830
men vi kunne gøre mere, og flere af disse.

41
00:01:57,830 --> 00:02:02,330
Du kunne have flere ting at anvende
denne tag, at vælgeren organ.

42
00:02:02,330 --> 00:02:05,960
Hver enkelt af dem er adskilt af en
semikolon, og vi kalder hver enkelt af dem

43
00:02:05,960 --> 00:02:08,949
en erklæring, en CSS erklæring.

44
00:02:08,949 --> 00:02:12,410
Når vi er færdig med al den styling, vi
vil anvende på den pågældende tag,

45
00:02:12,410 --> 00:02:15,300
vi bare have en afsluttende krøllet
afstive at afslutte stilarket,

46
00:02:15,300 --> 00:02:19,640
og vi er færdig definere stilarket
for den pågældende vælgeren.

47
00:02:19,640 --> 00:02:21,341
>> Hvad er nogle fælles CSS egenskaber?

48
00:02:21,341 --> 00:02:23,590
Nå, måske du ønsker at sætte
en ramme om noget.

49
00:02:23,590 --> 00:02:26,850
Så du kan sige, grænsekontrol,
der ville være din nøgle,

50
00:02:26,850 --> 00:02:29,460
og derefter dine værdier ville være,
hvad stil, farve og bredde

51
00:02:29,460 --> 00:02:30,209
du ønsker det skal være.

52
00:02:30,209 --> 00:02:33,530
Så den stil kunne være et faststof
linje, en stiplet linje, en punkteret linie,

53
00:02:33,530 --> 00:02:36,020
en højderyg linje, hvilket ville være bølgelinie.

54
00:02:36,020 --> 00:02:38,790
Måske du vil have det
være blå eller sort eller grøn.

55
00:02:38,790 --> 00:02:41,490
Måske du ønsker det skal være
1 eller 2 eller 10 pixels bred.

56
00:02:41,490 --> 00:02:43,254
Du kan angive alle disse ting.

57
00:02:43,254 --> 00:02:46,420
Måske du ønsker at indstille baggrunden
farven på din side på en bestemt måde.

58
00:02:46,420 --> 00:02:49,215
Vi har allerede set, at indstille
baggrund af kroppen til at være blå.

59
00:02:49,215 --> 00:02:52,080
>> Derefter kan du bruge et nøgleord,
så CSS har visse farver

60
00:02:52,080 --> 00:02:55,950
der er bygget ind i det, blå, grøn,
sort, en meget enkle farver, vi kender.

61
00:02:55,950 --> 00:02:59,110
Men du kan også angive en hvilken som helst
hex farve, du gerne vil.

62
00:02:59,110 --> 00:03:05,190
Husk på, at der kan identificeres farver
ved et sæt af tre hex tal

63
00:03:05,190 --> 00:03:08,500
fra 0 til 255, rg og b, den
rød, grøn og blå komponent.

64
00:03:08,500 --> 00:03:10,590
Og så vi kan angive
alle farver, vi ønsker, ved,

65
00:03:10,590 --> 00:03:15,520
stedet for at bruge blå eller grøn eller sort,
hjælp pund og derefter seks cifre i hex,

66
00:03:15,520 --> 00:03:18,310
og det ville give os
Den sekscifret farve.

67
00:03:18,310 --> 00:03:19,850
Så det er baggrundsfarven.

68
00:03:19,850 --> 00:03:21,975
>> Vi har også forgrunden
farve, som normalt

69
00:03:21,975 --> 00:03:24,140
vil være den tekst på din side.

70
00:03:24,140 --> 00:03:28,850
Og du kan ligeledes gøre det
med centrale ord og eller sekscifret hex.

71
00:03:28,850 --> 00:03:32,140
Så du kan angive en hvilken som helst farve du
ønsker til tekst på din side

72
00:03:32,140 --> 00:03:36,370
mod en bestemt
baggrundsfarve, op over.

73
00:03:36,370 --> 00:03:39,100
Du kan også ændre og håndtere
med skrifttype, og den måde, teksten

74
00:03:39,100 --> 00:03:40,400
gengives på siden.

75
00:03:40,400 --> 00:03:42,010
>> Så du kan ændre din skriftstørrelse.

76
00:03:42,010 --> 00:03:46,320
Du kan bruge nøgleord, såsom ekstra,
ekstra lille, eller xx små eller mellemstore,

77
00:03:46,320 --> 00:03:47,660
store, og så videre.

78
00:03:47,660 --> 00:03:50,750
Du kan bruge faste punkter, 10
punkt 12 point, og så videre.

79
00:03:50,750 --> 00:03:55,850
Du kan bruge procenter, 80%, 20%,
hvor 100% er standard skrifttype

80
00:03:55,850 --> 00:03:59,220
størrelse, som normalt går til
være noget lignende 11 eller 12 point.

81
00:03:59,220 --> 00:04:01,659
Eller du kan endda basere det ud
af den seneste skriftstørrelse.

82
00:04:01,659 --> 00:04:04,950
Hvis du bare skrev noget, og du ved
hvad du ønsker, er for det at være mindre,

83
00:04:04,950 --> 00:04:08,241
men du ved ikke præcis, hvad størrelse du
ønsker det skal være, godt, du kan bare sige,

84
00:04:08,241 --> 00:04:09,330
skriftstørrelse mindre.

85
00:04:09,330 --> 00:04:14,344
Og det vil basere ud af,
lige op over, er det skriftstørrelse.

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

87
00:04:15,760 --> 00:04:18,390
Så der er en masse forskellige
måder at angive skriftstørrelsen.

88
00:04:18,390 --> 00:04:20,690
>> Du kan også angive, hvad
skrifttype, du ønsker.

89
00:04:20,690 --> 00:04:23,360
Hvis du har en særlig
navn, der er en måde i CSS--

90
00:04:23,360 --> 00:04:27,270
Vi kommer ikke til at tale om det
her-- at definere en meget bestemt skrifttype

91
00:04:27,270 --> 00:04:28,980
og integrere den i din side.

92
00:04:28,980 --> 00:04:30,620
Du kan også bruge generiske navne.

93
00:04:30,620 --> 00:04:33,540
Der er en masse af web sikre skrifttyper
der er præ-defineret i CSS.

94
00:04:33,540 --> 00:04:36,352
Og hvis du er en bruger af Microsoft
Kontor i de sidste 20 år,

95
00:04:36,352 --> 00:04:38,810
du er sikkert bekendt med
en masse af disse web sikre skrifttyper

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

97
00:04:44,640 --> 00:04:45,470
og så videre.

98
00:04:45,470 --> 00:04:47,170
De er alle betragtes web sikker skrifttyper.

99
00:04:47,170 --> 00:04:49,169
Og faktisk en del af
grund de kom for at være

100
00:04:49,169 --> 00:04:54,140
blev der skal bruges til at gøre web-- hver side
havde adgang til denne standard sæt skrifttyper

101
00:04:54,140 --> 00:04:58,480
med forskellige seriffer, og alt dette
font ting, vi vil ikke komme ind,

102
00:04:58,480 --> 00:05:01,130
men disse er som regel
tilgængelige i din CSS,

103
00:05:01,130 --> 00:05:04,029
selv hvis du ikke gør
ellers definere skrifttyper.

104
00:05:04,029 --> 00:05:07,070
Endelig kan du justere din tekst,
i stedet for at det er, som standard, på linie

105
00:05:07,070 --> 00:05:09,310
til venstre, kunne du
tilpasse den til højre,

106
00:05:09,310 --> 00:05:13,740
eller du kan justere det centreret, eller
berettiget, så det ramte begge margener.

107
00:05:13,740 --> 00:05:16,800
Så dem er alle muligheder, du kan bruge
at ændre, hvad din tekst ser ud,

108
00:05:16,800 --> 00:05:20,120
og hvordan den vises på din side.

109
00:05:20,120 --> 00:05:22,180
>> Dine selektorer ikke
nødt til at være kun tags.

110
00:05:22,180 --> 00:05:25,539
Vi har tidligere set et organ-tag
vælgeren, og tag selector

111
00:05:25,539 --> 00:05:26,580
ser bare sådan.

112
00:05:26,580 --> 00:05:30,020
Du navngive et tag, og så skal du
definere en stylesheet for det mærke.

113
00:05:30,020 --> 00:05:32,660
Men du kan også gøre noget
kaldes en ID vælgeren.

114
00:05:32,660 --> 00:05:34,390
En ID-vælgeren ser temmelig ens.

115
00:05:34,390 --> 00:05:38,100
Men bemærke, at nu er jeg ikke bruger
en HTML-tag, jeg bruger, i dette tilfælde,

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

117
00:05:40,720 --> 00:05:42,930
Hvis du husker fra vores
video på HTML, vi talte

118
00:05:42,930 --> 00:05:45,620
om, hvordan tags kan have attributter.

119
00:05:45,620 --> 00:05:48,340
>> Og en attribut, der gælder
til stort set alle HTML-tags,

120
00:05:48,340 --> 00:05:51,440
men vi talte ikke om det,
er noget, der hedder et id-tag.

121
00:05:51,440 --> 00:05:55,250
Så denne særlige CSS ville
gælder kun for HTML-tag, der har

122
00:05:55,250 --> 00:05:58,530
en meget specifik id, at du har navngivet.

123
00:05:58,530 --> 00:06:01,000
Så hvis du har et eller andet sted
i din kode, et eller andet sted

124
00:06:01,000 --> 00:06:06,090
i din HTML-fil, et tag og du
angive som en attribut til tag,

125
00:06:06,090 --> 00:06:09,060
ID er lig med unikke, det
bestemt stylesheet

126
00:06:09,060 --> 00:06:15,030
her vil kun gælde i mellem
at tag med ID unikke.

127
00:06:15,030 --> 00:06:17,180
>> Du kan også gøre noget
kaldes en klasse vælgeren.

128
00:06:17,180 --> 00:06:19,920
Så ud over at have
Id attributter, kan du også

129
00:06:19,920 --> 00:06:23,130
tilføje en klasse attribut til HTML-tags.

130
00:06:23,130 --> 00:06:27,140
Og når du bruger en klasse attribut,
den kan anvendes til flere tags.

131
00:06:27,140 --> 00:06:31,880
Så hvis du har flere ting, som
er ens, måske du ønsker at sige,

132
00:06:31,880 --> 00:06:35,890
åbent tag bla, bla, bla,
bla, klasse lig studerende.

133
00:06:35,890 --> 00:06:38,190
Og så denne særlige
stylesheet ville gælde

134
00:06:38,190 --> 00:06:42,041
til hvert mærke som klasse er studerende.

135
00:06:42,041 --> 00:06:44,290
I dette tilfælde vil vi sætte
baggrundsfarve til gul,

136
00:06:44,290 --> 00:06:46,706
og vi ville sætte opacitet, hvilket
er et tag, vi ikke taler om,

137
00:06:46,706 --> 00:06:52,510
men bare beskæftiger sig med, hvordan gennemsigtige
noget er, at 70%, i dette tilfælde.

138
00:06:52,510 --> 00:06:54,430
>> Der er to muligheder for
skriftligt stylesheets.

139
00:06:54,430 --> 00:06:56,680
Du kan skrive dem
direkte ind i din HTML

140
00:06:56,680 --> 00:06:59,690
ved at placere stylesheets
mellem stil tags.

141
00:06:59,690 --> 00:07:03,850
Og de stil tags gå inde i
hovedet tags på din webside.

142
00:07:03,850 --> 00:07:08,240
Den måske mere foretrukne måde at gøre
det er at skrive en særskilt .css fil,

143
00:07:08,240 --> 00:07:12,360
og derefter knytte den i din
dokument ved hjælp link tags.

144
00:07:12,360 --> 00:07:14,690
Link tags, igen, er
forskellig fra hyperlinks,

145
00:07:14,690 --> 00:07:16,760
hvis du husker fra vores video en HTML.

146
00:07:16,760 --> 00:07:19,030
Og link tags er, hvordan vi
Træk i særskilte filer.

147
00:07:19,030 --> 00:07:23,900
Det lidt ligesom hvad der svarer til
# include til web programmering.

148
00:07:23,900 --> 00:07:27,140
>> Så lad os tage et kig på table.HTML.

149
00:07:27,140 --> 00:07:29,380
Hvis du husker fra vores
HTML video, viste jeg

150
00:07:29,380 --> 00:07:32,000
et eksempel på en meget
simpel multiplikation

151
00:07:32,000 --> 00:07:35,160
tabel, der kiggede temmelig
grimme, og måske er der

152
00:07:35,160 --> 00:07:38,650
en måde at gøre det bedre med
CSS, at gøre det ser faktisk

153
00:07:38,650 --> 00:07:41,120
mere som en multiplikation
bord, eller noget

154
00:07:41,120 --> 00:07:43,730
der er ikke kun hænger sammen
med ingen faktiske division

155
00:07:43,730 --> 00:07:45,532
mellem rækkerne og kolonnerne.

156
00:07:45,532 --> 00:07:47,490
Så lad os gå over til
CS50 IDE, og tage et kig

157
00:07:47,490 --> 00:07:50,780
på, hvordan CSS kan, slags, nappe
hvad vi startede med før,

158
00:07:50,780 --> 00:07:53,290
og gøre det noget meget bedre.

159
00:07:53,290 --> 00:07:55,650
>> Så vi er i CS50 IDE
nu, og hvis ukendte,

160
00:07:55,650 --> 00:07:58,710
vi vil trække op i dette
tabel, HTML-side.

161
00:07:58,710 --> 00:08:01,090
Table.HTML dybest set
bare definerer indholdet

162
00:08:01,090 --> 00:08:05,044
af en multiple-- det skulle være
en fire af fire store tabel.

163
00:08:05,044 --> 00:08:06,210
Det er ret ligetil.

164
00:08:06,210 --> 00:08:09,410
Og vi ville synes, at det ville
se temmelig godt organiseret.

165
00:08:09,410 --> 00:08:15,277
Men i virkeligheden, når vi se et eksempel denne side
vi se, at det er lidt grimt, ikke?

166
00:08:15,277 --> 00:08:16,860
Klart vi har rækker og kolonner her.

167
00:08:16,860 --> 00:08:18,350
Der en slags separation.

168
00:08:18,350 --> 00:08:20,040
Men det er ikke en meningsfuld adskillelse.

169
00:08:20,040 --> 00:08:23,105
Vi er faktisk ikke får
for meget information her.

170
00:08:23,105 --> 00:08:25,730
Og der er ingen adskillelse mellem
rækker og kolonner i form

171
00:08:25,730 --> 00:08:28,460
af vandrette eller lodrette regler.

172
00:08:28,460 --> 00:08:31,530
Vi kunne sandsynligvis gøre dette
ser en lille smule bedre.

173
00:08:31,530 --> 00:08:32,934
Så lad os prøve.

174
00:08:32,934 --> 00:08:34,559
Så jeg har tænkt mig at lukke denne fane op her.

175
00:08:34,559 --> 00:08:37,434
Og jeg har tænkt mig at lukke min table.HTML,
og jeg har en anden version her

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

177
00:08:39,490 --> 00:08:40,655
Vi vil åbne det op.

178
00:08:40,655 --> 00:08:42,530
Liget af siden er
stort set den samme,

179
00:08:42,530 --> 00:08:44,238
men jeg har ændret en
lidt på toppen.

180
00:08:44,238 --> 00:08:47,132
Og jeg vil rulle op her.

181
00:08:47,132 --> 00:08:49,340
Bemærk, at denne gang er jeg
hjælp indlejrede stil tags.

182
00:08:49,340 --> 00:08:53,550
Jeg har åbnet en stil-tag, og jeg er nu
definerer en CSS stylesheet lige inden

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

184
00:08:54,310 --> 00:08:56,310
Jeg har en stylesheet, der siger, bord.

185
00:08:56,310 --> 00:08:58,170
Det er min tag vælgeren.

186
00:08:58,170 --> 00:09:01,340
Jeg bruger ikke punktum eller hash,
som jeg ville gøre, hvis jeg

187
00:09:01,340 --> 00:09:03,710
var ved hjælp af et ID eller en klasse vælgeren.

188
00:09:03,710 --> 00:09:06,190
Jeg har et tag selector her-- bord.

189
00:09:06,190 --> 00:09:10,090
Denne stil kommer til at
gælder for hver tabel tag.

190
00:09:10,090 --> 00:09:14,950
Tilsyneladende jeg ønsker at sætte en en
pixel bred, solid blå kant,

191
00:09:14,950 --> 00:09:15,779
inde i mit bord.

192
00:09:15,779 --> 00:09:18,320
Det lyder som det ville sandsynligvis
hjælpe på situationen, ikke?

193
00:09:18,320 --> 00:09:20,320
Vi kommer til at have
tingene ser meget bedre.

194
00:09:20,320 --> 00:09:21,190
Så dette er fint.

195
00:09:21,190 --> 00:09:23,540
Stilmæssigt har jeg bare
indlejret min stylesheet i her.

196
00:09:23,540 --> 00:09:25,100
Det er helt sikkert en
acceptabel måde at gøre det.

197
00:09:25,100 --> 00:09:26,391
Lad os se, hvad det ser ud.

198
00:09:26,391 --> 00:09:29,790
Så jeg vil gå tilbage hernede, og
Jeg vil se et eksempel min table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Tja, det er ikke helt, hvad jeg ønskede,
men det er præcis, hvad vi bad om.

201
00:09:36,470 --> 00:09:39,530
Vi sagde, at denne stil er
kommer til at gælde for vores bord.

202
00:09:39,530 --> 00:09:43,810
Vores bord har nu en en pixel
bred, solid blå ramme omkring det.

203
00:09:43,810 --> 00:09:46,237
Vi er faktisk ikke får
på tabelceller.

204
00:09:46,237 --> 00:09:47,570
Vi er kun lige ved bordet.

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

206
00:09:49,310 --> 00:09:51,890
Den har anvendt en
stylesheet til vores bord.

207
00:09:51,890 --> 00:09:53,981
Men ikke helt gøre
hvad vi ønskede at gøre.

208
00:09:53,981 --> 00:09:55,730
Hvordan får vi at gøre
hvad vi ønsker det at gøre?

209
00:09:55,730 --> 00:09:59,287
>> Nå, lad os tage et kig på en mere
version af denne i table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Så jeg bare kommer til at lukke disse faner.

211
00:10:00,870 --> 00:10:03,890
Jeg har tænkt mig at gå tilbage over her til min
fil træet, og åbne op table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Igen, det kommer til at se temmelig
lignende her i begyndelsen.

214
00:10:10,350 --> 00:10:14,460
Men varsel, denne gang, i stedet for at bruge
et stilark indlejret lige derinde,

215
00:10:14,460 --> 00:10:18,870
Jeg har tænkt mig at linke i en
stylesheet via linket tag.

216
00:10:18,870 --> 00:10:22,480
Så jeg tilsyneladende forbinder i en
stylesheet hedder tables.CSS,

217
00:10:22,480 --> 00:10:25,090
og dette vel lig
stylesheet bare means-- godt,

218
00:10:25,090 --> 00:10:28,645
hvad er denne fil i forhold til, hvad
Jeg er doing-- er et stylesheet, at jeg er

219
00:10:28,645 --> 00:10:29,821
bruger til min side.

220
00:10:29,821 --> 00:10:32,320
Så hvis jeg virkelig ønsker at se, hvad
Jeg gør med CSS her,

221
00:10:32,320 --> 00:10:35,010
Jeg har brug for at gå åbent, at
table.CSS fil så godt.

222
00:10:35,010 --> 00:10:37,490
Så vi vil gå tilbage herovre
igen for at vores fil træ.

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

224
00:10:38,660 --> 00:10:40,490
Vi vil pop det åbne.

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

226
00:10:43,070 --> 00:10:45,630
Tilsyneladende, jeg har et par
af ting foregår her.

227
00:10:45,630 --> 00:10:48,950
Jeg åbenbart ønsker at sætte en fem
pixel bred, solid rød kant,

228
00:10:48,950 --> 00:10:50,287
omkring mit bord.

229
00:10:50,287 --> 00:10:52,870
Vi ved allerede, at der kommer
bare gå på omkredsen.

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

231
00:10:56,180 --> 00:10:58,770
Med hver række, I
tilsyneladende ønsker at angive

232
00:10:58,770 --> 00:11:01,950
at rækken højde er 50 pixel højt.

233
00:11:01,950 --> 00:11:05,680
Så for hver række, husk
det er, hvad det tr tag gør,

234
00:11:05,680 --> 00:11:08,550
Jeg gør det 50 pixels højt.

235
00:11:08,550 --> 00:11:09,804
>> Endelig har jeg denne kommentar.

236
00:11:09,804 --> 00:11:11,470
Og det er sådan vi gør kommentarer i CSS.

237
00:11:11,470 --> 00:11:16,174
Det er meget lig gribe blok
kommentarer syntaks skråstreg stjerne.

238
00:11:16,174 --> 00:11:17,090
Al den tekst, du ønsker.

239
00:11:17,090 --> 00:11:19,470
Der er ingen skråstreg skråstreg selv i CSS.

240
00:11:19,470 --> 00:11:23,400
For korte inline kommentarer, vi har
at bruge denne særlige format her.

241
00:11:23,400 --> 00:11:26,830
Det ser ud som jeg gør en
masse ting i mit td tags.

242
00:11:26,830 --> 00:11:29,710
Husk td tags, eller bord
data, som virkelig er lige

243
00:11:29,710 --> 00:11:32,210
søjlerne inde i
vore rækker, og tilsyneladende

244
00:11:32,210 --> 00:11:35,090
for hvert stykke data
i mit bord, jeg vil

245
00:11:35,090 --> 00:11:38,850
for at indstille baggrundsfarven til
være sort, at farven være hvid,

246
00:11:38,850 --> 00:11:40,320
farve er forgrundsfarven.

247
00:11:40,320 --> 00:11:42,360
Så dette vil være
teksten til min side.

248
00:11:42,360 --> 00:11:45,140
Jeg vil have store skrifttype, 22
pege skrifttype, og jeg vil

249
00:11:45,140 --> 00:11:47,001
at det er af den skrifttype familien, Georgien.

250
00:11:47,001 --> 00:11:48,750
Så jeg har ikke tænkt mig at
har standardskrifttype.

251
00:11:48,750 --> 00:11:51,820
Jeg har tænkt mig at specificere Georgien, som
er en af ​​disse web sikre skrifttyper

252
00:11:51,820 --> 00:11:53,830
at vi har set før.

253
00:11:53,830 --> 00:11:57,284
Jeg vil have min tekst, der skal tilpasses
centralt i midten af ​​kassen,

254
00:11:57,284 --> 00:11:59,450
Jeg vil ikke have det til at stå
justeret eller højrejusteret.

255
00:11:59,450 --> 00:12:03,461
Og jeg vil have min kolonnebredde
at være 50 pixels bredt så godt.

256
00:12:03,461 --> 00:12:05,210
Lad os tage et kig på
hvad det ser ud,

257
00:12:05,210 --> 00:12:07,470
og se, om dette er måske en forbedring.

258
00:12:07,470 --> 00:12:12,890
Så jeg har tænkt mig at gå til table3.HTML, som
tilbagekaldelse, omfatter table.CSS som et link,

259
00:12:12,890 --> 00:12:14,830
og vi vil se det.

260
00:12:14,830 --> 00:12:16,800
Det er meget bedre, ikke?

261
00:12:16,800 --> 00:12:20,004
Dette er faktisk begyndt at se
meget mere som en multiplikation tabel.

262
00:12:20,004 --> 00:12:21,920
Jeg har det rød kant
omkring mit bord, men nu

263
00:12:21,920 --> 00:12:26,700
Jeg har også angivet, at
hver række er 50 pixels bredt,

264
00:12:26,700 --> 00:12:30,220
eller det er 50 pixels tall-- undskyldning
mig-- hver kolonne er 50 pixels bred.

265
00:12:30,220 --> 00:12:34,251
Dataene i hver kolonne, og kun
de data, har en sort baggrund.

266
00:12:34,251 --> 00:12:36,000
Så det er derfor dem,
hvide linjer er der.

267
00:12:36,000 --> 00:12:38,836
Fordi rummet i
mellem alle de celler,

268
00:12:38,836 --> 00:12:40,710
det er ikke en grænse i
og for sig selv, det er bare

269
00:12:40,710 --> 00:12:43,170
Jeg er kun udfylde
celler, som faktisk

270
00:12:43,170 --> 00:12:46,310
gør grænserne i tabellen, som
tilsyneladende fandtes hele tiden, det

271
00:12:46,310 --> 00:12:47,887
var blot tynde hvide linjer.

272
00:12:47,887 --> 00:12:48,720
Nu er de synlige.

273
00:12:48,720 --> 00:12:50,380
Nu er de pop ud på skærmen.

274
00:12:50,380 --> 00:12:52,920
Og så dette er en meget enkel
stylesheet, som jeg har anvendt,

275
00:12:52,920 --> 00:12:56,850
og nu er min tabel ser meget mere som
en fire af fire store tabel,

276
00:12:56,850 --> 00:13:00,950
i stedet for en lige brogede rod, hvor
alt er klart rækker og kolonner,

277
00:13:00,950 --> 00:13:03,717
men ikke super godt organiseret.

278
00:13:03,717 --> 00:13:06,800
Vi er egentlig bare ridse overfladen
af hvad du kan gøre med CSS her.

279
00:13:06,800 --> 00:13:10,330
Heldigvis CSS dokumentation
er temmelig ligetil.

280
00:13:10,330 --> 00:13:14,000
Du skal bruge flere af sine
attributter, temmelig ofte.

281
00:13:14,000 --> 00:13:16,087
Dem vi talte om
tidligere i denne video.

282
00:13:16,087 --> 00:13:18,170
Der er flere, at du
formentlig ikke vil bruge alle.

283
00:13:18,170 --> 00:13:19,469
Og det er fint, også.

284
00:13:19,469 --> 00:13:22,010
Men bare vide, at der er en
masse dokumentation derude.

285
00:13:22,010 --> 00:13:25,110
Så selv om vi ikke dække alt,
du bestemt ikke tilbage på egen hånd.

286
00:13:25,110 --> 00:13:26,780
Men CSS er virkelig sjovt
at eksperimentere med.

287
00:13:26,780 --> 00:13:29,040
Og jeg vil stærkt opfordre dig
at lege med dine websider,

288
00:13:29,040 --> 00:13:32,180
og se, hvordan du kan gøre dem
se og føle at forbedre brugeroplevelsen

289
00:13:32,180 --> 00:13:34,790
oplevelse at besøge din side.

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

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

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