1
00:00:00,000 --> 00:00:05,660
>> [Musiikkia]

2
00:00:05,660 --> 00:00:08,740
>> DOUG Lloyd: Joten ottaa yhden
video puhua yhden kielen.

3
00:00:08,740 --> 00:00:10,800
Tällä kertaa me puhumme CSS.

4
00:00:10,800 --> 00:00:13,460
Joten CSS, joka on lyhyt
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
on toinen kieli käytämme
rakennettaessa sivustot.

6
00:00:16,149 --> 00:00:17,190
Ajattele sitä näin.

7
00:00:17,190 --> 00:00:20,900
Jos HTML on mitä käytämme järjestää
sisältöä haluamme laittaa meidän sivulla,

8
00:00:20,900 --> 00:00:25,390
CSS on työkalu, jonka me yleensä käyttää
muokata miten sivustot näyttävät,

9
00:00:25,390 --> 00:00:30,410
ja miten käyttäjäkokemus todella
on, vuorovaikutuksessa sivuillamme.

10
00:00:30,410 --> 00:00:32,535
>> Samanlaisia ​​HTML, CSS on
ei ohjelmointikieli.

11
00:00:32,535 --> 00:00:33,451
Se ei ole logiikkaa.

12
00:00:33,451 --> 00:00:34,595
Se ei ole muuttujia.

13
00:00:34,595 --> 00:00:38,890
Sillä ei ole minkäänlaista että
virtaus liittyviä asioita, jotka C tekee.

14
00:00:38,890 --> 00:00:40,150
Se on tyyli kieli.

15
00:00:40,150 --> 00:00:42,810
Ja sen syntaksi on melko
yksinkertainen, ja vain kuvaa

16
00:00:42,810 --> 00:00:46,240
miten elementit meidän
sivu on tiettyjä HTML

17
00:00:46,240 --> 00:00:48,190
elementtejä olisi muutettava.

18
00:00:48,190 --> 00:00:51,170
Tätä varten, jos et ole
vielä katsonut meidän video HTML,

19
00:00:51,170 --> 00:00:53,290
tai tunne
HTML yleisesti, sinua

20
00:00:53,290 --> 00:00:57,430
halutessasi vilkaista joka
ensimmäinen, koska tämä keskustelu CSS

21
00:00:57,430 --> 00:01:00,700
on menossa riippuvat
joitakin HTML-osaamista.

22
00:01:00,700 --> 00:01:03,740
>> Joten tässä on todella
yksinkertainen CSS tyylisivu.

23
00:01:03,740 --> 00:01:06,480
Vaikka et ole koskaan
ohjelmoida CSS ennen,

24
00:01:06,480 --> 00:01:10,624
Olen melko varma, että voit selvittää
mitä tämä tyylitaulukkoa tekee.

25
00:01:10,624 --> 00:01:11,290
Mitä se tekee?

26
00:01:11,290 --> 00:01:15,470
No, sovelletaan ruumiin web
sivu, kaikkea siltä väliltä body-tunnisteiden

27
00:01:15,470 --> 00:01:19,631
meidän HTML, ja se asettaa
taustaväri kyseisen sivun siniseksi.

28
00:01:19,631 --> 00:01:21,130
No, se on hyvin yksinkertainen stylesheet.

29
00:01:21,130 --> 00:01:23,269
Se on oikeastaan ​​hyvin inhimillistä
ystävällinen kieli, CSS.

30
00:01:23,269 --> 00:01:26,560
Joten vaikka et ole koskaan käyttänyt sitä ennen,
luultavasti voisi arvata, mitä se teki.

31
00:01:26,560 --> 00:01:30,140
Itse asiassa, jos me ladattu sivulle, jossa
tämä tyylitaulukko upotettiin jotenkin,

32
00:01:30,140 --> 00:01:36,240
taustaväri meidän sivu olisi
olla sininen, eikä standardi valkoinen.

33
00:01:36,240 --> 00:01:37,670
>> Miten siis rakentaa tyylitaulukkoja?

34
00:01:37,670 --> 00:01:39,700
No ensimmäinen, meidän on
tunnistaa valitsin.

35
00:01:39,700 --> 00:01:42,970
Viimeisessä esimerkissä,
että valitsin oli ruumis.

