1
00:00:00,000 --> 00:00:05,660
>> [REPRODUCCIÓ DE MÚSICA]

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Així que anem a fer una més
vídeo a parlar un idioma més.

3
00:00:08,740 --> 00:00:10,800
En aquesta ocasió parlarem de CSS.

4
00:00:10,800 --> 00:00:13,460
Així CSS, que és l'abreviatura de
Cascading Style Sheets,

5
00:00:13,460 --> 00:00:16,149
és un altre llenguatge que fem servir
en la construcció de llocs web.

6
00:00:16,149 --> 00:00:17,190
Penseu en això com això.

7
00:00:17,190 --> 00:00:20,900
Si HTML és el que fem servir per organitzar la
el contingut que volem posar a la nostra pàgina,

8
00:00:20,900 --> 00:00:25,390
CSS és l'eina que utilitzem generalment
per personalitzar l'aspecte dels nostres llocs web,

9
00:00:25,390 --> 00:00:30,410
i com l'experiència de l'usuari realment
és a dir, la interacció amb el nostre lloc web.

10
00:00:30,410 --> 00:00:32,535
>> Igual que en HTML, CSS és
no és un llenguatge de programació.

11
00:00:32,535 --> 00:00:33,451
No té lògica.

12
00:00:33,451 --> 00:00:34,595
No té variables.

13
00:00:34,595 --> 00:00:38,890
No té cap tipus de què
fluir les coses relacionades que C fa.

14
00:00:38,890 --> 00:00:40,150
És un llenguatge d'estil.

15
00:00:40,150 --> 00:00:42,810
I la seva sintaxi és bastant
simple, i només descriu

16
00:00:42,810 --> 00:00:46,240
com els elements de la nostra
pàgina té certa HTML

17
00:00:46,240 --> 00:00:48,190
elements han de ser modificats.

18
00:00:48,190 --> 00:00:51,170
Amb aquesta fi, si no ho ha
però, vist el nostre vídeo en HTML,

19
00:00:51,170 --> 00:00:53,290
o no estan familiaritzats amb
HTML generalment, es

20
00:00:53,290 --> 00:00:57,430
molts de vosaltres voleu fer una ullada a aquest
primer, perquè aquesta discussió de CSS

21
00:00:57,430 --> 00:01:00,700
dependrà
alguns coneixements d'HTML.

22
00:01:00,700 --> 00:01:03,740
>> Així que aquí està un molt
senzilla full d'estil CSS.

23
00:01:03,740 --> 00:01:06,480
Fins i tot si vostè mai ha
programat amb CSS abans,

24
00:01:06,480 --> 00:01:10,624
Estic bastant segur que pots imaginar
exactament el que fa aquest full d'estils.

25
00:01:10,624 --> 00:01:11,290
Què fa això?

26
00:01:11,290 --> 00:01:15,470
Bé, aplicada al cos de la nostra web
pàgina, tot el que entre les etiquetes del cos

27
00:01:15,470 --> 00:01:19,631
en el nostre HTML, i s'estableix el
color de fons de la pàgina a blau.

28
00:01:19,631 --> 00:01:21,130
Bé, és una manera molt senzilla full d'estil.

29
00:01:21,130 --> 00:01:23,269
En realitat és molt humà
llenguatge amigable, CSS.

30
00:01:23,269 --> 00:01:26,560
Així que fins i tot si vostè mai ha fet servir abans,
que probablement podria endevinar el que van fer.

31
00:01:26,560 --> 00:01:30,140
De fet, si ens carreguem una pàgina, on
aquest full d'estil s'ha incrustat d'alguna manera,

32
00:01:30,140 --> 00:01:36,240
el color de fons de la nostra pàgina faria
ser de color blau, i no el blanc estàndard.

33
00:01:36,240 --> 00:01:37,670
>> Llavors, com construïm fulls d'estil?

34
00:01:37,670 --> 00:01:39,700
Bé en primer lloc, hem de
identificar un selector.

35
00:01:39,700 --> 00:01:42,970
En l'últim exemple,
que el selector havia el cos.

