1
00:00:00,000 --> 00:00:05,660
>> [Zenelejátszási]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Szóval vessünk még egy
videó beszélni még egy nyelvet.

3
00:00:08,740 --> 00:00:10,800
Ezúttal fogunk beszélni a CSS.

4
00:00:10,800 --> 00:00:13,460
Szóval CSS, ami rövid
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
egy másik általunk használt nyelv
ha építési honlapokon.

6
00:00:16,149 --> 00:00:17,190
Gondolj bele, mint ez.

7
00:00:17,190 --> 00:00:20,900
Ha HTML, amit arra használunk, hogy megszervezze a
tartalmat akarjuk helyezni az oldalunkon,

8
00:00:20,900 --> 00:00:25,390
CSS az az eszköz, amit általában használni
szabni, hogyan weboldalaink nézni,

9
00:00:25,390 --> 00:00:30,410
és hogy a felhasználói élmény igazán
van, kölcsönhatásban áll a honlapon.

10
00:00:30,410 --> 00:00:32,535
>> Hasonló a HTML, CSS
nem egy programozási nyelv.

11
00:00:32,535 --> 00:00:33,451
Nem kell logika.

12
00:00:33,451 --> 00:00:34,595
Nem rendelkezik változók.

13
00:00:34,595 --> 00:00:38,890
Nem rendelkezik semmiféle, hogy
flow kapcsolatos dolgokat, hogy a C-nek.

14
00:00:38,890 --> 00:00:40,150
Ez egy stílus nyelven.

15
00:00:40,150 --> 00:00:42,810
És a szintaxis elég
egyszerű, és csak leírja

16
00:00:42,810 --> 00:00:46,240
hogyan az elemek a mi
Oldal bizonyos HTML

17
00:00:46,240 --> 00:00:48,190
elemek módosítani kell.

18
00:00:48,190 --> 00:00:51,170
E célból, ha nem
Még nézte a videót HTML,

19
00:00:51,170 --> 00:00:53,290
vagy nem ismerik a
HTML általában, akkor

20
00:00:53,290 --> 00:00:57,430
érdemes, hogy egy pillantást, hogy
Először is, mert ez a vita a CSS

21
00:00:57,430 --> 00:01:00,700
fog függ
Egyes HTML tudás.

22
00:01:00,700 --> 00:01:03,740
>> Tehát itt egy igazán
egyszerű CSS stíluslap.

23
00:01:03,740 --> 00:01:06,480
Még ha soha nem
programozott CSS előtt,

24
00:01:06,480 --> 00:01:10,624
Biztos vagyok benne, hogy kitaláljuk,
Pontosan mi ez a stíluslap nem.

25
00:01:10,624 --> 00:01:11,290
Mit csinal?

26
00:01:11,290 --> 00:01:15,470
Nos, alkalmazva a test honlapunk
oldal, mindent a test címkék

27
00:01:15,470 --> 00:01:19,631
A HTML, és ez határozza meg a
háttérszíne az oldalra, hogy kék.

28
00:01:19,631 --> 00:01:21,130
Nos, ez egy nagyon egyszerű stíluslap.

29
00:01:21,130 --> 00:01:23,269
Ez valójában nagyon is emberi
barát nyelv, CSS.

30
00:01:23,269 --> 00:01:26,560
Tehát akkor is, ha soha nem használt előtt,
akkor valószínűleg sejtette, hogy ez mit csinált.

31
00:01:26,560 --> 00:01:30,140
Sőt, ha betöltve egy oldalt, ahol a
Az XSLT stíluslap volt ágyazva valahogy,

32
00:01:30,140 --> 00:01:36,240
A háttér színe oldalunkat lenne
lehet kék, és nem a szokásos fehér.

33
00:01:36,240 --> 00:01:37,670
>> Szóval hogyan lehet építeni stíluslapok?

34
00:01:37,670 --> 00:01:39,700
Hát először is, van, hogy
azonosítani a választó.

35
00:01:39,700 --> 00:01:42,970
Az utolsó példa,
hogy szelektor volt testet.

36
00:01:42,970 --> 00:01:45,050
Aztán ott van egy nyitott
kapcsos zárójel, és mi vagyunk

