1
00:00:00,000 --> 00:00:05,660
>> [Predvaja glasba]

2
00:00:05,660 --> 00:00:08,740
>> Doug LLOYD: Torej, vzemimo eno več
video govoriti o eni več jeziku.

3
00:00:08,740 --> 00:00:10,800
Tokrat bomo govorili o CSS.

4
00:00:10,800 --> 00:00:13,460
Torej, CSS, kar je okrajšava za
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
drug jezik, ki jih uporabljamo
pri gradnji spletne strani.

6
00:00:16,149 --> 00:00:17,190
Razmislite o tem, kot je ta.

7
00:00:17,190 --> 00:00:20,900
Če HTML je tisto, kar bomo uporabili za organizacijo
Vsebnost želimo postaviti na naši spletni strani,

8
00:00:20,900 --> 00:00:25,390
CSS je orodje, ki smo na splošno uporabo
prilagodite, kako naše spletne strani, poglej,

9
00:00:25,390 --> 00:00:30,410
in kako je uporabniška izkušnja zares
je v stiku z naše spletne strani.

10
00:00:30,410 --> 00:00:32,535
>> Podobno kot HTML, CSS
ni programski jezik.

11
00:00:32,535 --> 00:00:33,451
To nima logike.

12
00:00:33,451 --> 00:00:34,595
Nima spremenljivk.

13
00:00:34,595 --> 00:00:38,890
To nima nikakršne da
tok povezane stvari, C počne.

14
00:00:38,890 --> 00:00:40,150
To je styling jezik.

15
00:00:40,150 --> 00:00:42,810
In njegova sintaksa je precej
enostavne in samo opisuje

16
00:00:42,810 --> 00:00:46,240
kako elementi naše
Stran ima nekatere HTML

17
00:00:46,240 --> 00:00:48,190
elemente je treba spremeniti.

18
00:00:48,190 --> 00:00:51,170
V ta namen, če tega še niste
še gledal naš video o HTML,

19
00:00:51,170 --> 00:00:53,290
ali so seznanjeni z
HTML splošno, vas

20
00:00:53,290 --> 00:00:57,430
morda želeli, da pogledam
prvič, ker ta razprava CSS

21
00:00:57,430 --> 00:01:00,700
bo odvisna od
nekaj znanja HTML.

22
00:01:00,700 --> 00:01:03,740
>> Torej, tukaj je res
preprosta CSS stylesheet.

23
00:01:03,740 --> 00:01:06,480
Tudi če ste nikoli
programirana s CSS prej,

24
00:01:06,480 --> 00:01:10,624
Prepričan sem, da lahko ugotovimo,
kaj točno to slogovno počne.

25
00:01:10,624 --> 00:01:11,290
Kaj to naredi?

26
00:01:11,290 --> 00:01:15,470
No, uporabiti na telesu našega spleta
stran, vse med body

27
00:01:15,470 --> 00:01:19,631
na naši HTML in ga nastavi
Barva ozadja te strani v modro.

28
00:01:19,631 --> 00:01:21,130
No, to je zelo preprost slogovne.

29
00:01:21,130 --> 00:01:23,269
To je pravzaprav zelo človeški
prijazen jezik, CSS.

30
00:01:23,269 --> 00:01:26,560
Torej, tudi če ste ga nikoli ne uporablja pred,
lahko bi verjetno lahko uganiti, kaj je storil.

31
00:01:26,560 --> 00:01:30,140
V bistvu, če smo naložili stran, kjer
Ta slogovna bil vključen nekako,

32
00:01:30,140 --> 00:01:36,240
barva ozadja naše strani bi
modra, in ne kot standardna bela.

33
00:01:36,240 --> 00:01:37,670
>> Torej, kako bomo graditi slogovne?

34
00:01:37,670 --> 00:01:39,700
No najprej moramo
identifikacijo izbirnik.

35
00:01:39,700 --> 00:01:42,970
V zadnjem primeru,
da selektor je telo.

36
00:01:42,970 --> 00:01:45,050
Potem imamo odprt
kodrasti brace, in smo

