1
00:00:00,000 --> 00:00:05,660
>> [Přehrávání hudby]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Tak pojďme ještě jeden
Video mluvit o další jeden jazyk.

3
00:00:08,740 --> 00:00:10,800
Tentokrát budeme mluvit o CSS.

4
00:00:10,800 --> 00:00:13,460
Takže CSS, což je zkratka pro
Kaskádové styly,

5
00:00:13,460 --> 00:00:16,149
je jiný jazyk používáme
při vytváření webových stránek.

6
00:00:16,149 --> 00:00:17,190
Přemýšlejte o tom takhle.

7
00:00:17,190 --> 00:00:20,900
Pokud je HTML je to, co používáme zorganizovat
Obsah chceme dát na naší stránce,

8
00:00:20,900 --> 00:00:25,390
CSS je nástroj, který jsme obecně používají
přizpůsobit, jak naše webové stránky vypadají,

9
00:00:25,390 --> 00:00:30,410
a jak uživatelské zkušenosti opravdu
je, komunikovat s našich webových stránkách.

10
00:00:30,410 --> 00:00:32,535
>> Podobně jako HTML, CSS je
není programovací jazyk.

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

12
00:00:33,451 --> 00:00:34,595
Nemá proměnné.

13
00:00:34,595 --> 00:00:38,890
To nemá žádný druh, který
průtok související věci, které dělá 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 docela
jednoduché, a právě popisuje

16
00:00:42,810 --> 00:00:46,240
jak prvky našeho
stránky mají určitý HTML

17
00:00:46,240 --> 00:00:48,190
prvky by měly být změněny.

18
00:00:48,190 --> 00:00:51,170
Za tímto účelem, pokud nemáte
přesto sledoval naše video na HTML,

19
00:00:51,170 --> 00:00:53,290
nebo jsou obeznámeni s
HTML Obecně platí, že

20
00:00:53,290 --> 00:00:57,430
může chtít, aby se na to podívat
První, protože tato diskuze o CSS

21
00:00:57,430 --> 00:01:00,700
bude záviset na
určitá znalost HTML.

22
00:01:00,700 --> 00:01:03,740
>> Tak tady je opravdu
jednoduchý CSS stylů.

23
00:01:03,740 --> 00:01:06,480
Dokonce i když jste nikdy
naprogramovaný s CSS předtím,

24
00:01:06,480 --> 00:01:10,624
Jsem si jistý, můžete zjistit,
přesně to, co to dělá stylesheet.

25
00:01:10,624 --> 00:01:11,290
Co to dělá?

26
00:01:11,290 --> 00:01:15,470
No, na těle našeho webu
strana, všechno mezi značky BODY

27
00:01:15,470 --> 00:01:19,631
na našich HTML, a to nastaví
barva této stránky na modrém pozadí.

28
00:01:19,631 --> 00:01:21,130
No, je to velmi jednoduché stylů.

29
00:01:21,130 --> 00:01:23,269
Je to vlastně velmi lidský
přátelský jazyk CSS.

30
00:01:23,269 --> 00:01:26,560
Takže i když jste nikdy používal to předtím,
pravděpodobně mohl hádat, co to udělal.

31
00:01:26,560 --> 00:01:30,140
Ve skutečnosti, pokud jsme naložili stránku, kde
tento stylesheet byl zasazen nějak,

32
00:01:30,140 --> 00:01:36,240
barva pozadí naší stránce by
být modré, a ne standardní bílou.

33
00:01:36,240 --> 00:01:37,670
>> Tak jak jsme se stavět stylů?

34
00:01:37,670 --> 00:01:39,700
Tak zaprvé, musíme
identifikovat volič.

35
00:01:39,700 --> 00:01:42,970
V posledním příkladu,
že volič bylo tělo.

36
00:01:42,970 --> 00:01:45,050
Pak máme otevřený
složená závorka, a my jsme