37
00:01:45,050 --> 00:01:48,410
fog kezdeni meghatározó
stíluslapot, hogy választó.

38
00:01:48,410 --> 00:01:51,800
A kettő között a kapcsos zárójelek, mi
Van egy listát a legfontosabb érték párokat.

39
00:01:51,800 --> 00:01:56,205
Az előző érték páros volt
háttér színe kék pontosvessző,

40
00:01:56,205 --> 00:01:57,830
de nem tudtunk többet és többet ilyen.

41
00:01:57,830 --> 00:02:02,330
Lehet, hogy több dolgot alkalmazása
az, hogy a tag, hogy kiválasztó szerv.

42
00:02:02,330 --> 00:02:05,960
Mindegyikük van elválasztva
pontosvessző, és felhívjuk minden egyikük

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

44
00:02:08,949 --> 00:02:12,410
Amikor végeztünk az összes stílus vagyunk
kívánja alkalmazni, hogy az adott tag,

45
00:02:12,410 --> 00:02:15,300
már csak egy záró kapcsos
zárójel, hogy vessen véget a stíluslapot,

46
00:02:15,300 --> 00:02:19,640
és már készen is vagyunk meghatározó stíluslap
az adott választó.

47
00:02:19,640 --> 00:02:21,341
>> Melyek a közös CSS tulajdonságok?

48
00:02:21,341 --> 00:02:23,590
Nos, talán szeretné tenni
A határ körül valami.

49
00:02:23,590 --> 00:02:26,850
Szóval lehet mondani, határ,
ez lenne a legfontosabb,

50
00:02:26,850 --> 00:02:29,460
majd az értékeket lenne,
milyen stílusban, színben, és szélessége

51
00:02:29,460 --> 00:02:30,209
azt szeretné, hogy legyen.

52
00:02:30,209 --> 00:02:33,530
Tehát a stílus lehet egy szilárd
vonal, szaggatott vonal, szaggatott vonal,

53
00:02:33,530 --> 00:02:36,020
egy gerinc vonal, ami hullámos vonal.

54
00:02:36,020 --> 00:02:38,790
Talán azt szeretné, hogy ez
kék vagy fekete vagy zöld.

55
00:02:38,790 --> 00:02:41,490
Lehet, hogy szeretné, hogy legyen
1 vagy 2, vagy 10 pixel széles.

56
00:02:41,490 --> 00:02:43,254
Megadhatja az összes ilyen dolgokat.

57
00:02:43,254 --> 00:02:46,420
Talán szeretné beállítani a háttérben
színe az oldal egy bizonyos módon.

58
00:02:46,420 --> 00:02:49,215
Már látta, hogy beállítása
háttérben a test, hogy kék.

59
00:02:49,215 --> 00:02:52,080
>> Akkor tudod használni a kulcsszó,
így CSS vannak bizonyos színek

60
00:02:52,080 --> 00:02:55,950
hogy épülnek bele, kék, zöld,
fekete, egy nagyon egyszerű színek tudjuk.

61
00:02:55,950 --> 00:02:59,110
De akkor is meg minden
hexadecimális szín, amit szeretne.

62
00:02:59,110 --> 00:03:05,190
Emlékezzünk vissza, hogy a színek lehet azonosítani
egy sor három hexa számok

63
00:03:05,190 --> 00:03:08,500
0-255, RG és b, a
piros, zöld, és kék komponenst.

64
00:03:08,500 --> 00:03:10,590
És így tudjuk meg
minden szín akarunk által,

65
00:03:10,590 --> 00:03:15,520
ahelyett, hogy a kék vagy zöld vagy fekete,
a font, majd hat számjegy a hexadecimális,

66
00:03:15,520 --> 00:03:18,310
és hogy adna nekünk
A hat számjegyű színét.

67
00:03:18,310 --> 00:03:19,850
Szóval ez a háttér színét.

68
00:03:19,850 --> 00:03:21,975
>> Mi is az előtérben
szín, ami rendszerint

69
00:03:21,975 --> 00:03:24,140
lesz a szöveg az oldal.

70
00:03:24,140 --> 00:03:28,850
És hasonlóképpen erre
A kulcsszó és vagy hat számjegyű hexadecimális.

