1
00:00:00,000 --> 00:00:05,660
>> [MUSIC SPILLE]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Så la oss ta ett mer
video for å snakke om en mer språk.

3
00:00:08,740 --> 00:00:10,800
Denne gangen skal 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 annet språk vi bruker
når du bygger nettsteder.

6
00:00:16,149 --> 00:00:17,190
Tenk på det som dette.

7
00:00:17,190 --> 00:00:20,900
Hvis HTML er det vi bruker til å organisere
innhold vi ønsker å sette på vår side,

8
00:00:20,900 --> 00:00:25,390
CSS er verktøyet som vi vanligvis bruker
å tilpasse hvordan våre nettsider ser,

9
00:00:25,390 --> 00:00:30,410
og hvordan brukeropplevelsen virkelig
er, i samspill med vår hjemmeside.

10
00:00:30,410 --> 00:00:32,535
>> I likhet med HTML, er CSS
ikke et programmeringsspråk.

11
00:00:32,535 --> 00:00:33,451
Det trenger ikke logikk.

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

13
00:00:34,595 --> 00:00:38,890
Det trenger ikke noen form for at
flyte relaterte ting som C gjør.

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

15
00:00:40,150 --> 00:00:42,810
Og syntaksen er ganske
enkel, og beskriver bare

16
00:00:42,810 --> 00:00:46,240
hvordan elementene i vår
side har visse HTML

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

18
00:00:48,190 --> 00:00:51,170
For å nå dette målet, hvis du ikke har
ennå så vår video på HTML,

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

20
00:00:53,290 --> 00:00:57,430
kan være lurt å ta en titt på det
første, fordi denne diskusjonen av CSS

21
00:00:57,430 --> 00:01:00,700
kommer til å avhenge
litt kjennskap til HTML.

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

23
00:01:03,740 --> 00:01:06,480
Selv om du aldri har
programmert med CSS før,

24
00:01:06,480 --> 00:01:10,624
Jeg er ganske sikker på at du kan finne ut
akkurat hva denne stil gjør.

25
00:01:10,624 --> 00:01:11,290
Hva gjør det?

26
00:01:11,290 --> 00:01:15,470
Vel, brukes til kroppen vår web
side, alt mellom body-kodene

27
00:01:15,470 --> 00:01:19,631
på vår HTML, og det setter
bakgrunnsfargen på den siden til blå.

28
00:01:19,631 --> 00:01:21,130
Vel, det er en veldig enkel stilark.

29
00:01:21,130 --> 00:01:23,269
Det er faktisk veldig menneskelig
vennlig språk, CSS.

30
00:01:23,269 --> 00:01:26,560
Så selv om du aldri har brukt det før,
du sannsynligvis kunne gjette hva som gjorde.

31
00:01:26,560 --> 00:01:30,140
Faktisk, hvis vi lastet en side, hvor
Dette stil var innebygd eller annen måte,

32
00:01:30,140 --> 00:01:36,240
bakgrunnsfargen på vår side ville
være blå, og ikke den standard hvit.

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

34
00:01:37,670 --> 00:01:39,700
Vel først må vi
identifisere en velger.

35
00:01:39,700 --> 00:01:42,970
I det siste eksemplet,
at velgeren var kroppen.

36
00:01:42,970 --> 00:01:45,050
Så har vi en åpen
klammeparentes, og vi er

37
00:01:45,050 --> 00:01:48,410
kommer til å begynne å definere
stilark for at velgeren.

38
00:01:48,410 --> 00:01:51,800
I mellom klammeparentes, vi
bare ha en liste over viktige verdi-par.

39
00:01:51,800 --> 00:01:56,205
Den forrige verdien paret var
bakgrunnsfarge blå semikolon,

40
00:01:56,205 --> 00:01:57,830
men vi kunne gjøre mer og mer av disse.