36
00:01:42,970 --> 00:01:45,050
Sitten meillä on avoin
kihara ahdin, ja olemme

37
00:01:45,050 --> 00:01:48,410
Aloitan määrittelemällä
tyylitaulukon että valitsin.

38
00:01:48,410 --> 00:01:51,800
Välillä kihara housunkannattimet, me
vain luettelo keskeisistä arvo-pareja.

39
00:01:51,800 --> 00:01:56,205
Edellinen arvo pari oli
taustaväri sininen puolipiste,

40
00:01:56,205 --> 00:01:57,830
mutta voisimme tehdä enemmän ja enemmän näitä.

41
00:01:57,830 --> 00:02:02,330
Voisit olla useita asioita soveltamalla
tähän tag, että valitsin elin.

42
00:02:02,330 --> 00:02:05,960
Jokainen heistä on erotettu
puolipiste, ja kutsumme jokainen heistä

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

44
00:02:08,949 --> 00:02:12,410
Kun olemme tehneet kaiken muotoilu me
haluavat soveltaa kyseisen tunnisteen,

45
00:02:12,410 --> 00:02:15,300
meillä vain sulkemalla kihara
ahdin lopettaa tyylitaulukon,

46
00:02:15,300 --> 00:02:19,640
ja olemme tehneet määritellään stylesheet
kyseiselle valitsin.

47
00:02:19,640 --> 00:02:21,341
>> Mitkä ovat joitakin yhteisiä CSS-ominaisuuksia?

48
00:02:21,341 --> 00:02:23,590
No, ehkä haluat laittaa
reunus jotain.

49
00:02:23,590 --> 00:02:26,850
Joten voit sanoa, raja,
että olisi avain,

50
00:02:26,850 --> 00:02:29,460
ja sitten arvot olisi,
mitä tyyliä, väriä, ja leveys

51
00:02:29,460 --> 00:02:30,209
haluat sen olevan.

52
00:02:30,209 --> 00:02:33,530
Niin tyyli voi olla kiinteä
linja, pisteviiva, katkoviiva,

53
00:02:33,530 --> 00:02:36,020
harjun linja, mikä olisi aaltoviiva.

54
00:02:36,020 --> 00:02:38,790
Ehkä haluat olla sitä
olla sininen tai musta tai vihreä.

55
00:02:38,790 --> 00:02:41,490
Ehkä haluat sen olevan
1 tai 2 tai 10 pikseliä leveä.

56
00:02:41,490 --> 00:02:43,254
Voit määrittää kaikki ne asiat.

57
00:02:43,254 --> 00:02:46,420
Ehkä haluat asettaa taustan
väri sivusi tietyllä tavalla.

58
00:02:46,420 --> 00:02:49,215
Olemme jo näki, että, jossa
tausta elin on sininen.

59
00:02:49,215 --> 00:02:52,080
>> Sitten voit käyttää avain sana,
joten CSS on tiettyjä värejä

60
00:02:52,080 --> 00:02:55,950
jotka on rakennettu sen, sininen, vihreä,
musta, hyvin yksinkertainen värejä tiedämme.

61
00:02:55,950 --> 00:02:59,110
Mutta voit myös määrittää minkä tahansa
hex väri että haluaisit.

62
00:02:59,110 --> 00:03:05,190
Recall, että värit voidaan tunnistaa
joukolla kolme hex numerot

63
00:03:05,190 --> 00:03:08,500
0-255, RG ja b,
punainen, vihreä ja sininen komponentti.

64
00:03:08,500 --> 00:03:10,590
Ja jotta voimme määrittää
mikä tahansa väri haluamme mukaan,

65
00:03:10,590 --> 00:03:15,520
käyttämisen sijaan sininen tai vihreä tai musta,
käyttäen punta ja sitten kuusi numeroa hex,

66
00:03:15,520 --> 00:03:18,310
ja joka antaisi meille
kuusinumeroisen väri.

67
00:03:18,310 --> 00:03:19,850
Niin, että taustaväri.

68
00:03:19,850 --> 00:03:21,975
>> Meillä on myös etualalla
väri, joka on yleensä

69
00:03:21,975 --> 00:03:24,140
tulee teksti sivusi.

70
00:03:24,140 --> 00:03:28,850
Ja voit samalla tehdä
keskeisten sana ja tai kuusinumeroinen hex.