37
00:01:45,050 --> 00:01:48,410
chystá zahájit definování
stylesheet pro tento volič.

38
00:01:48,410 --> 00:01:51,800
Mezi složených závorek, my
stačí mít seznam klíčových párů hodnot.

39
00:01:51,800 --> 00:01:56,205
Dvojice předchozí hodnota byla
barva pozadí modré středník,

40
00:01:56,205 --> 00:01:57,830
ale my jsme mohli dělat více a více z nich.

41
00:01:57,830 --> 00:02:02,330
Ty by mohly mít několik věcí, použití
k tomu, že tag, voliče tělo.

42
00:02:02,330 --> 00:02:05,960
Každý z nich je oddělen
středník, a nazýváme každý z nich

43
00:02:05,960 --> 00:02:08,949
prohlášení, prohlášení CSS.

44
00:02:08,949 --> 00:02:12,410
Když jsme hotovi se všemi styling my
chcete použít na konkrétní značku,

45
00:02:12,410 --> 00:02:15,300
my jen mít zavírací kudrnaté
rovnátka ukončit stylů,

46
00:02:15,300 --> 00:02:19,640
a my jsme udělali definování stylů
pro tuto konkrétní volič.

47
00:02:19,640 --> 00:02:21,341
>> Jaké jsou některé běžné CSS vlastnosti?

48
00:02:21,341 --> 00:02:23,590
No, možná budete chtít dát
rámeček kolem něčeho.

49
00:02:23,590 --> 00:02:26,850
Takže můžete říct, přeshraniční,
že by se váš klíč,

50
00:02:26,850 --> 00:02:29,460
a pak se vaše hodnoty by bylo,
co styl, barva a šířka

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

52
00:02:30,209 --> 00:02:33,530
Takže styl by mohla být pevná
čára, tečkovaná čára, přerušovaná čára,

53
00:02:33,530 --> 00:02:36,020
hřeben linka, což by bylo vlnovka.

54
00:02:36,020 --> 00:02:38,790
Možná, že budete chtít mít
modrý nebo černý nebo zelený.

55
00:02:38,790 --> 00:02:41,490
Možná chcete, aby to bylo
1 nebo 2 nebo 10 pixelů.

56
00:02:41,490 --> 00:02:43,254
Můžete určit všechny ty věci.

57
00:02:43,254 --> 00:02:46,420
Možná chcete nastavit pozadí
barva vaší stránky určitým způsobem.

58
00:02:46,420 --> 00:02:49,215
Už jsme viděli, že nastavení
pozadí těla být modré.

59
00:02:49,215 --> 00:02:52,080
>> Pak můžete použít klíčové slovo,
takže CSS má určité barvy

60
00:02:52,080 --> 00:02:55,950
které jsou postaveny do něj, modrá, zelená,
černá, velmi jednoduché barvy známe.

61
00:02:55,950 --> 00:02:59,110
Ale můžete také určit jakýkoliv
Barva hex, že byste chtěli.

62
00:02:59,110 --> 00:03:05,190
Připomeňme, že barvy mohou být identifikovány
sadou tří čísel hex

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

64
00:03:08,500 --> 00:03:10,590
A tak můžeme určit,
libovolné barvy chceme by,

65
00:03:10,590 --> 00:03:15,520
namísto použití modré nebo zelené nebo černé,
použitím libru a poté šest číslic hex,

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

67
00:03:18,310 --> 00:03:19,850
Tak to je barva pozadí.

68
00:03:19,850 --> 00:03:21,975
>> Máme také popředí
barva, což je obvykle

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

70
00:03:24,140 --> 00:03:28,850
A vy jste mohli podobně udělat
s klíčovým slovem a nebo šestimístné hexadecimální.

71
00:03:28,850 --> 00:03:32,140
Takže můžete zadat jakoukoli barvu si
Chcete pro text vaší stránky

72
00:03:32,140 --> 00:03:36,370
proti konkrétnímu
barva pozadí, nahoře.

