1
00:00:00,000 --> 00:00:05,660
>> [Muzikos grojimo]

2
00:00:05,660 --> 00:00:08,740
>> Doug LLOYD: Taigi galime imtis dar vieną
vaizdo kalbėti apie dar vieną kalbą.

3
00:00:08,740 --> 00:00:10,800
Šį kartą mes kalbame apie CSS.

4
00:00:10,800 --> 00:00:13,460
Taigi CSS, kuris yra trumpas
Kaskadiniai stiliai,

5
00:00:13,460 --> 00:00:16,149
yra kita kalba, mes naudojame
statant svetainėse.

6
00:00:16,149 --> 00:00:17,190
Pagalvokite apie tai, kaip šis.

7
00:00:17,190 --> 00:00:20,900
Jeigu HTML yra tai, ką mes naudojame organizuoti
turinys norime įdėti mūsų puslapyje,

8
00:00:20,900 --> 00:00:25,390
CSS yra priemonė, kuri mes paprastai naudoti
tinkinti, kaip mūsų svetainės išvaizda,

9
00:00:25,390 --> 00:00:30,410
ir kaip vartotojas patirtis tikrai
yra, bendrauja su mūsų svetainėje.

10
00:00:30,410 --> 00:00:32,535
>> Panašus į HTML, CSS
nėra programavimo kalba.

11
00:00:32,535 --> 00:00:33,451
Ji neturi logikos.

12
00:00:33,451 --> 00:00:34,595
Ji neturi kintamuosius.

13
00:00:34,595 --> 00:00:38,890
Ji neturi jokio tokio pobūdžio
srautai, susiję dalykų, C Ar.

14
00:00:38,890 --> 00:00:40,150
Tai stilius, kalba.

15
00:00:40,150 --> 00:00:42,810
Ir jos sintaksė yra gana
paprastas, ir tik aprašo

16
00:00:42,810 --> 00:00:46,240
kaip jų elementų mūsų
puslapis turi tam tikrų HTML

17
00:00:46,240 --> 00:00:48,190
elementai turi būti iš dalies pakeistas.

18
00:00:48,190 --> 00:00:51,170
Siekiant šio tikslo, jei turite ne
dar stebėjo mūsų vaizdo HTML,

19
00:00:51,170 --> 00:00:53,290
ar yra susipažinę su
HTML Apskritai, jūs

20
00:00:53,290 --> 00:00:57,430
gali norėti imtis Tuo išvaizdą
Pirma, dėl to šis CSS diskusija

21
00:00:57,430 --> 00:01:00,700
ketina priklausyti nuo
kai HTML žinių.

22
00:01:00,700 --> 00:01:03,740
>> Taigi čia tikrai
paprastas CSS stilių.

23
00:01:03,740 --> 00:01:06,480
Net jei jūs niekada
prieš užprogramuotas su CSS,

24
00:01:06,480 --> 00:01:10,624
Aš esu gana įsitikinęs, galite išsiaiškinti,
ką tai stilių daro.

25
00:01:10,624 --> 00:01:11,290
Ką tai daro?

26
00:01:11,290 --> 00:01:15,470
Na, kreipėsi į mūsų interneto kūno
puslapis, viskas tarp kūno žymės

27
00:01:15,470 --> 00:01:19,631
Mūsų HTML, ir jame nustato
fono spalva tame puslapyje į mėlyną.

28
00:01:19,631 --> 00:01:21,130
Na, tai labai paprasta stilių.

29
00:01:21,130 --> 00:01:23,269
Tai tikrai labai žmogiškas
suprantama kalba, CSS.

30
00:01:23,269 --> 00:01:26,560
Taigi, net jei jūs niekada naudojo jį anksčiau,
tikriausiai galėjo atspėti, kas tai padarė.

31
00:01:26,560 --> 00:01:30,140
Iš tiesų, jei mes pakrautas puslapyje, kur
Ši stilių buvo įdėta kažkaip,

32
00:01:30,140 --> 00:01:36,240
fono spalva mūsų puslapyje būtų
būti mėlynos, ir ne standartinis baltas.

33
00:01:36,240 --> 00:01:37,670
>> Taigi, kaip mes sukurti stilių?

34
00:01:37,670 --> 00:01:39,700
Na pirma, mes turime
nustatyti rankenėlę.

35
00:01:39,700 --> 00:01:42,970
Pastarąjį Pavyzdžiui,
kad selektorius buvo kūnas.

