1
00:00:00,000 --> 00:00:05,660
>> [Prehrávanie hudby]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Tak poďme ešte jeden
Video hovoriť o ďalší jeden jazyk.

3
00:00:08,740 --> 00:00:10,800
Tentoraz budeme hovoriť o CSS.

4
00:00:10,800 --> 00:00:13,460
Takže CSS, čo je skratka pre
Kaskádové štýly,

5
00:00:13,460 --> 00:00:16,149
je iný jazyk používame
pri vytváraní webových stránok.

6
00:00:16,149 --> 00:00:17,190
Premýšľajte o tom takto.

7
00:00:17,190 --> 00:00:20,900
Pokiaľ je HTML je to, čo používame zorganizovať
Obsah chceme dať na našej stránke,

8
00:00:20,900 --> 00:00:25,390
CSS je nástroj, ktorý sme všeobecne používajú
prispôsobiť, ako naše webové stránky vyzerajú,

9
00:00:25,390 --> 00:00:30,410
a ako užívateľské skúsenosti naozaj
je, komunikovať s našich webových stránkach.

10
00:00:30,410 --> 00:00:32,535
>> Podobne ako HTML, CSS je
nie je programovací jazyk.

11
00:00:32,535 --> 00:00:33,451
To nemá logiku.

12
00:00:33,451 --> 00:00:34,595
Nemá premenné.

13
00:00:34,595 --> 00:00:38,890
To nemá žiadny druh, ktorý
prietok súvisiace veci, ktoré robí C.

14
00:00:38,890 --> 00:00:40,150
Je to jazyk, styling.

15
00:00:40,150 --> 00:00:42,810
A jeho syntaxe je celkom
jednoduché, a práve popisuje

16
00:00:42,810 --> 00:00:46,240
ako prvky nášho
stránky majú určitý HTML

17
00:00:46,240 --> 00:00:48,190
prvky by mali byť zmenené.

18
00:00:48,190 --> 00:00:51,170
Za týmto účelom, ak nemáte
napriek tomu sledoval naše video na HTML,

19
00:00:51,170 --> 00:00:53,290
alebo sú oboznámení s
HTML Všeobecne platí, že

20
00:00:53,290 --> 00:00:57,430
môže chcieť, aby sa na to pozrieť
Prvý, pretože táto diskusia o CSS

21
00:00:57,430 --> 00:01:00,700
bude závisieť na
určitá znalosť HTML.

22
00:01:00,700 --> 00:01:03,740
>> Tak tu je naozaj
jednoduchý CSS štýlov.

23
00:01:03,740 --> 00:01:06,480
Dokonca aj keď ste nikdy
naprogramovaný s CSS predtým,

24
00:01:06,480 --> 00:01:10,624
Som si istý, môžete zistiť,
presne to, čo to robí stylesheet.

25
00:01:10,624 --> 00:01:11,290
Čo to robí?

26
00:01:11,290 --> 00:01:15,470
No, na tele nášho webu
strana, všetko medzi značky BODY

27
00:01:15,470 --> 00:01:19,631
na našich HTML, a to nastaví
farba tejto stránky na modrom pozadí.

28
00:01:19,631 --> 00:01:21,130
No, je to veľmi jednoduché štýlov.

29
00:01:21,130 --> 00:01:23,269
Je to vlastne veľmi ľudský
priateľský jazyk CSS.

30
00:01:23,269 --> 00:01:26,560
Takže aj keď ste nikdy používal to predtým,
pravdepodobne mohol hádať, čo to urobil.

31
00:01:26,560 --> 00:01:30,140
V skutočnosti, ak sme naložili stránku, kde
tento stylesheet bol zasadený nejako,

32
00:01:30,140 --> 00:01:36,240
farba pozadia našej stránke by
byť modrej, a nie štandardné bielu.

33
00:01:36,240 --> 00:01:37,670
>> Tak ako sme sa stavať štýlov?

34
00:01:37,670 --> 00:01:39,700
Tak po prvé, musíme
identifikovať volič.

35
00:01:39,700 --> 00:01:42,970
V poslednom príklade,
že volič bolo telo.

36
00:01:42,970 --> 00:01:45,050
Potom máme otvorený
zložená zátvorka, a my sme