73
00:03:36,370 --> 00:03:39,100
Můžete také změnit a vypořádat se
s písmem, a způsob, jakým textem

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

75
00:03:40,400 --> 00:03:42,010
>> Takže si můžete změnit velikost písma.

76
00:03:42,010 --> 00:03:46,320
Můžete použít klíčová slova, jako je extra,
Velmi malé, nebo xx malé, nebo střední,

77
00:03:46,320 --> 00:03:47,660
velký, a tak dále.

78
00:03:47,660 --> 00:03:50,750
Můžete použít pevné body, 10
bod, velikost 12, a tak dále.

79
00:03:50,750 --> 00:03:55,850
Můžete použít procenta, 80%, 20%,
kde 100% je výchozí písmo

80
00:03:55,850 --> 00:03:59,220
velikost, který je obvykle bude
bylo něco jako 11 nebo 12 bodů.

81
00:03:59,220 --> 00:04:01,659
Nebo můžete dokonce založit ho
z poslední velikosti písma.

82
00:04:01,659 --> 00:04:04,950
Pokud jste právě něco napsal a víte,
co chcete, je pro to, aby byl menší,

83
00:04:04,950 --> 00:04:08,241
ale nevíte přesně, co velikost, kterou
chci, aby to bylo, dobře, můžete jen říci,

84
00:04:08,241 --> 00:04:09,330
velikost písma menší.

85
00:04:09,330 --> 00:04:14,344
A bude vycházet z toho,
jen nahoře, to je velikost písma.

86
00:04:14,344 --> 00:04:15,760
A můžete získat menší nebo větší.

87
00:04:15,760 --> 00:04:18,390
Takže je tu mnoho různých
způsoby, jak určit velikost písma.

88
00:04:18,390 --> 00:04:20,690
>> Můžete také určit, co
Rodina písma chcete.

89
00:04:20,690 --> 00:04:23,360
Pokud máte určitý
název, je tu způsob, jak v CSS--

90
00:04:23,360 --> 00:04:27,270
nebudeme o tom mluvit
here-- definovat velmi specifický písmo

91
00:04:27,270 --> 00:04:28,980
a vložit jej do svých stránek.

92
00:04:28,980 --> 00:04:30,620
Můžete také použít generické názvy.

93
00:04:30,620 --> 00:04:33,540
Je tu spousta bezpečné webové fonty
které jsou předem definovány v CSS.

94
00:04:33,540 --> 00:04:36,352
A pokud jste uživatelem společnosti Microsoft
Kancelář v posledních 20 letech,

95
00:04:36,352 --> 00:04:38,810
jste pravděpodobně obeznámeni s
mnoho z těchto webových bezpečných písem

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

97
00:04:44,640 --> 00:04:45,470
a tak dále.

98
00:04:45,470 --> 00:04:47,170
Ti, kteří jsou považovány za bezpečné webové fonty.

99
00:04:47,170 --> 00:04:49,169
A vlastně, součástí
důvod, proč oni přišli být

100
00:04:49,169 --> 00:04:54,140
měla být použita, aby se web-- každou stránku
měl přístup k těmto výchozí sadu písem

101
00:04:54,140 --> 00:04:58,480
s různými patkami, a to vše
font věci nebudeme dostat do,

102
00:04:58,480 --> 00:05:01,130
ale tito jsou obvykle
dostupné v CSS,

103
00:05:01,130 --> 00:05:04,029
, i když ne
jinak definovat písma.

104
00:05:04,029 --> 00:05:07,070
A konečně, můžete zarovnat text,
místo toho to být tím, že ve výchozím nastavení, sladit

105
00:05:07,070 --> 00:05:09,310
doleva, mohl byste
srovnejte ji doprava,

106
00:05:09,310 --> 00:05:13,740
nebo můžete zarovnat to na střed, nebo
odůvodněno tak, že zasáhla oba okraje.