71
00:03:28,850 --> 00:03:32,140
Szóval lehet határozni minden szín
szeretné, hogy a szöveg az oldal,

72
00:03:32,140 --> 00:03:36,370
ellen egy adott
háttérszínt, fönt.

73
00:03:36,370 --> 00:03:39,100
Azt is megváltoztathatja, és foglalkozik
A betűtípus és a szöveg milyen módon

74
00:03:39,100 --> 00:03:40,400
teszi meg az oldalon.

75
00:03:40,400 --> 00:03:42,010
>> Szóval meg tudod változtatni a betűméretet.

76
00:03:42,010 --> 00:03:46,320
Használhatja kulcsszavak, mint az extra,
extra kicsi, vagy xx kis, vagy közepes,

77
00:03:46,320 --> 00:03:47,660
nagy, és így tovább.

78
00:03:47,660 --> 00:03:50,750
Használhatja fix pont, 10
pont, 12 pont, és így tovább.

79
00:03:50,750 --> 00:03:55,850
Használhatja százalékos, 80%, 20%,
ahol 100% az alapértelmezett betűtípus

80
00:03:55,850 --> 00:03:59,220
méret, amely általában megy
olyasmi lehet, 11, vagy 12 pontot.

81
00:03:59,220 --> 00:04:01,659
Vagy akár meg is alapozza le
A legújabb betűméretet.

82
00:04:01,659 --> 00:04:04,950
Ha csak írt valamit és tudod,
mit szeretne, hogy legyen kisebb,

83
00:04:04,950 --> 00:04:08,241
de nem tudom pontosan, milyen méretű
szeretné, hogy legyen, nos, akkor csak annyit,

84
00:04:08,241 --> 00:04:09,330
betűméret kisebb.

85
00:04:09,330 --> 00:04:14,344
És ez alapozza majd ki a,
Csak fönt, ez betűméret.

86
00:04:14,344 --> 00:04:15,760
És akkor kap kisebb-nagyobb.

87
00:04:15,760 --> 00:04:18,390
Tehát van egy csomó más
meg lehet adni betűméretet.

88
00:04:18,390 --> 00:04:20,690
>> Azt is meghatározza, hogy milyen
Font család szeretne.

89
00:04:20,690 --> 00:04:23,360
Ha egy adott
nevet, van rá mód, a CSS--

90
00:04:23,360 --> 00:04:27,270
nem fogunk beszélni róla
here-- meghatározni egy nagyon speciális betűtípussal

91
00:04:27,270 --> 00:04:28,980
és embed be az oldal.

92
00:04:28,980 --> 00:04:30,620
Ön is használja a generikus neveket.

93
00:04:30,620 --> 00:04:33,540
Van egy csomó web biztonságos betűtípusok
amelyek előre meghatározott CSS.

94
00:04:33,540 --> 00:04:36,352
És ha a felhasználó a Microsoft
Irodai az elmúlt 20 évben,

95
00:04:36,352 --> 00:04:38,810
Ön valószínűleg ismeri
Sok ilyen internetes biztonságos betűtípusok

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

97
00:04:44,640 --> 00:04:45,470
stb.

98
00:04:45,470 --> 00:04:47,170
Ezek mind tekinthető biztonságos webes betűtípusok.

99
00:04:47,170 --> 00:04:49,169
És valóban, része a
okból jöttek kell

100
00:04:49,169 --> 00:04:54,140
volt, hogy kell használni, hogy web-- minden oldalon
hozzáfért az alapértelmezett betűkészletek

101
00:04:54,140 --> 00:04:58,480
különböző serifs, és mindezt
font cucc nem fogunk bejutni,

102
00:04:58,480 --> 00:05:01,130
de ezek általában
kérhető a CSS,

103
00:05:01,130 --> 00:05:04,029
akkor is, ha nem
különben határozza meg a betűtípusok.

104
00:05:04,029 --> 00:05:07,070
Végül, lehet igazítani a szöveget,
ahelyett hogy alapértelmezés szerint rendezi

105
00:05:07,070 --> 00:05:09,310
balra, akkor
igazítsa a jobb,