37
00:01:45,050 --> 00:01:48,410
dogaja, da začnete opredeljujejo
Slogovna za to selektorja.

38
00:01:48,410 --> 00:01:51,800
Med zavitimi oklepaji smo
samo še seznam ključnih parov vrednosti.

39
00:01:51,800 --> 00:01:56,205
Prejšnji par vrednost je bila
barva ozadja modra podpičje,

40
00:01:56,205 --> 00:01:57,830
vendar pa lahko naredimo več in več od njih.

41
00:01:57,830 --> 00:02:02,330
Lahko bi imeli več stvari uporabe
na to oznako, to izbirno telesu.

42
00:02:02,330 --> 00:02:05,960
Vsak od njih je ločeno s
podpičje in pravimo vsak od njih

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

44
00:02:08,949 --> 00:02:12,410
Ko bomo končali z vsemi styling smo
želite uporabiti za to posebno oznako,

45
00:02:12,410 --> 00:02:15,300
imamo samo zapiralni Curly
naramnicami končati slogovne,

46
00:02:15,300 --> 00:02:19,640
in smo storili opredelitvi slogovne
za to določeno selektorja.

47
00:02:19,640 --> 00:02:21,341
>> Katere so nekatere skupne CSS lastnosti?

48
00:02:21,341 --> 00:02:23,590
No, morda želite, da bi
meja okrog nečesa.

49
00:02:23,590 --> 00:02:26,850
Torej lahko rečemo, border,
da bi bil vaš ključ,

50
00:02:26,850 --> 00:02:29,460
in potem bi vaše vrednote biti,
kaj slog, barvo in širina

51
00:02:29,460 --> 00:02:30,209
hočeš, da bo.

52
00:02:30,209 --> 00:02:33,530
Tako bi slog biti trdna
linijo, črtkana črta, prekinjene linije,

53
00:02:33,530 --> 00:02:36,020
greben linijo, kar bi bilo valovita črta.

54
00:02:36,020 --> 00:02:38,790
Morda boste želeli, da ga ima
modra ali črna ali zelena.

55
00:02:38,790 --> 00:02:41,490
Morda boste želeli, da bi bilo
1 ali 2 ali 10 slikovnih pik.

56
00:02:41,490 --> 00:02:43,254
Določite lahko vse te stvari.

57
00:02:43,254 --> 00:02:46,420
Morda želite nastaviti ozadje
Barva vaše strani na določen način.

58
00:02:46,420 --> 00:02:49,215
Smo že videli, da določanju
ozadje organu, ki je modre barve.

59
00:02:49,215 --> 00:02:52,080
>> Potem lahko uporabite ključno besedo,
tako CSS ima določene barve

60
00:02:52,080 --> 00:02:55,950
ki so vgrajene vanj, modra, zelena,
črna, zelo preproste barve vemo.

61
00:02:55,950 --> 00:02:59,110
Lahko pa tudi določite koli
barva čarovnica, ki bi radi.

62
00:02:59,110 --> 00:03:05,190
Spomnimo se, da je mogoče ugotoviti barve
niz treh hex številk

63
00:03:05,190 --> 00:03:08,500
od 0 do 255, RG in B, v
rdeče, zelene in modre komponente.

64
00:03:08,500 --> 00:03:10,590
In tako smo lahko določite
vse barve želimo s,

65
00:03:10,590 --> 00:03:15,520
namesto z modro ali zeleno ali črno,
uporabo funt in nato šest številk čarovnica,

66
00:03:15,520 --> 00:03:18,310
in da nam bi dal
šest mestna barva.

67
00:03:18,310 --> 00:03:19,850
Tako da je barva ozadja.

68
00:03:19,850 --> 00:03:21,975
>> Imamo tudi novo znanje,
Barva, ki je običajno

69
00:03:21,975 --> 00:03:24,140
bo besedilo vaši strani.

70
00:03:24,140 --> 00:03:28,850
In bi lahko prav to, da
s ključno besedo in ali šestmestno čarovnica.

71
00:03:28,850 --> 00:03:32,140
Torej, lahko določite katero koli barvo, ki jo
želijo za besedilo strani