107
00:05:13,740 --> 00:05:16,800
Takže to jsou všechny možnosti, které můžete použít
změnit to, co text vypadá,

108
00:05:16,800 --> 00:05:20,120
a jak se to zobrazí na vaší stránce.

109
00:05:20,120 --> 00:05:22,180
>> Vaše voliče ne
musí být pouze tagy.

110
00:05:22,180 --> 00:05:25,539
Již dříve jsme viděli tělo značky
volič a volič tag

111
00:05:25,539 --> 00:05:26,580
vypadá stejně jako to.

112
00:05:26,580 --> 00:05:30,020
Můžete pojmenovat značku, a pak vás
definovat stylů pro tuto značku.

113
00:05:30,020 --> 00:05:32,660
Ale můžete také udělat něco
volal selektor ID.

114
00:05:32,660 --> 00:05:34,390
Voličem ID vypadá dost podobné.

115
00:05:34,390 --> 00:05:38,100
Ale nevšiml, že teď jsem nepoužívají
tag HTML, jsem pomocí, v tomto případě,

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

117
00:05:40,720 --> 00:05:42,930
Pokud si vzpomínáte z našeho
video na HTML, mluvili jsme

118
00:05:42,930 --> 00:05:45,620
o tom, jak tagy mohou mít atributy.

119
00:05:45,620 --> 00:05:48,340
>> A jeden atribut, který se vztahuje
na skoro všechny HTML tagy,

120
00:05:48,340 --> 00:05:51,440
ale nemluvili jsme o tom,
je něco, co nazývá tag ID.

121
00:05:51,440 --> 00:05:55,250
Takže tento konkrétní CSS by
platí pouze pro HTML tagu, který má

122
00:05:55,250 --> 00:05:58,530
velmi specifická ID, které jste jmenoval.

123
00:05:58,530 --> 00:06:01,000
Takže pokud máte někde
v kódu, někde

124
00:06:01,000 --> 00:06:06,090
v souboru HTML, tag a vámi
zadat jako atribut k tomuto tagu,

125
00:06:06,090 --> 00:06:09,060
ID rovná unikátní, toto
zejména stylesheet

126
00:06:09,060 --> 00:06:15,030
Zde se bude vztahovat pouze mezi
že značka s ID jedinečný.

127
00:06:15,030 --> 00:06:17,180
>> Můžete si také udělat něco
volal volič třídy.

128
00:06:17,180 --> 00:06:19,920
Takže kromě toho, že
ID atributy, můžete také

129
00:06:19,920 --> 00:06:23,130
přidat atribut třídy do HTML tagy.

130
00:06:23,130 --> 00:06:27,140
A pokud používáte atribut třídy,
to může být použita na více značek.

131
00:06:27,140 --> 00:06:31,880
Takže pokud máte několik věcí, které
jsou podobné, možná chcete říct,

132
00:06:31,880 --> 00:06:35,890
open tag bla, bla, bla,
bla, třída se rovná studentů.

133
00:06:35,890 --> 00:06:38,190
A pak se tento konkrétní
stylesheet by se vztahovala

134
00:06:38,190 --> 00:06:42,041
na každý tag, jehož třída studentů.

135
00:06:42,041 --> 00:06:44,290
V tomto případě bychom nastavit
barvu pozadí na žlutou,

136
00:06:44,290 --> 00:06:46,706
a my bychom nastavit průhlednost, což
je tag jsme neměli mluvit,

137
00:06:46,706 --> 00:06:52,510
ale jen společnosti s tím, jak průhledné
je něco, na 70%, v tomto případě.

138
00:06:52,510 --> 00:06:54,430
>> Je tu dvě možnosti,
psaní styly.

139
00:06:54,430 --> 00:06:56,680
Můžete napsat jim
přímo do kódu HTML

140
00:06:56,680 --> 00:06:59,690
umístěním styly
mezi tagy stylu.

141
00:06:59,690 --> 00:07:03,850
A ty styl značky jít dovnitř
Hlava tagy vaše webové stránky.