36
00:01:42,970 --> 00:01:45,050
Llavors tenim un obert
claudàtor, i estem

37
00:01:45,050 --> 00:01:48,410
va començar a definir la
full d'estil per a aquest selecció.

38
00:01:48,410 --> 00:01:51,800
Enmig de les claus, ens
només hi ha una llista de parells de valors clau.

39
00:01:51,800 --> 00:01:56,205
El parell de valors anterior va ser
color de fons blau i coma,

40
00:01:56,205 --> 00:01:57,830
però podríem fer més i més d'aquests.

41
00:01:57,830 --> 00:02:02,330
Vostè podria tenir diverses coses aplicant
a aquesta etiqueta, aquest cos de selecció.

42
00:02:02,330 --> 00:02:05,960
Cada un d'ells està separat per una
punt i coma, i ens crida a cadascun d'ells

43
00:02:05,960 --> 00:02:08,949
una declaració, una declaració CSS.

44
00:02:08,949 --> 00:02:12,410
Quan haguem acabat amb tot l'estil que
que vulgueu aplicar a aquesta etiqueta en particular,

45
00:02:12,410 --> 00:02:15,300
només tenim un arrissat tancar
preparar-se per posar fi al full d'estils,

46
00:02:15,300 --> 00:02:19,640
i hem acabat de definir el full d'estils
per a aquest selector particular.

47
00:02:19,640 --> 00:02:21,341
>> Quines són algunes propietats CSS comuns?

48
00:02:21,341 --> 00:02:23,590
Bé, potser vostè vol posar
una vora al voltant d'alguna cosa.

49
00:02:23,590 --> 00:02:26,850
Així que es pot dir, frontera,
que seria el seu clau,

50
00:02:26,850 --> 00:02:29,460
i després els seus valors serien,
el que l'estil, el color i l'ample

51
00:02:29,460 --> 00:02:30,209
vostè vol que sigui.

52
00:02:30,209 --> 00:02:33,530
Així l'estil podria ser un sòlid
línia, una línia de punts, una línia discontínua,

53
00:02:33,530 --> 00:02:36,020
una línia de carena, el que seria la línia ondulada.

54
00:02:36,020 --> 00:02:38,790
Potser vostè vol haver de
ser de color blau o negre o verd.

55
00:02:38,790 --> 00:02:41,490
Potser vostè vol que sigui
1 o 2 o 10 píxels d'amplada.

56
00:02:41,490 --> 00:02:43,254
Podeu especificar totes aquestes coses.

57
00:02:43,254 --> 00:02:46,420
Potser vostè vol configurar el fons
color de la seva pàgina d'una manera particular.

58
00:02:46,420 --> 00:02:49,215
Ja vam veure que, establint el
fons del cos a ser blau.

59
00:02:49,215 --> 00:02:52,080
>> A continuació, pot utilitzar una paraula clau,
per la qual CSS té certs colors

60
00:02:52,080 --> 00:02:55,950
que es construeixen en ell, blau, verd,
negre, uns colors molt simples que coneixem.

61
00:02:55,950 --> 00:02:59,110
Però també es pot especificar qualsevol
color hexadecimal que desitja.

62
00:02:59,110 --> 00:03:05,190
Recordem que els colors es poden identificar
per un conjunt de tres nombres hexadecimals

63
00:03:05,190 --> 00:03:08,500
de 0 a 255, RG i b, la
component vermell, verd, i blau.

64
00:03:08,500 --> 00:03:10,590
I així podem especificar
qualsevol color que volem per,

65
00:03:10,590 --> 00:03:15,520
en lloc d'utilitzar blau o verd o negre,
usant lliures i després sis dígits de l'hexagonal,

66
00:03:15,520 --> 00:03:18,310
i que ens donaria
el color de sis dígits.

67
00:03:18,310 --> 00:03:19,850
Així que aquest és el color de fons.

68
00:03:19,850 --> 00:03:21,975
>> També tenim el primer pla
color, que és en general

69
00:03:21,975 --> 00:03:24,140
serà el text de la seva pàgina.

70
00:03:24,140 --> 00:03:28,850
I vostè podria fer igualment que
amb la paraula clau i el o sis dígits hexadecimal.