72
00:03:32,140 --> 00:03:36,370
pred posebno
barva ozadja, tam zgoraj.

73
00:03:36,370 --> 00:03:39,100
Prav tako lahko spremenite in se ukvarjajo
s pisavo in način besedilu

74
00:03:39,100 --> 00:03:40,400
je prikazana na strani.

75
00:03:40,400 --> 00:03:42,010
>> Torej si lahko spremenite velikost pisave.

76
00:03:42,010 --> 00:03:46,320
Lahko uporabite ključne besede, kot so ekstra,
tretja majhna, ali xx majhna, ali medij,

77
00:03:46,320 --> 00:03:47,660
velika, in tako naprej.

78
00:03:47,660 --> 00:03:50,750
Lahko uporabite fiksnih točk, 10
točka, 12 točko, in tako naprej.

79
00:03:50,750 --> 00:03:55,850
Lahko uporabite odstotke, 80%, 20%,
kjer je 100% privzeta pisava

80
00:03:55,850 --> 00:03:59,220
velikost, ki je običajno tekoč
nekaj takega 11 ali 12 točk.

81
00:03:59,220 --> 00:04:01,659
Ali pa celo opreti off
zadnjega velikosti pisave.

82
00:04:01,659 --> 00:04:04,950
Če ste pravkar napisal nekaj in veš
kar si želim je, da bi bilo manjše,

83
00:04:04,950 --> 00:04:08,241
vendar ne veste točno, kaj velikost te
želim, da bi bilo dobro, lahko samo rečem,

84
00:04:08,241 --> 00:04:09,330
velikost pisave manjši.

85
00:04:09,330 --> 00:04:14,344
In bo temeljila off,
samo tam zgoraj, da je velikost pisave.

86
00:04:14,344 --> 00:04:15,760
In lahko dobite manjše ali večje.

87
00:04:15,760 --> 00:04:18,390
Torej, tam je veliko drugačna
načinov, da določite velikost pisave.

88
00:04:18,390 --> 00:04:20,690
>> Lahko tudi določite, kaj
font družina hočeš.

89
00:04:20,690 --> 00:04:23,360
Če imate posebno
Ime, tam je pot v CSS--

90
00:04:23,360 --> 00:04:27,270
ne bomo govorili o tem
here-- opredeliti zelo specifično pisavo

91
00:04:27,270 --> 00:04:28,980
in ga vgradili v vašo stran.

92
00:04:28,980 --> 00:04:30,620
Lahko uporabite tudi generična imena.

93
00:04:30,620 --> 00:04:33,540
Obstaja veliko spletnih varnih pisave
ki so vnaprej določene v CSS.

94
00:04:33,540 --> 00:04:36,352
In če ste uporabnik Microsoft
Pisarna je v zadnjih 20 letih,

95
00:04:36,352 --> 00:04:38,810
ste verjetno seznanjeni z
Veliko teh spletnih varnih pisave

96
00:04:38,810 --> 00:04:44,640
že, Times New Roman, Arial,
Courier New, Gruzija, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
in tako naprej.

98
00:04:45,470 --> 00:04:47,170
Tisti, ki se štejejo za web varne pisave.

99
00:04:47,170 --> 00:04:49,169
In v resnici, ki je del
Razlog so prišli, da bi

100
00:04:49,169 --> 00:04:54,140
je treba uporabiti, da bi web-- vsako stran
je dostop do te privzetega pisav

101
00:04:54,140 --> 00:04:58,480
z različnimi serifs, in vse to
font stvari ne bomo dobili v,

102
00:04:58,480 --> 00:05:01,130
vendar so običajno
dostopna v vašem CSS,

103
00:05:01,130 --> 00:05:04,029
tudi če ne
drugače opredeliti pisave.

104
00:05:04,029 --> 00:05:07,070
Končno, lahko poravnate svoje besedilo,
namesto da bi bilo privzeto, usklajena

105
00:05:07,070 --> 00:05:09,310
na levo, lahko
jo uskladiti na desno,

106
00:05:09,310 --> 00:05:13,740
ali bi lahko poravnate centriran, ali
utemeljiti tako, da je zadela oba marže.