142
00:07:03,850 --> 00:07:08,240
Snad pouze výhodnější způsob, jak dělat
to je napsat samostatný soubor CSS,

143
00:07:08,240 --> 00:07:12,360
a poté jej propojit do vašeho
dokument pomocí odkazů tagy.

144
00:07:12,360 --> 00:07:14,690
Link tagy, opět, jsou
se liší od hypertextových odkazů,

145
00:07:14,690 --> 00:07:16,760
Pokud si vzpomínáte z našeho videa HTML.

146
00:07:16,760 --> 00:07:19,030
A odkaz tagy jsou, jak jsme
vytáhnout do samostatných souborů.

147
00:07:19,030 --> 00:07:23,900
Je to něco jako ekvivalent
#include pro webové programování.

148
00:07:23,900 --> 00:07:27,140
>> Takže pojďme se podívat na table.HTML.

149
00:07:27,140 --> 00:07:29,380
Pokud si vzpomínáte z našeho
HTML video, jsem ukázal

150
00:07:29,380 --> 00:07:32,000
příklad velmi
jednoduché násobení

151
00:07:32,000 --> 00:07:35,160
tabulka, která vypadala dost
ošklivý, a možná tam je

152
00:07:35,160 --> 00:07:38,650
způsob, aby to lépe
CSS, aby to skutečně vypadat

153
00:07:38,650 --> 00:07:41,120
víc jako násobení
stůl, nebo něco

154
00:07:41,120 --> 00:07:43,730
že není jen slepené
s žádným skutečným rozdělením

155
00:07:43,730 --> 00:07:45,532
mezi řádky a sloupce.

156
00:07:45,532 --> 00:07:47,490
Takže pojďme přes hlavu na
CS50 IDE, a podívejte se

157
00:07:47,490 --> 00:07:50,780
na to, jak CSS může, tak nějak, štípnout
to, co jsme začali s dříve,

158
00:07:50,780 --> 00:07:53,290
a učinit z něj něco mnohem lepšího.

159
00:07:53,290 --> 00:07:55,650
>> Takže jsme v CS50 IDE
teď, a je-li neznámé,

160
00:07:55,650 --> 00:07:58,710
Dáme do toho
tabulka, která HTML stránka.

161
00:07:58,710 --> 00:08:01,090
Table.HTML v podstatě
jen definuje obsah

162
00:08:01,090 --> 00:08:05,044
standardu A multiple-- to mělo být
násobení čtyř čtyřmi stůl.

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

164
00:08:06,210 --> 00:08:09,410
A my bychom si, že by
vypadají docela dobře organizovaná.

165
00:08:09,410 --> 00:08:15,277
Ale ve skutečnosti, když jsme náhledu na tuto stránku,
vidíme, že je to trochu ošklivé, že jo?

166
00:08:15,277 --> 00:08:16,860
Jasně máme řádků a sloupců zde.

167
00:08:16,860 --> 00:08:18,350
Existuje nějaký oddělení.

168
00:08:18,350 --> 00:08:20,040
Ale není to smysluplné oddělení.

169
00:08:20,040 --> 00:08:23,105
Nejsme ve skutečnosti dostat
příliš mnoho informací zde.

170
00:08:23,105 --> 00:08:25,730
A není mezi žádné oddělení
řádků a sloupců, pokud jde

171
00:08:25,730 --> 00:08:28,460
horizontálních nebo vertikálních pravidel.

172
00:08:28,460 --> 00:08:31,530
Mohli bychom, aby to
vypadat trochu lépe.

173
00:08:31,530 --> 00:08:32,934
Takže pojďme zkusit.

174
00:08:32,934 --> 00:08:34,559
Takže budu tady uzavřít tuto záložku.

175
00:08:34,559 --> 00:08:37,434
A budu zavřu table.HTML,
a já mám jinou verzi zde

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

177
00:08:39,490 --> 00:08:40,655
Budeme otevřít, že až.

