1
00:00:00,000 --> 00:00:05,660
>> [Música tocando]

2
00:00:05,660 --> 00:00:08,740
>> Doug LLOYD: Entón, imos dar unha
vídeo para falar máis dun idioma.

3
00:00:08,740 --> 00:00:10,800
Esta vez imos falar sobre CSS.

4
00:00:10,800 --> 00:00:13,460
Entón, CSS, que é curto para
CSS,

5
00:00:13,460 --> 00:00:16,149
é outra linguaxe que usan
na construción de sitios web.

6
00:00:16,149 --> 00:00:17,190
Pense nisso como este.

7
00:00:17,190 --> 00:00:20,900
O HTML é o que usan para organizar o
contido que quere poñer na nosa páxina,

8
00:00:20,900 --> 00:00:25,390
CSS é a ferramenta que xeralmente usan
para personalizar o xeito no que os nosos sitios ollar,

9
00:00:25,390 --> 00:00:30,410
e como a experiencia do usuario realmente
é, interactuando con o noso sitio.

10
00:00:30,410 --> 00:00:32,535
>> Semellante ao HTML, CSS é
non unha linguaxe de programación.

11
00:00:32,535 --> 00:00:33,451
Non ten lóxica.

12
00:00:33,451 --> 00:00:34,595
Non ten variables.

13
00:00:34,595 --> 00:00:38,890
Non ten ningún tipo de que
fluír as cousas relacionadas que fai C.

14
00:00:38,890 --> 00:00:40,150
É unha linguaxe de estilo.

15
00:00:40,150 --> 00:00:42,810
E a súa sintaxe é moi
simple, e só describe

16
00:00:42,810 --> 00:00:46,240
como os elementos do noso
A páxina está seguro de HTML

17
00:00:46,240 --> 00:00:48,190
elementos debe ser modificado.

18
00:00:48,190 --> 00:00:51,170
Para iso, se non ten
Aínda non asistir o noso vídeo en HTML,

19
00:00:51,170 --> 00:00:53,290
ou non está familiarizado con
HTML xeralmente,

20
00:00:53,290 --> 00:00:57,430
Pode querer dar un ollo ao que
en primeiro lugar, porque esta discusión sobre CSS

21
00:00:57,430 --> 00:01:00,700
dependerá de
algún coñecemento de HTML.

22
00:01:00,700 --> 00:01:03,740
>> Entón aquí está o realmente
simple folla de estilo CSS.

23
00:01:03,740 --> 00:01:06,480
Mesmo se nunca
programado con CSS antes,

24
00:01:06,480 --> 00:01:10,624
Estou seguro que pode descubrir
o que este estilo fai.

25
00:01:10,624 --> 00:01:11,290
O que fai?

26
00:01:11,290 --> 00:01:15,470
Ben, aplicados ao corpo do noso sitio
páxina, todo entre as etiquetas do corpo

27
00:01:15,470 --> 00:01:19,631
na nosa HTML, e define o
cor de fondo da páxina para azul.

28
00:01:19,631 --> 00:01:21,130
Ben, é un estilo moi sinxelo.

29
00:01:21,130 --> 00:01:23,269
De feito, é moi humano
linguaxe agradable, CSS.

30
00:01:23,269 --> 00:01:26,560
Así, mesmo se nunca usou antes,
probablemente podería adiviñar o que fixo.

31
00:01:26,560 --> 00:01:30,140
En realidade, se nós cargados unha páxina onde
este estilo foi incorporado dalgunha forma,

32
00:01:30,140 --> 00:01:36,240
a cor da nosa páxina de fondo faría
ser azul, e non o estándar branco.

33
00:01:36,240 --> 00:01:37,670
>> Entón, como imos construír follas de estilo?

34
00:01:37,670 --> 00:01:39,700
Ben, primeiro temos que
identificar un selector.

35
00:01:39,700 --> 00:01:42,970
No último exemplo,
selector que era o corpo.