106
00:05:09,310 --> 00:05:13,740
vagy ha lehet középre igazítva, vagy
indokolt annak érdekében, hogy elérje a két árrés.

107
00:05:13,740 --> 00:05:16,800
Szóval ezek mind lehetőség segítségével
megváltoztatni, amit a szöveg néz ki,

108
00:05:16,800 --> 00:05:20,120
és hogyan is jelenik meg az oldalon.

109
00:05:20,120 --> 00:05:22,180
>> Az Ön szelektor nem
kell címkék csak.

110
00:05:22,180 --> 00:05:25,539
Korábban láttam egy body tag
választó, és Címkeválasztó

111
00:05:25,539 --> 00:05:26,580
nem úgy néznek ki, mint ezt.

112
00:05:26,580 --> 00:05:30,020
Az Ön neve egy címkét, és akkor
határozza meg a stíluslapot, hogy a tag.

113
00:05:30,020 --> 00:05:32,660
De akkor is csinálni valamit
nevezzük ID szelektor.

114
00:05:32,660 --> 00:05:34,390
Egy ID szelektor néz ki, szép hasonló.

115
00:05:34,390 --> 00:05:38,100
De észre, hogy most nem használom
egy HTML tag, én vagyok a, ebben az esetben,

116
00:05:38,100 --> 00:05:40,720
#unique, vagy hash egyedülálló.

117
00:05:40,720 --> 00:05:42,930
Ha felidézzük a mi
video HTML, beszélgettünk

118
00:05:42,930 --> 00:05:45,620
hogyan címkék lehetnek tulajdonságaik.

119
00:05:45,620 --> 00:05:48,340
>> És egy attribútum, amely érvényes
hogy elég sok minden HTML,

120
00:05:48,340 --> 00:05:51,440
de mi nem beszélünk róla,
van egy úgynevezett azonosító címke.

121
00:05:51,440 --> 00:05:55,250
Tehát ez különösen CSS lenne
csak a HTML tag, amely

122
00:05:55,250 --> 00:05:58,530
Egy nagyon speciális azonosító, hogy már elemzi.

123
00:05:58,530 --> 00:06:01,000
Tehát ha van valahol
a kódban, valahol

124
00:06:01,000 --> 00:06:06,090
a HTML fájlt, egy tag és
Adjon meg egy attribútumot, hogy a tag,

125
00:06:06,090 --> 00:06:09,060
ID megegyezik egyedi, ez
Különösen stíluslap

126
00:06:09,060 --> 00:06:15,030
Itt csak akkor alkalmazzák között
hogy a tag az ID egyedi.

127
00:06:15,030 --> 00:06:17,180
>> Azt is tenni valamit
úgynevezett osztályszelektor.

128
00:06:17,180 --> 00:06:19,920
Tehát mellett, amelynek
ID attribútumok, akkor is

129
00:06:19,920 --> 00:06:23,130
adjunk hozzá egy class attribútumot HTML.

130
00:06:23,130 --> 00:06:27,140
És ha használja a class attribútum,
ez lehet alkalmazni, hogy a többszörös címkéket.

131
00:06:27,140 --> 00:06:31,880
Tehát ha van néhány dolog,
hasonlóak, talán azt akarod mondani,

132
00:06:31,880 --> 00:06:35,890
nyitott tag bla, bla, bla,
bla, osztály megegyezik a diákok.

133
00:06:35,890 --> 00:06:38,190
És akkor az adott
stíluslap kellene alkalmazni

134
00:06:38,190 --> 00:06:42,041
minden tag, akinek osztály diákok.

135
00:06:42,041 --> 00:06:44,290
Ebben az esetben, mi volna meg a
háttérszínt sárga,

136
00:06:44,290 --> 00:06:46,706
és mi volna állítani homály, amely
egy tag nem beszéltünk arról,

137
00:06:46,706 --> 00:06:52,510
de csak foglalkozik, hogy mennyire átlátszó
valami, 70% -os, a jelen esetben.

138
00:06:52,510 --> 00:06:54,430
>> Van két lehetőség
írásban stíluslapok.

139
00:06:54,430 --> 00:06:56,680
Írhatsz őket
Közvetlenül a HTML