71
00:03:28,850 --> 00:03:32,140
Així que vostè pot especificar qualsevol color que vostè
desitjar per al text de la seva pàgina

72
00:03:32,140 --> 00:03:36,370
contra un particular,
color de fons, a dalt.

73
00:03:36,370 --> 00:03:39,100
També pot canviar i fer front
amb la font, i el text forma

74
00:03:39,100 --> 00:03:40,400
es va rendir a la pàgina.

75
00:03:40,400 --> 00:03:42,010
>> Així que vostè pot canviar la mida de font.

76
00:03:42,010 --> 00:03:46,320
Podeu utilitzar paraules clau, com addicional,
Diminuta, i xx petit o mitjà,

77
00:03:46,320 --> 00:03:47,660
gran, i així successivament.

78
00:03:47,660 --> 00:03:50,750
Podeu utilitzar punts fixos, 10
punts, 12 punts, i així successivament.

79
00:03:50,750 --> 00:03:55,850
Feu servir percentatges, 80%, 20%,
on 100% és el tipus de lletra per omissió

80
00:03:55,850 --> 00:03:59,220
grandària, que és en general va a
alguna cosa així com 11 o 12 punts.

81
00:03:59,220 --> 00:04:01,659
O fins i tot es pot basar fora
la mida de la font més recent.

82
00:04:01,659 --> 00:04:04,950
Si vostè acaba d'escriure alguna cosa i saps
el que volem és que sigui més petita,

83
00:04:04,950 --> 00:04:08,241
però no saps què és exactament la grandària que
Vull que sigui, bé, vostè pot simplement dir,

84
00:04:08,241 --> 00:04:09,330
mida de lletra més petit.

85
00:04:09,330 --> 00:04:14,344
I va basar fora de la,
just per sobre, és la mida de font.

86
00:04:14,344 --> 00:04:15,760
I vostè pot aconseguir més petit o més gran.

87
00:04:15,760 --> 00:04:18,390
Així que hi ha un munt de diferents
maneres d'especificar la mida de font.

88
00:04:18,390 --> 00:04:20,690
>> També pot especificar quins
família de la font que desitja.

89
00:04:20,690 --> 00:04:23,360
Si vostè té un particular,
nom, hi ha una forma en CSS--

90
00:04:23,360 --> 00:04:27,270
no anem a parlar-ne
aquí-- per definir un tipus de lletra molt específic

91
00:04:27,270 --> 00:04:28,980
i incrustar a la teva pàgina.

92
00:04:28,980 --> 00:04:30,620
També pot utilitzar noms genèrics.

93
00:04:30,620 --> 00:04:33,540
Hi ha una gran quantitat de fonts segures web
que estan predefinits en el CSS.

94
00:04:33,540 --> 00:04:36,352
I si vostè és un usuari de Microsoft
Oficina en els últims 20 anys,

95
00:04:36,352 --> 00:04:38,810
probablement estàs familiaritzat amb
moltes d'aquestes fonts segures web

96
00:04:38,810 --> 00:04:44,640
Ja, Times New Roman, Arial,
Courier New, Geòrgia, Tahoma, Verdana,

97
00:04:44,640 --> 00:04:45,470
etcètera.

98
00:04:45,470 --> 00:04:47,170
Aquests són tots considerats web fonts segures.

99
00:04:47,170 --> 00:04:49,169
I, de fet, part de la
raó per la qual va arribar a ser

100
00:04:49,169 --> 00:04:54,140
anava a ser utilitzat per fer web-- cada pàgina
hi havia accés a aquest conjunt predeterminat de fonts

101
00:04:54,140 --> 00:04:58,480
amb diverses rematades, i tot això
material de font no entrarem,

102
00:04:58,480 --> 00:05:01,130
però aquests són generalment
accessible a la CSS,

103
00:05:01,130 --> 00:05:04,029
fins i tot si no ho fa
en cas contrari definir les fonts.

104
00:05:04,029 --> 00:05:07,070
Finalment, pot alinear el text,
en lloc de ser, per defecte, alineat