107
00:05:13,740 --> 00:05:16,800
Torej, to so vse možnosti, ki jih lahko uporabite
spremeniti, kaj je tvoj tekst izgleda,

108
00:05:16,800 --> 00:05:20,120
in kako je to prikazano na vaši strani.

109
00:05:20,120 --> 00:05:22,180
>> Vaše selektorji ne
morajo biti le oznake.

110
00:05:22,180 --> 00:05:25,539
Smo že videli telesne oznako
selektor, in da je izbirnik tag

111
00:05:25,539 --> 00:05:26,580
ne videti tako, kot da je.

112
00:05:26,580 --> 00:05:30,020
Ti je ime oznako, nato pa vam
določite slogovno za to oznako.

113
00:05:30,020 --> 00:05:32,660
Vendar pa lahko naredite tudi nekaj
imenovano selektor ID.

114
00:05:32,660 --> 00:05:34,390
Izbirnik ID izgleda precej podobno.

115
00:05:34,390 --> 00:05:38,100
Ampak obvestilo, da zdaj ne bom s pomočjo
HTML tag, jaz sem z uporabo, v tem primeru,

116
00:05:38,100 --> 00:05:40,720
#unique ali hash edinstven.

117
00:05:40,720 --> 00:05:42,930
Če se spomnite iz naše
video na HTML, smo se pogovarjali

118
00:05:42,930 --> 00:05:45,620
o tem, kako lahko imajo oznake atribute.

119
00:05:45,620 --> 00:05:48,340
>> In še ena lastnost, ki se uporablja
za zal veliko vse oznake HTML,

120
00:05:48,340 --> 00:05:51,440
vendar nismo govorili o tem,
je nekaj, kar se imenuje ID tag.

121
00:05:51,440 --> 00:05:55,250
Torej je to predvsem CSS bi
veljajo samo za HTML tag, ki ima

122
00:05:55,250 --> 00:05:58,530
zelo specifičen ID, ki ste jih poimenovali.

123
00:05:58,530 --> 00:06:01,000
Torej, če imate nekje
v kodi, nekje

124
00:06:01,000 --> 00:06:06,090
v vašem HTML datoteko, trakec in vami
opredeliti kot atribut na to oznako,

125
00:06:06,090 --> 00:06:09,060
ID enak edinstven v tem
zlasti slogovne

126
00:06:09,060 --> 00:06:15,030
tukaj se bo uporabljal samo med
da tag z ID edinstven.

127
00:06:15,030 --> 00:06:17,180
>> Lahko naredite tudi nekaj
imenuje selektor razred.

128
00:06:17,180 --> 00:06:19,920
Torej poleg ob
ID atributov, lahko tudi

129
00:06:19,920 --> 00:06:23,130
dodajte razred atribut HTML.

130
00:06:23,130 --> 00:06:27,140
In ko boste uporabili razred atribut,
ga je mogoče uporabiti na več oznak.

131
00:06:27,140 --> 00:06:31,880
Torej, če imate več stvari, ki
so podobni, morda hočeš povedati,

132
00:06:31,880 --> 00:06:35,890
odprti tag bla, bla, bla,
bla, razred enak študentov.

133
00:06:35,890 --> 00:06:38,190
In potem je to predvsem
bi veljalo slogovne

134
00:06:38,190 --> 00:06:42,041
za vsako oznako, katerega razred je študentov.

135
00:06:42,041 --> 00:06:44,290
V tem primeru, bi vam zastavila
barva ozadja na rumeno,

136
00:06:44,290 --> 00:06:46,706
in sva nastavite motnosti, ki
je oznaka nismo govorili o,

137
00:06:46,706 --> 00:06:52,510
ampak se ukvarja s tem, kako pregledna
je nekaj, do 70%, v tem primeru.

138
00:06:52,510 --> 00:06:54,430
>> Obstaja dve možnosti za
pisanje slogovnih.

139
00:06:54,430 --> 00:06:56,680
Lahko jih napisali
neposredno v HTML