71
00:03:28,850 --> 00:03:32,140
Joten voit määrittää värein
haluamasi tekstin sivusi

72
00:03:32,140 --> 00:03:36,370
vastaan ​​tiettyä
taustaväri, jopa edellä.

73
00:03:36,370 --> 00:03:39,100
Voit myös vaihtaa ja käsitellä
fontin, ja miten teksti

74
00:03:39,100 --> 00:03:40,400
on sulatettu sivulla.

75
00:03:40,400 --> 00:03:42,010
>> Joten voit muuttaa fontin kokoa.

76
00:03:42,010 --> 00:03:46,320
Voit käyttää avainsanoja, kuten ylimääräinen,
Erittäin pieni, tai xx Pieni tai Normaali,

77
00:03:46,320 --> 00:03:47,660
suuret, ja niin edelleen.

78
00:03:47,660 --> 00:03:50,750
Voit käyttää kiintopisteitä, 10
kohta, 12 kohta, ja niin edelleen.

79
00:03:50,750 --> 00:03:55,850
Voit käyttää prosenttiosuudet, 80%, 20%,
jossa 100% on oletusarvo fontti

80
00:03:55,850 --> 00:03:59,220
koko, joka on yleensä menossa
olla jotain 11 tai 12 pistettä.

81
00:03:59,220 --> 00:04:01,659
Tai voit jopa perustaa sen pois
viimeisimmän kirjasinkokoa.

82
00:04:01,659 --> 00:04:04,950
Jos vain kirjoitti jotain ja tiedät
mitä haluat on, että se olisi pienempi,

83
00:04:04,950 --> 00:04:08,241
mutta et tiedä tarkalleen, mikä kokosi
haluat sen olevan, hyvin, voit vain sanoa,

84
00:04:08,241 --> 00:04:09,330
Tekstin koko Pienennä.

85
00:04:09,330 --> 00:04:14,344
Ja se perustaa pois,
vain ylös yläpuolella, se on fontin kokoa.

86
00:04:14,344 --> 00:04:15,760
Ja voit saada suuremman tai pienemmän.

87
00:04:15,760 --> 00:04:18,390
Joten siellä on paljon erilaisia
tapaa määritellä fontin kokoa.

88
00:04:18,390 --> 00:04:20,690
>> Voit myös määrittää, mitä
kirjasinperheen haluat.

89
00:04:20,690 --> 00:04:23,360
Jos sinulla on tietty
nimi, siellä tapa CSS--

90
00:04:23,360 --> 00:04:27,270
emme aio puhua siitä
here-- määritellä hyvin erityinen kirjasin

91
00:04:27,270 --> 00:04:28,980
ja upottaa se sivullesi.

92
00:04:28,980 --> 00:04:30,620
Voit myös käyttää yleisiä nimiä.

93
00:04:30,620 --> 00:04:33,540
Siellä on paljon web turvallinen fontteja
jotka on ennalta määritelty CSS.

94
00:04:33,540 --> 00:04:36,352
Ja jos olet käyttäjä Microsoft
Toimisto viimeisten 20 vuoden aikana,

95
00:04:36,352 --> 00:04:38,810
olet todennäköisesti tuttu
paljon näitä web safe fontit

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

97
00:04:44,640 --> 00:04:45,470
ja niin edelleen.

98
00:04:45,470 --> 00:04:47,170
Ne ovat kaikki pidetään web safe fontteja.

99
00:04:47,170 --> 00:04:49,169
Ja itse asiassa, osa
syystä ne tuli olla

100
00:04:49,169 --> 00:04:54,140
oli tarkoitus käyttää tekemään web-- jokaiselle sivulle
oli pääsy tähän oletus fonttijoukkoa

101
00:04:54,140 --> 00:04:58,480
eri päätteitä, ja kaikki tämä
font tavaraa emme päästä,

102
00:04:58,480 --> 00:05:01,130
mutta nämä ovat tavallisesti
saatavilla CSS,

103
00:05:01,130 --> 00:05:04,029
vaikka et
muuten määritellä fontteja.

104
00:05:04,029 --> 00:05:07,070
Lopuksi voit tasata tekstin,
sen sijaan että on, oletuksena, linjassa

105
00:05:07,070 --> 00:05:09,310
vasemmalle, voisit
kohdista se oikealle,