105
00:05:07,070 --> 00:05:09,310
a l'esquerra, podria
alinear-lo a la dreta,

106
00:05:09,310 --> 00:05:13,740
o pot alinear centrada, o
justificat perquè va colpejar ambdues marges.

107
00:05:13,740 --> 00:05:16,800
Així que aquestes són totes les opcions que pot utilitzar
per canviar el que el seu text s'assembla,

108
00:05:16,800 --> 00:05:20,120
i com es mostra en la seva pàgina.

109
00:05:20,120 --> 00:05:22,180
>> Els seus selectors no ho fan
ha de ser només les etiquetes.

110
00:05:22,180 --> 00:05:25,539
Anteriorment vam veure una etiqueta del cos
selector, i selector d'etiquetes

111
00:05:25,539 --> 00:05:26,580
té un aspecte com si res.

112
00:05:26,580 --> 00:05:30,020
Vostè nomena una etiqueta, i després
definir un full d'estil per a aquesta etiqueta.

113
00:05:30,020 --> 00:05:32,660
Però també es pot fer alguna cosa
anomenat un selector de ID.

114
00:05:32,660 --> 00:05:34,390
Un selector ID veu bastant similar.

115
00:05:34,390 --> 00:05:38,100
Però noto que ara no estic fent servir
una etiqueta HTML, estic fent servir, en aquest cas,

116
00:05:38,100 --> 00:05:40,720
#unique o hash únic.

117
00:05:40,720 --> 00:05:42,930
Si vostè recorda de la nostra
vídeo en HTML, parlem

118
00:05:42,930 --> 00:05:45,620
sobre com les etiquetes poden tenir atributs.

119
00:05:45,620 --> 00:05:48,340
>> I un atribut que s'aplica
a gairebé totes les etiquetes HTML,

120
00:05:48,340 --> 00:05:51,440
però no parlem d'això,
és una cosa que es diu una etiqueta d'identificació.

121
00:05:51,440 --> 00:05:55,250
Així que això CSS particular, faria
s'aplicarà únicament a l'etiqueta HTML que té

122
00:05:55,250 --> 00:05:58,530
un document d'identitat molt específica, que ha nomenat.

123
00:05:58,530 --> 00:06:01,000
Així que si vostè té alguna part
en el codi, en algun lloc

124
00:06:01,000 --> 00:06:06,090
en el seu arxiu HTML, una etiqueta i vostè
especificar com un atribut a l'etiqueta,

125
00:06:06,090 --> 00:06:09,060
ID és igual únic, aquest
en particular d'estils

126
00:06:09,060 --> 00:06:15,030
aquí només s'aplicaran en el medi
aquesta etiqueta amb l'identificador d'únic.

127
00:06:15,030 --> 00:06:17,180
>> També pot fer alguna cosa
anomenat un selector de classe.

128
00:06:17,180 --> 00:06:19,920
Així que a més de tenir
Atributs ID, també pot

129
00:06:19,920 --> 00:06:23,130
afegir un atribut de la classe d'etiquetes HTML.

130
00:06:23,130 --> 00:06:27,140
I quan s'utilitza un atribut de classe,
es pot aplicar a múltiples etiquetes.

131
00:06:27,140 --> 00:06:31,880
Així que si vostè té diverses coses que
són similars, potser vostè vulgui dir,

132
00:06:31,880 --> 00:06:35,890
etiqueta oberta, bla, bla, bla,
bla, classe és igual als estudiants.

133
00:06:35,890 --> 00:06:38,190
I llavors aquest particular,
s'aplicaria full d'estil

134
00:06:38,190 --> 00:06:42,041
a cada etiqueta la classe és alumnes.

135
00:06:42,041 --> 00:06:44,290
En aquest cas, ens fixem el
color de fons a groc,

136
00:06:44,290 --> 00:06:46,706
i ens agradaria ajustar l'opacitat, que
és una etiqueta que no parlem,

137
00:06:46,706 --> 00:06:52,510
però només s'ocupa de la forma transparent
alguna cosa és, a 70%, en aquest cas.

138
00:06:52,510 --> 00:06:54,430
>> Hi ha dues opcions per
fulles d'estil d'escriptura.