140
00:06:56,680 --> 00:06:59,690
z dajanjem slogovne
med slog oznake.

141
00:06:59,690 --> 00:07:03,850
In tisti slog oznake iti notranjost
oznake glave vaše spletne strani.

142
00:07:03,850 --> 00:07:08,240
Morda bolj zaželen način storiti
je napisati ločeno .css datoteko,

143
00:07:08,240 --> 00:07:12,360
nato pa jo povezati v vaš
dokumentirali s pomočjo povezovalne oznake.

144
00:07:12,360 --> 00:07:14,690
Link oznake, še enkrat, so
razlikuje od hiperpovezav

145
00:07:14,690 --> 00:07:16,760
če se spomnimo iz naše video HTML.

146
00:07:16,760 --> 00:07:19,030
In povezava oznake so, kako smo
potegnite v ločenih datotekah.

147
00:07:19,030 --> 00:07:23,900
To je nekako kot ekvivalent
#include za spletno programiranje.

148
00:07:23,900 --> 00:07:27,140
>> Torej, dajmo si oglejte table.HTML.

149
00:07:27,140 --> 00:07:29,380
Če se spomnite iz naše
HTML video, sem pokazal

150
00:07:29,380 --> 00:07:32,000
primer zelo
preprosto množenje

151
00:07:32,000 --> 00:07:35,160
tabela, ki je izgledal precej
grda, in morda obstaja

152
00:07:35,160 --> 00:07:38,650
način, da bi bilo bolje
CSS, da bi bilo dejansko videti

153
00:07:38,650 --> 00:07:41,120
več kot množenje
mizo, ali nekaj

154
00:07:41,120 --> 00:07:43,730
da se le ne zlepiti skupaj
brez dejanske delitve

155
00:07:43,730 --> 00:07:45,532
med vrstami in kolon.

156
00:07:45,532 --> 00:07:47,490
Torej, kaj je nad glavo,
CS50 IDE, in si oglejte

157
00:07:47,490 --> 00:07:50,780
kako CSS lahko, nekako, poteg
kaj smo začeli prej,

158
00:07:50,780 --> 00:07:53,290
in da je nekaj, kar je veliko bolje.

159
00:07:53,290 --> 00:07:55,650
>> Tako smo v CS50 IDE
Zdaj, in če ne poznajo,

160
00:07:55,650 --> 00:07:58,710
bomo dvigni v tem
miza HTML stran.

161
00:07:58,710 --> 00:08:01,090
Table.HTML bistvu
Samo opredeljuje vsebino

162
00:08:01,090 --> 00:08:05,044
del A se multiple-- je bilo predvideno, da bo
štiri s štirimi množenje miza.

163
00:08:05,044 --> 00:08:06,210
To je precej preprosta.

164
00:08:06,210 --> 00:08:09,410
In bi menimo, da bi
videti precej dobro organizirani.

165
00:08:09,410 --> 00:08:15,277
Toda v resnici, ko smo ogledati to stran,
vidimo, da je nekako grd, kajne?

166
00:08:15,277 --> 00:08:16,860
Jasno moramo vrstice in stolpce tukaj.

167
00:08:16,860 --> 00:08:18,350
Obstaja nekakšna ločitve.

168
00:08:18,350 --> 00:08:20,040
Ampak to ni smiselna ločitev.

169
00:08:20,040 --> 00:08:23,105
Ne bomo dejansko dobili
preveč informacij tukaj.

170
00:08:23,105 --> 00:08:25,730
In tam je ni ločitev med
vrstice in stolpce v smislu

171
00:08:25,730 --> 00:08:28,460
horizontalnih ali vertikalnih pravil.

172
00:08:28,460 --> 00:08:31,530
Mi bi verjetno bo to
poglej malo bolje.

173
00:08:31,530 --> 00:08:32,934
Torej poskusimo.

174
00:08:32,934 --> 00:08:34,559
Torej bom zapreti ta zavihek tukaj.

175
00:08:34,559 --> 00:08:37,434
In bom zaprem table.HTML,
in jaz imam še eno različico tukaj

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