140
00:06:56,680 --> 00:06:59,690
azáltal, hogy a stíluslapok
között szerű tag.

141
00:06:59,690 --> 00:07:03,850
És azok szerű tag bemenni a
a fej címkék közé a weboldal.

142
00:07:03,850 --> 00:07:08,240
A talán előnyösebb módja
ez, hogy írjon egy külön .css,

143
00:07:08,240 --> 00:07:12,360
majd ezt linkelni be a
dokumentumot linket tag.

144
00:07:12,360 --> 00:07:14,690
Link címkék, ismét van
eltér hivatkozások,

145
00:07:14,690 --> 00:07:16,760
ha visszahívja a videónkat HTML.

146
00:07:16,760 --> 00:07:19,030
És Link címkék hogyan
húzza külön fájlokban.

147
00:07:19,030 --> 00:07:23,900
Ez a fajta, mint az egyenértékű
Az #include webes programozási.

148
00:07:23,900 --> 00:07:27,140
>> Szóval vessünk egy pillantást table.HTML.

149
00:07:27,140 --> 00:07:29,380
Ha felidézzük a mi
HTML videó, megmutattam

150
00:07:29,380 --> 00:07:32,000
egy példa a nagyon
egyszerű szorzás

151
00:07:32,000 --> 00:07:35,160
táblázatot, hogy nézett ki elég
csúnya, és talán van

152
00:07:35,160 --> 00:07:38,650
oly módon, hogy jobbá tegyük az
CSS, hogy ez valóban meg

153
00:07:38,650 --> 00:07:41,120
Több mint egy szorzás
asztal, vagy valami

154
00:07:41,120 --> 00:07:43,730
hogy nem csak összeragadt
nincs tényleges felosztás

155
00:07:43,730 --> 00:07:45,532
között a sorok és az oszlopok.

156
00:07:45,532 --> 00:07:47,490
Tehát legyen a feje fölött, hogy
CS50 IDE, és vess egy pillantást

157
00:07:47,490 --> 00:07:50,780
hogy milyen CSS, egyfajta, csípés
ahonnan indultunk előtt,

158
00:07:50,780 --> 00:07:53,290
és ez valami sokkal jobb.

159
00:07:53,290 --> 00:07:55,650
>> Így vagyunk CS50 IDE
Most, ha ismeretlen,

160
00:07:55,650 --> 00:07:58,710
akkor húzza fel ezen a
táblázatot, hogy a HTML oldalon.

161
00:07:58,710 --> 00:08:01,090
Table.HTML alapvetően
Csak határozza meg a tartalmát

162
00:08:01,090 --> 00:08:05,044
Egy multiple-- azt hittem, hogy
egy négyszer négy szorzótábla.

163
00:08:05,044 --> 00:08:06,210
Ez elég egyértelmű.

164
00:08:06,210 --> 00:08:09,410
És azt gondolom, hogy ez lenne
Csinos jól szervezett.

165
00:08:09,410 --> 00:08:15,277
De valójában, amikor előnézeti ez az oldal,
azt látjuk, hogy ez a fajta csúnya, nem igaz?

166
00:08:15,277 --> 00:08:16,860
Egyértelműen van sorok és oszlopok itt.

167
00:08:16,860 --> 00:08:18,350
Van valami szétválasztása.

168
00:08:18,350 --> 00:08:20,040
De ez nem egy értelmes szétválasztása.

169
00:08:20,040 --> 00:08:23,105
Nem vagyunk valójában egyre
Túl sok információ itt.

170
00:08:23,105 --> 00:08:25,730
És nincs szétválasztását
A sorok és oszlopok tekintetében

171
00:08:25,730 --> 00:08:28,460
A vízszintes vagy függőleges szabályokat.

172
00:08:28,460 --> 00:08:31,530
Mi valószínűleg képes ezt
meg egy kicsit jobban.

173
00:08:31,530 --> 00:08:32,934
Úgyhogy próbáljuk.

174
00:08:32,934 --> 00:08:34,559
Így fogok zárni ezt lapon fel ide.

175
00:08:34,559 --> 00:08:37,434
És fogok becsukom a table.HTML,
és van egy másik verzió itt

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