139
00:06:54,430 --> 00:06:56,680
Pots escriure-
directament en el codi HTML

140
00:06:56,680 --> 00:06:59,690
mitjançant la col·locació de les fulles d'estil
entre etiquetes d'estil.

141
00:06:59,690 --> 00:07:03,850
I aquestes etiquetes d'estil van dins de
les etiquetes del cap de la seva pàgina web.

142
00:07:03,850 --> 00:07:08,240
La forma potser més preferit fer
que és escriure un arxiu .css a part,

143
00:07:08,240 --> 00:07:12,360
i després vincular-lo a la seva
documentar l'ús d'etiquetes d'enllaç.

144
00:07:12,360 --> 00:07:14,690
Etiquetes d'Enllaç, de nou, són
diferent d'hipervincles,

145
00:07:14,690 --> 00:07:16,760
si vostè recorda del nostre vídeo d'un HTML.

146
00:07:16,760 --> 00:07:19,030
I les etiquetes d'enllaç són la forma en què
tiri en arxius separats.

147
00:07:19,030 --> 00:07:23,900
És una cosa així com l'equivalent de
el #include per a la programació web.

148
00:07:23,900 --> 00:07:27,140
>> Així que donem una ullada a table.HTML.

149
00:07:27,140 --> 00:07:29,380
Si vostè recorda de la nostra
Vídeo HTML, vaig mostrar

150
00:07:29,380 --> 00:07:32,000
un exemple d'un molt
simple multiplicació

151
00:07:32,000 --> 00:07:35,160
taula que es veu bastant
lleig, i potser hagi

152
00:07:35,160 --> 00:07:38,650
una manera de fer-ho millor amb
CSS, perquè sigui realment es veuen

153
00:07:38,650 --> 00:07:41,120
més com una multiplicació
taula, o alguna cosa

154
00:07:41,120 --> 00:07:43,730
que no és simplement enganxades
sense divisió real

155
00:07:43,730 --> 00:07:45,532
entre les files i les columnes.

156
00:07:45,532 --> 00:07:47,490
Així que anem a
CS50 IDE, i fer una ullada

157
00:07:47,490 --> 00:07:50,780
com CSS pot, més o menys, ajustar
el que vam començar amb l'abans,

158
00:07:50,780 --> 00:07:53,290
i fer alguna cosa molt millor.

159
00:07:53,290 --> 00:07:55,650
>> Així que estem en CS50 IDE
ara, i si no familiar,

160
00:07:55,650 --> 00:07:58,710
anem a aturem en aquest
taula de la pàgina HTML.

161
00:07:58,710 --> 00:08:01,090
Table.HTML bàsicament
simplement defineix el contingut

162
00:08:01,090 --> 00:08:05,044
d'un multiple-- que se suposava que era
una taula de quatre per quatre multiplicació.

163
00:08:05,044 --> 00:08:06,210
És bastant senzill.

164
00:08:06,210 --> 00:08:09,410
I ens agradaria pensar que ho faria
mirar bastant ben organitzat.

165
00:08:09,410 --> 00:08:15,277
Però, de fet, quan ens previsualització Aquesta pàgina,
veiem que és una cosa lleig, no?

166
00:08:15,277 --> 00:08:16,860
Clarament tenim files i columnes aquí.

167
00:08:16,860 --> 00:08:18,350
Hi ha algun tipus de separació.

168
00:08:18,350 --> 00:08:20,040
Però no és una separació significativa.

169
00:08:20,040 --> 00:08:23,105
No estem aconseguint realment
massa informació aquí.

170
00:08:23,105 --> 00:08:25,730
I no hi ha separació entre
les files i columnes en termes

171
00:08:25,730 --> 00:08:28,460
de les normes horitzontals o verticals.

172
00:08:28,460 --> 00:08:31,530
Probablement podríem fer aquest
mirar una mica millor.

173
00:08:31,530 --> 00:08:32,934
Així que anem a tractar.

174
00:08:32,934 --> 00:08:34,559
Així que vaig a tancar aquesta pestanya aquí.