106
00:05:09,310 --> 00:05:13,740
tai voit tasata sen keskellä, tai
perusteltu niin, että se osui molemmat marginaalit.

107
00:05:13,740 --> 00:05:16,800
Joten ne ovat kaikki vaihtoehtoja voit käyttää
muuttaa mitä tekstisi näyttää,

108
00:05:16,800 --> 00:05:20,120
ja miten se näkyy sivulla.

109
00:05:20,120 --> 00:05:22,180
>> Sinun valitsimet eivät
on oltava tunnisteita vain.

110
00:05:22,180 --> 00:05:25,539
Olemme aiemmin näki body
valitsin, ja tag valitsin

111
00:05:25,539 --> 00:05:26,580
ei katso vain.

112
00:05:26,580 --> 00:05:30,020
You name tag, ja sitten
määritellä tyylitaulukon tag.

113
00:05:30,020 --> 00:05:32,660
Mutta voit myös tehdä jotain
kutsutaan ID valitsin.

114
00:05:32,660 --> 00:05:34,390
ID valitsin näyttää melko samanlainen.

115
00:05:34,390 --> 00:05:38,100
Mutta huomaa, että nyt en käytä
HTML-koodi, olen käyttäen, tässä tapauksessa,

116
00:05:38,100 --> 00:05:40,720
#unique, tai hash ainutlaatuinen.

117
00:05:40,720 --> 00:05:42,930
Jos muistatte meidän
video HTML, puhuimme

118
00:05:42,930 --> 00:05:45,620
miten tunnisteet voi olla ominaisuuksia.

119
00:05:45,620 --> 00:05:48,340
>> Ja yksi ominaisuus, joka koskee
melko paljon kaikki HTML-tunnisteet,

120
00:05:48,340 --> 00:05:51,440
mutta emme puhu siitä,
on jotain kutsutaan tunnistuselementtiin.

121
00:05:51,440 --> 00:05:55,250
Joten tässä CSS olisi
sovelletaan vain HTML-tunniste, joka on

122
00:05:55,250 --> 00:05:58,530
hyvin erityinen tunnus, että olet nimetty.

123
00:05:58,530 --> 00:06:01,000
Joten jos sinulla on jossain
koodissa, jonnekin

124
00:06:01,000 --> 00:06:06,090
HTML-tiedoston, tag ja sinä
täsmennettävä attribuutin että tunniste,

125
00:06:06,090 --> 00:06:09,060
ID vastaa ainutlaatuinen, tämä
erityisesti stylesheet

126
00:06:09,060 --> 00:06:15,030
tässä sovelletaan ainoastaan ​​välillä
että tag ID ainutlaatuisia.

127
00:06:15,030 --> 00:06:17,180
>> Voit myös tehdä jotain
kutsutaan luokan valitsin.

128
00:06:17,180 --> 00:06:19,920
Joten sen lisäksi että
ID attribuutteja, voit myös

129
00:06:19,920 --> 00:06:23,130
lisätä luokan attribuutti HTML tageja.

130
00:06:23,130 --> 00:06:27,140
Ja kun käytät luokan attribuutti,
sitä voidaan käyttää useita tunnisteita.

131
00:06:27,140 --> 00:06:31,880
Joten jos sinulla on useita asioita, jotka
ovat samanlaisia, ehkä haluat sanoa,

132
00:06:31,880 --> 00:06:35,890
avoin tag blaa, blaa, blaa,
blaa, luokka vastaa opiskelijat.

133
00:06:35,890 --> 00:06:38,190
Ja sitten tässä
stylesheet sovellettaisiin

134
00:06:38,190 --> 00:06:42,041
jokaiselle tag joiden luokka on opiskelijoita.

135
00:06:42,041 --> 00:06:44,290
Tässä tapauksessa, olimme asettaa
taustaväri keltainen,

136
00:06:44,290 --> 00:06:46,706
ja olimme asettaa peittävyyden, joka
on tunniste emme puhu,

137
00:06:46,706 --> 00:06:52,510
mutta vain käsittelee miten läpinäkyvä
jotain on, 70%, tässä tapauksessa.

138
00:06:52,510 --> 00:06:54,430
>> On kaksi vaihtoehtoa
kirjallisesti stylesheets.