177
00:08:39,490 --> 00:08:40,655
Majd nyissa hogy akár.

178
00:08:40,655 --> 00:08:42,530
A szervezetben az oldal van
nagyjából ugyanaz,

179
00:08:42,530 --> 00:08:44,238
de én változott
kicsit a tetején.

180
00:08:44,238 --> 00:08:47,132
És én lépjünk fel ide.

181
00:08:47,132 --> 00:08:49,340
Figyeljük meg, hogy ebben az időben, én vagyok
A beágyazott tag-eket.

182
00:08:49,340 --> 00:08:53,550
Már nyitotta stílust tag, és én vagyok most
meghatározó CSS ​​stíluslap csak belül

183
00:08:53,550 --> 00:08:54,310
belőle.

184
00:08:54,310 --> 00:08:56,310
Nekem van egy stíluslap, amely azt mondja, asztal.

185
00:08:56,310 --> 00:08:58,170
Ez az én Címkeválasztó.

186
00:08:58,170 --> 00:09:01,340
Nem használok pont vagy hash,
amit tenne, ha

187
00:09:01,340 --> 00:09:03,710
volt a személyi igazolvány vagy egy osztály választó.

188
00:09:03,710 --> 00:09:06,190
Van egy Címkeválasztó here-- asztalra.

189
00:09:06,190 --> 00:09:10,090
Ez a stílus fog
alkalmazni minden asztalra tag.

190
00:09:10,090 --> 00:09:14,950
Úgy látszik, azt akarom, hogy egy
pixel széles, tömör kék határokon,

191
00:09:14,950 --> 00:09:15,779
belsejében az én asztalom.

192
00:09:15,779 --> 00:09:18,320
Ez úgy hangzik, mintha ez valószínűleg
A helyzet megoldására, ugye?

193
00:09:18,320 --> 00:09:20,320
Fogunk van
a dolgok sokkal jobban néz ki.

194
00:09:20,320 --> 00:09:21,190
Szóval ez rendben van.

195
00:09:21,190 --> 00:09:23,540
Stílusában, Épp most
beágyazott én XSLT itt.

196
00:09:23,540 --> 00:09:25,100
Ez minden bizonnyal egy
elfogadható módon kell csinálni.

197
00:09:25,100 --> 00:09:26,391
Lássuk, mi ez néz ki.

198
00:09:26,391 --> 00:09:29,790
Úgyhogy megyek ide vissza, és
Majd lesz előnézeti én table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Nos, ez nem egészen így akartam,
de ez pontosan mit kértünk.

201
00:09:36,470 --> 00:09:39,530
Azt mondtuk, hogy ez a stílus
fog alkalmazni az asztalunkhoz.

202
00:09:39,530 --> 00:09:43,810
A táblázat most már van egy pixel
széles, kék színű határ körül.

203
00:09:43,810 --> 00:09:46,237
Nem vagyunk valójában egyre
Az asztalnál sejteket.

204
00:09:46,237 --> 00:09:47,570
Mi csak most az asztalnál.

205
00:09:47,570 --> 00:09:49,310
Tehát CSS dolgozott.

206
00:09:49,310 --> 00:09:51,890
Az általa alkalmazott egy
stíluslap az asztalunkhoz.

207
00:09:51,890 --> 00:09:53,981
De nem elég csinálni
amit szerettünk volna csinálni.

208
00:09:53,981 --> 00:09:55,730
Hogyan jutunk, hogy nem
amit szeretnél csinálni?

209
00:09:55,730 --> 00:09:59,287
>> Nos, vessünk egy pillantást egy több
változata ennek a table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Szóval én csak fog bezárni ezeket a lapokat.

211
00:10:00,870 --> 00:10:03,890
Én megyek vissza ide, hogy én
fájlszerkezetet, és megnyitja table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Ismét úgy fog kinézni, elég
Hasonló elején itt.

214
00:10:10,350 --> 00:10:14,460
De észre, ebben az időben, ahelyett, hogy a
stíluslapot beágyazódnak ott,

215
00:10:14,460 --> 00:10:18,870
Megyek összekapcsolni a
stíluslap használatával link tag.

216
00:10:18,870 --> 00:10:22,480
Úgyhogy nyilván összekötő egy
stylesheet nevű tables.CSS,