175
00:08:34,559 --> 00:08:37,434
I jo vaig a tancar el meu table.HTML,
i tinc una altra versió aquí

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

177
00:08:39,490 --> 00:08:40,655
Obrirem això.

178
00:08:40,655 --> 00:08:42,530
El cos de la pàgina és
més o menys la mateixa,

179
00:08:42,530 --> 00:08:44,238
però he canviat
poc a la part superior.

180
00:08:44,238 --> 00:08:47,132
I vaig a desplaçar-me fins aquí.

181
00:08:47,132 --> 00:08:49,340
Cal notar que aquesta vegada, estic
usant etiquetes d'estil incrustades.

182
00:08:49,340 --> 00:08:53,550
He obert una etiqueta d'estil, i estic ara
la definició d'un full d'estil CSS just dins

183
00:08:53,550 --> 00:08:54,310
de la mateixa.

184
00:08:54,310 --> 00:08:56,310
Tinc un full d'estil que diu: taula.

185
00:08:56,310 --> 00:08:58,170
Aquesta és la meva selector d'etiquetes.

186
00:08:58,170 --> 00:09:01,340
No estic fent servir punts o haixix,
que estaria fent si jo

187
00:09:01,340 --> 00:09:03,710
estava utilitzant un identificador o un selector de classe.

188
00:09:03,710 --> 00:09:06,190
Tinc una taula aquí-- selector d'etiquetes.

189
00:09:06,190 --> 00:09:10,090
Aquest estil va
s'aplicarà a cada etiqueta de taula.

190
00:09:10,090 --> 00:09:14,950
Aparentment vull posar-ne un
píxel d'ample, vora blava sòlid,

191
00:09:14,950 --> 00:09:15,779
dins de la meva taula.

192
00:09:15,779 --> 00:09:18,320
Això sona com ho faria probablement
ajudar a la situació, no?

193
00:09:18,320 --> 00:09:20,320
Tindrem
les coses es veuen molt millor.

194
00:09:20,320 --> 00:09:21,190
Així que això està molt bé.

195
00:09:21,190 --> 00:09:23,540
Estilísticament, acabo
incrustat meu full d'estil aquí.

196
00:09:23,540 --> 00:09:25,100
És sens dubte una
manera acceptable de fer-ho.

197
00:09:25,100 --> 00:09:26,391
Anem a veure el que això s'assembla.

198
00:09:26,391 --> 00:09:29,790
Així que em vaig a tornar aquí, i
Vaig a una vista prèvia de la meva table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Bé, això no és exactament el que jo volia,
però és exactament el que havíem demanat.

201
00:09:36,470 --> 00:09:39,530
Vam dir que aquest estil és
va aplicar a la nostra taula.

202
00:09:39,530 --> 00:09:43,810
La nostra taula ara té un píxel d'un
àmplia frontera, sòlid blau voltant.

203
00:09:43,810 --> 00:09:46,237
No estem aconseguint realment
en les cel·les de la taula.

204
00:09:46,237 --> 00:09:47,570
Som a la taula.

205
00:09:47,570 --> 00:09:49,310
Així CSS funcionar.

206
00:09:49,310 --> 00:09:51,890
S'ha aplicat una
full d'estil a la nostra taula.

207
00:09:51,890 --> 00:09:53,981
Però no acabava de fer
el que volíem fer.

208
00:09:53,981 --> 00:09:55,730
Com aconseguim fer
el que volem que faci?

209
00:09:55,730 --> 00:09:59,287
>> Bé, anem a fer una ullada a un més
versió d'això en table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Així que només vaig a tancar aquestes fitxes.

211
00:10:00,870 --> 00:10:03,890
Vaig a tornar per aquí al meu
presentar arbre, i obrir table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Un cop més, va semblar bastant
similar aquí al començament.

214
00:10:10,350 --> 00:10:14,460
Però avís, aquesta vegada, en lloc d'utilitzar
un full d'estil incrustada just allà,

215
00:10:14,460 --> 00:10:18,870
Vaig a enllaçar en un
full d'estil usant l'etiqueta d'enllaç.