178
00:08:40,655 --> 00:08:42,530
Tělo stránky je
skoro stejné,

179
00:08:42,530 --> 00:08:44,238
ale já jsem změněn
trochu nahoře.

180
00:08:44,238 --> 00:08:47,132
A já budu posouvat tady.

181
00:08:47,132 --> 00:08:49,340
Všimněte si, že tento čas, já jsem
pomocí vložených značek styl.

182
00:08:49,340 --> 00:08:53,550
Otevřel jsem tag styl, a já jsem teď
definování CSS stylů jen uvnitř

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

184
00:08:54,310 --> 00:08:56,310
Mám seznam stylů, který říká, stůl.

185
00:08:56,310 --> 00:08:58,170
To je můj výběr tag.

186
00:08:58,170 --> 00:09:01,340
Nebudu používat tečku nebo hash,
které bych dělal, kdybych

187
00:09:01,340 --> 00:09:03,710
byl pomocí ID nebo selektor třídy.

188
00:09:03,710 --> 00:09:06,190
Mám selektoru tagů here-- tabulky.

189
00:09:06,190 --> 00:09:10,090
Tento styl se chystá
se vztahují na všechny tagu tabulky.

190
00:09:10,090 --> 00:09:14,950
Zřejmě jsem chtěl dát jeden
pixelu, pevný modrý okraj,

191
00:09:14,950 --> 00:09:15,779
Uvnitř mého stolu.

192
00:09:15,779 --> 00:09:18,320
To zní, jako by to asi
pomoci situaci, že jo?

193
00:09:18,320 --> 00:09:20,320
Budeme mít
věci vypadají mnohem lépe.

194
00:09:20,320 --> 00:09:21,190
Tak to je v pořádku.

195
00:09:21,190 --> 00:09:23,540
Stylisticky, právě jsem
vložené můj stylů zde.

196
00:09:23,540 --> 00:09:25,100
Je to jistě
přijatelný způsob, jak to udělat.

197
00:09:25,100 --> 00:09:26,391
Pojďme se podívat, jak to vypadá.

198
00:09:26,391 --> 00:09:29,790
Takže já půjdu zpátky dolů, a
Budu vám zobrazit náhled table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
No, to není přesně to, co jsem chtěl,
ale to je přesně to, co jsme žádali.

201
00:09:36,470 --> 00:09:39,530
Řekli jsme, že tento styl je
bude vztahovat k našemu stolu.

202
00:09:39,530 --> 00:09:43,810
Naše tabulka má nyní jeden pixel
široký, pevný modrý rámeček kolem něj.

203
00:09:43,810 --> 00:09:46,237
Nejsme ve skutečnosti dostat
na buňky tabulky.

204
00:09:46,237 --> 00:09:47,570
Jsme jen na to u stolu.

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

206
00:09:49,310 --> 00:09:51,890
Je aplikována
stylesheet k našemu stolu.

207
00:09:51,890 --> 00:09:53,981
Ale ne zcela dělat
to, co jsme chtěli, aby to dělat.

208
00:09:53,981 --> 00:09:55,730
Jak se dostaneme k tomu
to, co chceme, aby to udělal?

209
00:09:55,730 --> 00:09:59,287
>> Dobře, pojďme se podívat na jeden více
verze tohoto v table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Takže já jsem prostě jít zavřít tyto karty.

211
00:10:00,870 --> 00:10:03,890
Chystám se vrátit sem k mému
soubor strom, a otevřít table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Opět platí, že to bude vypadat pěkně
podobný zde na začátku.

214
00:10:10,350 --> 00:10:14,460
Ale oznámení, tentokrát, namísto použití
seznam stylů vložené přímo tam,

215
00:10:14,460 --> 00:10:18,870
Jdu spojit v
stylů pomocí značky link.

216
00:10:18,870 --> 00:10:22,480
Takže jsem zřejmě propojení v
stylů volal tables.CSS,