37
00:01:45,050 --> 00:01:48,410
chystá začať definovanie
stylesheet pre tento volič.

38
00:01:48,410 --> 00:01:51,800
Medzi zložených zátvoriek, my
stačí mať zoznam kľúčových párov hodnôt.

39
00:01:51,800 --> 00:01:56,205
Dvojica predchádzajúca hodnota bola
farba pozadia modrej bodkočiarka,

40
00:01:56,205 --> 00:01:57,830
ale my sme mohli robiť viac a viac z nich.

41
00:01:57,830 --> 00:02:02,330
Tie by mohli mať niekoľko vecí, použitie
k tomu, že tag, voliča telo.

42
00:02:02,330 --> 00:02:05,960
Každý z nich je oddelený
bodkočiarka, a nazývame každý z nich

43
00:02:05,960 --> 00:02:08,949
vyhlásenie, vyhlásenie CSS.

44
00:02:08,949 --> 00:02:12,410
Keď sme hotoví so všetkými styling my
chcete použiť na konkrétnu značku,

45
00:02:12,410 --> 00:02:15,300
my len mať zatváracie kučeravé
rovnátka ukončiť štýlov,

46
00:02:15,300 --> 00:02:19,640
a my sme urobili definovanie štýlov
pre túto konkrétnu volič.

47
00:02:19,640 --> 00:02:21,341
>> Aké sú niektoré bežné CSS vlastnosti?

48
00:02:21,341 --> 00:02:23,590
No, možno budete chcieť dať
rámček okolo niečoho.

49
00:02:23,590 --> 00:02:26,850
Takže môžete povedať, cezhraničnej,
že by sa váš kľúč,

50
00:02:26,850 --> 00:02:29,460
a potom sa vaše hodnoty by bolo,
čo štýl, farba a šírka

51
00:02:29,460 --> 00:02:30,209
Chcete, aby to bolo.

52
00:02:30,209 --> 00:02:33,530
Takže štýl by mohla byť pevná
čiara, bodkovaná čiara, prerušovaná čiara,

53
00:02:33,530 --> 00:02:36,020
hrebeň linka, čo by bolo vlnovka.

54
00:02:36,020 --> 00:02:38,790
Možno, že budete chcieť mať
modrý alebo čierny alebo zelený.

55
00:02:38,790 --> 00:02:41,490
Možno chcete, aby to bolo
1 alebo 2 alebo 10 pixelov.

56
00:02:41,490 --> 00:02:43,254
Môžete určiť všetky tie veci.

57
00:02:43,254 --> 00:02:46,420
Možno chcete nastaviť pozadie
farba vašej stránky určitým spôsobom.

58
00:02:46,420 --> 00:02:49,215
Už sme videli, že nastavenie
pozadí tela byť modré.

59
00:02:49,215 --> 00:02:52,080
>> Potom môžete použiť kľúčové slovo,
takže CSS má určité farby

60
00:02:52,080 --> 00:02:55,950
ktoré sú postavené do neho, modrá, zelená,
čierna, veľmi jednoduché farby poznáme.

61
00:02:55,950 --> 00:02:59,110
Ale môžete tiež určiť akýkoľvek
Farba hex, že by ste chceli.

62
00:02:59,110 --> 00:03:05,190
Pripomeňme, že farby môžu byť identifikované
sadou troch čísel hex

63
00:03:05,190 --> 00:03:08,500
od 0 do 255, RG a B, na
červená, zelená a modrá zložka.

64
00:03:08,500 --> 00:03:10,590
A tak môžeme určiť,
ľubovoľnej farby chceme by,

65
00:03:10,590 --> 00:03:15,520
namiesto použitia modré alebo zelené alebo čierne,
použitím libru a potom šesť číslic hex,

66
00:03:15,520 --> 00:03:18,310
a že nám dá
farba šesť číslice.

67
00:03:18,310 --> 00:03:19,850
Tak to je farba pozadia.

68
00:03:19,850 --> 00:03:21,975
>> Máme tiež popredí
farba, čo je zvyčajne

69
00:03:21,975 --> 00:03:24,140
bude text stránky.

70
00:03:24,140 --> 00:03:28,850
A vy ste mohli podobne urobiť
s kľúčovým slovom a alebo šesťmiestne hexadecimálne.