36
00:01:42,970 --> 00:01:45,050
Entón temos un diálogo aberto
chaveta, e estamos

37
00:01:45,050 --> 00:01:48,410
comezará a definir o
folla de estilo para ese selector.

38
00:01:48,410 --> 00:01:51,800
En entre as chaves, nós
só ten unha lista de pares de valores clave.

39
00:01:51,800 --> 00:01:56,205
O par valor anterior era
cor azul do fondo punto e coma,

40
00:01:56,205 --> 00:01:57,830
pero podemos facer máis e máis destes.

41
00:01:57,830 --> 00:02:02,330
Pode ter varias cousas aplicando
a esa marca, que o corpo selector.

42
00:02:02,330 --> 00:02:05,960
Cada un deles é separado por un
punto e coma, e chamamos a cada un deles

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

44
00:02:08,949 --> 00:02:12,410
Cando acabarmos con toda a nós styling
quere aplicar a esa marca particular,

45
00:02:12,410 --> 00:02:15,300
só temos unha de peche
prepare para acabar coa folla de estilo,

46
00:02:15,300 --> 00:02:19,640
e estamos a facer definindo a folla de estilo
para que selector particular.

47
00:02:19,640 --> 00:02:21,341
>> Cales son algunhas das propiedades CSS comúns?

48
00:02:21,341 --> 00:02:23,590
Ben, quizais quere poñer
un borde ao redor de algo.

49
00:02:23,590 --> 00:02:26,850
Entón pode dicir, beira,
que sería a súa chave,

50
00:02:26,850 --> 00:02:29,460
e, a continuación, os seus valores serían,
o estilo, cor e ancho

51
00:02:29,460 --> 00:02:30,209
quere que sexa.

52
00:02:30,209 --> 00:02:33,530
Así, o modelo pode ser un sólido
liña, unha liña de puntos, unha liña tracejada,

53
00:02:33,530 --> 00:02:36,020
unha liña do cumio, o que sería liña ondulada.

54
00:02:36,020 --> 00:02:38,790
Quizais sexa telo
ser azul ou negro ou verde.

55
00:02:38,790 --> 00:02:41,490
Que quere que sexa
1 ou 2 ou 10 píxeles de ancho.

56
00:02:41,490 --> 00:02:43,254
Pode especificar todas estas cousas.

57
00:02:43,254 --> 00:02:46,420
Pode utilizar definir o fondo
cor da súa páxina de forma particular.

58
00:02:46,420 --> 00:02:49,215
Xa vimos que, definindo a
fondo do corpo a ser azul.

59
00:02:49,215 --> 00:02:52,080
>> Logo, pode usar a palabra clave,
así CSS ten certas cores

60
00:02:52,080 --> 00:02:55,950
que son construídos para el, azul, verde,
Black, unhas cores moi simple que coñecemos.

61
00:02:55,950 --> 00:02:59,110
Pero tamén pode especificar calquera
hex cor que desexa.

62
00:02:59,110 --> 00:03:05,190
Lembre que as cores poden ser identificados
por un conxunto de tres números hexadecimais

63
00:03:05,190 --> 00:03:08,500
de 0 a 255, RG e b, o
compoñente vermello, verde e azul.

64
00:03:08,500 --> 00:03:10,590
E así podemos especificar
calquera cor que queremos por,

65
00:03:10,590 --> 00:03:15,520
en vez de usar azul ou verde ou negro,
usando libres e, a continuación, seis díxitos do hex,

66
00:03:15,520 --> 00:03:18,310
e que nos daría
cor de seis díxitos.

67
00:03:18,310 --> 00:03:19,850
Entón esta é a cor de fondo.

68
00:03:19,850 --> 00:03:21,975
>> Temos tamén o primeiro plano
cor, que é xeralmente

69
00:03:21,975 --> 00:03:24,140
será o texto da súa páxina.

70
00:03:24,140 --> 00:03:28,850
E podería facelo de forma semellante
con contrasinal e ou seis díxitos hex.