36
00:01:42,970 --> 00:01:45,050
Tada mes turime atvirą
garbanotas petnešomis, ir mes

37
00:01:45,050 --> 00:01:48,410
ketina pradėti apibrėždama
Stilių tos selektorių.

38
00:01:48,410 --> 00:01:51,800
Tarp garbanotas petnešos, mes
Tiesiog pagrindinių verčių porų sąrašą.

39
00:01:51,800 --> 00:01:56,205
Ankstesnis vertė pora buvo
fono spalva mėlyna kabliataškis,

40
00:01:56,205 --> 00:01:57,830
bet mes galime padaryti daugiau ir daugiau iš jų.

41
00:01:57,830 --> 00:02:02,330
Jūs galite turėti kelis dalykus taikant
tai tegus, tuo selektoriaus kūno.

42
00:02:02,330 --> 00:02:05,960
Kiekvienas, vienas iš jų atskiriami panaudojant
kabliataškis, ir mes vadiname kiekvienas iš jų

43
00:02:05,960 --> 00:02:08,949
deklaraciją, CSS deklaracija.

44
00:02:08,949 --> 00:02:12,410
Kai baigsime su visais stiliaus mes
noriu kreiptis į tos konkrečios žymeles,

45
00:02:12,410 --> 00:02:15,300
mes tiesiog uždarymo garbanotas
petnešomis baigti stilių,

46
00:02:15,300 --> 00:02:19,640
ir mes padaryta apibrėžiant stilių
kad ypač selektorių.

47
00:02:19,640 --> 00:02:21,341
>> Kokie yra keletas bendrų CSS savybės?

48
00:02:21,341 --> 00:02:23,590
Na, gal jūs norite įdėti
aplink kažką siena.

49
00:02:23,590 --> 00:02:26,850
Taigi galima sakyti, sienų,
kad būtų jūsų raktas,

50
00:02:26,850 --> 00:02:29,460
ir tada jūsų vertybės turėtų būti
kokio stiliaus, spalvos ir pločio

51
00:02:29,460 --> 00:02:30,209
norite, kad ji būtų.

52
00:02:30,209 --> 00:02:33,530
Taigi stilius gali būti kietas
linija, punktyrinė linija, punktyrinė linija,

53
00:02:33,530 --> 00:02:36,020
vagos linija, kuri būtų banguota linija.

54
00:02:36,020 --> 00:02:38,790
Gal norite, kad jis būtų
būti mėlynos arba juodos arba žalios spalvos.

55
00:02:38,790 --> 00:02:41,490
Gal norite, kad ji būtų
1 arba 2 arba 10 pikselių pločio.

56
00:02:41,490 --> 00:02:43,254
Galite nurodyti visų šių dalykų.

57
00:02:43,254 --> 00:02:46,420
Gal norite nustatyti foną
spalva jūsų puslapyje tam tikru būdu.

58
00:02:46,420 --> 00:02:49,215
Mes jau matėme, kad nustatydama
fonas kūne yra mėlyna.

59
00:02:49,215 --> 00:02:52,080
>> Tada galite naudoti pagrindinį žodį,
taip CSS turi tam tikrų spalvų

60
00:02:52,080 --> 00:02:55,950
kad yra pastatytas į jį, mėlyna, žalia,
juoda, labai paprastas spalvos žinome.

61
00:02:55,950 --> 00:02:59,110
Bet taip pat galite nurodyti, kokios
Hex spalvų, kad jūs norite.

62
00:02:59,110 --> 00:03:05,190
Prisiminkite, kad spalvos gali būti identifikuotas
iki trejų HEX skaičių rinkinys

63
00:03:05,190 --> 00:03:08,500
nuo 0 iki 255, RG ir B į
raudona, žalia ir mėlyna komponentas.

64
00:03:08,500 --> 00:03:10,590
Ir taip mes galime nurodyti
bet kokios spalvos norime BY,

65
00:03:10,590 --> 00:03:15,520
o ne naudojant mėlyna arba žalia ar juoda,
naudojant svaro ir tada šeši skaitmenys hex,

66
00:03:15,520 --> 00:03:18,310
ir kad duos mums
šešių skaitmenų spalva.

67
00:03:18,310 --> 00:03:19,850
Taigi, kad fono spalva.

68
00:03:19,850 --> 00:03:21,975
>> Mes taip pat turime įgytas žinias
spalva, kuri paprastai

69
00:03:21,975 --> 00:03:24,140
bus jūsų puslapyje tekstas.