71
00:03:28,850 --> 00:03:32,140
Takže môžete zadať akúkoľvek farbu si
Chcete pre text vašej stránky

72
00:03:32,140 --> 00:03:36,370
proti konkrétnemu
farba pozadia, hore.

73
00:03:36,370 --> 00:03:39,100
Môžete tiež zmeniť a vysporiadať sa
s písmom, a spôsob, akým textom

74
00:03:39,100 --> 00:03:40,400
je vykreslený na stránke.

75
00:03:40,400 --> 00:03:42,010
>> Takže si môžete zmeniť veľkosť písma.

76
00:03:42,010 --> 00:03:46,320
Môžete použiť kľúčové slová, ako je extra,
Veľmi malé, alebo xx malé, alebo stredné,

77
00:03:46,320 --> 00:03:47,660
veľký, a tak ďalej.

78
00:03:47,660 --> 00:03:50,750
Môžete použiť pevné body, 10
bod, veľkosť 12, a tak ďalej.

79
00:03:50,750 --> 00:03:55,850
Môžete použiť percenta, 80%, 20%,
kde 100% je predvolené písmo

80
00:03:55,850 --> 00:03:59,220
veľkosť, ktorý je zvyčajne bude
bolo niečo ako 11 alebo 12 bodov.

81
00:03:59,220 --> 00:04:01,659
Alebo môžete dokonca založiť ho
z poslednej veľkosti písma.

82
00:04:01,659 --> 00:04:04,950
Ak ste práve niečo napísal a viete,
čo chcete, je pre to, aby bol menší,

83
00:04:04,950 --> 00:04:08,241
ale neviete presne, čo veľkosť, ktorú
chcem, aby to bolo, dobre, môžete len povedať,

84
00:04:08,241 --> 00:04:09,330
veľkosť písma menšie.

85
00:04:09,330 --> 00:04:14,344
A bude vychádzať z toho,
len hore, to je veľkosť písma.

86
00:04:14,344 --> 00:04:15,760
A môžete získať menšie alebo väčšie.

87
00:04:15,760 --> 00:04:18,390
Takže je tu veľa rôznych
spôsoby, ako určiť veľkosť písma.

88
00:04:18,390 --> 00:04:20,690
>> Môžete tiež určiť, čo
Rodina písma chcete.

89
00:04:20,690 --> 00:04:23,360
Ak máte určitý
názov, je tu spôsob, ako v CSS--

90
00:04:23,360 --> 00:04:27,270
nebudeme o tom hovoriť
here-- definovať veľmi špecifický písmo

91
00:04:27,270 --> 00:04:28,980
a vložiť ho do svojich stránok.

92
00:04:28,980 --> 00:04:30,620
Môžete tiež použiť generické názvy.

93
00:04:30,620 --> 00:04:33,540
Je tu veľa bezpečné webové fonty
ktoré sú vopred definované v CSS.

94
00:04:33,540 --> 00:04:36,352
A ak ste používateľom spoločnosti Microsoft
Kanceláriu v posledných 20 rokoch,

95
00:04:36,352 --> 00:04:38,810
ste pravdepodobne oboznámení s
mnoho z týchto webových bezpečných písiem

96
00:04:38,810 --> 00:04:44,640
Už, Times New Roman, Arial,
Courier New, Gruzínsko, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
a tak ďalej.

98
00:04:45,470 --> 00:04:47,170
Tí, ktorí sú považované za bezpečné webové fonty.

99
00:04:47,170 --> 00:04:49,169
A vlastne, súčasťou
dôvod, prečo oni prišli byť

100
00:04:49,169 --> 00:04:54,140
mala byť použitá, aby sa web-- každú stránku
mal prístup k týmto predvolenú sadu písiem

101
00:04:54,140 --> 00:04:58,480
s rôznymi pätkami, a to všetko
font veci nebudeme dostať do,

102
00:04:58,480 --> 00:05:01,130
ale títo sú zvyčajne
dostupné v CSS,

103
00:05:01,130 --> 00:05:04,029
, Aj keď nie
inak definovať písma.

104
00:05:04,029 --> 00:05:07,070
A konečne, môžete zarovnať text,
namiesto toho to byť tým, že v predvolenom nastavení, zladiť