41
00:01:57,830 --> 00:02:02,330
Du kan ha flere ting å påføre
til at koden, som velgeren kroppen.

42
00:02:02,330 --> 00:02:05,960
Hver og en av disse er atskilt med en
semikolon, og vi kaller hver og en av 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 ferdige med all styling vi
vil gjelde for den aktuelle koden,

45
00:02:12,410 --> 00:02:15,300
vi bare har en avsluttende krøllete
spenne å avslutte stylesheet,

46
00:02:15,300 --> 00:02:19,640
og vi er ferdig å definere stil
for den aktuelle velger.

47
00:02:19,640 --> 00:02:21,341
>> Hva er noen vanlige CSS egenskaper?

48
00:02:21,341 --> 00:02:23,590
Vel, kanskje du ønsker å sette
en ramme rundt noe.

49
00:02:23,590 --> 00:02:26,850
Så du kan si, border,
som vil være nøkkelen,

50
00:02:26,850 --> 00:02:29,460
og deretter dine verdier ville være,
hvilken stil, farge og bredde

51
00:02:29,460 --> 00:02:30,209
du vil den skal være.

52
00:02:30,209 --> 00:02:33,530
Så stil kan være en fast
linje, en stiplet linje, en stiplet linje,

53
00:02:33,530 --> 00:02:36,020
en mønelinje, noe som ville være krum linje.

54
00:02:36,020 --> 00:02:38,790
Kanskje du vil ha det
være blå eller svart eller grønn.

55
00:02:38,790 --> 00:02:41,490
Kanskje du vil den skal være
1 eller 2 eller 10 piksler bredt.

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

57
00:02:43,254 --> 00:02:46,420
Kanskje du ønsker å sette bakgrunns
farge på siden din på en bestemt måte.

58
00:02:46,420 --> 00:02:49,215
Vi har allerede sett at, sette
bakgrunn av kroppen for å være blå.

59
00:02:49,215 --> 00:02:52,080
>> Deretter kan du bruke et nøkkelord,
så CSS har visse farger

60
00:02:52,080 --> 00:02:55,950
som er bygget inn i den, blå, grønn,
svart, noen svært enkle farger vi kjenner.

61
00:02:55,950 --> 00:02:59,110
Men du kan også angi noen
hex fargen du ønsker.

62
00:02:59,110 --> 00:03:05,190
Husk at fargene kan identifiseres
av et sett med tre hex tall

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

64
00:03:08,500 --> 00:03:10,590
Og så kan vi spesifisere
hvilken som helst farge vi ønsker ved,

65
00:03:10,590 --> 00:03:15,520
istedenfor å bruke blå eller grønn eller svart,
bruker pund og deretter seks sifrene i hex,

66
00:03:15,520 --> 00:03:18,310
og som ville gi oss
den sekssifrede farge.

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

68
00:03:19,850 --> 00:03:21,975
>> Vi har også forgrunnen
farge, som vanligvis

69
00:03:21,975 --> 00:03:24,140
kommer til å være teksten på siden din.

70
00:03:24,140 --> 00:03:28,850
Og du kan likeledes gjøre det
med stikkordet og eller sekssifret hex.

71
00:03:28,850 --> 00:03:32,140
Så du kan angi hvilken som helst farge du
ønsker for teksten på siden din

72
00:03:32,140 --> 00:03:36,370
mot en spesiell
bakgrunnsfarge, opp ovenfor.

73
00:03:36,370 --> 00:03:39,100
Du kan også endre og håndtere
med skrift, og måten teksten

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

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

76
00:03:42,010 --> 00:03:46,320
Du kan bruke stikkord, for eksempel ekstra,
ekstra liten, eller xx liten eller medium,

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

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

79
00:03:50,750 --> 00:03:55,850
Du kan bruke prosenter, 80%, 20%,
hvor 100% er standard font

80
00:03:55,850 --> 00:03:59,220
størrelse, som vanligvis kommer til
være noe sånt som 11 eller 12 poeng.