139
00:06:54,430 --> 00:06:56,680
Voit kirjoittaa ne
suoraan HTML

140
00:06:56,680 --> 00:06:59,690
asettamalla tyylitaulukkoja
välillä tyyli tunnisteet.

141
00:06:59,690 --> 00:07:03,850
Ja ne tyylitunnisteet mennä sisälle
pää tunnisteet Web-sivun.

142
00:07:03,850 --> 00:07:08,240
Ehkä edullisempi tapa tehdä
se on kirjoittaa erilliseen .css tiedoston,

143
00:07:08,240 --> 00:07:12,360
ja sitten liittää se osaksi
asiakirjaa käyttämällä linkin tageja.

144
00:07:12,360 --> 00:07:14,690
Linkki tagit, jälleen, ovat
eroaa hyperlinkkejä,

145
00:07:14,690 --> 00:07:16,760
Jos muistatte meidän video HTML.

146
00:07:16,760 --> 00:07:19,030
Ja linkki tunnisteet ovat miten me
vetää eri tiedostoissa.

147
00:07:19,030 --> 00:07:23,900
Se tavallaan kuin vastaa
#include web ohjelmointi.

148
00:07:23,900 --> 00:07:27,140
>> Joten katsomaan table.HTML.

149
00:07:27,140 --> 00:07:29,380
Jos muistatte meidän
HTML video, näytin

150
00:07:29,380 --> 00:07:32,000
esimerkki hyvin
yksinkertainen kertolasku

151
00:07:32,000 --> 00:07:35,160
taulukko, joka näytti melko
ruma, ja ehkä siellä

152
00:07:35,160 --> 00:07:38,650
tapa tehdä se paremmin
CSS, jotta se todella näyttää

153
00:07:38,650 --> 00:07:41,120
enemmän kuin kerto
pöytä, tai jotain

154
00:07:41,120 --> 00:07:43,730
että ei ole vain tarttuneet toisiinsa
ilman varsinaista jako

155
00:07:43,730 --> 00:07:45,532
rivien ja sarakkeiden.

156
00:07:45,532 --> 00:07:47,490
Joten pään yli
CS50 IDE, ja katsomaan

157
00:07:47,490 --> 00:07:50,780
kuinka CSS voi, tavallaan, nipistää
mitä aloitimme ennen,

158
00:07:50,780 --> 00:07:53,290
ja tehdä siitä jotain paljon parempaa.

159
00:07:53,290 --> 00:07:55,650
>> Joten olemme CS50 IDE
nyt, ja jos tunne,

160
00:07:55,650 --> 00:07:58,710
me vedä ylös tässä
taulukko, joka HTML-sivun.

161
00:07:58,710 --> 00:08:01,090
Table.HTML pohjimmiltaan
vain määrittelee sisällön

162
00:08:01,090 --> 00:08:05,044
of multiple-- se piti olla
neljä neljä kertotaulun.

163
00:08:05,044 --> 00:08:06,210
Se on melko yksinkertainen.

164
00:08:06,210 --> 00:08:09,410
Ja me voisi ajatella, että se olisi
näyttävät melko hyvin järjestetty.

165
00:08:09,410 --> 00:08:15,277
Mutta itse asiassa, kun esikatsella sivu,
näemme, että se on eräänlainen ruma, eikö?

166
00:08:15,277 --> 00:08:16,860
Selvästi meillä on rivejä ja sarakkeita.

167
00:08:16,860 --> 00:08:18,350
On jonkinlainen erottelu.

168
00:08:18,350 --> 00:08:20,040
Mutta se ei ole mielekästä erottaminen.

169
00:08:20,040 --> 00:08:23,105
Emme itse palaveriin
liikaa tietoa täällä.

170
00:08:23,105 --> 00:08:25,730
Ja ei ole erotettu toisistaan
rivit ja sarakkeet kannalta

171
00:08:25,730 --> 00:08:28,460
vaaka- tai pystysuoraan sääntöjä.

172
00:08:28,460 --> 00:08:31,530
Voisimme ehkä tehdä tästä
näyttää hieman paremmin.

173
00:08:31,530 --> 00:08:32,934
Joten kokeilla.

174
00:08:32,934 --> 00:08:34,559
Joten aion sulkea tämän välilehden täällä.