70
00:03:24,140 --> 00:03:28,850
Ir jūs taip pat galėtų padaryti, kad
su raktinį žodį ir ar šešių skaitmenų hex.

71
00:03:28,850 --> 00:03:32,140
Taigi, galite nurodyti, kokios spalvos jums
nori už savo puslapio tekste

72
00:03:32,140 --> 00:03:36,370
prieš ypač
fono spalva, iki viršaus.

73
00:03:36,370 --> 00:03:39,100
Jūs taip pat galite pakeisti ir kovoti
su šriftu, ir kaip tekstą

74
00:03:39,100 --> 00:03:40,400
atvaizduojant puslapyje.

75
00:03:40,400 --> 00:03:42,010
>> Taigi jūs galite pakeisti šrifto dydį.

76
00:03:42,010 --> 00:03:46,320
Jūs galite naudoti raktinius žodžius, pavyzdžiui, papildomų,
Papildomas mažas, arba xx mažas, ar vidutinis,

77
00:03:46,320 --> 00:03:47,660
didelis, ir taip toliau.

78
00:03:47,660 --> 00:03:50,750
Galite naudoti fiksuotų taškų, 10
punkto, 12 punkto, ir taip toliau.

79
00:03:50,750 --> 00:03:55,850
Galite naudoti procentus, 80%, 20%,
kur 100% yra Numatytasis šrifto

80
00:03:55,850 --> 00:03:59,220
dydis, kuris paprastai vyksta
būti kažkas panašaus į 11 ar 12 taškų.

81
00:03:59,220 --> 00:04:01,659
Arba galite net grįsti jį išjungti
naujausio šrifto dydžio.

82
00:04:01,659 --> 00:04:04,950
Jei tiesiog parašė kažką ir jūs žinote,
ką norite, kad jis būtų mažesnis,

83
00:04:04,950 --> 00:04:08,241
bet jūs tiksliai nežinote, kokio dydžio jums
noriu, kad ji būtų gerai, galite tiesiog pasakyti,

84
00:04:08,241 --> 00:04:09,330
šrifto dydis mažesnis.

85
00:04:09,330 --> 00:04:14,344
Ir tai bus grįsti off,
tik iki viršaus, tai šrifto dydį.

86
00:04:14,344 --> 00:04:15,760
Ir jūs galite gauti mažesnis arba didesnis.

87
00:04:15,760 --> 00:04:18,390
Taigi ten yra kitoks daug
būdų, kaip nurodyti šrifto dydį.

88
00:04:18,390 --> 00:04:20,690
>> Jūs taip pat galite nurodyti, ką
šrifto šeima norite.

89
00:04:20,690 --> 00:04:23,360
Jei turite ypač
vardas, ten yra būdas CSS--

90
00:04:23,360 --> 00:04:27,270
mes neketiname kalbėti apie tai
here-- apibrėžti labai konkrečią šriftą

91
00:04:27,270 --> 00:04:28,980
ir įdėti jį į savo puslapį.

92
00:04:28,980 --> 00:04:30,620
Taip pat galite naudoti bendrinius pavadinimus.

93
00:04:30,620 --> 00:04:33,540
Yra interneto saugaus šriftų daug
, kurie yra iš anksto apibrėžta CSS.

94
00:04:33,540 --> 00:04:36,352
Ir jei esate "Microsoft vartotojas
Biuro per pastaruosius 20 metų,

95
00:04:36,352 --> 00:04:38,810
jūs tikriausiai susipažinęs su
iš šių interneto saugių šriftų daug

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

97
00:04:44,640 --> 00:04:45,470
ir taip toliau.

98
00:04:45,470 --> 00:04:47,170
Tie, kurie visi laikomi interneto saugios šriftai.

99
00:04:47,170 --> 00:04:49,169
Ir iš tiesų, dalis
Todėl jie atėjo būti

100
00:04:49,169 --> 00:04:54,140
turėjo būti naudojamos siekiant padaryti web-- kiekvieną puslapį
turėjo galimybę susipažinti su šio Numatyta rinkinys šriftų

101
00:04:54,140 --> 00:04:58,480
su įvairiais serifs, ir visa tai
šrifto dalykų mes ne gauti į,

102
00:04:58,480 --> 00:05:01,130
bet paprastai jie yra
prieinama jūsų CSS,

103
00:05:01,130 --> 00:05:04,029
net jei jūs neturite
kitaip apibrėžti šriftus.

