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

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Dus laten we eens een meer
video om te praten over één taal.

3
00:00:08,740 --> 00:00:10,800
Deze keer zullen we praten over CSS.

4
00:00:10,800 --> 00:00:13,460
Dus CSS, die kort voor
C.S.S,

5
00:00:13,460 --> 00:00:16,149
een andere taal we gebruiken
bij de bouw van websites.

6
00:00:16,149 --> 00:00:17,190
Denk er eens over als dit.

7
00:00:17,190 --> 00:00:20,900
Als HTML is wat we gebruiken om het te organiseren
inhoud willen we op onze pagina te zetten,

8
00:00:20,900 --> 00:00:25,390
CSS is de tool die we over het algemeen gebruik
aanpassen hoe onze websites bezoeken,

9
00:00:25,390 --> 00:00:30,410
en hoe de gebruikerservaring echt
is, de interactie met onze website.

10
00:00:30,410 --> 00:00:32,535
>> Vergelijkbaar met HTML, CSS is
geen programmeertaal.

11
00:00:32,535 --> 00:00:33,451
Het heeft geen logica.

12
00:00:33,451 --> 00:00:34,595
Het hoeft geen variabelen.

13
00:00:34,595 --> 00:00:38,890
Het is niet een soort van die moeten
vloeien gerelateerde dingen die C doet.

14
00:00:38,890 --> 00:00:40,150
Het is een styling taal.

15
00:00:40,150 --> 00:00:42,810
En de syntax is vrij
eenvoudig, en gewoon beschrijft

16
00:00:42,810 --> 00:00:46,240
hoe de elementen van onze
pagina hebben bepaalde HTML

17
00:00:46,240 --> 00:00:48,190
elementen moeten worden gewijzigd.

18
00:00:48,190 --> 00:00:51,170
Te dien einde, als je nog niet
maar zag onze video op HTML,

19
00:00:51,170 --> 00:00:53,290
onbekend met of
HTML algemeen, u

20
00:00:53,290 --> 00:00:57,430
Misschien wilt u een kijkje nemen op die rekening
eerste, omdat deze discussie van CSS

21
00:00:57,430 --> 00:01:00,700
zal afhangen
enige kennis van HTML.

22
00:01:00,700 --> 00:01:03,740
>> Dus hier is een echt
eenvoudige CSS stylesheet.

23
00:01:03,740 --> 00:01:06,480
Zelfs als je nog nooit hebt
geprogrammeerd met CSS vóór,

24
00:01:06,480 --> 00:01:10,624
Ik ben er vrij zeker van dat je kunt achterhalen
precies wat dit stylesheet doet.

25
00:01:10,624 --> 00:01:11,290
Wat doet het?

26
00:01:11,290 --> 00:01:15,470
Welnu, aangebracht op het lichaam van onze website
pagina, alles wat tussen de body-tags

27
00:01:15,470 --> 00:01:19,631
onze HTML en het zet de
achtergrondkleur van die pagina naar blauw.

28
00:01:19,631 --> 00:01:21,130
Nou, het is een zeer eenvoudige stylesheet.

29
00:01:21,130 --> 00:01:23,269
Het is eigenlijk heel menselijk
vriendelijke taal, CSS.

30
00:01:23,269 --> 00:01:26,560
Dus zelfs als je nog nooit hebt gebruikt voordat,
je waarschijnlijk kon raden wat dat deed.

31
00:01:26,560 --> 00:01:30,140
In feite, als we geladen een pagina waar
Deze stylesheet werd een of andere manier ingebed,

32
00:01:30,140 --> 00:01:36,240
de achtergrond kleur van onze pagina zou
zijn blauw, en niet de standaard wit.

33
00:01:36,240 --> 00:01:37,670
>> Dus hoe kunnen we bouwen stylesheets?

34
00:01:37,670 --> 00:01:39,700
Nou ten eerste moeten we
identificeren van een selector.

35
00:01:39,700 --> 00:01:42,970
In het laatste voorbeeld,
dat was selector lichaam.

36
00:01:42,970 --> 00:01:45,050
Dan hebben we een open
accolade, en we zijn