105
00:05:07,070 --> 00:05:09,310
doľava, mohol by ste
porovnajte ju doprava,

106
00:05:09,310 --> 00:05:13,740
alebo môžete zarovnať to na stred, alebo
odôvodnené tak, že zasiahla oba okraje.

107
00:05:13,740 --> 00:05:16,800
Takže to sú všetky možnosti, ktoré môžete použiť
zmeniť to, čo text vyzerá,

108
00:05:16,800 --> 00:05:20,120
a ako sa to zobrazí na vašej stránke.

109
00:05:20,120 --> 00:05:22,180
>> Vaše voliča nie
musí byť iba tagy.

110
00:05:22,180 --> 00:05:25,539
Už skôr sme videli telo značky
volič a volič tag

111
00:05:25,539 --> 00:05:26,580
vyzerá rovnako ako to.

112
00:05:26,580 --> 00:05:30,020
Môžete pomenovať značku, a potom vás
definovať štýlov pre túto značku.

113
00:05:30,020 --> 00:05:32,660
Ale môžete tiež urobiť niečo
volal selektor ID.

114
00:05:32,660 --> 00:05:34,390
Voličom ID vyzerá dosť podobné.

115
00:05:34,390 --> 00:05:38,100
Ale nevšimol, že teraz som nepoužívajú
tag HTML, som pomocou, v tomto prípade,

116
00:05:38,100 --> 00:05:40,720
#unique, alebo hash jedinečný.

117
00:05:40,720 --> 00:05:42,930
Ak si spomínate z nášho
video na HTML, hovorili sme

118
00:05:42,930 --> 00:05:45,620
o tom, ako tagy môžu mať atribúty.

119
00:05:45,620 --> 00:05:48,340
>> A jeden atribút, ktorý sa vzťahuje
na skoro všetky HTML tagy,

120
00:05:48,340 --> 00:05:51,440
ale nehovorili sme o tom,
je niečo, čo nazýva tag ID.

121
00:05:51,440 --> 00:05:55,250
Takže tento konkrétny CSS by
platí len pre HTML tagu, ktorý má

122
00:05:55,250 --> 00:05:58,530
veľmi špecifická ID, ktoré ste vymenoval.

123
00:05:58,530 --> 00:06:01,000
Takže ak máte niekde
v kóde, niekde

124
00:06:01,000 --> 00:06:06,090
v súbore HTML, tag a vami
zadať ako atribút k tomuto tagu,

125
00:06:06,090 --> 00:06:09,060
ID rovná unikátny, toto
najmä stylesheet

126
00:06:09,060 --> 00:06:15,030
Tu sa bude vzťahovať len medzi
že značka s ID jedinečný.

127
00:06:15,030 --> 00:06:17,180
>> Môžete si tiež urobiť niečo
volal volič triedy.

128
00:06:17,180 --> 00:06:19,920
Takže okrem toho, že
ID atribúty, môžete tiež

129
00:06:19,920 --> 00:06:23,130
pridať atribút triedy do HTML tagy.

130
00:06:23,130 --> 00:06:27,140
A ak používate atribút triedy,
to môže byť použitá na viac značiek.

131
00:06:27,140 --> 00:06:31,880
Takže ak máte niekoľko vecí, ktoré
sú podobné, možno chcete povedať,

132
00:06:31,880 --> 00:06:35,890
open tag bla, bla, bla,
bla, trieda sa rovná študentov.

133
00:06:35,890 --> 00:06:38,190
A potom sa tento konkrétny
stylesheet by sa vzťahovala

134
00:06:38,190 --> 00:06:42,041
na každý tag, ktorého trieda študentov.

135
00:06:42,041 --> 00:06:44,290
V tomto prípade by sme nastaviť
farbu pozadia na žltú,

136
00:06:44,290 --> 00:06:46,706
a my by sme nastaviť priehľadnosť, čo
je tag sme nemali hovoriť,

137
00:06:46,706 --> 00:06:52,510
ale len spoločnosti s tým, ako priehľadné
je niečo, na 70%, v tomto prípade.

138
00:06:52,510 --> 00:06:54,430
>> Je tu dve možnosti,
písanie štýly.