71
00:03:28,850 --> 00:03:32,140
Entón podes especificar calquera cor que
tanto para o texto da súa páxina

72
00:03:32,140 --> 00:03:36,370
contra unha determinada
cor de fondo, alí enriba.

73
00:03:36,370 --> 00:03:39,100
Tamén pode cambiar e tratar
coa pia batismal, ea forma de texto

74
00:03:39,100 --> 00:03:40,400
é procesado na páxina.

75
00:03:40,400 --> 00:03:42,010
>> Para que poida cambiar o tamaño da fonte.

76
00:03:42,010 --> 00:03:46,320
Podes usar palabras clave, como extra,
pequeno extra, ou xx pequeno ou medio,

77
00:03:46,320 --> 00:03:47,660
gran, e así por diante.

78
00:03:47,660 --> 00:03:50,750
Podes usar puntos fixos, 10
punto, punto 12, e así por diante.

79
00:03:50,750 --> 00:03:55,850
Pode utilizar porcentaxes, o 80%, 20%,
onde 100% é a fonte estándar

80
00:03:55,850 --> 00:03:59,220
o tamaño, o cal é xeralmente vai
ser algo así como 11 ou 12 puntos.

81
00:03:59,220 --> 00:04:01,659
Ou tamén se pode basear-lo
do tamaño da fonte máis recente.

82
00:04:01,659 --> 00:04:04,950
Se acaba de escribir algo e sabe
o que quere é para ser menor,

83
00:04:04,950 --> 00:04:08,241
pero non sabe o tamaño que exactamente
quere que sexa, ben, pode simplemente dicir,

84
00:04:08,241 --> 00:04:09,330
tamaño de fonte máis pequena.

85
00:04:09,330 --> 00:04:14,344
E vai basear fóra do,
só por riba, é o tamaño do tipo de letra.

86
00:04:14,344 --> 00:04:15,760
E pode obter menor ou maior.

87
00:04:15,760 --> 00:04:18,390
Polo tanto, hai unha morea de diferentes
formas de especificar o tamaño do tipo de letra.

88
00:04:18,390 --> 00:04:20,690
>> Tamén pode especificar o que
familia de fonte desexado.

89
00:04:20,690 --> 00:04:23,360
Se tes un especial
nome, hai un xeito en CSS--

90
00:04:23,360 --> 00:04:27,270
nós non imos falar sobre iso
aqui-- para definir un tipo de letra moi específico

91
00:04:27,270 --> 00:04:28,980
e incorpora-lo na súa páxina.

92
00:04:28,980 --> 00:04:30,620
Tamén pode usar nomes xenéricos.

93
00:04:30,620 --> 00:04:33,540
Hai unha morea de sitios fontes de confianza
que son predefinidos no CSS.

94
00:04:33,540 --> 00:04:36,352
E se vostede é un usuario de Microsoft
Oficina nos últimos 20 anos,

95
00:04:36,352 --> 00:04:38,810
probablemente está familiarizado con
moitas destas fontes de confianza web

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

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

98
00:04:45,470 --> 00:04:47,170
Aqueles son todos considerados web fontes de confianza.

99
00:04:47,170 --> 00:04:49,169
E, de feito, parte do
razón pola que eles viñeron a ser

100
00:04:49,169 --> 00:04:54,140
estaba a ser usado para facer web-- cada páxina
tiña acceso a este estándar definido de tipos de letra

101
00:04:54,140 --> 00:04:58,480
con varios serifas, e todo isto
material de fonte non imos entrar,

102
00:04:58,480 --> 00:05:01,130
pero estes son xeralmente
accesibles no seu CSS,

103
00:05:01,130 --> 00:05:04,029
mesmo se non fai iso
se non establecer as fontes.

104
00:05:04,029 --> 00:05:07,070
Para rematar, pode aliñar o seu texto,
en vez de ser, por defecto, aliñado

105
00:05:07,070 --> 00:05:09,310
á esquerda, podería
aliñar-lo á dereita,