37
00:01:45,050 --> 00:01:48,410
zal beginnen bepalen van de
stylesheet voor die selector.

38
00:01:48,410 --> 00:01:51,800
Tussen de accolades, we
gewoon een lijst van belangrijke waarde paren.

39
00:01:51,800 --> 00:01:56,205
De vorige waardepaar was
achtergrond kleur blauw puntkomma,

40
00:01:56,205 --> 00:01:57,830
maar we konden meer en meer van deze te doen.

41
00:01:57,830 --> 00:02:02,330
Je zou kunnen hebben meerdere dingen toepassen
om dat label, dat selector lichaam.

42
00:02:02,330 --> 00:02:05,960
Elk daarvan wordt gescheiden door een
puntkomma, en we elk één van hen te bellen

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

44
00:02:08,949 --> 00:02:12,410
Als we klaar met de styling we
wilt toepassen op die bepaalde tag,

45
00:02:12,410 --> 00:02:15,300
We hebben net een sluiten krullend
brace om de stylesheet te beëindigen,

46
00:02:15,300 --> 00:02:19,640
en we klaar zijn het definiëren van de stylesheet
voor die bepaalde selector.

47
00:02:19,640 --> 00:02:21,341
>> Wat zijn een aantal veel voorkomende CSS-eigenschappen?

48
00:02:21,341 --> 00:02:23,590
Nou ja, misschien wilt u zetten
een rand rond iets.

49
00:02:23,590 --> 00:02:26,850
Dus je kunt zeggen, grens,
dat uw sleutel zou zijn,

50
00:02:26,850 --> 00:02:29,460
en dan je waarden zou zijn,
welke stijl, kleur, en de breedte

51
00:02:29,460 --> 00:02:30,209
je wilt dat het is.

52
00:02:30,209 --> 00:02:33,530
Zodat de stijl zou een solide
lijn, een stippellijn, een stippellijn,

53
00:02:33,530 --> 00:02:36,020
een nok lijn, die golvende lijn zou zijn.

54
00:02:36,020 --> 00:02:38,790
Misschien wil je het hebben
zijn blauw of zwart of groen.

55
00:02:38,790 --> 00:02:41,490
Misschien heb je het wilt zijn
1 of 2 of 10 pixels breed.

56
00:02:41,490 --> 00:02:43,254
U kunt al die dingen opgeven.

57
00:02:43,254 --> 00:02:46,420
Misschien wilt u de achtergrond in te stellen
kleur van uw pagina op een bepaalde manier.

58
00:02:46,420 --> 00:02:49,215
We zagen al dat het instellen van de
achtergrond van het lichaam blauw zijn.

59
00:02:49,215 --> 00:02:52,080
>> Dan kunt u een sleutel woord te gebruiken,
dus CSS heeft bepaalde kleuren

60
00:02:52,080 --> 00:02:55,950
die zijn ingebouwd in het, blauw, groen,
zwart, een zeer eenvoudige kleuren die we kennen.

61
00:02:55,950 --> 00:02:59,110
Maar je kunt ook elke opgeven
hex kleur die je wilt.

62
00:02:59,110 --> 00:03:05,190
Bedenk dat kleuren kunnen worden geïdentificeerd
door een set van drie hexadecimale getallen

63
00:03:05,190 --> 00:03:08,500
0-255, rg en b, de
rood, groen en blauw component.

64
00:03:08,500 --> 00:03:10,590
En zo kunnen we opgeven
elke kleur die we willen door,

65
00:03:10,590 --> 00:03:15,520
in plaats van blauw of groen of zwart,
met behulp pond en vervolgens zes cijfers van hex,

66
00:03:15,520 --> 00:03:18,310
en dat zou ons
de zescijferige kleur.

67
00:03:18,310 --> 00:03:19,850
Dus dat is de achtergrondkleur.

68
00:03:19,850 --> 00:03:21,975
>> We hebben ook de voorgrond
kleur, die meestal

69
00:03:21,975 --> 00:03:24,140
gaat de tekst van uw pagina zijn.

70
00:03:24,140 --> 00:03:28,850
En je kon dezelfde wijze doen
met sleutel woord en of zes cijferige hex.