139
00:06:54,430 --> 00:06:56,680
Môžete napísať im
priamo do kódu HTML

140
00:06:56,680 --> 00:06:59,690
umiestnením štýly
medzi tagy štýlu.

141
00:06:59,690 --> 00:07:03,850
A tie štýl značky ísť dovnútra
Hlava tagy vaše webové stránky.

142
00:07:03,850 --> 00:07:08,240
Snáď len výhodnejší spôsob, ako robiť
to je napísať samostatný súbor CSS,

143
00:07:08,240 --> 00:07:12,360
a potom ho prepojiť do vášho
dokument pomocou odkazov tagy.

144
00:07:12,360 --> 00:07:14,690
Link tagy, opäť, sú
sa líši od hypertextových odkazov,

145
00:07:14,690 --> 00:07:16,760
Ak si spomínate z nášho videa HTML.

146
00:07:16,760 --> 00:07:19,030
A odkaz tagy sú, ako sme
vytiahnuť do samostatných súborov.

147
00:07:19,030 --> 00:07:23,900
Je to niečo ako ekvivalent
#include pre webové programovanie.

148
00:07:23,900 --> 00:07:27,140
>> Takže poďme sa pozrieť na table.HTML.

149
00:07:27,140 --> 00:07:29,380
Ak si spomínate z nášho
HTML video, som ukázal

150
00:07:29,380 --> 00:07:32,000
príklad veľmi
jednoduché násobenie

151
00:07:32,000 --> 00:07:35,160
tabuľka, ktorá vyzerala dosť
škaredý, a možno tam je

152
00:07:35,160 --> 00:07:38,650
spôsob, aby to lepšie
CSS, aby to skutočne vyzerať

153
00:07:38,650 --> 00:07:41,120
viac ako násobenie
stôl, alebo niečo

154
00:07:41,120 --> 00:07:43,730
že nie je len zlepené
so žiadnym skutočným rozdelením

155
00:07:43,730 --> 00:07:45,532
medzi riadky a stĺpce.

156
00:07:45,532 --> 00:07:47,490
Takže poďme cez hlavu na
CS50 IDE, a pozrite sa

157
00:07:47,490 --> 00:07:50,780
na to, ako CSS môže, tak nejako, štípnout
to, čo sme začali s skôr,

158
00:07:50,780 --> 00:07:53,290
a urobiť z neho niečo oveľa lepšie.

159
00:07:53,290 --> 00:07:55,650
>> Takže sme v CS50 IDE
teraz, a ak je neznáme,

160
00:07:55,650 --> 00:07:58,710
Dáme do toho
tabuľka, ktorá HTML stránka.

161
00:07:58,710 --> 00:08:01,090
Table.HTML v podstate
len definuje obsah

162
00:08:01,090 --> 00:08:05,044
štandardu A multiple-- to malo byť
násobenie štyroch štyrmi stôl.

163
00:08:05,044 --> 00:08:06,210
Je to celkom jednoduché.

164
00:08:06,210 --> 00:08:09,410
A my by sme si, že by
vyzerajú celkom dobre organizovaná.

165
00:08:09,410 --> 00:08:15,277
Ale v skutočnosti, keď sme náhľadu na túto stránku,
vidíme, že je to trochu škaredé, že jo?

166
00:08:15,277 --> 00:08:16,860
Jasne máme riadkov a stĺpcov tu.

167
00:08:16,860 --> 00:08:18,350
Existuje nejaký oddelenia.

168
00:08:18,350 --> 00:08:20,040
Ale nie je to zmysluplné oddelenia.

169
00:08:20,040 --> 00:08:23,105
Nie sme v skutočnosti dostať
príliš veľa informácií tu.

170
00:08:23,105 --> 00:08:25,730
A nie je medzi žiadne oddelenie
riadkov a stĺpcov, pokiaľ ide

171
00:08:25,730 --> 00:08:28,460
horizontálnych alebo vertikálnych pravidiel.

172
00:08:28,460 --> 00:08:31,530
Mohli by sme, aby to
vyzerať trochu lepšie.

173
00:08:31,530 --> 00:08:32,934
Takže poďme skúsiť.

174
00:08:32,934 --> 00:08:34,559
Takže budem tu uzavrieť túto záložku.