106
00:05:09,310 --> 00:05:13,740
ou pode aliñar-lo centrado, ou
xustificados para que bateu ambas marxes.

107
00:05:13,740 --> 00:05:16,800
Polo tanto, estas son todas as opcións que pode usar
para cambiar o seu texto parece,

108
00:05:16,800 --> 00:05:20,120
e como aparece na súa páxina.

109
00:05:20,120 --> 00:05:22,180
>> Os seus selectores non facer
ten que ser só as etiquetas.

110
00:05:22,180 --> 00:05:25,539
Xa vimos un tag body
selector, e selector de etiquetas

111
00:05:25,539 --> 00:05:26,580
parece só como aquel.

112
00:05:26,580 --> 00:05:30,020
Vostede nomea un tag, e entón
definir unha folla de estilo para esa marca.

113
00:05:30,020 --> 00:05:32,660
Pero tamén se pode facer algo
chamado un selector de ID.

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

115
00:05:34,390 --> 00:05:38,100
Pero teña en conta que agora non está a usar
unha etiqueta HTML, eu estou usando, neste caso,

116
00:05:38,100 --> 00:05:40,720
#unique, ou hash exclusivo.

117
00:05:40,720 --> 00:05:42,930
Se se lembrar do noso
vídeo HTML, falamos

118
00:05:42,930 --> 00:05:45,620
sobre como as etiquetas poden ter atributos.

119
00:05:45,620 --> 00:05:48,340
>> E un atributo que se aplica
para practicamente todas as etiquetas HTML,

120
00:05:48,340 --> 00:05:51,440
pero nós non falamos sobre iso,
é algo chamado unha etiqueta de identificación.

121
00:05:51,440 --> 00:05:55,250
Entón, iso sería especial CSS
unicamente a etiqueta HTML que ten

122
00:05:55,250 --> 00:05:58,530
unha identificación moi específico, que teña nomeado.

123
00:05:58,530 --> 00:06:01,000
Entón se ten algún lugar
no seu código, en algún lugar

124
00:06:01,000 --> 00:06:06,090
no seu ficheiro HTML, unha marca e
especificar como un atributo a esa marca,

125
00:06:06,090 --> 00:06:09,060
ID iguala orixinal, este
especial de estilo

126
00:06:09,060 --> 00:06:15,030
aquí só se aplica entre
esa marca coa identificación do orixinal.

127
00:06:15,030 --> 00:06:17,180
>> Tamén pode facer algo
chamado un selector de clase.

128
00:06:17,180 --> 00:06:19,920
Así, ademais de teren
Atributos ID, tamén se pode

129
00:06:19,920 --> 00:06:23,130
engadir un atributo de clase de etiquetas HTML.

130
00:06:23,130 --> 00:06:27,140
E cando usa un atributo de clase,
pode ser aplicado a varias marcas.

131
00:06:27,140 --> 00:06:31,880
Entón se ten moitas cousas que
son semellantes, que quere dicir,

132
00:06:31,880 --> 00:06:35,890
tag aberta blah, blah, blah,
blah, clase iguala alumnos.

133
00:06:35,890 --> 00:06:38,190
E entón este particular
stylesheet se aplicaría

134
00:06:38,190 --> 00:06:42,041
para cada etiqueta cuxa clase é alumnos.

135
00:06:42,041 --> 00:06:44,290
Neste caso, nós axustar o
cor de fondo para amarelo,

136
00:06:44,290 --> 00:06:46,706
e nós establecer a opacidade, que
é unha etiqueta que non falar,

137
00:06:46,706 --> 00:06:52,510
pero só trata como transparente
algo é, para 70%, neste caso.

138
00:06:52,510 --> 00:06:54,430
>> Hai dúas opcións para
follas de estilo de escritura.

139
00:06:54,430 --> 00:06:56,680
Pode gravala-los
baixa directamente ao HTML

140
00:06:56,680 --> 00:06:59,690
poñendo as follas de estilo
entre as etiquetas de estilo.