104
00:05:04,029 --> 00:05:07,070
Galiausiai, jūs galite išlygiuoti tekstą,
vietoj jis yra, pagal nutylėjimą, suderinta

105
00:05:07,070 --> 00:05:09,310
į kairę, galima
suderinti jį į dešinę,

106
00:05:09,310 --> 00:05:13,740
ar galima jį suderinti centre arba
pateisinama, kad jis nukentėjo abi paraštes.

107
00:05:13,740 --> 00:05:16,800
Taigi tie, kurie visi duomenys, kuriuos galite naudoti
pakeisti tai, ką jūsų tekstas atrodo,

108
00:05:16,800 --> 00:05:20,120
ir kaip jis rodomas jūsų puslapyje.

109
00:05:20,120 --> 00:05:22,180
>> Jūsų selektoriai ne
turi būti tik žymes.

110
00:05:22,180 --> 00:05:25,539
Mes anksčiau pamačiau kūno žymą
selektorių ir tegus selektorių

111
00:05:25,539 --> 00:05:26,580
ar atrodo kaip kad.

112
00:05:26,580 --> 00:05:30,020
Jūs vadinate žymą, ir tada jūs
apibrėžti šios žymės stilių.

113
00:05:30,020 --> 00:05:32,660
Bet jūs taip pat galite padaryti ką nors
vadinamas ID selektorių.

114
00:05:32,660 --> 00:05:34,390
ID selektorių atrodo gana panašūs.

115
00:05:34,390 --> 00:05:38,100
Tačiau pastebėti, kad dabar aš ne naudoti
HTML tegus, aš naudoju, šiuo atveju,

116
00:05:38,100 --> 00:05:40,720
#unique arba maišos unikalus.

117
00:05:40,720 --> 00:05:42,930
Jei prisimenate iš mūsų
Vaizdo HTML, mes kalbėjome

118
00:05:42,930 --> 00:05:45,620
apie tai, kaip žymės gali turėti atributus.

119
00:05:45,620 --> 00:05:48,340
>> Ir vienas atributas, kuri taikoma
kad beveik visi HTML žymes

120
00:05:48,340 --> 00:05:51,440
bet mes ne apie tai kalbėti,
yra kažkas vadinamas ID tegus.

121
00:05:51,440 --> 00:05:55,250
Taigi tai ypač CPT
taikoma tik HTML tegus, kad turi

122
00:05:55,250 --> 00:05:58,530
labai specifinė ID, kad jūs pavadinimu.

123
00:05:58,530 --> 00:06:01,000
Taigi, jei turite kažkur
Jūsų kodas, kažkur

124
00:06:01,000 --> 00:06:06,090
Jūsų HTML failą, žymos ir jums
nurodyti, kaip į šią žymę atributas,

125
00:06:06,090 --> 00:06:09,060
ID lygus unikalus, tai
ypač stilių

126
00:06:09,060 --> 00:06:15,030
čia bus taikomos tik tarp
kad tegus su unikalus ID.

127
00:06:15,030 --> 00:06:17,180
>> Jūs taip pat galite padaryti ką nors
vadinamas klasės selektorių.

128
00:06:17,180 --> 00:06:19,920
Taigi, be turintys
ID atributus, taip pat galite

129
00:06:19,920 --> 00:06:23,130
pridėti klasės atributą HTML žymes.

130
00:06:23,130 --> 00:06:27,140
Ir, kai jūs naudojate klasės atributą,
jis gali būti taikomas kelis žodžius.

131
00:06:27,140 --> 00:06:31,880
Taigi, jei turite keletą dalykų, kad
yra panašūs, gal norite pasakyti,

132
00:06:31,880 --> 00:06:35,890
atvira žyma bla, bla, bla,
bla, klasės lygi studentams.

133
00:06:35,890 --> 00:06:38,190
Ir tai ypač
Stilių būtų taikoma

134
00:06:38,190 --> 00:06:42,041
kiekvienam žyma, kurio klasė yra studentai.

135
00:06:42,041 --> 00:06:44,290
Šiuo atveju, mes reikia nustatyti
fono spalva geltona,

136
00:06:44,290 --> 00:06:46,706
ir mes norime nustatyti neskaidrumo, kuris
yra žyma mes ne kalbėti apie,

137
00:06:46,706 --> 00:06:52,510
bet tik susijusi su kaip skaidrus
kažkas yra, iki 70%, ir šiuo atveju.

138
00:06:52,510 --> 00:06:54,430
>> Yra du variantai
Rašymo Stiliai.