81
00:03:59,220 --> 00:04:01,659
Eller du kan selv basere den av
av den nyeste skriftstørrelse.

82
00:04:01,659 --> 00:04:04,950
Hvis du bare skrev noe, og du vet
hva du ønsker er at det skal bli mindre,

83
00:04:04,950 --> 00:04:08,241
men du vet ikke nøyaktig hvilken størrelse du
vil den skal være, vel, du kan bare si:

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 seg på,
bare opp ovenfor, er det skriftstørrelse.

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

87
00:04:15,760 --> 00:04:18,390
Så det er mye forskjellig
måter å angi skriftstørrelse.

88
00:04:18,390 --> 00:04:20,690
>> Du kan også angi hva
font familien du ønsker.

89
00:04:20,690 --> 00:04:23,360
Hvis du har en bestemt
navn, det er en måte i CSS--

90
00:04:23,360 --> 00:04:27,270
Vi kommer ikke til å snakke om det
her-- for å definere en meget bestemt skrift

91
00:04:27,270 --> 00:04:28,980
og legge den inn på siden din.

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

93
00:04:30,620 --> 00:04:33,540
Det finnes en rekke web trygge fonter
som er forhåndsdefinert i CSS.

94
00:04:33,540 --> 00:04:36,352
Og hvis du er en bruker av Microsoft
Kontor i de siste 20 årene,

95
00:04:36,352 --> 00:04:38,810
du er sikkert kjent med
mange av disse web trygge fonter

96
00:04:38,810 --> 00:04:44,640
allerede, Times New Roman, Arial,
Courier New, Georgia, 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 vurdert web trygge fonter.

99
00:04:47,170 --> 00:04:49,169
Og faktisk, en del av
Grunnen til at de kom til å bli

100
00:04:49,169 --> 00:04:54,140
ble som skal brukes til å lage web-- hver side
hadde tilgang til denne standard satt av fonter

101
00:04:54,140 --> 00:04:58,480
med forskjellige serifs, og all denne
font ting vi vil ikke komme inn,

102
00:04:58,480 --> 00:05:01,130
men disse er vanligvis
tilgjengelig i CSS,

103
00:05:01,130 --> 00:05:04,029
selv om du ikke gjør det
ellers definere skrifter.

104
00:05:04,029 --> 00:05:07,070
Til slutt kan du justere teksten,
i stedet for at det er, som standard, justert

105
00:05:07,070 --> 00:05:09,310
til venstre, kan du
justere den til høyre,

106
00:05:09,310 --> 00:05:13,740
eller du kan justere den sentrert, eller
begrunnet slik at den traff både marginer.

107
00:05:13,740 --> 00:05:16,800
Så de er alle alternativer du kan bruke
å endre hva teksten ser ut,

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

109
00:05:20,120 --> 00:05:22,180
>> Dine velgere ikke
må være tagger bare.

110
00:05:22,180 --> 00:05:25,539
Vi tidligere så en body-koden
velger, og tag velger

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

112
00:05:26,580 --> 00:05:30,020
You name en kode, og deretter
definere et stilark for den koden.

113
00:05:30,020 --> 00:05:32,660
Men du kan også gjøre noe
kalles en ID-velgeren.

114
00:05:32,660 --> 00:05:34,390
En ID-velgeren ser ganske lik.

115
00:05:34,390 --> 00:05:38,100
Men legg merke til at nå jeg ikke bruker
en HTML-kode, jeg bruker, i dette tilfellet,

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

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

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

119
00:05:45,620 --> 00:05:48,340
>> Og en attributt som gjelder
til stort sett alle HTML-koder,

120
00:05:48,340 --> 00:05:51,440
men vi snakket ikke om det,
er noe som kalles en ID-kode.

121
00:05:51,440 --> 00:05:55,250
Så denne spesielle CSS ville
gjelder bare for HTML-kode som har