71
00:03:28,850 --> 00:03:32,140
Dus je kunt elke kleur opgeven u
wil voor de tekst van uw pagina

72
00:03:32,140 --> 00:03:36,370
tegen een bepaald
achtergrondkleur, boven.

73
00:03:36,370 --> 00:03:39,100
U kunt ook en omgaan
met doopvont, en de manier waarop de tekst

74
00:03:39,100 --> 00:03:40,400
wordt weergegeven op de pagina.

75
00:03:40,400 --> 00:03:42,010
>> Zo kunt u uw lettergrootte te wijzigen.

76
00:03:42,010 --> 00:03:46,320
U kunt de sleutelwoorden, zoals extra gebruiken,
extra kleine, en xx kleine of middelgrote,

77
00:03:46,320 --> 00:03:47,660
grote, enzovoort.

78
00:03:47,660 --> 00:03:50,750
U kunt gebruik maken van vaste punten, 10
punt 12 punt, enzovoort.

79
00:03:50,750 --> 00:03:55,850
U kunt percentages, 80%, 20% gebruikt,
waar de 100% is het standaard lettertype

80
00:03:55,850 --> 00:03:59,220
size, die meestal gaat
iets als 11 of 12 punten.

81
00:03:59,220 --> 00:04:01,659
Of u kunt zelfs baseren off
van de meest recente lettergrootte.

82
00:04:01,659 --> 00:04:04,950
Als je gewoon schreef iets en je weet
wat je wilt is voor het te kleiner zijn,

83
00:04:04,950 --> 00:04:08,241
maar je weet niet precies weet welke maat je
wil dat het is, nou ja, je kunt gewoon zeggen,

84
00:04:08,241 --> 00:04:09,330
lettergrootte kleiner.

85
00:04:09,330 --> 00:04:14,344
En het zal baseren off van de,
net boven, het is de lettergrootte.

86
00:04:14,344 --> 00:04:15,760
En u kunt kleiner of groter te krijgen.

87
00:04:15,760 --> 00:04:18,390
Dus er is een heleboel verschillende
manieren om de lettergrootte te geven.

88
00:04:18,390 --> 00:04:20,690
>> U kunt ook wat opgeven
lettertype familie je wilt.

89
00:04:20,690 --> 00:04:23,360
Als je een bepaalde
naam, is een weg in CSS--

90
00:04:23,360 --> 00:04:27,270
we gaan niet over praten
hier-- een zeer specifiek font definiëren

91
00:04:27,270 --> 00:04:28,980
en verankeren het in uw pagina.

92
00:04:28,980 --> 00:04:30,620
U kunt ook gebruik maken van generieke namen.

93
00:04:30,620 --> 00:04:33,540
Er is een hoop web safe fonts
die zijn vooraf gedefinieerd in CSS.

94
00:04:33,540 --> 00:04:36,352
En als je een gebruiker van Microsoft
Kantoor in de laatste 20 jaar,

95
00:04:36,352 --> 00:04:38,810
je bent waarschijnlijk bekend met
veel van deze web safe fonts

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

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

98
00:04:45,470 --> 00:04:47,170
Die worden allemaal beschouwd als een veilige web fonts.

99
00:04:47,170 --> 00:04:49,169
En inderdaad, een deel van de
reden waarom ze kwam te zijn

100
00:04:49,169 --> 00:04:54,140
werd om te worden gebruikt om web-- maken elke pagina
had toegang tot deze standaard set van lettertypen

101
00:04:54,140 --> 00:04:58,480
met diverse schreven, en dit alles
lettertype dingen zullen we niet krijgen,

102
00:04:58,480 --> 00:05:01,130
maar deze zijn meestal
toegankelijk in uw CSS,

103
00:05:01,130 --> 00:05:04,029
zelfs als je dat niet doet
de lettertypen anders definiëren.

104
00:05:04,029 --> 00:05:07,070
Ten slotte kunt u uw tekst af te stemmen,
in plaats van dat het standaard, uitgelijnd

105
00:05:07,070 --> 00:05:09,310
naar links, je kon
uitlijnen naar rechts,

106
00:05:09,310 --> 00:05:13,740
of je kan uitlijnen gecentreerd, of
gerechtvaardigd, zodat het te raken beide marges.