139
00:06:54,430 --> 00:06:56,680
Jūs galite juos rašyti
tiesiai į HTML

140
00:06:56,680 --> 00:06:59,690
pateikdamas stilių
tarp stiliaus žymes.

141
00:06:59,690 --> 00:07:03,850
Ir tie stiliaus žymės eiti viduje
galvos žymės jūsų tinklalapį.

142
00:07:03,850 --> 00:07:08,240
Bene daugiau pageidaujamą būdas tai padaryti
tai parašyti atskirą CSS failą,

143
00:07:08,240 --> 00:07:12,360
ir tada susieti jį į savo
dokumentuoti naudojant nuorodą žymes.

144
00:07:12,360 --> 00:07:14,690
Link žodžius, vėlgi, yra
skiriasi nuo hipersaitus,

145
00:07:14,690 --> 00:07:16,760
Jei prisimenate iš mūsų vaizdo HTML.

146
00:07:16,760 --> 00:07:19,030
Ir susieti žymės yra tai, kaip mes
traukti į atskirus failus.

147
00:07:19,030 --> 00:07:23,900
Tai tarsi kaip lygiaverčių
už interneto programavimo #include.

148
00:07:23,900 --> 00:07:27,140
>> Taigi leiskite pažvelgti table.HTML išvaizdą.

149
00:07:27,140 --> 00:07:29,380
Jei prisimenate iš mūsų
HTML Vaizdo, aš parodžiau

150
00:07:29,380 --> 00:07:32,000
AN labai pavyzdys
paprasta daugyba

151
00:07:32,000 --> 00:07:35,160
stalo, kad atrodė gana
negraži, o gal ten

152
00:07:35,160 --> 00:07:38,650
būdas padaryti tai geriau su
CSS, kad ji iš tikrųjų atrodo

153
00:07:38,650 --> 00:07:41,120
daugiau kaip daugybos
lentelė, ar kažkas

154
00:07:41,120 --> 00:07:43,730
kad yra ne tik suklijuoti
be faktinio skyriaus

155
00:07:43,730 --> 00:07:45,532
tarp eilučių ir stulpelių.

156
00:07:45,532 --> 00:07:47,490
Taigi leiskite per galvą
CS50 IDE, ir pažvelgti

157
00:07:47,490 --> 00:07:50,780
tuo, kaip CSS gali, rūšiuoti, įgnybti
ką mes prieš prasidėjo,

158
00:07:50,780 --> 00:07:53,290
ir padaryti jį kažkas daug geriau.

159
00:07:53,290 --> 00:07:55,650
>> Taigi mes į CS50 IDE
dabar, ir, jei nepažįstamas,

160
00:07:55,650 --> 00:07:58,710
mes atsigriebti tai
stalas, HTML puslapis.

161
00:07:58,710 --> 00:08:01,090
Table.HTML esmės
tik apibrėžia turinį

162
00:08:01,090 --> 00:08:05,044
Kurių multiple-- ji turėjo būti
keturių iki keturių daugybos lentelė.

163
00:08:05,044 --> 00:08:06,210
Tai gana paprasta.

164
00:08:06,210 --> 00:08:09,410
Ir mes manome, kad tai būtų
atrodo gana gerai organizuotas.

165
00:08:09,410 --> 00:08:15,277
Bet iš tikrųjų, kai mes peržiūrėti šį puslapį,
matome, kad tai tipo negraži, tiesa?

166
00:08:15,277 --> 00:08:16,860
Aišku, mes turime eilutes ir stulpelius čia.

167
00:08:16,860 --> 00:08:18,350
Yra keletas atskyrimo rūšiuoti.

168
00:08:18,350 --> 00:08:20,040
Bet tai nėra prasmingas atskyrimas.

169
00:08:20,040 --> 00:08:23,105
Mes ne faktiškai gauti
per daug informacijos čia.

170
00:08:23,105 --> 00:08:25,730
Ir nėra atskyrimas
eilutės ir stulpeliai sąlygas

171
00:08:25,730 --> 00:08:28,460
Horizontaliųjų arba vertikaliųjų taisyklių.

172
00:08:28,460 --> 00:08:31,530
Mes turbūt galėtų padaryti šį
atrodo šiek tiek geriau.

173
00:08:31,530 --> 00:08:32,934
Taigi pabandykime.

174
00:08:32,934 --> 00:08:34,559
Taigi, aš ruošiuosi uždaryti šį skirtuką čia.