177
00:08:39,490 --> 00:08:40,655
Bomo odprli, da je gor.

178
00:08:40,655 --> 00:08:42,530
Telo strani je
precej enako,

179
00:08:42,530 --> 00:08:44,238
vendar sem zamenjavi
malo na vrhu.

180
00:08:44,238 --> 00:08:47,132
In bom pomaknite navzgor tukaj.

181
00:08:47,132 --> 00:08:49,340
Obvestilo, da je to čas, sem
uporabo vgrajenih slogovne oznake.

182
00:08:49,340 --> 00:08:53,550
Sem odprl slog oznako, in sem zdaj
opredelitev CSS slogovne samo znotraj

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

184
00:08:54,310 --> 00:08:56,310
Imam slogovne, ki pravi, mizo.

185
00:08:56,310 --> 00:08:58,170
To je moj selektor tag.

186
00:08:58,170 --> 00:09:01,340
Jaz ne uporabljate piko ali hašiš,
ki bi morala delati, če sem

187
00:09:01,340 --> 00:09:03,710
je bil z uporabo ID ali selektor razreda.

188
00:09:03,710 --> 00:09:06,190
Imam selektorski tag here-- mizo.

189
00:09:06,190 --> 00:09:10,090
Ta slog se dogaja, da
velja za vsako mizo oznako.

190
00:09:10,090 --> 00:09:14,950
Očitno bi rad dal eno
Pixel širok, moder meja,

191
00:09:14,950 --> 00:09:15,779
v moji mizi.

192
00:09:15,779 --> 00:09:18,320
To se sliši, kot da bi verjetno
pomaga situacijo, kajne?

193
00:09:18,320 --> 00:09:20,320
Bomo imeli
stvari videti veliko bolje.

194
00:09:20,320 --> 00:09:21,190
Torej, to je v redu.

195
00:09:21,190 --> 00:09:23,540
Slogovno sem pravkar
vgrajeni moje slogovno tukaj.

196
00:09:23,540 --> 00:09:25,100
To je vsekakor
sprejemljiv način, da to storite.

197
00:09:25,100 --> 00:09:26,391
Poglejmo, kaj to izgleda.

198
00:09:26,391 --> 00:09:29,790
Tako da bom šel nazaj dol, in
Bom vam bo odprla svoj table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
No, to ni ravno to, kar sem si želel,
ampak to je točno tisto, kar smo zahtevali.

201
00:09:36,470 --> 00:09:39,530
Rekli smo, da je ta stil
dogaja, da se uporabljajo za našo mizo.

202
00:09:39,530 --> 00:09:43,810
Naša miza ima zdaj en piksel
širok, moder meja okoli njega.

203
00:09:43,810 --> 00:09:46,237
Ne bomo dejansko dobili
na celicah tabele.

204
00:09:46,237 --> 00:09:47,570
Mi smo ravno pri mizi.

205
00:09:47,570 --> 00:09:49,310
Torej CSS delal.

206
00:09:49,310 --> 00:09:51,890
To je uporabljen
Slogovna k naši mizi.

207
00:09:51,890 --> 00:09:53,981
Vendar ni povsem storiti
kar smo želeli storiti.

208
00:09:53,981 --> 00:09:55,730
Kako pridemo storiti
kaj hočemo to storiti?

209
00:09:55,730 --> 00:09:59,287
>> No, pa si oglejte v enem več
različica tega v table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Tako da sem le, da bo zaprtje teh kartic.

211
00:10:00,870 --> 00:10:03,890
Bom šel nazaj, sem na moj
datoteko drevo in odpirajo table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Spet se dogaja, da lepa
Podobno tukaj na začetku.

214
00:10:10,350 --> 00:10:14,460
Ampak obvestilo, ta čas, namesto da bi uporabili
slogovno vgrajeni prav tam,

215
00:10:14,460 --> 00:10:18,870
Grem na povezavo v
Slogovna pomočjo link tag.

216
00:10:18,870 --> 00:10:22,480
Torej sem očitno povezovanja v
Slogovna imenuje tables.CSS,

217
00:10:22,480 --> 00:10:25,090
in to tudi enak
Slogovna samo means-- dobro,