107
00:05:13,740 --> 00:05:16,800
Dus dat zijn allemaal opties die u kunt gebruiken
om te veranderen wat je tekst eruit ziet,

108
00:05:16,800 --> 00:05:20,120
en hoe het wordt weergegeven op uw pagina.

109
00:05:20,120 --> 00:05:22,180
>> Uw selecteurs niet
moet alleen labels zijn.

110
00:05:22,180 --> 00:05:25,539
We eerder zagen een body-tag
selector en tagkiezer

111
00:05:25,539 --> 00:05:26,580
ziet er net als dat.

112
00:05:26,580 --> 00:05:30,020
Noem een ​​tag, en dan moet je
definiëren van een stylesheet voor die tag.

113
00:05:30,020 --> 00:05:32,660
Maar je kunt ook iets doen
riep een ID selector.

114
00:05:32,660 --> 00:05:34,390
Een ID-selector lijkt redelijk vergelijkbaar.

115
00:05:34,390 --> 00:05:38,100
Maar let op, dat nu ik ben niet met behulp van
een HTML-tag, ik gebruik, in dit geval,

116
00:05:38,100 --> 00:05:40,720
#unique of hash uniek.

117
00:05:40,720 --> 00:05:42,930
Misschien herinner je je van onze
video op HTML, we praatten

118
00:05:42,930 --> 00:05:45,620
over hoe labels attributen kunnen hebben.

119
00:05:45,620 --> 00:05:48,340
>> En een eigenschap die van toepassing is
vrijwel alle HTML-tags,

120
00:05:48,340 --> 00:05:51,440
maar we hebben niet over praten,
is zoiets als een ID-tag.

121
00:05:51,440 --> 00:05:55,250
Dus deze bijzondere CSS zou
alleen van toepassing op HTML-tag die heeft

122
00:05:55,250 --> 00:05:58,530
een zeer specifieke ID, die u hebt genoemd.

123
00:05:58,530 --> 00:06:01,000
Dus als je ergens
in uw code, ergens

124
00:06:01,000 --> 00:06:06,090
in uw HTML-bestand, een tag en u
opgeven als een attribuut dat label,

125
00:06:06,090 --> 00:06:09,060
ID gelijk uniek, dit
bijzonder stylesheet

126
00:06:09,060 --> 00:06:15,030
hier zal alleen gelden in tussen
dat tag met de ID van de unieke.

127
00:06:15,030 --> 00:06:17,180
>> U kunt ook iets doen
riep een klasse selector.

128
00:06:17,180 --> 00:06:19,920
Dus naast het hebben
ID attributen, kunt u ook

129
00:06:19,920 --> 00:06:23,130
voeg een attribuut klasse HTML-tags.

130
00:06:23,130 --> 00:06:27,140
En wanneer u een attribuut klasse te gebruiken,
kan worden toegepast op meerdere tags.

131
00:06:27,140 --> 00:06:31,880
Dus als je een aantal dingen die
zijn vergelijkbaar, misschien je wilt zeggen,

132
00:06:31,880 --> 00:06:35,890
geopend tag blah, blah, blah,
blah, klasse gelijk aan studenten.

133
00:06:35,890 --> 00:06:38,190
En dan dit specifieke
stylesheet zou gelden

134
00:06:38,190 --> 00:06:42,041
elk label waarvan klasse studenten.

135
00:06:42,041 --> 00:06:44,290
In dat geval zouden we de
achtergrondkleur naar geel,

136
00:06:44,290 --> 00:06:46,706
en we zouden ondoorzichtigheid ingesteld, dat
is een label dat we niet over praten,

137
00:06:46,706 --> 00:06:52,510
maar gewoon bezighoudt met hoe transparant
iets, tot 70%, in dit geval.

138
00:06:52,510 --> 00:06:54,430
>> Er zijn twee opties voor
schrijven stylesheets.

139
00:06:54,430 --> 00:06:56,680
U kunt ze schrijven
rechtstreeks in uw HTML

140
00:06:56,680 --> 00:06:59,690
door het plaatsen van de stylesheets
in stijl tussen de labels.