175
00:08:34,559 --> 00:08:37,434
A budem zavriem table.HTML,
a ja mám inú verziu tu

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

177
00:08:39,490 --> 00:08:40,655
Budeme otvoriť, že až.

178
00:08:40,655 --> 00:08:42,530
Telo stránky je
skoro rovnaké,

179
00:08:42,530 --> 00:08:44,238
ale ja som zmenený
trochu hore.

180
00:08:44,238 --> 00:08:47,132
A ja budem posúvať tady.

181
00:08:47,132 --> 00:08:49,340
Všimnite si, že tento čas, ja som
pomocou vložených značiek štýl.

182
00:08:49,340 --> 00:08:53,550
Otvoril som tag štýl, a ja som teraz
definovanie CSS štýlov len vnútri

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

184
00:08:54,310 --> 00:08:56,310
Mám zoznam štýlov, ktorý hovorí, stôl.

185
00:08:56,310 --> 00:08:58,170
To je môj výber tag.

186
00:08:58,170 --> 00:09:01,340
Nebudem používať bodku alebo hash,
ktoré by som robil, keby som

187
00:09:01,340 --> 00:09:03,710
bol pomocou ID alebo selektor triedy.

188
00:09:03,710 --> 00:09:06,190
Mám selektora tagov here-- tabuľky.

189
00:09:06,190 --> 00:09:10,090
Tento štýl sa chystá
sa vzťahujú na všetky tagu tabuľky.

190
00:09:10,090 --> 00:09:14,950
Zrejme som chcel dať jeden
pixelu, pevný modrý okraj,

191
00:09:14,950 --> 00:09:15,779
Vnútri môjho stola.

192
00:09:15,779 --> 00:09:18,320
To znie, ako by to asi
pomôcť situácii, že jo?

193
00:09:18,320 --> 00:09:20,320
Budeme mať
veci vyzerajú oveľa lepšie.

194
00:09:20,320 --> 00:09:21,190
Tak to je v poriadku.

195
00:09:21,190 --> 00:09:23,540
Štylisticky, práve som
vložené môj štýlov tu.

196
00:09:23,540 --> 00:09:25,100
Je to iste
prijateľný spôsob, ako to urobiť.

197
00:09:25,100 --> 00:09:26,391
Poďme sa pozrieť, ako to vyzerá.

198
00:09:26,391 --> 00:09:29,790
Takže ja pôjdem späť dole, a
Budem vám zobraziť náhľad table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
No, to nie je presne to, čo som chcel,
ale to je presne to, čo sme žiadali.

201
00:09:36,470 --> 00:09:39,530
Povedali sme, že tento štýl je
bude vzťahovať k nášmu stolu.

202
00:09:39,530 --> 00:09:43,810
Naša tabuľka má teraz jeden pixel
široký, pevný modrý rámček okolo neho.

203
00:09:43,810 --> 00:09:46,237
Nie sme v skutočnosti dostať
na bunky tabuľky.

204
00:09:46,237 --> 00:09:47,570
Sme len na to pri stole.

205
00:09:47,570 --> 00:09:49,310
Takže CSS pracoval.

206
00:09:49,310 --> 00:09:51,890
Je aplikovaná
stylesheet k nášmu stolu.

207
00:09:51,890 --> 00:09:53,981
Ale nie úplne robiť
to, čo sme chceli, aby to robiť.

208
00:09:53,981 --> 00:09:55,730
Ako sa dostaneme k tomu
to, čo chceme, aby to urobil?

209
00:09:55,730 --> 00:09:59,287
>> Dobre, poďme sa pozrieť na jeden viac
verzia tohto v table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Takže ja som jednoducho ísť zavrieť tieto karty.

211
00:10:00,870 --> 00:10:03,890
Chystám sa vrátiť sem k môjmu
súbor strom, a otvoriť table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Opäť platí, že to bude vyzerať pekne
podobný tu na začiatku.

214
00:10:10,350 --> 00:10:14,460
Ale oznámenia, tentoraz, namiesto použitia
zoznam štýlov vložené priamo tam,

215
00:10:14,460 --> 00:10:18,870
Idem spojiť v
štýlov pomocou značky link.

216
00:10:18,870 --> 00:10:22,480
Takže som zrejme prepojenie v
štýlov volal tables.CSS,