141
00:06:59,690 --> 00:07:03,850
E esas marcas de estilo ir dentro
as etiquetas de cabeceira da súa páxina web.

142
00:07:03,850 --> 00:07:08,240
O xeito máis preferida quizais facer
é escribir un arquivo CSS separado,

143
00:07:08,240 --> 00:07:12,360
e despois vincula-lo no seu
documento usando ligazóns etiquetas.

144
00:07:12,360 --> 00:07:14,690
Etiquetas de enlace, unha vez máis, son
diferente de ligazóns,

145
00:07:14,690 --> 00:07:16,760
se se lembra do noso vídeo dun HTML.

146
00:07:16,760 --> 00:07:19,030
E enlace tags son coma nós
tire en arquivos separados.

147
00:07:19,030 --> 00:07:23,900
É máis ou menos como o equivalente a
o # include para programación web.

148
00:07:23,900 --> 00:07:27,140
>> Entón, imos dar un ollo table.HTML.

149
00:07:27,140 --> 00:07:29,380
Se se lembrar do noso
Vídeo HTML, mostre

150
00:07:29,380 --> 00:07:32,000
un exemplo dunha moi
multiplicación simple

151
00:07:32,000 --> 00:07:35,160
táboa que parecía bastante
feo, e quizais haxa

152
00:07:35,160 --> 00:07:38,650
un xeito de facelo mellor con
CSS, para facela realmente ollar

153
00:07:38,650 --> 00:07:41,120
máis como unha multiplicación
mesa, ou algo así

154
00:07:41,120 --> 00:07:43,730
que non está só preso conxunto
con ningunha división real

155
00:07:43,730 --> 00:07:45,532
entre as liñas e columnas.

156
00:07:45,532 --> 00:07:47,490
Entón imos cabeza para
CS50 IDE, e bótalle un ollo

157
00:07:47,490 --> 00:07:50,780
o xeito no que o CSS pode, de certo xeito, tweak
o que comezamos antes,

158
00:07:50,780 --> 00:07:53,290
e facelo algo moito mellor.

159
00:07:53,290 --> 00:07:55,650
>> Entón, nós estamos en CS50 IDE
agora, e se non familiar,

160
00:07:55,650 --> 00:07:58,710
imos puxar arriba neste
táboa que páxina HTML.

161
00:07:58,710 --> 00:08:01,090
Table.HTML basicamente
só define o contido

162
00:08:01,090 --> 00:08:05,044
dun multiple-- que era quere que sexa
unha mesa de catro por catro multiplicación.

163
00:08:05,044 --> 00:08:06,210
É moi sinxelo.

164
00:08:06,210 --> 00:08:09,410
E pensamos que sería
ollar moi ben organizado.

165
00:08:09,410 --> 00:08:15,277
Pero, en realidade, cando vexa esta páxina,
vemos que é unha especie de feo, non?

166
00:08:15,277 --> 00:08:16,860
É evidente que temos liñas e columnas aquí.

167
00:08:16,860 --> 00:08:18,350
Hai algún tipo de separación.

168
00:08:18,350 --> 00:08:20,040
Pero non é unha separación significativa.

169
00:08:20,040 --> 00:08:23,105
Non estamos realmente a recibir
demasiada información aquí.

170
00:08:23,105 --> 00:08:25,730
E non hai ningunha separación entre
as liñas e columnas en termos

171
00:08:25,730 --> 00:08:28,460
das normas horizontais ou verticais.

172
00:08:28,460 --> 00:08:31,530
Nós probablemente podería facelo
mirar un pouco mellor.

173
00:08:31,530 --> 00:08:32,934
Entón, imos tratar.

174
00:08:32,934 --> 00:08:34,559
Entón eu vou para pechar esta guía aquí enriba.

175
00:08:34,559 --> 00:08:37,434
E eu vou pechar miña table.HTML,
e eu teño outra versión aquí

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

177
00:08:39,490 --> 00:08:40,655
Nós imos abrir iso.