122
00:05:55,250 --> 00:05:58,530
en veldig spesifikk ID, som du har navngitt.

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

124
00:06:01,000 --> 00:06:06,090
i HTML-fil, en tag, og du
angir som et attributt til den koden,

125
00:06:06,090 --> 00:06:09,060
ID lik unik, dette
Særlig stilark

126
00:06:09,060 --> 00:06:15,030
her vil bare gjelde i mellom
at tag med ID unik.

127
00:06:15,030 --> 00:06:17,180
>> Du kan også gjøre noe
kalles en klasse velgeren.

128
00:06:17,180 --> 00:06:19,920
Så i tillegg til å ha
ID attributter, kan du også

129
00:06:19,920 --> 00:06:23,130
legge en klasse attributt til HTML-koder.

130
00:06:23,130 --> 00:06:27,140
Og når du bruker en klasse attributt,
det kan brukes til flere koder.

131
00:06:27,140 --> 00:06:31,880
Så hvis du har flere ting som
er like, kanskje du ønsker å si,

132
00:06:31,880 --> 00:06:35,890
åpen tag blah, blah, blah,
blah, tilsvarer klasse studenter.

133
00:06:35,890 --> 00:06:38,190
Og så denne
stilark ville gjelde

134
00:06:38,190 --> 00:06:42,041
til hver tag hvis klassen er studenter.

135
00:06:42,041 --> 00:06:44,290
I dette tilfellet, vil vi sette
bakgrunnsfargen til gul,

136
00:06:44,290 --> 00:06:46,706
og vi vil sette opacity, som
er en kode vi ikke snakke om,

137
00:06:46,706 --> 00:06:52,510
men bare omhandler hvor gjennomsiktig
noe, til 70%, i dette tilfellet.

138
00:06:52,510 --> 00:06:54,430
>> Det finnes to alternativer for
skriving stilark.

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

140
00:06:56,680 --> 00:06:59,690
ved å plassere stilark
i mellom stil koder.

141
00:06:59,690 --> 00:07:03,850
Og disse stil tags gå på innsiden av
hodet kodene på websiden din.

142
00:07:03,850 --> 00:07:08,240
Den kanskje mest foretrukne måte å gjøre
det er å skrive en egen CSS-fil,

143
00:07:08,240 --> 00:07:12,360
og deretter koble den til din
dokumentere ved hjelp av link tags.

144
00:07:12,360 --> 00:07:14,690
Link tags, igjen, er
forskjellig fra hyperkoblinger,

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

146
00:07:16,760 --> 00:07:19,030
Og link kodene er hvordan vi
trekke i separate filer.

147
00:07:19,030 --> 00:07:23,900
Det liksom som tilsvarer
# include for web-programmering.

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

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

150
00:07:29,380 --> 00:07:32,000
et eksempel på et meget
enkel multiplikasjon

151
00:07:32,000 --> 00:07:35,160
tabell som så ganske
stygg, og kanskje det er

152
00:07:35,160 --> 00:07:38,650
en måte å gjøre det bedre med
CSS, for å gjøre det faktisk ser

153
00:07:38,650 --> 00:07:41,120
mer som en multiplikasjon
bord, eller noe

154
00:07:41,120 --> 00:07:43,730
som ikke bare henger sammen
med ingen faktiske divisjon

155
00:07:43,730 --> 00:07:45,532
mellom rekkene og søylene.

156
00:07:45,532 --> 00:07:47,490
Så la oss gå over til
CS50 IDE, og ta en titt

157
00:07:47,490 --> 00:07:50,780
på hvordan CSS kan, liksom, tweak
hva vi startet med før,

158
00:07:50,780 --> 00:07:53,290
og gjør det noe mye bedre.

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

160
00:07:55,650 --> 00:07:58,710
vi vil trekke opp i dette
tabell som HTML-side.