217
00:10:22,480 --> 00:10:25,090
a to dobre rovná
stylesheet len ​​means-- dobre,

218
00:10:25,090 --> 00:10:28,645
Čo je tento súbor vo vzťahu k tomu, čo
Som doing-- je štýlov, že som

219
00:10:28,645 --> 00:10:29,821
použitím mojej stránke.

220
00:10:29,821 --> 00:10:32,320
Takže či naozaj chcete vidieť, čo
Ja robím s CSS tu,

221
00:10:32,320 --> 00:10:35,010
Musím ísť, že otvorený
table.CSS súboru rovnako.

222
00:10:35,010 --> 00:10:37,490
Tak sme sa vrátim sem
Znovu k nášmu súboru stromu.

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

224
00:10:38,660 --> 00:10:40,490
Budeme pop otvorené.

225
00:10:40,490 --> 00:10:43,070
Teraz vidíme trochu CSS.

226
00:10:43,070 --> 00:10:45,630
Zdá sa, že mám pár
veci tu deje.

227
00:10:45,630 --> 00:10:48,950
Zrejme Chcem dať päť
pixelu, pevný červený okraj,

228
00:10:48,950 --> 00:10:50,287
okolo môjho stola.

229
00:10:50,287 --> 00:10:52,870
Už vieme, že, čo sa deje
jednoducho ísť na obvode.

230
00:10:52,870 --> 00:10:56,180
Videli sme, že v table2.HTML.

231
00:10:56,180 --> 00:10:58,770
S každým riadkom I
zrejme chcete zadať

232
00:10:58,770 --> 00:11:01,950
že výška riadku je 50 pixelov.

233
00:11:01,950 --> 00:11:05,680
Takže pre každý riadok, pamätajte
že to, čo robí tag tr,

234
00:11:05,680 --> 00:11:08,550
Robím to 50 pixelov.

235
00:11:08,550 --> 00:11:09,804
>> Nakoniec, ja mám tento komentár.

236
00:11:09,804 --> 00:11:11,470
A to je to, ako robíme pripomienky v CSS.

237
00:11:11,470 --> 00:11:16,174
Je to veľmi podobné chytiť blok
komentáre syntax lomítko hviezdu.

238
00:11:16,174 --> 00:11:17,090
Všetok text, ktorý chcete.

239
00:11:17,090 --> 00:11:19,470
Nie je lomítko lomítko hoci v CSS.

240
00:11:19,470 --> 00:11:23,400
Pri krátkych vložené komentáre, my máme
použiť tento určitý formát sem.

241
00:11:23,400 --> 00:11:26,830
Vyzerá to, že robím
Veľa vecí v mojich td tagy.

242
00:11:26,830 --> 00:11:29,710
Nezabudnite td tagy alebo stolík
Údaje, ktoré sú naozaj len

243
00:11:29,710 --> 00:11:32,210
stĺpce vnútro
naše rady a zrejme

244
00:11:32,210 --> 00:11:35,090
pre každý kus dát
v mojej tabuľke, chcem

245
00:11:35,090 --> 00:11:38,850
nastaviť farbu pozadia, aby
byť čierne, farba byť biely,

246
00:11:38,850 --> 00:11:40,320
farba je farba popredia.

247
00:11:40,320 --> 00:11:42,360
Takže to bude
text mojej stránke.

248
00:11:42,360 --> 00:11:45,140
Chcem veľký font, 22
bod písmo, a ja chcem

249
00:11:45,140 --> 00:11:47,001
to byť z rodiny fontov, Georgia.

250
00:11:47,001 --> 00:11:48,750
Takže ja nebudem
majú predvolené písmo.

251
00:11:48,750 --> 00:11:51,820
Chystám sa určiť, Gruzínsko, ktorý
je jedným z tých bezpečnej webovej fonty

252
00:11:51,820 --> 00:11:53,830
že sme nevideli.

253
00:11:53,830 --> 00:11:57,284
Chcem tiež text, ktorý bude zarovnaný
centrálne, v strede poľa,

254
00:11:57,284 --> 00:11:59,450
Nechcem, aby sa doľava
zarovnané alebo doprava zarovnaný.