175
00:08:34,559 --> 00:08:37,434
Ja aion suljen table.HTML,
ja minulla on toinen versio täällä

176
00:08:37,434 --> 00:08:39,490
nimeltään table2.HTML.

177
00:08:39,490 --> 00:08:40,655
Avaamme että jopa.

178
00:08:40,655 --> 00:08:42,530
Elin sivun
melko sama,

179
00:08:42,530 --> 00:08:44,238
mutta olen muuttanut
hieman huipulla.

180
00:08:44,238 --> 00:08:47,132
Ja minä siirry tänne.

181
00:08:47,132 --> 00:08:49,340
Huomaa, että tällä kertaa, olen
upotettujen tyylitunnisteet.

182
00:08:49,340 --> 00:08:53,550
Olen avannut tyyli tag, ja olen nyt
määritellään CSS-tyylitiedoston vain sisällä

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

184
00:08:54,310 --> 00:08:56,310
Minulla on stylesheet joka sanoo, pöytä.

185
00:08:56,310 --> 00:08:58,170
Se on minun tag valitsin.

186
00:08:58,170 --> 00:09:01,340
En käytä piste tai hash,
jonka minä tekisi jos en

187
00:09:01,340 --> 00:09:03,710
käytti tunnus tai luokan valitsin.

188
00:09:03,710 --> 00:09:06,190
Minulla on tunniste valitsin here-- pöytä.

189
00:09:06,190 --> 00:09:10,090
Tämä tyyli on menossa
koske kaikkia taulukossa tag.

190
00:09:10,090 --> 00:09:14,950
Ilmeisesti Haluan laittaa yhteen
pikselin levyisenä, kiinteä sininen raja,

191
00:09:14,950 --> 00:09:15,779
sisällä minun taulukko.

192
00:09:15,779 --> 00:09:18,320
Se kuulostaa se olisi luultavasti
auttaa tilanne, eikö?

193
00:09:18,320 --> 00:09:20,320
Aiomme olla
asiat näyttävät paljon paremmin.

194
00:09:20,320 --> 00:09:21,190
Joten tämä on hieno.

195
00:09:21,190 --> 00:09:23,540
Tyylillisesti, olen juuri
upotettu minun tyylitaulukon täällä.

196
00:09:23,540 --> 00:09:25,100
Se on varmasti
hyväksyttävä tapa tehdä se.

197
00:09:25,100 --> 00:09:26,391
Katsotaan, mitä tämä näyttää.

198
00:09:26,391 --> 00:09:29,790
Joten menen takaisin tänne, ja
Minä esikatsella minun table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
No, se ei ole aivan mitä halusin,
mutta se on juuri sitä, mitä pyysimme.

201
00:09:36,470 --> 00:09:39,530
Sanoimme, että tämä tyyli on
aikovansa soveltaa meidän pöytään.

202
00:09:39,530 --> 00:09:43,810
Meidän pöytä on nyt yksi pikseli
leveä, kiinteä sininen reuna sitä.

203
00:09:43,810 --> 00:09:46,237
Emme itse palaveriin
pöydässä soluja.

204
00:09:46,237 --> 00:09:47,570
Olemme juuri pöydässä.

205
00:09:47,570 --> 00:09:49,310
Niin CSS toimi.

206
00:09:49,310 --> 00:09:51,890
Se on soveltanut
stylesheet meidän pöytään.

207
00:09:51,890 --> 00:09:53,981
Mutta ei oikein tee
mitä halusimme tehdä.

208
00:09:53,981 --> 00:09:55,730
Miten saamme tehdä
mitä me haluamme sen tehdä?

209
00:09:55,730 --> 00:09:59,287
>> No, katsotaanpa katsomaan yksi
versio tästä table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Joten olen juuri menossa sulkea nämä välilehdet.

211
00:10:00,870 --> 00:10:03,890
Aion palata tänne minun
tiedosto puu, ja avata table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Jälleen se tulee näyttää aika
samanlainen täällä alussa.

214
00:10:10,350 --> 00:10:14,460
Mutta ilmoitusta, tällä kertaa, käyttämisen sijaan
tyylisivu upotettu oikeus siellä,

215
00:10:14,460 --> 00:10:18,870
Aion linkkiä
tyylitiedoston linkin tag.

216
00:10:18,870 --> 00:10:22,480
Joten olen ilmeisesti linkitys
stylesheet kutsutaan tables.CSS,