141
00:06:59,690 --> 00:07:03,850
En die stijl labels naar binnen gaan van
het hoofd tags van uw webpagina.

142
00:07:03,850 --> 00:07:08,240
Het misschien meer aangewezen manier om te doen
het is om een ​​apart .css bestand te schrijven,

143
00:07:08,240 --> 00:07:12,360
en koppel het vervolgens in uw
documenteren met behulp van koppeling-tags.

144
00:07:12,360 --> 00:07:14,690
Koppelingstags, opnieuw, zijn
verschillend van hyperlinks,

145
00:07:14,690 --> 00:07:16,760
Als u zich herinneren van onze video een HTML.

146
00:07:16,760 --> 00:07:19,030
En koppeling tags zijn hoe we
Trek in aparte bestanden.

147
00:07:19,030 --> 00:07:23,900
Het soort als het equivalent van
de # include voor het web programmeren.

148
00:07:23,900 --> 00:07:27,140
>> Dus laten we een kijkje nemen op table.HTML.

149
00:07:27,140 --> 00:07:29,380
Misschien herinner je je van onze
HTML video, toonde ik

150
00:07:29,380 --> 00:07:32,000
Een voorbeeld van een zeer
eenvoudige vermenigvuldiging

151
00:07:32,000 --> 00:07:35,160
tafel die vrij uitzag
lelijk, en misschien is er

152
00:07:35,160 --> 00:07:38,650
een manier om het beter te maken met
CSS, zodat het er eigenlijk uit

153
00:07:38,650 --> 00:07:41,120
meer een vermenigvuldiging
tafel, of iets

154
00:07:41,120 --> 00:07:43,730
dat is niet alleen aan elkaar plakken
zonder daadwerkelijke splitsing

155
00:07:43,730 --> 00:07:45,532
tussen de rijen en kolommen.

156
00:07:45,532 --> 00:07:47,490
Dus laten we het hoofd naar
CS50 IDE, en neem een ​​kijkje

157
00:07:47,490 --> 00:07:50,780
hoe CSS kan, soort van, tweak
wat we begonnen met vroeger,

158
00:07:50,780 --> 00:07:53,290
en maken het iets een stuk beter.

159
00:07:53,290 --> 00:07:55,650
>> Dus we zijn in CS50 IDE
Nu, en als onbekende,

160
00:07:55,650 --> 00:07:58,710
we omhoog te trekken in deze
tabel die HTML-pagina.

161
00:07:58,710 --> 00:08:01,090
Table.HTML principe
net definieert de inhoud

162
00:08:01,090 --> 00:08:05,044
van een multiple-- het werd verondersteld te zijn
een vier bij vier tafel van vermenigvuldiging.

163
00:08:05,044 --> 00:08:06,210
Het is vrij eenvoudig.

164
00:08:06,210 --> 00:08:09,410
En we zouden denken dat het zou
zien er goed georganiseerd.

165
00:08:09,410 --> 00:08:15,277
Maar in feite, als we een voorbeeld van deze pagina
zien we dat het is een soort van lelijke, toch?

166
00:08:15,277 --> 00:08:16,860
Duidelijk hebben we rijen en kolommen hier.

167
00:08:16,860 --> 00:08:18,350
Er een soort van scheiding.

168
00:08:18,350 --> 00:08:20,040
Maar het is niet een zinvolle scheiding.

169
00:08:20,040 --> 00:08:23,105
We zijn eigenlijk niet krijgen
te veel informatie hier.

170
00:08:23,105 --> 00:08:25,730
En er is geen scheiding tussen
de rijen en kolommen in termen

171
00:08:25,730 --> 00:08:28,460
horizontale of verticale regels.

172
00:08:28,460 --> 00:08:31,530
We kunnen dit waarschijnlijk te maken
kijk een beetje beter.

173
00:08:31,530 --> 00:08:32,934
Dus laten we proberen.

174
00:08:32,934 --> 00:08:34,559
Dus ik ga dit tabblad hier sluiten.

175
00:08:34,559 --> 00:08:37,434
En ik ga mijn table.HTML sluiten,
en ik heb een andere versie hier

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

177
00:08:39,490 --> 00:08:40,655
We zullen openen dat op.