161
00:07:58,710 --> 00:08:01,090
Table.HTML utgangspunktet
bare definerer innholdet

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

163
00:08:05,044 --> 00:08:06,210
Det er ganske grei.

164
00:08:06,210 --> 00:08:09,410
Og vi tror at det ville
ser ganske godt organisert.

165
00:08:09,410 --> 00:08:15,277
Men faktisk, når vi forhåndsvise denne siden
Vi ser at det er litt stygg, ikke sant?

166
00:08:15,277 --> 00:08:16,860
Åpenbart har vi rader og kolonner her.

167
00:08:16,860 --> 00:08:18,350
Det en slags separasjon.

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

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

170
00:08:23,105 --> 00:08:25,730
Og det er noe skille mellom
rader og kolonner i form

171
00:08:25,730 --> 00:08:28,460
horisontale eller vertikale regler.

172
00:08:28,460 --> 00:08:31,530
Vi kunne sannsynligvis gjøre dette
ser litt bedre.

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

174
00:08:32,934 --> 00:08:34,559
Så jeg kommer til å lukke denne fanen opp her.

175
00:08:34,559 --> 00:08:37,434
Og jeg kommer til å avslutte min table.HTML,
og jeg har en annen versjon her

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

177
00:08:39,490 --> 00:08:40,655
Vi vil åpne den opp.

178
00:08:40,655 --> 00:08:42,530
Liket av siden er
ganske mye det samme,

179
00:08:42,530 --> 00:08:44,238
men jeg har endret en
litt på toppen.

180
00:08:44,238 --> 00:08:47,132
Og jeg skal bla opp her.

181
00:08:47,132 --> 00:08:49,340
Legg merke til at denne gangen, jeg er
ved hjelp av innebygde stil koder.

182
00:08:49,340 --> 00:08:53,550
Jeg har åpnet en stil tag, og jeg er nå
definere en CSS-stilark bare inne

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

184
00:08:54,310 --> 00:08:56,310
Jeg har et stilark som sier, bord.

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

186
00:08:58,170 --> 00:09:01,340
Jeg bruker ikke prikk eller hasj,
som jeg skulle gjøre hvis jeg

187
00:09:01,340 --> 00:09:03,710
var å bruke en ID eller en klasse velgeren.

188
00:09:03,710 --> 00:09:06,190
Jeg har en tag velger her-- tabellen.

189
00:09:06,190 --> 00:09:10,090
Denne stilen kommer til å
gjelde for alle bord tag.

190
00:09:10,090 --> 00:09:14,950
Angivelig jeg ønsker å sette en
pixel bred, solid blå ramme,

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

192
00:09:15,779 --> 00:09:18,320
Det høres ut som det ville trolig
hjelpe situasjonen, ikke sant?

193
00:09:18,320 --> 00:09:20,320
Vi kommer til å ha
ting ser mye bedre.

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

195
00:09:21,190 --> 00:09:23,540
Stilistisk, har jeg bare
innebygd min stilark her.

196
00:09:23,540 --> 00:09:25,100
Det er absolutt en
akseptabel måte å gjøre det.

197
00:09:25,100 --> 00:09:26,391
La oss se hvordan dette ser ut.

198
00:09:26,391 --> 00:09:29,790
Så jeg skal gå tilbake her nede, og
Jeg vil forhåndsvise table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Vel, det er ikke helt det jeg ønsket,
men det er akkurat det vi ba om.

201
00:09:36,470 --> 00:09:39,530
Vi sa at denne stilen er
kommer til å søke til vårt bord.

202
00:09:39,530 --> 00:09:43,810
Vårt bord har nå en én piksel
bred, solid blå ramme rundt det.

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

204
00:09:46,237 --> 00:09:47,570
Vi er bare å få på bordet.

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

206
00:09:49,310 --> 00:09:51,890
Det har anvendt en
stilark til bordet vårt.