178
00:08:40,655 --> 00:08:42,530
O corpo da páxina é
practicamente o mesmo,

179
00:08:42,530 --> 00:08:44,238
pero eu mudei un
pouco na parte superior.

180
00:08:44,238 --> 00:08:47,132
E eu vou rolar para arriba aquí.

181
00:08:47,132 --> 00:08:49,340
Teña en conta que, esta vez, son
usando tags de estilo incorporadas.

182
00:08:49,340 --> 00:08:53,550
Abrín unha marca de estilo, e eu estou agora
a definición dunha folla de estilo CSS só no interior

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

184
00:08:54,310 --> 00:08:56,310
Eu teño un estilo que di: mesa.

185
00:08:56,310 --> 00:08:58,170
Ese é o meu selector de etiquetas.

186
00:08:58,170 --> 00:09:01,340
Non está a usar punto ou de hash,
que eu estaría facendo si

187
00:09:01,340 --> 00:09:03,710
estaba usando un ID ou un selector de clase.

188
00:09:03,710 --> 00:09:06,190
Eu teño un selector de etiqueta táboa aqui--.

189
00:09:06,190 --> 00:09:10,090
Este estilo vai
se aplican a cada marca de táboa.

190
00:09:10,090 --> 00:09:14,950
Aparentemente quero poñer un
pixel de ancho, bordo azul sólida,

191
00:09:14,950 --> 00:09:15,779
dentro da miña mesa.

192
00:09:15,779 --> 00:09:18,320
Isto soa como sería probablemente
axudar a situación, non?

193
00:09:18,320 --> 00:09:20,320
Nós imos ter
as cousas parecen moito mellor.

194
00:09:20,320 --> 00:09:21,190
Entón, iso é gran.

195
00:09:21,190 --> 00:09:23,540
Estilisticamente, eu teño só
incorporado meu estilo aquí.

196
00:09:23,540 --> 00:09:25,100
É certamente un
forma aceptable para facelo.

197
00:09:25,100 --> 00:09:26,391
Imos ver o que iso parece.

198
00:09:26,391 --> 00:09:29,790
Entón, eu vou volver aquí en baixo, e
Vou ha ver meu table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Ben, iso non é así o que eu quería,
pero é o que pedimos para.

201
00:09:36,470 --> 00:09:39,530
Nós dixemos que este estilo é
indo para aplicar para a nosa mesa.

202
00:09:39,530 --> 00:09:43,810
Nosa mesa ten agora un un pixel
ampla, sólida bordo azul en torno a el.

203
00:09:43,810 --> 00:09:46,237
Non estamos realmente a recibir
nas células da táboa.

204
00:09:46,237 --> 00:09:47,570
Estamos só comezando na mesa.

205
00:09:47,570 --> 00:09:49,310
Entón CSS traballou.

206
00:09:49,310 --> 00:09:51,890
Aplicou unha
folla de estilo para a nosa mesa.

207
00:09:51,890 --> 00:09:53,981
Pero non chegou a facer
o que queriamos facer.

208
00:09:53,981 --> 00:09:55,730
Como é que imos comezar a facer
o que quere que faga?

209
00:09:55,730 --> 00:09:59,287
>> Ben, imos dar un ollo a un
versión deste en table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Entón, eu estou indo só para pechar estas guías.

211
00:10:00,870 --> 00:10:03,890
Eu vou volver aquí para o meu
árbore de ficheiros, e abrir table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Unha vez máis, que vai estar fermosa
semellante aquí no inicio.

214
00:10:10,350 --> 00:10:14,460
Pero aviso, esta vez, en vez de usar
unha folla de estilo incrustada alí,

215
00:10:14,460 --> 00:10:18,870
Vou chamar nun
folla de estilo usando a etiqueta ligazón.

216
00:10:18,870 --> 00:10:22,480
Entón, eu estou conectando aparentemente nun
estilo chamado tables.CSS,

217
00:10:22,480 --> 00:10:25,090
e esta é igual a ben
stylesheet só means-- ben,