178
00:08:40,655 --> 00:08:42,530
Het lichaam van de pagina
vrijwel hetzelfde,

179
00:08:42,530 --> 00:08:44,238
maar ik heb veranderd
beetje boven.

180
00:08:44,238 --> 00:08:47,132
En ik zal hier te scrollen.

181
00:08:47,132 --> 00:08:49,340
Merk op dat deze keer, ik ben
met ingesloten stijl labels.

182
00:08:49,340 --> 00:08:53,550
Ik heb een stijl tag geopend, en ik ben nu
definiëren van een CSS-stylesheet net binnen

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

184
00:08:54,310 --> 00:08:56,310
Ik heb een stylesheet die zegt, tafel.

185
00:08:56,310 --> 00:08:58,170
Dat is mijn tag selector.

186
00:08:58,170 --> 00:09:01,340
Ik ben niet met behulp van dot of hash,
die ik zou als ik moeten doen

187
00:09:01,340 --> 00:09:03,710
was het gebruik van een ID of een klasse selector.

188
00:09:03,710 --> 00:09:06,190
Ik heb een tag selector hier-- tafel.

189
00:09:06,190 --> 00:09:10,090
Deze stijl gaat
toepassing op elke tafel tag.

190
00:09:10,090 --> 00:09:14,950
Blijkbaar wil ik een one zetten
pixel brede, stevige blauwe rand,

191
00:09:14,950 --> 00:09:15,779
in mijn tafel.

192
00:09:15,779 --> 00:09:18,320
Dat klinkt als het zou waarschijnlijk
helpen de situatie, toch?

193
00:09:18,320 --> 00:09:20,320
We gaan te hebben
dingen zien er een stuk beter.

194
00:09:20,320 --> 00:09:21,190
Dus dit is prima.

195
00:09:21,190 --> 00:09:23,540
Stilistisch, Ik heb net
ingebed mijn stylesheet hier.

196
00:09:23,540 --> 00:09:25,100
Het is zeker een
aanvaardbare manier om het te doen.

197
00:09:25,100 --> 00:09:26,391
Laten we eens kijken hoe dit eruit ziet.

198
00:09:26,391 --> 00:09:29,790
Dus zal ik hier terug naar beneden te gaan, en
Ik zal een voorbeeld van mijn table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Nou, dat is niet helemaal wat ik wilde,
maar het is precies wat we vroegen.

201
00:09:36,470 --> 00:09:39,530
We hebben gezegd dat deze stijl is
gaan toepassen op onze tafel.

202
00:09:39,530 --> 00:09:43,810
Onze tafel heeft nu een één pixel
brede, stevige blauwe rand er omheen.

203
00:09:43,810 --> 00:09:46,237
We zijn eigenlijk niet krijgen
aan tafel cellen.

204
00:09:46,237 --> 00:09:47,570
We zijn net aan de tafel.

205
00:09:47,570 --> 00:09:49,310
Dus CSS werkte.

206
00:09:49,310 --> 00:09:51,890
Het is toegepast een
stylesheet naar onze tafel.

207
00:09:51,890 --> 00:09:53,981
Maar niet helemaal doen
wat we wilden doen.

208
00:09:53,981 --> 00:09:55,730
Hoe krijgen we te doen
wat we willen doen?

209
00:09:55,730 --> 00:09:59,287
>> Nou, laten we een kijkje nemen op een meer
versie van deze in table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Dus ik ga gewoon deze tabbladen te sluiten.

211
00:10:00,870 --> 00:10:03,890
Ik ga hier terug over te gaan naar mijn
file boom, en open table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Nogmaals, het gaat om mooi te kijken
soortgelijke hier in het begin.

214
00:10:10,350 --> 00:10:14,460
Maar merk, ditmaal, in plaats van
een stylesheet ingebed recht in daar,

215
00:10:14,460 --> 00:10:18,870
Ik ga om te linken in een
stylesheet via de link tag.

216
00:10:18,870 --> 00:10:22,480
Dus ik ben blijkbaar koppelen in een
stylesheet genoemd tables.CSS,

217
00:10:22,480 --> 00:10:25,090
en dit goed is gelijk aan
stylesheet gewoon means-- goed,