216
00:10:18,870 --> 00:10:22,480
Així que estic aparentment vincular en un
full d'estil anomenat tables.CSS,

217
00:10:22,480 --> 00:10:25,090
i això bé és igual
full d'estil simplement designa totes bé,

218
00:10:25,090 --> 00:10:28,645
el que és aquest arxiu en relació amb el
Estic doing-- és un full d'estil que estic

219
00:10:28,645 --> 00:10:29,821
utilitzant per a la meva pàgina.

220
00:10:29,821 --> 00:10:32,320
Així que si realment vull veure el que
Que estic fent amb la CSS aquí,

221
00:10:32,320 --> 00:10:35,010
He d'anar a veus que
table.CSS arxiu també.

222
00:10:35,010 --> 00:10:37,490
Així que anem a tornar per aquí
de nou al nostre arbre de fitxers.

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

224
00:10:38,660 --> 00:10:40,490
Anem a esclatar obert.

225
00:10:40,490 --> 00:10:43,070
Ara estem veient una mica de la CSS.

226
00:10:43,070 --> 00:10:45,630
Pel que sembla, tinc un parell
de coses a fer aquí.

227
00:10:45,630 --> 00:10:48,950
Aparentment Vull posar 5
píxel d'ample, vora vermella sòlid,

228
00:10:48,950 --> 00:10:50,287
voltant de la meva taula.

229
00:10:50,287 --> 00:10:52,870
Ja sabem que això va
anar només en el perímetre.

230
00:10:52,870 --> 00:10:56,180
Vam veure que en table2.HTML.

231
00:10:56,180 --> 00:10:58,770
Amb cada fila, em
aparentment vulgueu especificar

232
00:10:58,770 --> 00:11:01,950
que l'altura de la fila és de 50 píxels d'alt.

233
00:11:01,950 --> 00:11:05,680
Així, per cada fila, recorda
això és el que fa l'etiqueta tr,

234
00:11:05,680 --> 00:11:08,550
Estic fent 50 píxels d'alt.

235
00:11:08,550 --> 00:11:09,804
>> Finalment, tinc aquest comentari.

236
00:11:09,804 --> 00:11:11,470
I així és com fem comentaris en CSS.

237
00:11:11,470 --> 00:11:16,174
És molt similar a prendre el bloc
comentaris sintaxi estrella Slash.

238
00:11:16,174 --> 00:11:17,090
Tot el text que vulgueu.

239
00:11:17,090 --> 00:11:19,470
No hi ha slash slash encara que en CSS.

240
00:11:19,470 --> 00:11:23,400
Per comentaris en línia curts, tenim
per utilitzar aquest format en particular aquí.

241
00:11:23,400 --> 00:11:26,830
Sembla que estic fent un
moltes coses en els meus etiquetes td.

242
00:11:26,830 --> 00:11:29,710
Recordeu etiquetes td, o taula
dades, que en realitat són només

243
00:11:29,710 --> 00:11:32,210
les columnes dins de
les nostres files, i pel que sembla,

244
00:11:32,210 --> 00:11:35,090
per a cada peça de dades
a la meva taula, em vull

245
00:11:35,090 --> 00:11:38,850
per establir el color de fons a
ser de color negre, el color sigui blanc,

246
00:11:38,850 --> 00:11:40,320
color és color de primer pla.

247
00:11:40,320 --> 00:11:42,360
Així que això serà
el text de la meva pàgina.

248
00:11:42,360 --> 00:11:45,140
Vull font gran, 22
assenyalar la font, i vull

249
00:11:45,140 --> 00:11:47,001
que és de la família de fonts, Geòrgia.

250
00:11:47,001 --> 00:11:48,750
Així que no vaig a
tenir la predeterminada.

251
00:11:48,750 --> 00:11:51,820
Vaig a especificar Geòrgia, que
és una d'aquestes fonts segures web

252
00:11:51,820 --> 00:11:53,830
que hem vist abans.

253
00:11:53,830 --> 00:11:57,284
Vull que el meu text s'alineï
al centre, al centre de la caixa,

254
00:11:57,284 --> 00:11:59,450
Jo no vull que es va deixar
alineat o alineat a la dreta.