217
00:10:22,480 --> 00:10:25,090
ja tämä hyvin vastaa
stylesheet vain means-- hyvin,

218
00:10:25,090 --> 00:10:28,645
mikä on tämä tiedosto suhteessa mitä
Olen doing-- on stylesheet että olen

219
00:10:28,645 --> 00:10:29,821
käyttäen minun sivu.

220
00:10:29,821 --> 00:10:32,320
Joten jos en todellakaan halua nähdä, mitä
Mulla kanssa CSS täällä,

221
00:10:32,320 --> 00:10:35,010
Minun täytyy mennä auki että
table.CSS tiedoston samoin.

222
00:10:35,010 --> 00:10:37,490
Joten palaamme tänne
jälleen meidän tiedoston puu.

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

224
00:10:38,660 --> 00:10:40,490
Me pop auki.

225
00:10:40,490 --> 00:10:43,070
Nyt näemme hieman CSS.

226
00:10:43,070 --> 00:10:45,630
Ilmeisesti minulla on pari
asioita täällä.

227
00:10:45,630 --> 00:10:48,950
Olen ilmeisesti haluavat laittaa viisi
pikselin levyisenä, punaisena raja,

228
00:10:48,950 --> 00:10:50,287
noin minun pöydän.

229
00:10:50,287 --> 00:10:52,870
Tiedämme jo, että se on menossa
vain mennä kehä.

230
00:10:52,870 --> 00:10:56,180
Näimme, että table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Jokaisen rivi, I
ilmeisesti haluavat määritellä

232
00:10:58,770 --> 00:11:01,950
että rivi korkeus on 50 pikseliä korkea.

233
00:11:01,950 --> 00:11:05,680
Joten jokainen rivi, muistaa
sitähän tr tag tekee,

234
00:11:05,680 --> 00:11:08,550
Teen sen 50 pikseliä korkea.

235
00:11:08,550 --> 00:11:09,804
>> Lopuksi minulla on tämä kommentti.

236
00:11:09,804 --> 00:11:11,470
Ja näin teemme kommentit CSS.

237
00:11:11,470 --> 00:11:16,174
Se on hyvin samankaltainen tarttumaan lohko
kommentit syntaksin slash tähti.

238
00:11:16,174 --> 00:11:17,090
Kaikki haluamasi teksti.

239
00:11:17,090 --> 00:11:19,470
Ei ole slash slash vaikka CSS.

240
00:11:19,470 --> 00:11:23,400
Lyhyillä kommenttejaan, meillä on
käyttää tässä muodossa tästä.

241
00:11:23,400 --> 00:11:26,830
Näyttää siltä, ​​olen tekemässä
paljon asioita minun td tageja.

242
00:11:26,830 --> 00:11:29,710
Muista td tunnisteet tai pöydän
tiedot, jotka todella ovat vain

243
00:11:29,710 --> 00:11:32,210
sarakkeet sisällä
meidän riviä, ja ilmeisesti

244
00:11:32,210 --> 00:11:35,090
Kunkin osan tietojen
minun pöytä, haluan

245
00:11:35,090 --> 00:11:38,850
asettaa taustaväri
olla musta, väri on valkoinen,

246
00:11:38,850 --> 00:11:40,320
väri on etualalla väri.

247
00:11:40,320 --> 00:11:42,360
Joten tämä tulee olemaan
teksti sivuni.

248
00:11:42,360 --> 00:11:45,140
Haluan iso fontti, 22
kohta fontti, ja haluan

249
00:11:45,140 --> 00:11:47,001
sen olevan kirjasinperheen, Georgia.

250
00:11:47,001 --> 00:11:48,750
Joten en aio
on oletusfontin.

251
00:11:48,750 --> 00:11:51,820
Aion täsmentää Georgia, joka
on yksi niistä web safe fontit

252
00:11:51,820 --> 00:11:53,830
että olemme nähneet aiemmin.

253
00:11:53,830 --> 00:11:57,284
Haluan teksti on yhdenmukaistettava
keskitetysti, keskellä laatikko,

254
00:11:57,284 --> 00:11:59,450
En halua sitä jäädä
linjassa tai oikealle kohdistettu.