207
00:09:51,890 --> 00:09:53,981
Men ikke helt gjøre
hva vi ønsket å gjøre.

208
00:09:53,981 --> 00:09:55,730
Hvordan får vi til å gjøre
hva vi vil den skal gjøre?

209
00:09:55,730 --> 00:09:59,287
>> Vel, la oss ta en titt på en mer
versjon av denne i table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Så jeg skal bare lukke disse kategoriene.

211
00:10:00,870 --> 00:10:03,890
Jeg kommer til å gå tilbake hit til min
fil treet, og åpne opp table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Igjen, det kommer til å se pen
lignende her i begynnelsen.

214
00:10:10,350 --> 00:10:14,460
Men varsel, denne gang i stedet for å bruke
et stilark innebygd rett i det,

215
00:10:14,460 --> 00:10:18,870
Jeg kommer til å linke en
stilark hjelp av koblingen tag.

216
00:10:18,870 --> 00:10:22,480
Så jeg tydeligvis knytte i en
stilark kalt tables.CSS,

217
00:10:22,480 --> 00:10:25,090
og denne brønnen er lik
stilark bare means-- godt,

218
00:10:25,090 --> 00:10:28,645
hva er denne filen i forhold til hva
Jeg er doing-- er et stilark som jeg er

219
00:10:28,645 --> 00:10:29,821
hjelp for min side.

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

221
00:10:32,320 --> 00:10:35,010
Jeg trenger å gå åpent som
table.CSS fil også.

222
00:10:35,010 --> 00:10:37,490
Så vil vi gå tilbake hit
igjen til vår fil treet.

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

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

225
00:10:40,490 --> 00:10:43,070
Nå vi ser litt av CSS.

226
00:10:43,070 --> 00:10:45,630
Angivelig, jeg har et par
ting skjer her.

227
00:10:45,630 --> 00:10:48,950
Jeg ønsker tydeligvis å sette en fem
pixel bred, solid rød kant,

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

229
00:10:50,287 --> 00:10:52,870
Vi vet allerede at det kommer
å bare gå på omkretsen.

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 rad, jeg
tilsynelatende ønsker å spesifisere

232
00:10:58,770 --> 00:11:01,950
at raden høyden er 50 piksler høy.

233
00:11:01,950 --> 00:11:05,680
Så for hver rad, husker
det er hva tr tag gjør,

234
00:11:05,680 --> 00:11:08,550
Jeg gjør det 50 piksler høy.

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

236
00:11:09,804 --> 00:11:11,470
Og dette er hvordan vi gjør kommentarer i CSS.

237
00:11:11,470 --> 00:11:16,174
Det er veldig likt å gripe blokk
kommentarer syntaks slash Star.

238
00:11:16,174 --> 00:11:17,090
All teksten du vil.

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

240
00:11:19,470 --> 00:11:23,400
For korte inline kommentarer, har vi
å bruke dette formatet her.

241
00:11:23,400 --> 00:11:26,830
Det ser ut som jeg gjør en
Mange ting i mine td koder.

242
00:11:26,830 --> 00:11:29,710
Husk td koder, eller tabellen
data, noe som egentlig er bare

243
00:11:29,710 --> 00:11:32,210
kolonnene innsiden av
våre rekker, og tilsynelatende

244
00:11:32,210 --> 00:11:35,090
for hver del av data
i mitt bord, jeg vil ha

245
00:11:35,090 --> 00:11:38,850
å sette bakgrunnsfargen til
være svart, til fargen være hvit,

246
00:11:38,850 --> 00:11:40,320
fargen er forgrunnen farge.

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

248
00:11:42,360 --> 00:11:45,140
Jeg ønsker stor skrift, 22
punkts skrift, og jeg vil ha

249
00:11:45,140 --> 00:11:47,001
det å være av fontfamilien, Georgia.

250
00:11:47,001 --> 00:11:48,750
Så jeg kommer ikke til å
har standardskriften.