218
00:10:25,090 --> 00:10:28,645
o que é o ficheiro en relación ao que
Estou doing-- é unha folla de estilo que eu son

219
00:10:28,645 --> 00:10:29,821
usando a miña páxina.

220
00:10:29,821 --> 00:10:32,320
Entón, se eu realmente quero ver o que
Estou facendo o CSS aquí,

221
00:10:32,320 --> 00:10:35,010
Necesito ir aberto que
table.CSS arquivo tamén.

222
00:10:35,010 --> 00:10:37,490
Entón, nós imos voltar aquí
de novo para a nosa árbore de ficheiros.

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

224
00:10:38,660 --> 00:10:40,490
Imos poñer-la aberta.

225
00:10:40,490 --> 00:10:43,070
Agora estamos a ver un pouco da CSS.

226
00:10:43,070 --> 00:10:45,630
Ao parecer, eu teño un par
de cousas a suceder aquí.

227
00:10:45,630 --> 00:10:48,950
Eu parecer quere poñer un cinco
pixel de ancho, bordo vermella sólida,

228
00:10:48,950 --> 00:10:50,287
en torno a miña mesa.

229
00:10:50,287 --> 00:10:52,870
Xa sabemos que o que está a suceder
ir só no perímetro.

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

231
00:10:56,180 --> 00:10:58,770
Con cada liña, I
aparentemente quere especificar

232
00:10:58,770 --> 00:11:01,950
que o canto da liña é de 50 píxeles de altura.

233
00:11:01,950 --> 00:11:05,680
Así, para cada liña, Lembre
iso é o que a etiqueta tr fai,

234
00:11:05,680 --> 00:11:08,550
Eu estou facendo iso 50 píxeles de altura.

235
00:11:08,550 --> 00:11:09,804
>> Para rematar, eu teño ese comentario.

236
00:11:09,804 --> 00:11:11,470
E é así que nós facemos comentarios en CSS.

237
00:11:11,470 --> 00:11:16,174
É moi semellante a aproveitar bloque
Comentarios estrela barra sintaxe.

238
00:11:16,174 --> 00:11:17,090
Todo o texto que quere.

239
00:11:17,090 --> 00:11:19,470
Non hai ningunha barra barra aínda en CSS.

240
00:11:19,470 --> 00:11:23,400
Para comentarios in liña curtos, temos
para usar o formato particular aquí.

241
00:11:23,400 --> 00:11:26,830
Parece que eu estou facendo un
chea de cousas na miña tags td.

242
00:11:26,830 --> 00:11:29,710
Teña en conta que as etiquetas td, ou mesa
datos, o que realmente son só

243
00:11:29,710 --> 00:11:32,210
as columnas no interior
nosas liñas e, ao parecer,

244
00:11:32,210 --> 00:11:35,090
para cada peza de datos
na miña mesa, quero

245
00:11:35,090 --> 00:11:38,850
para definir a cor de fondo para
ser negro, cor a ser branca,

246
00:11:38,850 --> 00:11:40,320
cor é cor de primeiro plano.

247
00:11:40,320 --> 00:11:42,360
Polo tanto, esta será
o texto da miña páxina.

248
00:11:42,360 --> 00:11:45,140
Quero unha pía bautismal grande, 22
apuntar fonte, e quero

249
00:11:45,140 --> 00:11:47,001
que sexa do tipo de letra, Xeorxia.

250
00:11:47,001 --> 00:11:48,750
Entón eu non vou
ten a fonte predeterminado.

251
00:11:48,750 --> 00:11:51,820
Eu estou indo a especificar a Xeorxia, que
é unha desas fontes de confianza web

252
00:11:51,820 --> 00:11:53,830
que xa vimos antes.

253
00:11:53,830 --> 00:11:57,284
Quero o meu texto a ser aliñado
central, no medio da caixa,

254
00:11:57,284 --> 00:11:59,450
Non quero que sexa deixado
aliñado ou aliñado á dereita.