217
00:10:22,480 --> 00:10:25,090
és ez is megegyezik
stíluslap csak means-- is,

218
00:10:25,090 --> 00:10:28,645
mi ez a fájl képest, amit
Én doing-- egy stíluslapot vagyok

219
00:10:28,645 --> 00:10:29,821
segítségével az oldalam.

220
00:10:29,821 --> 00:10:32,320
Tehát, ha azt szeretné, hogy mi
Csinálok a CSS itt,

221
00:10:32,320 --> 00:10:35,010
El kell menni a nyílt, hogy
table.CSS fájlt is.

222
00:10:35,010 --> 00:10:37,490
Szóval megyünk vissza ide
vissza a mi fájlszerkezetet.

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

224
00:10:38,660 --> 00:10:40,490
Majd pop nyitva.

225
00:10:40,490 --> 00:10:43,070
Most látjuk, egy kicsit a CSS-t.

226
00:10:43,070 --> 00:10:45,630
Úgy tűnik, van egy pár
A dolog folyik itt.

227
00:10:45,630 --> 00:10:48,950
Azt nyilván szeretnénk, hogy egy öt
pixel széles, tömör piros szegéllyel,

228
00:10:48,950 --> 00:10:50,287
körül az én asztalom.

229
00:10:50,287 --> 00:10:52,870
Azt már tudjuk, hogy ez fog
hogy csak menjen a kerület.

230
00:10:52,870 --> 00:10:56,180
Láttuk, hogy a table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Minden sorral I
nyilván szeretné határozni

232
00:10:58,770 --> 00:11:01,950
hogy a sor magassága 50 pixel magas.

233
00:11:01,950 --> 00:11:05,680
Tehát minden sorban, ne feledje,
ez az, amit a tr tag igen,

234
00:11:05,680 --> 00:11:08,550
Én így 50 pixel magas.

235
00:11:08,550 --> 00:11:09,804
>> Végül, én ezt a megjegyzést.

236
00:11:09,804 --> 00:11:11,470
És ez hogyan tegyék meg észrevételeiket a CSS-t.

237
00:11:11,470 --> 00:11:16,174
Ez nagyon hasonlít, hogy megragadják blokk
kommentek szintaxis perjel csillag.

238
00:11:16,174 --> 00:11:17,090
Minden a kívánt szöveget.

239
00:11:17,090 --> 00:11:19,470
Nincs perjel perjel bár CSS.

240
00:11:19,470 --> 00:11:23,400
Rövid inline kommentek, van
hogy ezt a bizonyos formátumban itt.

241
00:11:23,400 --> 00:11:26,830
Úgy néz ki, csinálok egy
csomó dolog az én td címkék.

242
00:11:26,830 --> 00:11:29,710
Emlékezz td címkék vagy asztalra
adatokat, amelyek valóban csak

243
00:11:29,710 --> 00:11:32,210
Az oszlopok belsejében
sorainkban, és látszólag

244
00:11:32,210 --> 00:11:35,090
minden egyes adatot
az én asztal, azt akarom,

245
00:11:35,090 --> 00:11:38,850
hogy a háttér színét, hogy
fekete, a szín a fehér,

246
00:11:38,850 --> 00:11:40,320
szín előtér színét.

247
00:11:40,320 --> 00:11:42,360
Tehát ez lesz
A szöveg oldalam.

248
00:11:42,360 --> 00:11:45,140
Azt akarom, nagy font, 22
pont font, és azt akarom,

249
00:11:45,140 --> 00:11:47,001
hogy legyen a betűtípus család, Georgia.

250
00:11:47,001 --> 00:11:48,750
Szóval nem fogok
az alapértelmezett betűtípust.

251
00:11:48,750 --> 00:11:51,820
Megyek adja Grúzia, amely
egyike azoknak a web biztonságos betűtípusok

252
00:11:51,820 --> 00:11:53,830
hogy már látott.

253
00:11:53,830 --> 00:11:57,284
Azt akarom, hogy a szöveget összhangba kell hozni
központilag, a közepén a doboz,