251
00:11:48,750 --> 00:11:51,820
Jeg kommer til å spesifisere Georgia, som
er en av disse nett trygge fonter

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

253
00:11:53,830 --> 00:11:57,284
Jeg vil at min tekst skal justeres
sentralt, i midten av boksen,

254
00:11:57,284 --> 00:11:59,450
Jeg vil ikke at det å stå
justert eller høyrejustert.

255
00:11:59,450 --> 00:12:03,461
Og jeg vil ha min kolonnebredde
være 50 bildeelementer bredt også.

256
00:12:03,461 --> 00:12:05,210
La oss ta en titt på
hva dette ser ut,

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

258
00:12:07,470 --> 00:12:12,890
Så jeg kommer til å gå til table3.HTML, som
tilbakekalling omfatter table.CSS som en kobling,

259
00:12:12,890 --> 00:12:14,830
og vi vil forhåndsvise det.

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

261
00:12:16,800 --> 00:12:20,004
Dette er faktisk begynner å se
mye mer som en multiplikasjonstabellen.

262
00:12:20,004 --> 00:12:21,920
Jeg har den rød kant
rundt mitt bord, men nå

263
00:12:21,920 --> 00:12:26,700
Jeg har også presisert at
hver rad er 50 piksler bred,

264
00:12:26,700 --> 00:12:30,220
eller er det 50 piksler tall-- unnskyldning
me-- hver kolonne er 50 piksler bredt.

265
00:12:30,220 --> 00:12:34,251
Dataene i hver kolonne, og bare
dataene, har en svart bakgrunn.

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

267
00:12:36,000 --> 00:12:38,836
Fordi plassen i
mellom alle disse celler,

268
00:12:38,836 --> 00:12:40,710
det er ikke en grense i
og for seg selv, det er bare

269
00:12:40,710 --> 00:12:43,170
Jeg er bare å fylle ut
celler, som faktisk

270
00:12:43,170 --> 00:12:46,310
gjør grensene av tabellen, som
tilsynelatende fantes alt sammen, det

271
00:12:46,310 --> 00:12:47,887
var bare tynne hvite linjer.

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

273
00:12:48,720 --> 00:12:50,380
Nå dukker de av på skjermen.

274
00:12:50,380 --> 00:12:52,920
Og så dette er en veldig enkel
stilark som jeg har brukt,

275
00:12:52,920 --> 00:12:56,850
og nå mitt bord ser mye mer ut som
en fire av fire multiplikasjonstabellen,

276
00:12:56,850 --> 00:13:00,950
i stedet for en rettferdig jumbled rot, der
alt er klart rader og kolonner,

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

278
00:13:03,717 --> 00:13:06,800
Vi er egentlig bare toppen av isfjellet
om hva du kan gjøre med CSS her.

279
00:13:06,800 --> 00:13:10,330
Heldigvis dokumentasjonen CSS
er ganske grei.

280
00:13:10,330 --> 00:13:14,000
Du bruker flere av sine
attributter, ganske ofte.

281
00:13:14,000 --> 00:13:16,087
De vi snakket om
tidligere i denne videoen.

282
00:13:16,087 --> 00:13:18,170
Det er flere som deg
sannsynligvis ikke vil bruke alle.

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

284
00:13:19,469 --> 00:13:22,010
Men bare vet at det er en
mye dokumentasjon der ute.

285
00:13:22,010 --> 00:13:25,110
Så selv om vi ikke dekke alt,
du er absolutt ikke igjen på egen hånd.

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

287
00:13:26,780 --> 00:13:29,040
Og jeg vil sterkt oppfordre deg
å leke seg med websidene dine,

288
00:13:29,040 --> 00:13:32,180
og se hvordan du kan gjøre dem
se og føle for å forbedre bruker

289
00:13:32,180 --> 00:13:34,790
opplevelsen av å besøke siden din.

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

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

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