218
00:10:25,090 --> 00:10:28,645
wat is dit bestand ten opzichte van wat
Ik ben doing-- is een stylesheet dat ik

219
00:10:28,645 --> 00:10:29,821
met behulp van mijn pagina.

220
00:10:29,821 --> 00:10:32,320
Dus als ik echt wil zien wat
Ik ben bezig met de CSS hier

221
00:10:32,320 --> 00:10:35,010
Ik moet openen die verder gaan
table.CSS bestand ook.

222
00:10:35,010 --> 00:10:37,490
Dus we zullen teruggaan hier
opnieuw om ons bestand boom.

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

224
00:10:38,660 --> 00:10:40,490
We zullen het openspringen.

225
00:10:40,490 --> 00:10:43,070
Nu zien we een beetje van de CSS.

226
00:10:43,070 --> 00:10:45,630
Blijkbaar heb ik een paar
dingen gebeurt hier.

227
00:10:45,630 --> 00:10:48,950
Ik wil blijkbaar een vijf te zetten
pixel brede, stevige rode rand,

228
00:10:48,950 --> 00:10:50,287
rond mijn tafel.

229
00:10:50,287 --> 00:10:52,870
We weten al dat dat gaat
om gewoon te gaan op de omtrek.

230
00:10:52,870 --> 00:10:56,180
We zagen dat in table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Bij elke rij I
blijkbaar wilt opgeven

232
00:10:58,770 --> 00:11:01,950
dat de rijhoogte is 50 pixels hoog.

233
00:11:01,950 --> 00:11:05,680
Dus voor elke rij, herinner
dat is wat de tr tag doet,

234
00:11:05,680 --> 00:11:08,550
Ik ben het maken van deze 50 pixels hoog.

235
00:11:08,550 --> 00:11:09,804
>> Tot slot, ik heb dit commentaar.

236
00:11:09,804 --> 00:11:11,470
En dit is hoe we opmerkingen in CSS.

237
00:11:11,470 --> 00:11:16,174
Het is zeer vergelijkbaar met blok te grijpen
commentaren syntax slash ster.

238
00:11:16,174 --> 00:11:17,090
Alle tekst die u wilt.

239
00:11:17,090 --> 00:11:19,470
Er is geen slash slash al in CSS.

240
00:11:19,470 --> 00:11:23,400
Voor korte inline opmerkingen, hebben we
deze specifieke indeling hier te gebruiken.

241
00:11:23,400 --> 00:11:26,830
Het ziet eruit alsof ik een doe
veel dingen in mijn td-tags.

242
00:11:26,830 --> 00:11:29,710
Vergeet niet td-tags, of tafel
gegevens, die zijn echt net

243
00:11:29,710 --> 00:11:32,210
de kolommen binnenkant
onze rijen, en blijkbaar

244
00:11:32,210 --> 00:11:35,090
voor elk stukje data
in mijn tafel, ik wil

245
00:11:35,090 --> 00:11:38,850
om de achtergrondkleur ingesteld op
zwart zijn, de kleur wit,

246
00:11:38,850 --> 00:11:40,320
kleur is de voorgrond kleur.

247
00:11:40,320 --> 00:11:42,360
Dus dit gaat worden
de tekst van mijn pagina.

248
00:11:42,360 --> 00:11:45,140
Ik wil groot lettertype, 22
punt lettertype, en ik wil

249
00:11:45,140 --> 00:11:47,001
het te zijn van het lettertype familie, Georgië.

250
00:11:47,001 --> 00:11:48,750
Dus ik ben niet van plan om
hebben de standaard lettertype.

251
00:11:48,750 --> 00:11:51,820
Ik ga naar Georgië, aangeven welke
is een van die web safe fonts

252
00:11:51,820 --> 00:11:53,830
dat we eerder hebben gezien.

253
00:11:53,830 --> 00:11:57,284
Ik wil dat mijn tekst worden uitgelijnd
centraal, in het midden van de doos,

254
00:11:57,284 --> 00:11:59,450
Ik wil het niet worden overgelaten
uitgelijnd of rechts uitgelijnd.