254
00:11:57,284 --> 00:11:59,450
Nem akarom, hogy maradjon
vonalban vagy jobbra igazítva.

255
00:11:59,450 --> 00:12:03,461
És szeretném, ha a oszlop szélessége
hogy 50 pixel széles is.

256
00:12:03,461 --> 00:12:05,210
Vessünk egy pillantást
mi ez úgy néz ki, mint,

257
00:12:05,210 --> 00:12:07,470
és nézd meg, ez talán javulás.

258
00:12:07,470 --> 00:12:12,890
Így fogok menni table3.HTML, amely
Emlékezzünk, magában table.CSS mint egy linket,

259
00:12:12,890 --> 00:12:14,830
és mi az megtekinthető.

260
00:12:14,830 --> 00:12:16,800
Ez sokkal jobb, igaz?

261
00:12:16,800 --> 00:12:20,004
Ez valójában kezdi meg a
sokkal több, mint egy szorzótábla.

262
00:12:20,004 --> 00:12:21,920
Van, hogy a piros szegéllyel
körül a táblát, de most

263
00:12:21,920 --> 00:12:26,700
Azt is meghatározták, hogy
minden sor 50 pixel széles,

264
00:12:26,700 --> 00:12:30,220
vagy ez 50 pixel tall-- mentség
me-- minden oszlop 50 pixel széles.

265
00:12:30,220 --> 00:12:34,251
Az adatokat az egyes oszlopok, és csak
Az adatok, van egy fekete háttér.

266
00:12:34,251 --> 00:12:36,000
Szóval ezért ezeket
fehér vonalak vannak.

267
00:12:36,000 --> 00:12:38,836
Mivel a tér
között minden, e sejtek,

268
00:12:38,836 --> 00:12:40,710
ez nem egy határ
és önmagában, ez csak

269
00:12:40,710 --> 00:12:43,170
Én csak kitölti a
sejtek, amelyek ténylegesen

270
00:12:43,170 --> 00:12:46,310
teszi a határok az asztalra, ami
nyilván létezett végig, hogy

271
00:12:46,310 --> 00:12:47,887
csak vékony fehér vonalak.

272
00:12:47,887 --> 00:12:48,720
Most ők láthatók.

273
00:12:48,720 --> 00:12:50,380
Most már elsül a képernyőn.

274
00:12:50,380 --> 00:12:52,920
És így ez egy nagyon egyszerű
stíluslap, hogy én már alkalmazott,

275
00:12:52,920 --> 00:12:56,850
és most én asztalomnál néz ki sokkal több, mint
egy négyszer négy szorzótábla,

276
00:12:56,850 --> 00:13:00,950
helyett csak zagyva rendetlenség, ahol
mindent egyértelműen sorok és oszlopok,

277
00:13:00,950 --> 00:13:03,717
de nem szuper jól szervezett.

278
00:13:03,717 --> 00:13:06,800
Mi tényleg csak a felszínt
mit lehet csinálni a CSS itt.

279
00:13:06,800 --> 00:13:10,330
Szerencsére a CSS dokumentáció
elég egyértelmű.

280
00:13:10,330 --> 00:13:14,000
Majd használja annak több
tulajdonítja, elég gyakran.

281
00:13:14,000 --> 00:13:16,087
Az is beszéltünk
korábban ez a videó.

282
00:13:16,087 --> 00:13:18,170
Számos hogy
valószínűleg nem fogja használni az összes.

283
00:13:18,170 --> 00:13:19,469
És ez rendben is.

284
00:13:19,469 --> 00:13:22,010
De csak azt tudom, hogy van egy
Sok dokumentáció odakint.

285
00:13:22,010 --> 00:13:25,110
Így még ha mi nem terjed ki mindenre,
te biztosan nem hagyja egyedül.

286
00:13:25,110 --> 00:13:26,780
De a CSS igazán szórakoztató
kísérletezni.

287
00:13:26,780 --> 00:13:29,040
És azt javasoljuk,
a játék körül a weboldalakat,

288
00:13:29,040 --> 00:13:32,180
és látom, hogy tudod, hogy azok
megjelenését segíti a felhasználót

289
00:13:32,180 --> 00:13:34,790
tapasztalatok látogató az oldalon.

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

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

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