218
00:10:25,090 --> 00:10:28,645
kaj je to datoteka v primerjavi s tisto,
Sem doing-- je slogovno da sem

219
00:10:28,645 --> 00:10:29,821
uporabi za mojo stran.

220
00:10:29,821 --> 00:10:32,320
Torej, če si res želim, da vidim, kaj
Delam z CSS tukaj,

221
00:10:32,320 --> 00:10:35,010
Moram iti odprta, da
table.CSS datoteko kot dobro.

222
00:10:35,010 --> 00:10:37,490
Torej bomo šli nazaj tukaj
spet na naše datoteke drevo.

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

224
00:10:38,660 --> 00:10:40,490
Ga bomo pop odprta.

225
00:10:40,490 --> 00:10:43,070
Zdaj smo videli malo CSS.

226
00:10:43,070 --> 00:10:45,630
Očitno imam par
stvari se dogaja tukaj.

227
00:10:45,630 --> 00:10:48,950
Jaz očitno želijo postaviti pet
Pixel široka, trdna rdeča meja,

228
00:10:48,950 --> 00:10:50,287
po moji mizi.

229
00:10:50,287 --> 00:10:52,870
Mi že vemo, da to se dogaja
da pojdi na obodu.

230
00:10:52,870 --> 00:10:56,180
Videli smo, da je v table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Z vsako vrstico I
očitno želite določiti

232
00:10:58,770 --> 00:11:01,950
da znaša višina vrstica 50 pikslov visoka.

233
00:11:01,950 --> 00:11:05,680
Torej, za vsako vrstico, se spomnite
da je tisto, kar tr tag počne,

234
00:11:05,680 --> 00:11:08,550
Delam pa 50 točk visoka.

235
00:11:08,550 --> 00:11:09,804
>> Končno, imam ta komentar.

236
00:11:09,804 --> 00:11:11,470
In to je, kako naredimo pripombe v CSS.

237
00:11:11,470 --> 00:11:16,174
To je zelo podoben izkoristiti blok
Komentarji sintaksa slash zvezda.

238
00:11:16,174 --> 00:11:17,090
Vse besedilo, ki ga želite.

239
00:11:17,090 --> 00:11:19,470
Ni slash slash čeprav v CSS.

240
00:11:19,470 --> 00:11:23,400
Za kratke inline pripomb, imamo
uporabiti to posebno obliko tukaj.

241
00:11:23,400 --> 00:11:26,830
Izgleda, da delam
Veliko stvari v mojih td oznake.

242
00:11:26,830 --> 00:11:29,710
Zapomni TD oznake ali mizo
Podatki, ki so res samo

243
00:11:29,710 --> 00:11:32,210
stebri v notranjosti od
naše vrste, in očitno

244
00:11:32,210 --> 00:11:35,090
za vsak podatek
V moji mizi, želim

245
00:11:35,090 --> 00:11:38,850
da nastavite barvo ozadja za
črna, barva, da je bela,

246
00:11:38,850 --> 00:11:40,320
barva Barva ospredja.

247
00:11:40,320 --> 00:11:42,360
Torej, to se bo
besedilo moji strani.

248
00:11:42,360 --> 00:11:45,140
Hočem veliko pisavo, 22
točka pisavo, in želim,

249
00:11:45,140 --> 00:11:47,001
da bi bilo družine pisave, Gruzija.

250
00:11:47,001 --> 00:11:48,750
Torej, jaz ne bom
imajo privzeto pisavo.

251
00:11:48,750 --> 00:11:51,820
Grem, da določite Gruzijo, ki je
je eden od tistih spletnih varnih pisave

252
00:11:51,820 --> 00:11:53,830
da smo videli prej.

253
00:11:53,830 --> 00:11:57,284
Hočem moje besedilo uskladiti
centralno, v sredini prostora,

254
00:11:57,284 --> 00:11:59,450
Ne želim, da bo zapustil
usklajena ali desno poravnano.

255
00:11:59,450 --> 00:12:03,461
In hočem svoj širino stolpca
na 50 slikovnih pik, kot tudi.