175
00:08:34,559 --> 00:08:37,434
Ir aš ruošiuosi uždaryti savo table.HTML,
ir aš turiu kitą versiją čia

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

177
00:08:39,490 --> 00:08:40,655
Mes atidaryti, kad iki.

178
00:08:40,655 --> 00:08:42,530
"Puslapio, kūnas yra
beveik tas pats,

179
00:08:42,530 --> 00:08:44,238
bet aš pasikeitė
šiek tiek viršuje.

180
00:08:44,238 --> 00:08:47,132
Ir aš slinkite aukštyn čia.

181
00:08:47,132 --> 00:08:49,340
Atkreipkite dėmesį, kad šį kartą, aš
naudojant įterptųjų stiliaus žymes.

182
00:08:49,340 --> 00:08:53,550
Aš atidarė stiliaus tag, ir aš dabar
apibrėžti CSS stilių tik viduje

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

184
00:08:54,310 --> 00:08:56,310
Turiu stilių, kuris sako, stalą.

185
00:08:56,310 --> 00:08:58,170
Štai mano tegus selektorių.

186
00:08:58,170 --> 00:09:01,340
Nesu naudojant taškas arba maišos,
kurios aš norėčiau daryti, jei aš

187
00:09:01,340 --> 00:09:03,710
buvo naudojant ID arba A klasės jungiklį.

188
00:09:03,710 --> 00:09:06,190
Turiu žymą pasirinkimo here-- lentelę.

189
00:09:06,190 --> 00:09:10,090
Šis stilius ketina
taikomi kiekvieno stalo žyma.

190
00:09:10,090 --> 00:09:14,950
Matyt aš noriu įdėti vieną
pixel pločio, kietas mėlynos sienos,

191
00:09:14,950 --> 00:09:15,779
viduje mano stalo.

192
00:09:15,779 --> 00:09:18,320
Tai skamba kaip ji tikriausiai
padėti situaciją, tiesa?

193
00:09:18,320 --> 00:09:20,320
Mes ketiname turėti
viskas atrodo daug geriau.

194
00:09:20,320 --> 00:09:21,190
Taigi tai yra gerai.

195
00:09:21,190 --> 00:09:23,540
Stilistiškai, aš tiesiog
integruotas mano stilių čia.

196
00:09:23,540 --> 00:09:25,100
Tai neabejotinai
priimtinas būdas tai padaryti.

197
00:09:25,100 --> 00:09:26,391
Pažiūrėkime, ką tai atrodo.

198
00:09:26,391 --> 00:09:29,790
Taigi, aš eisiu atgal čia, ir
Aš bus peržiūrėti savo table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Na, tai ne visai tai, ką aš norėjau,
bet tai yra būtent tai, ką mes paprašė.

201
00:09:36,470 --> 00:09:39,530
Mes sakė, kad šis stilius yra
ketina kreiptis į mūsų stalo.

202
00:09:39,530 --> 00:09:43,810
Mūsų stalo dabar turi vieną pikselį
pločio, kietas mėlynos sienos aplink jį.

203
00:09:43,810 --> 00:09:46,237
Mes ne faktiškai gauti
Prie stalo ląsteles.

204
00:09:46,237 --> 00:09:47,570
Užtenka tik gauti prie stalo.

205
00:09:47,570 --> 00:09:49,310
Taigi CSS dirbo.

206
00:09:49,310 --> 00:09:51,890
Jis taikomas
Stilių mūsų stalo.

207
00:09:51,890 --> 00:09:53,981
Bet ne visai tai
ką mes norėjome tai daryti.

208
00:09:53,981 --> 00:09:55,730
Kaip mes gauname tai padaryti
tai, ką mes norime, kad ji daryti?

209
00:09:55,730 --> 00:09:59,287
>> Na, tegul pažvelgti dar vienas
versija tai table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Taigi, aš tik ketina uždaryti šiuos skirtukus.

211
00:10:00,870 --> 00:10:03,890
Aš ruošiuosi eiti atgal per čia mano
byla medį, ir atverti table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Vėlgi, tai vyksta atrodyti gana
panašus čia pradžioje.

214
00:10:10,350 --> 00:10:14,460
Tačiau pastebėkite, šį kartą, o ne naudojant
stilių, integruotas į dešinę ten,

215
00:10:14,460 --> 00:10:18,870
Aš ruošiuosi grandis
Stilių naudojant link tag.