255
00:11:59,450 --> 00:12:03,461
Ja haluan palstan leveys
olevan 50 pikseliä leveä samoin.

256
00:12:03,461 --> 00:12:05,210
Katsotaanpa katsomaan
mitä tämä näyttää,

257
00:12:05,210 --> 00:12:07,470
ja katso, jos tämä on ehkä parannus.

258
00:12:07,470 --> 00:12:12,890
Joten aion mennä table3.HTML, joka
Recall, sisältää table.CSS linkkinä,

259
00:12:12,890 --> 00:12:14,830
ja me esikatsella sitä.

260
00:12:14,830 --> 00:12:16,800
Se on paljon parempi, eikö?

261
00:12:16,800 --> 00:12:20,004
Tämä on todella alkaa näyttää
paljon enemmän kuin kertotaulu.

262
00:12:20,004 --> 00:12:21,920
Olen että punainen reunus
noin minun pöydän mutta nyt

263
00:12:21,920 --> 00:12:26,700
Olen myös määrittänyt, että
kukin rivi on 50 pikseliä leveä,

264
00:12:26,700 --> 00:12:30,220
tai se on 50 pikseliä tall-- tekosyy
me-- kukin sarake on 50 pikseliä leveä.

265
00:12:30,220 --> 00:12:34,251
Jokaisen sarakkeen tiedot, ja vain
tiedot, on musta tausta.

266
00:12:34,251 --> 00:12:36,000
Joten siksi ne
valkoinen linjat ovat siellä.

267
00:12:36,000 --> 00:12:38,836
Koska tilaa
kaikkien näiden solujen,

268
00:12:38,836 --> 00:12:40,710
se ei ole rajaa
ja sellaisenaan, se on vain

269
00:12:40,710 --> 00:12:43,170
Olen vain täyttämällä
soluja, jotka itse asiassa

270
00:12:43,170 --> 00:12:46,310
tekee rajojen taulukon, joka
ilmeisesti olemassa koko ajan, se

271
00:12:46,310 --> 00:12:47,887
oli vain ohut valkoisia viivoja.

272
00:12:47,887 --> 00:12:48,720
Nyt he ovat näkyvissä.

273
00:12:48,720 --> 00:12:50,380
Nyt ne pop pois ruudulle.

274
00:12:50,380 --> 00:12:52,920
Ja niin tämä on hyvin yksinkertainen
stylesheet että olen soveltanut,

275
00:12:52,920 --> 00:12:56,850
ja nyt minun pöytä näyttää paljon enemmän kuin
neljä neljä kertotaulu,

276
00:12:56,850 --> 00:13:00,950
sijasta vain sekaisin sotku, jossa
kaikki on selvästi rivejä ja sarakkeita,

277
00:13:00,950 --> 00:13:03,717
mutta ei Super hyvin järjestetty.

278
00:13:03,717 --> 00:13:06,800
Olemme todella vain esimakua
mitä voit tehdä CSS täällä.

279
00:13:06,800 --> 00:13:10,330
Onneksi CSS asiakirjat
on melko yksinkertainen.

280
00:13:10,330 --> 00:13:14,000
Voit käyttää useita sen
attribuutteja, melko usein.

281
00:13:14,000 --> 00:13:16,087
Ne puhuimme
aiemmin tässä video.

282
00:13:16,087 --> 00:13:18,170
On olemassa useita, jotka olet
luultavasti ei käytä kaikkia.

283
00:13:18,170 --> 00:13:19,469
Ja se on hieno, liian.

284
00:13:19,469 --> 00:13:22,010
Mutta vain tietää, että on olemassa
paljon asiakirjojen siellä.

285
00:13:22,010 --> 00:13:25,110
Joten vaikka emme kattavat kaiken,
et varmasti ei jää itse.

286
00:13:25,110 --> 00:13:26,780
Mutta CSS on todella hauskaa
kokeilla.

287
00:13:26,780 --> 00:13:29,040
Ja haluan voimakkaasti rohkaista teitä
leikkiä Web-sivuja,

288
00:13:29,040 --> 00:13:32,180
ja miten voit tehdä niistä
näyttää ja tuntuu parantaa käyttäjäkokemusta

289
00:13:32,180 --> 00:13:34,790
kokemus vierailevat sivusi.

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

291
00:13:35,710 --> 00:13:37,980
Tämä on CS50.

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