217
00:10:22,480 --> 00:10:25,090
a to dobře rovná
stylesheet jen means-- dobře,

218
00:10:25,090 --> 00:10:28,645
Co je tento soubor ve vztahu k tomu, co
Jsem doing-- je stylů, že jsem

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

220
00:10:29,821 --> 00:10:32,320
Takže jestli opravdu chcete vidět, co
Já dělám s CSS tady,

221
00:10:32,320 --> 00:10:35,010
Musím jít, že otevřený
table.CSS souboru stejně.

222
00:10:35,010 --> 00:10:37,490
Tak jsme se vrátím sem
Znovu k našemu souboru 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 otevřené.

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

226
00:10:43,070 --> 00:10:45,630
Zdá se, že mám pár
věci tady děje.

227
00:10:45,630 --> 00:10:48,950
Zřejmě Chci dát pět
pixelu, pevný červený okraj,

228
00:10:48,950 --> 00:10:50,287
kolem mého stolu.

229
00:10:50,287 --> 00:10:52,870
Již víme, že, co se děje
prostě jít na obvodu.

230
00:10:52,870 --> 00:10:56,180
Viděli jsme, že v table2.HTML.

231
00:10:56,180 --> 00:10:58,770
S každým řádkem I
zřejmě chcete zadat

232
00:10:58,770 --> 00:11:01,950
že výška řádku je 50 pixelů.

233
00:11:01,950 --> 00:11:05,680
Takže pro každý řádek, pamatujte
že to, co dělá tag tr,

234
00:11:05,680 --> 00:11:08,550
Dělám to 50 pixelů.

235
00:11:08,550 --> 00:11:09,804
>> Nakonec, já mám tento komentář.

236
00:11:09,804 --> 00:11:11,470
A to je to, jak děláme připomínky v CSS.

237
00:11:11,470 --> 00:11:16,174
Je to velmi podobné chytit blok
komentáře syntax lomítko hvězdu.

238
00:11:16,174 --> 00:11:17,090
Veškerý text, který chcete.

239
00:11:17,090 --> 00:11:19,470
Není lomítko lomítko ačkoli v CSS.

240
00:11:19,470 --> 00:11:23,400
U krátkých vložené komentáře, my máme
použít tento určitý formát sem.

241
00:11:23,400 --> 00:11:26,830
Vypadá to, že dělám
Spousta věcí v mých td tagy.

242
00:11:26,830 --> 00:11:29,710
Nezapomeňte td tagy nebo stolek
Údaje, které jsou opravdu jen

243
00:11:29,710 --> 00:11:32,210
sloupce vnitřek
naše řady a zřejmě

244
00:11:32,210 --> 00:11:35,090
pro každý kus dat
v mé tabulce, chci

245
00:11:35,090 --> 00:11:38,850
nastavit barvu pozadí, aby
být černé, barva být bílý,

246
00:11:38,850 --> 00:11:40,320
barva je barva popředí.

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

248
00:11:42,360 --> 00:11:45,140
Chci velký font, 22
bod písmo, a já chci

249
00:11:45,140 --> 00:11:47,001
to být z rodiny fontů, Georgia.

250
00:11:47,001 --> 00:11:48,750
Takže já nebudu
mají výchozí písmo.

251
00:11:48,750 --> 00:11:51,820
Chystám se určit, Gruzie, který
je jedním z těch bezpečné webové fonty

252
00:11:51,820 --> 00:11:53,830
že jsme neviděli.

253
00:11:53,830 --> 00:11:57,284
Chci také text, který bude zarovnán
centrálně, ve středu pole,

254
00:11:57,284 --> 00:11:59,450
Nechci, aby se doleva
zarovnány nebo doprava zarovnán.

255
00:11:59,450 --> 00:12:03,461
A Chci šířky sloupce
se na 50 pixelů, stejně.

256
00:12:03,461 --> 00:12:05,210
Pojďme se podívat na
jak to vypadá,