255
00:11:59,450 --> 00:12:03,461
E quero a miña ancho da columna
para ser de 50 píxeles de ancho ben.

256
00:12:03,461 --> 00:12:05,210
Imos dar un ollo
o que iso parece,

257
00:12:05,210 --> 00:12:07,470
para ver se esta é quizais unha mellora.

258
00:12:07,470 --> 00:12:12,890
Entón, eu estou indo a ir a table3.HTML, que
recall, inclúe table.CSS como un enlace,

259
00:12:12,890 --> 00:12:14,830
e imos velo.

260
00:12:14,830 --> 00:12:16,800
Isto é moito mellor, non?

261
00:12:16,800 --> 00:12:20,004
Este é realmente empezando a mirar un
moito máis como unha táboa de multiplicación.

262
00:12:20,004 --> 00:12:21,920
Teño que bordo vermella
en torno a miña mesa, pero agora

263
00:12:21,920 --> 00:12:26,700
Eu tamén especificou que
cada liña é de 50 píxeles de ancho,

264
00:12:26,700 --> 00:12:30,220
ou é 50 píxeles tall-- escusa
me-- cada columna é de 50 píxeles de ancho.

265
00:12:30,220 --> 00:12:34,251
Os datos en cada columna, e só
os datos, ten un fondo negro.

266
00:12:34,251 --> 00:12:36,000
É por iso que os
liñas brancas están alí.

267
00:12:36,000 --> 00:12:38,836
Xa que o espazo na
entre todas as células,

268
00:12:38,836 --> 00:12:40,710
non é unha fronteira en
e de si mesmo, é só

269
00:12:40,710 --> 00:12:43,170
Eu só estou cubrindo o
As células, que en realidade

270
00:12:43,170 --> 00:12:46,310
fai que os bordos da táboa, o que
aparentemente, existía o tempo, el

271
00:12:46,310 --> 00:12:47,887
era só liñas brancas finas.

272
00:12:47,887 --> 00:12:48,720
Agora están visibles.

273
00:12:48,720 --> 00:12:50,380
Agora saltan da pantalla.

274
00:12:50,380 --> 00:12:52,920
E polo que esta é unha forma moi simple
folla de estilo que eu apliquei,

275
00:12:52,920 --> 00:12:56,850
e agora a miña mesa parece moito máis como
unha mesa de catro por catro multiplicación,

276
00:12:56,850 --> 00:13:00,950
no canto de só unha desorde confusa, onde
todo o que é claramente liñas e columnas,

277
00:13:00,950 --> 00:13:03,717
pero non super ben organizado.

278
00:13:03,717 --> 00:13:06,800
Nós realmente estamos só raiar a superficie
de que pode facer con CSS aquí.

279
00:13:06,800 --> 00:13:10,330
Afortunadamente, a documentación CSS
é moi sinxelo.

280
00:13:10,330 --> 00:13:14,000
Vai empregar varios dos seus
atributos, con bastante frecuencia.

281
00:13:14,000 --> 00:13:16,087
Os que falamos
neste video.

282
00:13:16,087 --> 00:13:18,170
Hai varios que
probablemente non vai utilizar todos.

283
00:13:18,170 --> 00:13:19,469
E iso é bo, tamén.

284
00:13:19,469 --> 00:13:22,010
Pero só sei que hai unha
gran cantidade de documentación por aí.

285
00:13:22,010 --> 00:13:25,110
Así, mesmo se non cubrir todo,
certamente non é deixar no seu propio país.

286
00:13:25,110 --> 00:13:26,780
Pero CSS é realmente divertido
para probar.

287
00:13:26,780 --> 00:13:29,040
E gustaríame moito animamos
para xogar coas súas páxinas web,

288
00:13:29,040 --> 00:13:32,180
e mira como pode tornalos
ollar e sentir para mellorar o usuario

289
00:13:32,180 --> 00:13:34,790
experiencia de visitar a súa páxina.

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

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

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