216
00:10:18,870 --> 00:10:22,480
Taigi, aš, matyt, susiejimas A
Stilių vadinamas tables.CSS,

217
00:10:22,480 --> 00:10:25,090
ir tai gerai lygus
Stilių tik means-- gerai,

218
00:10:25,090 --> 00:10:28,645
kas tai yra byla, palyginti su tai, ką
Aš doing-- yra stilių, kad aš

219
00:10:28,645 --> 00:10:29,821
naudojant mano puslapyje.

220
00:10:29,821 --> 00:10:32,320
Taigi, jei aš tikrai noriu pamatyti, kas
Darau su CSS čia

221
00:10:32,320 --> 00:10:35,010
Man reikia eiti atvira, kad
table.CSS byla taip pat.

222
00:10:35,010 --> 00:10:37,490
Taigi mes grįžti per čia
vėl mūsų failų medį.

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

224
00:10:38,660 --> 00:10:40,490
Mes pop jį atidaryti.

225
00:10:40,490 --> 00:10:43,070
Dabar mes matome šiek tiek CSS.

226
00:10:43,070 --> 00:10:45,630
Matyt, turiu pora
dalykų vyksta čia.

227
00:10:45,630 --> 00:10:48,950
Aš, matyt, norite įdėti penkių
pixel pločio, kietas raudonas kraštelis,

228
00:10:48,950 --> 00:10:50,287
aplink mano stalo.

229
00:10:50,287 --> 00:10:52,870
Mes jau žinome, kad vyksta
tiesiog eiti perimetrą.

230
00:10:52,870 --> 00:10:56,180
Mes matėme, kad table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Su kiekvienu iš eilės, aš
matyt norite nurodyti

232
00:10:58,770 --> 00:11:01,950
kad eilutė aukštis yra 50 pikselių aukščio.

233
00:11:01,950 --> 00:11:05,680
Taigi kiekvienoje eilutėje, nepamirškite
kad tai, ką TR žyma nėra,

234
00:11:05,680 --> 00:11:08,550
Aš todėl 50 pikselių aukščio.

235
00:11:08,550 --> 00:11:09,804
>> Galiausiai, turiu šį komentarą.

236
00:11:09,804 --> 00:11:11,470
Ir tai, kaip mes darome komentarus CSS.

237
00:11:11,470 --> 00:11:16,174
Tai labai panašus į areštuoti blokas
komentarai sintaksė velniop žvaigždė.

238
00:11:16,174 --> 00:11:17,090
Visi įrašai norite.

239
00:11:17,090 --> 00:11:19,470
Nėra velniop velniop nors CSS.

240
00:11:19,470 --> 00:11:23,400
Dėl trumpų inline komentarus, mes turime
Čia naudoti šį konkretų formatą.

241
00:11:23,400 --> 00:11:26,830
Atrodo, Darau
daug dalykų mano TD žymes.

242
00:11:26,830 --> 00:11:29,710
Įsiminti TD žymeles, ar stalo
duomenys, kurie iš tikrųjų yra tik

243
00:11:29,710 --> 00:11:32,210
viduje stulpelių
Mūsų eilutės, ir, matyt,

244
00:11:32,210 --> 00:11:35,090
kiekvieno duomenų gabalas
mano stalo, noriu

245
00:11:35,090 --> 00:11:38,850
nustatyti fono spalvą
juoda, spalva turi būti balta,

246
00:11:38,850 --> 00:11:40,320
spalva yra įgyta spalva.

247
00:11:40,320 --> 00:11:42,360
Taigi tai bus
mano puslapyje tekstas.

248
00:11:42,360 --> 00:11:45,140
Noriu didelis šriftą, 22
atkreipti šriftą, ir aš noriu

249
00:11:45,140 --> 00:11:47,001
kad ji būtų iš šriftų, Gruzija.

250
00:11:47,001 --> 00:11:48,750
Taigi, aš nesiruošia
turi numatytąjį šriftą.

251
00:11:48,750 --> 00:11:51,820
Aš ruošiuosi nurodyti Gruziją, kuri
yra viena iš tų interneto saugių šriftų

252
00:11:51,820 --> 00:11:53,830
kad mes matėme anksčiau.

253
00:11:53,830 --> 00:11:57,284
Aš noriu, kad mano tekstas būtų suderintas
centralizuotai, viduryje akių,

254
00:11:57,284 --> 00:11:59,450
Aš nenoriu, kad ji turi būti palikta
suderinta arba į dešinę suderinti.