256
00:12:03,461 --> 00:12:05,210
Oglejmo si na
kaj to izgleda,

257
00:12:05,210 --> 00:12:07,470
in videli, če je to mogoče izboljšanje.

258
00:12:07,470 --> 00:12:12,890
Tako da sem šel na table3.HTML, ki
odpoklic, vključuje table.CSS kot povezavo,

259
00:12:12,890 --> 00:12:14,830
in bomo predogled.

260
00:12:14,830 --> 00:12:16,800
To je veliko bolje, kajne?

261
00:12:16,800 --> 00:12:20,004
To se pravzaprav začenja videti
Veliko bolj kot poštevanke.

262
00:12:20,004 --> 00:12:21,920
Imam to rdečo obrobo
po moji mizi, ampak zdaj

263
00:12:21,920 --> 00:12:26,700
Sem tudi določeno, da
vsaka vrstica je 50 slikovnih pik,

264
00:12:26,700 --> 00:12:30,220
ali je to 50 pik tall-- opravičila
me-- vsak stolpec je 50 slikovnih pik.

265
00:12:30,220 --> 00:12:34,251
Podatki v vsakega stolpca, in le
podatki, ima črno ozadje.

266
00:12:34,251 --> 00:12:36,000
Torej, to je, zakaj tisti,
bele črte so tam.

267
00:12:36,000 --> 00:12:38,836
Ker je prostor
med vsemi temi celicami

268
00:12:38,836 --> 00:12:40,710
to ni meja v
in sama po sebi, to je samo

269
00:12:40,710 --> 00:12:43,170
Jaz sem za polnjenje le v
celice, ki dejansko

270
00:12:43,170 --> 00:12:46,310
naredi meje tabele, ki
očitno pa obstajajo vse skupaj, da

271
00:12:46,310 --> 00:12:47,887
je bil samo tanke bele črte.

272
00:12:47,887 --> 00:12:48,720
Zdaj oni vidni.

273
00:12:48,720 --> 00:12:50,380
Zdaj so pop off na zaslonu.

274
00:12:50,380 --> 00:12:52,920
In zato je to zelo preprost
Slogovna, ki sem jih uporabila,

275
00:12:52,920 --> 00:12:56,850
in zdaj je moja miza izgleda veliko bolj kot
štiri s štirimi množenje miza,

276
00:12:56,850 --> 00:13:00,950
namesto samo zmedenega nered, kjer
vse je jasno vrstice in stolpce,

277
00:13:00,950 --> 00:13:03,717
vendar ni zelo dobro organizirana.

278
00:13:03,717 --> 00:13:06,800
Mi smo res samo praskanje površine
o tem, kaj lahko storite s CSS tukaj.

279
00:13:06,800 --> 00:13:10,330
Na srečo dokumentacija CSS
je precej preprosta.

280
00:13:10,330 --> 00:13:14,000
Boste uporabljali več njenih
atribute, dokaj pogosto.

281
00:13:14,000 --> 00:13:16,087
Tiste, smo se pogovarjali o
prej v tem videu.

282
00:13:16,087 --> 00:13:18,170
Obstaja nekaj, ki vas
verjetno ne bo uporabil vse.

283
00:13:18,170 --> 00:13:19,469
In to je v redu, preveč.

284
00:13:19,469 --> 00:13:22,010
Ampak samo vem, da obstaja
Veliko dokumentacije tam.

285
00:13:22,010 --> 00:13:25,110
Torej, tudi če nismo zajema vse,
ste zagotovo ni pustil na svoje.

286
00:13:25,110 --> 00:13:26,780
Ampak CSS je res zabavno
eksperimentirati z.

287
00:13:26,780 --> 00:13:29,040
In jaz bi močno vas spodbujajo
igral z vaše spletne strani,

288
00:13:29,040 --> 00:13:32,180
in videli, kako lahko jih
videz in občutek za izboljšanje uporabnika

289
00:13:32,180 --> 00:13:34,790
izkušnje na obisku vaše strani.

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

291
00:13:35,710 --> 00:13:37,980
To je CS50.

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