255
00:11:59,450 --> 00:12:03,461
En ik wil mijn kolombreedte
worden 50 pixels breed ook.

256
00:12:03,461 --> 00:12:05,210
Laten we eens een kijkje nemen op
wat dit eruit ziet,

257
00:12:05,210 --> 00:12:07,470
en zien of dit is misschien wel een verbetering.

258
00:12:07,470 --> 00:12:12,890
Dus ik ga naar table3.HTML, die
recall, omvat table.CSS als een link,

259
00:12:12,890 --> 00:12:14,830
en we zullen het bekijken.

260
00:12:14,830 --> 00:12:16,800
Dat is een stuk beter, toch?

261
00:12:16,800 --> 00:12:20,004
Dit is eigenlijk begint een kijken
veel meer als een tafel van vermenigvuldiging.

262
00:12:20,004 --> 00:12:21,920
Ik heb dat de rode rand
rond mijn tafel, maar nu

263
00:12:21,920 --> 00:12:26,700
Ik heb ook aangegeven dat
elke rij is 50 pixels breed,

264
00:12:26,700 --> 00:12:30,220
of het is 50 pixels tall-- excuus
mij-- elke kolom is 50 pixels breed.

265
00:12:30,220 --> 00:12:34,251
De gegevens in elke kolom, en slechts
de data, een zwarte achtergrond.

266
00:12:34,251 --> 00:12:36,000
Dus dat is waarom die
witte lijnen zijn er.

267
00:12:36,000 --> 00:12:38,836
Omdat de ruimte
tussen al die cellen,

268
00:12:38,836 --> 00:12:40,710
het is niet een grens in
en van zichzelf, het is gewoon

269
00:12:40,710 --> 00:12:43,170
Ik ben alleen het invullen van de
cellen, die eigenlijk

270
00:12:43,170 --> 00:12:46,310
maakt de randen van de tafel, die
blijkbaar bestaan ​​langs het

271
00:12:46,310 --> 00:12:47,887
was gewoon dunne witte lijnen.

272
00:12:47,887 --> 00:12:48,720
Nu zijn ze zichtbaar.

273
00:12:48,720 --> 00:12:50,380
Nu pop ze uit op het scherm.

274
00:12:50,380 --> 00:12:52,920
En dus dit is een zeer eenvoudig
stylesheet die ik heb toegepast,

275
00:12:52,920 --> 00:12:56,850
en nu mijn tafel lijkt veel meer op
een vier bij vier tafels van vermenigvuldiging,

276
00:12:56,850 --> 00:13:00,950
in plaats van een gewoon door elkaar gegooid puinhoop, waar de
alles is duidelijk rijen en kolommen,

277
00:13:00,950 --> 00:13:03,717
maar niet super goed georganiseerd.

278
00:13:03,717 --> 00:13:06,800
We zijn eigenlijk alleen maar krassen op het oppervlak
van wat je hier kunt doen met CSS.

279
00:13:06,800 --> 00:13:10,330
Gelukkig is de CSS documentatie
is vrij eenvoudig.

280
00:13:10,330 --> 00:13:14,000
U vindt een aantal van haar gebruiken
attributen, vrij vaak.

281
00:13:14,000 --> 00:13:16,087
Degenen die we gesproken over
eerder in deze video.

282
00:13:16,087 --> 00:13:18,170
Er zijn een aantal die u
Waarschijnlijk zullen niet alle te gebruiken.

283
00:13:18,170 --> 00:13:19,469
En dat is prima, ook.

284
00:13:19,469 --> 00:13:22,010
Maar weet, dat er een
veel documentatie die er zijn.

285
00:13:22,010 --> 00:13:25,110
Dus zelfs als we niet alles,
je bent zeker niet links op uw eigen.

286
00:13:25,110 --> 00:13:26,780
Maar CSS is echt leuk
om te experimenteren met.

287
00:13:26,780 --> 00:13:29,040
En ik zou u ten zeerste
om te spelen met uw webpagina's,

288
00:13:29,040 --> 00:13:32,180
en zie hoe je ze kunt maken
look and feel van de gebruiker te verbeteren

289
00:13:32,180 --> 00:13:34,790
ervaring van het bezoeken van uw pagina.

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

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

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