255
00:11:59,450 --> 00:12:03,461
A Chcem šírky stĺpca
sa na 50 pixelov, rovnako.

256
00:12:03,461 --> 00:12:05,210
Poďme sa pozrieť na
ako to vyzerá,

257
00:12:05,210 --> 00:12:07,470
a zistiť, či je to možné zlepšenia.

258
00:12:07,470 --> 00:12:12,890
Takže ja idem na table3.HTML, ktorý
Spomeňte si, zahŕňa table.CSS ako odkaz,

259
00:12:12,890 --> 00:12:14,830
a my náhľadu.

260
00:12:14,830 --> 00:12:16,800
To je oveľa lepšie, že jo?

261
00:12:16,800 --> 00:12:20,004
To je vlastne začína vyzerať
viac ako násobilku.

262
00:12:20,004 --> 00:12:21,920
Mám ten červený rámček
okolo môjho stola, ale teraz

263
00:12:21,920 --> 00:12:26,700
Tiež som spresnil, že
každý riadok je 50 pixelov,

264
00:12:26,700 --> 00:12:30,220
alebo je to 50 pixelov tall-- výhovorka
me-- každý stĺpec je 50 pixelov.

265
00:12:30,220 --> 00:12:34,251
Dáta v každom stĺpci, a to iba
dáta, má čierne pozadie.

266
00:12:34,251 --> 00:12:36,000
Takže to je dôvod, prečo tí,
biele čiary sú tam.

267
00:12:36,000 --> 00:12:38,836
Vzhľadom k tomu, priestor v
medzi všetkými z týchto buniek,

268
00:12:38,836 --> 00:12:40,710
nie je to v pohraničnej
samo o sebe, je to len

269
00:12:40,710 --> 00:12:43,170
Som vyplnenie iba vo
bunky, ktoré v skutočnosti

270
00:12:43,170 --> 00:12:46,310
činí hranica tabuľky, ktoré
zrejme existujú po celú dobu, to

271
00:12:46,310 --> 00:12:47,887
bol len tenké biele čiary.

272
00:12:47,887 --> 00:12:48,720
Teraz sú viditeľné.

273
00:12:48,720 --> 00:12:50,380
Teraz sa pop off na obrazovke.

274
00:12:50,380 --> 00:12:52,920
A tak to je veľmi jednoduchý
stylesheet, že som sa aplikuje,

275
00:12:52,920 --> 00:12:56,850
a teraz môj stôl vyzerá veľa viac ako
štyri štyrmi násobilka,

276
00:12:56,850 --> 00:13:00,950
miesto len neusporiadané neporiadok, kde
Všetko je prehľadne riadkov a stĺpcov,

277
00:13:00,950 --> 00:13:03,717
ale nie mimoriadne dobre organizovaná.

278
00:13:03,717 --> 00:13:06,800
Sme naozaj len poškriabaniu povrchu
o tom, čo môžete robiť s CSS sem.

279
00:13:06,800 --> 00:13:10,330
Našťastie dokumentácie CSS
je veľmi jednoduché.

280
00:13:10,330 --> 00:13:14,000
Budete používať niekoľko jeho
atribúty, pomerne často.

281
00:13:14,000 --> 00:13:16,087
Tie, ktoré sme hovorili o
skôr v tomto videu.

282
00:13:16,087 --> 00:13:18,170
Existuje niekoľko, ktoré vás
pravdepodobne nebude používať vôbec.

283
00:13:18,170 --> 00:13:19,469
A to je v poriadku, taky.

284
00:13:19,469 --> 00:13:22,010
Ale viem, že je tu
kopa dokumentácie vonku.

285
00:13:22,010 --> 00:13:25,110
Takže aj keď sme nemali pokryť všetko,
ste iste nie odišiel na vlastnú päsť.

286
00:13:25,110 --> 00:13:26,780
Ale CSS je naozaj zábava
experimentovať s.

287
00:13:26,780 --> 00:13:29,040
A ja by som silne doporučuji
hrať sa s vašej webovej stránky,

288
00:13:29,040 --> 00:13:32,180
a uvidíte, ako môžete urobiť je
vyzerať a cítiť sa zlepšiť užívateľa

289
00:13:32,180 --> 00:13:34,790
zážitok z návštevy svojej stránky.

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

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

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