257
00:12:05,210 --> 00:12:07,470
a zjistit, jestli je to možná zlepšení.

258
00:12:07,470 --> 00:12:12,890
Takže já jdu na table3.HTML, který
Vzpomeňte si, zahrnuje table.CSS jako odkaz,

259
00:12:12,890 --> 00:12:14,830
a my náhledu.

260
00:12:14,830 --> 00:12:16,800
To je mnohem lepší, že jo?

261
00:12:16,800 --> 00:12:20,004
To je vlastně začíná vypadat
víc jako násobilku.

262
00:12:20,004 --> 00:12:21,920
Mám ten červený rámeček
kolem mého stolu, ale teď

263
00:12:21,920 --> 00:12:26,700
Také jsem upřesnil, že
každý řádek je 50 pixelů,

264
00:12:26,700 --> 00:12:30,220
nebo je to 50 pixelů tall-- výmluva
me-- každý sloupec je 50 pixelů.

265
00:12:30,220 --> 00:12:34,251
Data v každém sloupci, a to pouze
data, má černé pozadí.

266
00:12:34,251 --> 00:12:36,000
Takže to je důvod, proč ti,
bílé čáry jsou tam.

267
00:12:36,000 --> 00:12:38,836
Vzhledem k tomu, prostor v
mezi všemi z těchto buněk,

268
00:12:38,836 --> 00:12:40,710
není to v pohraniční
samo o sobě, je to jen

269
00:12:40,710 --> 00:12:43,170
Jsem vyplnění pouze ve
buňky, které ve skutečnosti

270
00:12:43,170 --> 00:12:46,310
činí hranice tabulky, které
zřejmě existují po celou dobu, to

271
00:12:46,310 --> 00:12:47,887
byl jen tenké bílé čáry.

272
00:12:47,887 --> 00:12:48,720
Nyní jsou viditelné.

273
00:12:48,720 --> 00:12:50,380
Teď se pop off na obrazovce.

274
00:12:50,380 --> 00:12:52,920
A tak to je velmi jednoduchý
stylesheet, že jsem se aplikuje,

275
00:12:52,920 --> 00:12:56,850
a teď můj stůl vypadá hodně více jako
čtyři čtyřmi násobilka,

276
00:12:56,850 --> 00:13:00,950
místo jen neuspořádané nepořádek, kde
Vše je přehledně řádků a sloupců,

277
00:13:00,950 --> 00:13:03,717
ale ne mimořádně dobře organizovaná.

278
00:13:03,717 --> 00:13:06,800
Jsme opravdu jen poškrábání povrchu
o tom, co můžete dělat s CSS sem.

279
00:13:06,800 --> 00:13:10,330
Naštěstí dokumentace CSS
je velice jednoduché.

280
00:13:10,330 --> 00:13:14,000
Budete používat několik jeho
atributy, poměrně často.

281
00:13:14,000 --> 00:13:16,087
Ty, které jsme mluvili o
dříve v tomto videu.

282
00:13:16,087 --> 00:13:18,170
Existuje několik, které vás
pravděpodobně nebude používat vůbec.

283
00:13:18,170 --> 00:13:19,469
A to je v pořádku, taky.

284
00:13:19,469 --> 00:13:22,010
Ale vím, že je tu
spousta dokumentace venku.

285
00:13:22,010 --> 00:13:25,110
Takže i když jsme neměli pokrýt všechno,
jste jistě ne odešel na vlastní pěst.

286
00:13:25,110 --> 00:13:26,780
Ale CSS je opravdu zábava
experimentovat s.

287
00:13:26,780 --> 00:13:29,040
A já bych silně doporučuji
hrát si s vaší webové stránky,

288
00:13:29,040 --> 00:13:32,180
a uvidíte, jak můžete udělat je
vypadat a cítit se zlepšit uživatele

289
00:13:32,180 --> 00:13:34,790
zážitek z návštěvy své stránky.

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

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

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