255
00:11:59,450 --> 00:12:03,461
Ir aš noriu, kad mano stulpelio plotį
būti 50 pikselių pločio, taip pat.

256
00:12:03,461 --> 00:12:05,210
Paimkime pažvelgti
ką tai atrodo,

257
00:12:05,210 --> 00:12:07,470
ir pamatyti, jei tai gal pagerėjimas.

258
00:12:07,470 --> 00:12:12,890
Taigi, aš ruošiuosi eiti į table3.HTML, kuris
Prisiminkite, apima table.CSS kaip nuoroda,

259
00:12:12,890 --> 00:12:14,830
ir mes jį peržiūrėti.

260
00:12:14,830 --> 00:12:16,800
Tai daug geriau, tiesa?

261
00:12:16,800 --> 00:12:20,004
Tai iš tikrųjų pradeda atrodyti
Daug daugiau kaip daugybos lentelę.

262
00:12:20,004 --> 00:12:21,920
Turiu tą raudoną sieną
aplink mano stalo, bet dabar

263
00:12:21,920 --> 00:12:26,700
Aš taip pat nurodyta, kad
Kiekvienoje eilutėje yra 50 pikselių pločio,

264
00:12:26,700 --> 00:12:30,220
ar tai 50 taškų tall-- pasiteisinimas
me-- kiekviename stulpelyje yra 50 pikselių pločio.

265
00:12:30,220 --> 00:12:34,251
Kiekvienos skilties duomenys, ir tik
duomenys, turi juodą foną.

266
00:12:34,251 --> 00:12:36,000
Štai kodėl tie
baltos linijos yra ten.

267
00:12:36,000 --> 00:12:38,836
Kadangi kosmose
tarp visų tų ląstelių,

268
00:12:38,836 --> 00:12:40,710
tai ne į sieną
ir pati, tai tik

269
00:12:40,710 --> 00:12:43,170
Aš tik pildant į
ląstelės, kurios iš tikrųjų

270
00:12:43,170 --> 00:12:46,310
daro lentelės sienas, kurios
matyt, egzistuoja visi kartu, tai

271
00:12:46,310 --> 00:12:47,887
buvo tik plonos baltos linijos.

272
00:12:47,887 --> 00:12:48,720
Dabar jie matomi.

273
00:12:48,720 --> 00:12:50,380
Dabar jie nusibaigti ekrane.

274
00:12:50,380 --> 00:12:52,920
Ir todėl tai yra labai paprastas
Stilių, kad aš taikomas,

275
00:12:52,920 --> 00:12:56,850
ir dabar mano stalo atrodo daug labiau patinka
keturių iki keturių daugybos lentelė,

276
00:12:56,850 --> 00:13:00,950
vietoj tiesiog Pogmatwany netvarka, kur
viskas yra aiškiai eilutes ir stulpelius,

277
00:13:00,950 --> 00:13:03,717
bet ne super gerai organizuota.

278
00:13:03,717 --> 00:13:06,800
Mes tikrai tik įbrėžimas paviršiaus
ką jūs galite padaryti su CSS čia.

279
00:13:06,800 --> 00:13:10,330
Laimei CSS dokumentacija
yra gana paprasta.

280
00:13:10,330 --> 00:13:14,000
Galite naudoti keletą jos
atributus, gana dažnai.

281
00:13:14,000 --> 00:13:16,087
Tie, mes kalbėjome apie
anksčiau šiame video.

282
00:13:16,087 --> 00:13:18,170
Yra keletas, kurie jums
tikriausiai nebus panaudoti visi.

283
00:13:18,170 --> 00:13:19,469
Ir tai gerai, per daug.

284
00:13:19,469 --> 00:13:22,010
Bet tiesiog žinau, kad yra
daug dokumentacijos ten.

285
00:13:22,010 --> 00:13:25,110
Taigi, net jei mes ne apima viską,
jūs tikrai ne į kairę nuo jūsų pačių.

286
00:13:25,110 --> 00:13:26,780
Bet CSS yra tikrai įdomus
eksperimentuoti su.

287
00:13:26,780 --> 00:13:29,040
Ir aš norėčiau primygtinai rekomenduojame jums
žaisti aplink su savo tinklalapius,

288
00:13:29,040 --> 00:13:32,180
ir pamatyti, kaip jūs galite padaryti juos
atrodyti ir jaustis pagerinti vartotoją

289
00:13:32,180 --> 00:13:34,790
patirtis Lankymūsi savo puslapį.

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

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

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