255
00:11:59,450 --> 00:12:03,461
I jo vull que el meu ample de columna
a ser de 50 píxels d'amplada també.

256
00:12:03,461 --> 00:12:05,210
Fem una ullada a
l'aspecte que té,

257
00:12:05,210 --> 00:12:07,470
i veure si això és potser una millora.

258
00:12:07,470 --> 00:12:12,890
Així que em vaig a anar a table3.HTML, que
record, inclou table.CSS com un enllaç,

259
00:12:12,890 --> 00:12:14,830
i anem a obtenir una vista prèvia.

260
00:12:14,830 --> 00:12:16,800
Això és molt millor, no?

261
00:12:16,800 --> 00:12:20,004
Això és en realitat començant a veure un
molt més com una taula de multiplicar.

262
00:12:20,004 --> 00:12:21,920
He de vora vermella
voltant de la meva taula, però ara

263
00:12:21,920 --> 00:12:26,700
També he especificat que
cada fila és de 50 píxels d'ample,

264
00:12:26,700 --> 00:12:30,220
o que és 50 píxels tall-- excusa
mi-- cada columna és de 50 píxels d'amplada.

265
00:12:30,220 --> 00:12:34,251
Les dades de cada columna, i només
les dades, té un fons negre.

266
00:12:34,251 --> 00:12:36,000
Així que per això els
línies blanques hi són.

267
00:12:36,000 --> 00:12:38,836
A causa de que l'espai en el
entre totes aquestes cèl·lules,

268
00:12:38,836 --> 00:12:40,710
no és una frontera en
de per si, és només

269
00:12:40,710 --> 00:12:43,170
Només estic omplint el
cèl·lules, que en realitat

270
00:12:43,170 --> 00:12:46,310
fa que les fronteres de la taula, que
pel que sembla, existia des del principi, que

271
00:12:46,310 --> 00:12:47,887
era línies blanques a penes fines.

272
00:12:47,887 --> 00:12:48,720
Ara estan visibles.

273
00:12:48,720 --> 00:12:50,380
Ara fan esclatar fora de la pantalla.

274
00:12:50,380 --> 00:12:52,920
I pel que aquest és un molt simple
full d'estil que jo he aplicat,

275
00:12:52,920 --> 00:12:56,850
i ara la meva taula s'assembla molt més a
una taula de quatre per quatre multiplicació,

276
00:12:56,850 --> 00:13:00,950
en lloc d'un desastre simplement confusa, on
tot el que és clarament files i columnes,

277
00:13:00,950 --> 00:13:03,717
però no super ben organitzat.

278
00:13:03,717 --> 00:13:06,800
Estem realment només esgarrapant la superfície
del que pot fer amb CSS aquí.

279
00:13:06,800 --> 00:13:10,330
Afortunadament la documentació CSS
és bastant senzill.

280
00:13:10,330 --> 00:13:14,000
Anem a fer servir diversos dels seus
atributs, amb bastant freqüència.

281
00:13:14,000 --> 00:13:16,087
Els que parlem
anteriorment en aquest vídeo.

282
00:13:16,087 --> 00:13:18,170
Hi ha diversos que vostè
probablement no va a utilitzar tot.

283
00:13:18,170 --> 00:13:19,469
I això està bé, també.

284
00:13:19,469 --> 00:13:22,010
Però només sé, que hi ha una
gran quantitat de documentació que hi ha.

285
00:13:22,010 --> 00:13:25,110
Així que encara que no cobrim tot,
que sens dubte no es queda pel seu compte.

286
00:13:25,110 --> 00:13:26,780
Però CSS és molt divertit
per experimentar.

287
00:13:26,780 --> 00:13:29,040
I m'animo encaridament
jugar amb les seves pàgines web,

288
00:13:29,040 --> 00:13:32,180
i veure com es pot fer que
veure i sentir per millorar l'usuari

289
00:13:32,180 --> 00:13:34,790
experiència de visitar la seva pàgina.

290
00:13:34,790 --> 00:13:35,710
Sóc Doug Lloyd.

291
00:13:35,710 --> 00:13:37,980
Això és CS50.

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