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

2
00:00:05,660 --> 00:00:08,740
>> DOUG LLOYD: Así que vamos a echar una más
vídeo a hablar un idioma más.

3
00:00:08,740 --> 00:00:10,800
En esta ocasión hablaremos de CSS.

4
00:00:10,800 --> 00:00:13,460
Así CSS, que es la abreviatura de
Hojas de estilo en cascada,

5
00:00:13,460 --> 00:00:16,149
es otro lenguaje que usamos
en la construcción de sitios web.

6
00:00:16,149 --> 00:00:17,190
Piense en ello como esto.

7
00:00:17,190 --> 00:00:20,900
Si HTML es lo que utilizamos para organizar la
el contenido que queremos poner en nuestra página,

8
00:00:20,900 --> 00:00:25,390
CSS es la herramienta que utilizamos generalmente
para personalizar el aspecto de nuestros sitios web,

9
00:00:25,390 --> 00:00:30,410
y cómo la experiencia del usuario realmente
es decir, la interacción con nuestro sitio web.

10
00:00:30,410 --> 00:00:32,535
>> Al igual que en HTML, CSS es
no es un lenguaje de programación.

11
00:00:32,535 --> 00:00:33,451
No tiene lógica.

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

13
00:00:34,595 --> 00:00:38,890
No tiene ningún tipo de que
fluir las cosas relacionadas que C hace.

14
00:00:38,890 --> 00:00:40,150
Es un lenguaje de estilo.

15
00:00:40,150 --> 00:00:42,810
Y su sintaxis es bastante
simple, y solo describe

16
00:00:42,810 --> 00:00:46,240
cómo los elementos de nuestra
página tiene cierta HTML

17
00:00:46,240 --> 00:00:48,190
elementos deben ser modificados.

18
00:00:48,190 --> 00:00:51,170
Con ese fin, si no lo ha
sin embargo, visto nuestro video en HTML,

19
00:00:51,170 --> 00:00:53,290
o no están familiarizados con
HTML generalmente, se

20
00:00:53,290 --> 00:00:57,430
puede que desee echar un vistazo a ese
primero, porque esta discusión de CSS

21
00:00:57,430 --> 00:01:00,700
va a depender
algunos conocimientos de HTML.

22
00:01:00,700 --> 00:01:03,740
>> Así que aquí está un muy
sencilla hoja de estilo CSS.

23
00:01:03,740 --> 00:01:06,480
Incluso si usted nunca ha
programado con CSS antes,

24
00:01:06,480 --> 00:01:10,624
Estoy bastante seguro de que puedes imaginar
exactamente lo que hace esta hoja de estilos.

25
00:01:10,624 --> 00:01:11,290
¿Qué hace?

26
00:01:11,290 --> 00:01:15,470
Bueno, aplicada al cuerpo de nuestra web
página, todo lo que entre las etiquetas del cuerpo

27
00:01:15,470 --> 00:01:19,631
en nuestro HTML, y se establece el
color de fondo de la página a azul.

28
00:01:19,631 --> 00:01:21,130
Bueno, es una manera muy sencilla hoja de estilo.

29
00:01:21,130 --> 00:01:23,269
En realidad es muy humano
lenguaje amigable, CSS.

30
00:01:23,269 --> 00:01:26,560
Así que incluso si usted nunca ha usado antes,
que probablemente podría adivinar lo que hicieron.

31
00:01:26,560 --> 00:01:30,140
De hecho, si nos cargamos una página, donde
esta hoja de estilo se ha incrustado de alguna manera,

32
00:01:30,140 --> 00:01:36,240
el color de fondo de nuestra página haría
ser de color azul, y no el blanco estándar.

33
00:01:36,240 --> 00:01:37,670
>> Entonces, ¿cómo construimos hojas de estilo?

34
00:01:37,670 --> 00:01:39,700
Bueno en primer lugar, tenemos que
identificar un selector.

35
00:01:39,700 --> 00:01:42,970
En el último ejemplo,
que el selector estaba el cuerpo.

36
00:01:42,970 --> 00:01:45,050
Entonces tenemos un abierto
corchete, y estamos

37
00:01:45,050 --> 00:01:48,410
va a empezar a definir la
hoja de estilo para ese selector.

38
00:01:48,410 --> 00:01:51,800
En medio de las llaves, nos
sólo hay una lista de pares de valores clave.

39
00:01:51,800 --> 00:01:56,205
El par de valores anterior fue
color de fondo azul y coma,

40
00:01:56,205 --> 00:01:57,830
pero podríamos hacer más y más de estos.

41
00:01:57,830 --> 00:02:02,330
Usted podría tener varias cosas aplicando
a esa etiqueta, ese cuerpo selector.

42
00:02:02,330 --> 00:02:05,960
Cada uno de ellos está separado por una
punto y coma, y ​​nos llama a cada uno de ellos

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

44
00:02:08,949 --> 00:02:12,410
Cuando hayamos terminado con todo el estilo que
que desee aplicar a esa etiqueta en particular,

45
00:02:12,410 --> 00:02:15,300
sólo tenemos un rizado cerrar
prepararse para poner fin a la hoja de estilos,

46
00:02:15,300 --> 00:02:19,640
y hemos terminado de definir la hoja de estilos
para ese selector particular.

47
00:02:19,640 --> 00:02:21,341
>> ¿Cuáles son algunas propiedades CSS comunes?

48
00:02:21,341 --> 00:02:23,590
Bueno, tal vez usted quiere poner
un borde alrededor de algo.

49
00:02:23,590 --> 00:02:26,850
Así que se puede decir, frontera,
que sería su clave,

50
00:02:26,850 --> 00:02:29,460
y luego sus valores serían,
lo que el estilo, el color y el ancho

51
00:02:29,460 --> 00:02:30,209
usted quiere que sea.

52
00:02:30,209 --> 00:02:33,530
Así el estilo podría ser un sólido
línea, una línea de puntos, una línea discontinua,

53
00:02:33,530 --> 00:02:36,020
una línea de cresta, lo que sería la línea ondulada.

54
00:02:36,020 --> 00:02:38,790
Tal vez usted quiere tener que
ser de color azul o negro o verde.

55
00:02:38,790 --> 00:02:41,490
Tal vez usted quiere que sea
1 o 2 o 10 píxeles de ancho.

56
00:02:41,490 --> 00:02:43,254
Puede especificar todas esas cosas.

57
00:02:43,254 --> 00:02:46,420
Tal vez usted quiere configurar el fondo
color de su página de una manera particular.

58
00:02:46,420 --> 00:02:49,215
Ya vimos que, estableciendo el
fondo del cuerpo a ser azul.

59
00:02:49,215 --> 00:02:52,080
>> A continuación, puede utilizar una palabra clave,
por lo CSS tiene ciertos colores

60
00:02:52,080 --> 00:02:55,950
que se construyen en él, azul, verde,
negro, unos colores muy simples que conocemos.

61
00:02:55,950 --> 00:02:59,110
Pero también se puede especificar cualquier
color hexadecimal que desea.

62
00:02:59,110 --> 00:03:05,190
Recordemos que los colores se pueden identificar
por un conjunto de tres números hexadecimales

63
00:03:05,190 --> 00:03:08,500
de 0 a 255, RG y b, la
componente rojo, verde, y azul.

64
00:03:08,500 --> 00:03:10,590
Y así podemos especificar
cualquier color que queremos por,

65
00:03:10,590 --> 00:03:15,520
en lugar de utilizar azul o verde o negro,
usando libras y luego seis dígitos del hexagonal,

66
00:03:15,520 --> 00:03:18,310
y que nos daría
el color de seis dígitos.

67
00:03:18,310 --> 00:03:19,850
Así que ese es el color de fondo.

68
00:03:19,850 --> 00:03:21,975
>> También tenemos el primer plano
color, que es por lo general

69
00:03:21,975 --> 00:03:24,140
va a ser el texto de su página.

70
00:03:24,140 --> 00:03:28,850
Y usted podría hacer igualmente que
con la palabra clave y el o seis dígitos hexadecimal.

71
00:03:28,850 --> 00:03:32,140
Así que usted puede especificar cualquier color que usted
desear para el texto de su página

72
00:03:32,140 --> 00:03:36,370
contra un particular,
color de fondo, arriba.

73
00:03:36,370 --> 00:03:39,100
También puede cambiar y hacer frente
con la fuente, y el texto forma

74
00:03:39,100 --> 00:03:40,400
se rindió en la página.

75
00:03:40,400 --> 00:03:42,010
>> Así que usted puede cambiar el tamaño de fuente.

76
00:03:42,010 --> 00:03:46,320
Puede utilizar palabras clave, como adicional,
Diminuta, y xx pequeño o medio,

77
00:03:46,320 --> 00:03:47,660
grande, y así sucesivamente.

78
00:03:47,660 --> 00:03:50,750
Puede utilizar puntos fijos, 10
puntos, 12 puntos, y así sucesivamente.

79
00:03:50,750 --> 00:03:55,850
Puede usar porcentajes, 80%, 20%,
donde 100% es el tipo de letra predeterminado

80
00:03:55,850 --> 00:03:59,220
tamaño, que es por lo general va a
algo así como 11 o 12 puntos.

81
00:03:59,220 --> 00:04:01,659
O incluso se puede basar fuera
el tamaño de la fuente más reciente.

82
00:04:01,659 --> 00:04:04,950
Si usted acaba de escribir algo y sabes
lo que queremos es que sea más pequeña,

83
00:04:04,950 --> 00:04:08,241
pero no sabes qué es exactamente el tamaño que
Quiero que sea, bueno, usted puede simplemente decir,

84
00:04:08,241 --> 00:04:09,330
tamaño de letra más pequeño.

85
00:04:09,330 --> 00:04:14,344
Y va a basar fuera de la,
justo por encima, es el tamaño de fuente.

86
00:04:14,344 --> 00:04:15,760
Y usted puede conseguir más pequeño o más grande.

87
00:04:15,760 --> 00:04:18,390
Así que hay un montón de diferentes
maneras de especificar el tamaño de fuente.

88
00:04:18,390 --> 00:04:20,690
>> También puede especificar qué
familia de la fuente que desea.

89
00:04:20,690 --> 00:04:23,360
Si usted tiene un particular,
nombre, hay una forma en CSS--

90
00:04:23,360 --> 00:04:27,270
no vamos a hablar de ello
aquí-- para definir un tipo de letra muy específico

91
00:04:27,270 --> 00:04:28,980
e incrustarlo en tu página.

92
00:04:28,980 --> 00:04:30,620
También puede utilizar nombres genéricos.

93
00:04:30,620 --> 00:04:33,540
Hay una gran cantidad de fuentes seguras web
que están predefinidos en el CSS.

94
00:04:33,540 --> 00:04:36,352
Y si usted es un usuario de Microsoft
Oficina en los últimos 20 años,

95
00:04:36,352 --> 00:04:38,810
probablemente estás familiarizado con
muchas de estas fuentes seguras web

96
00:04:38,810 --> 00:04:44,640
Ya, 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
Esos son todos considerados web fuentes seguras.

99
00:04:47,170 --> 00:04:49,169
Y, de hecho, parte de la
razón por la que llegó a ser

100
00:04:49,169 --> 00:04:54,140
iba a ser utilizado para hacer web-- cada página
había acceso a este conjunto predeterminado de fuentes

101
00:04:54,140 --> 00:04:58,480
con varios remates, y todo esto
material de fuente no vamos a entrar,

102
00:04:58,480 --> 00:05:01,130
pero estos son generalmente
accesible en la CSS,

103
00:05:01,130 --> 00:05:04,029
incluso si no lo hace
de lo contrario definir las fuentes.

104
00:05:04,029 --> 00:05:07,070
Por último, puede alinear el texto,
en lugar de ser, por defecto, alineado

105
00:05:07,070 --> 00:05:09,310
a la izquierda, podría
alinearlo a la derecha,

106
00:05:09,310 --> 00:05:13,740
o puede alinearla centrada, o
justificado para que golpeó ambas márgenes.

107
00:05:13,740 --> 00:05:16,800
Así que esas son todas las opciones que puede utilizar
para cambiar lo que su texto se parece,

108
00:05:16,800 --> 00:05:20,120
y cómo se muestra en su página.

109
00:05:20,120 --> 00:05:22,180
>> Sus selectores no lo hacen
tiene que ser sólo las etiquetas.

110
00:05:22,180 --> 00:05:25,539
Anteriormente vimos una etiqueta del cuerpo
selector, y selector de etiquetas

111
00:05:25,539 --> 00:05:26,580
tiene un aspecto como si nada.

112
00:05:26,580 --> 00:05:30,020
Usted nombra una etiqueta, y luego
definir una hoja de estilo para esa etiqueta.

113
00:05:30,020 --> 00:05:32,660
Pero también se puede hacer algo
llamado un selector de ID.

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

115
00:05:34,390 --> 00:05:38,100
Pero noto que ahora no estoy usando
una etiqueta HTML, estoy usando, en este caso,

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

117
00:05:40,720 --> 00:05:42,930
Si usted recuerda de nuestra
video en HTML, hablamos

118
00:05:42,930 --> 00:05:45,620
acerca de cómo las etiquetas pueden tener atributos.

119
00:05:45,620 --> 00:05:48,340
>> Y un atributo que se aplica
a casi todas las etiquetas HTML,

120
00:05:48,340 --> 00:05:51,440
pero no hablamos de ello,
es algo que se llama una etiqueta de identificación.

121
00:05:51,440 --> 00:05:55,250
Así que esto CSS particular, haría
aplicará únicamente a la etiqueta HTML que tiene

122
00:05:55,250 --> 00:05:58,530
un documento de identidad muy específica, que ha nombrado.

123
00:05:58,530 --> 00:06:01,000
Así que si usted tiene alguna parte
en el código, en algún lugar

124
00:06:01,000 --> 00:06:06,090
en su archivo HTML, una etiqueta y usted
especificar como un atributo a la etiqueta,

125
00:06:06,090 --> 00:06:09,060
ID es igual único, este
en particular de estilos

126
00:06:09,060 --> 00:06:15,030
aquí sólo se aplicarán en el medio
esa etiqueta con el identificador de único.

127
00:06:15,030 --> 00:06:17,180
>> También puede hacer algo
llamado un selector de clase.

128
00:06:17,180 --> 00:06:19,920
Así que además de tener
Atributos ID, también puede

129
00:06:19,920 --> 00:06:23,130
añadir un atributo de la clase de etiquetas HTML.

130
00:06:23,130 --> 00:06:27,140
Y cuando se utiliza un atributo de clase,
se puede aplicar a múltiples etiquetas.

131
00:06:27,140 --> 00:06:31,880
Así que si usted tiene varias cosas que
son similares, tal vez usted quiera decir,

132
00:06:31,880 --> 00:06:35,890
etiqueta abierta, bla, bla, bla,
bla, clase es igual a los estudiantes.

133
00:06:35,890 --> 00:06:38,190
Y entonces este particular,
se aplicaría hoja de estilo

134
00:06:38,190 --> 00:06:42,041
a cada etiqueta cuya clase es alumnos.

135
00:06:42,041 --> 00:06:44,290
En este caso, nos fijamos el
color de fondo a amarillo,

136
00:06:44,290 --> 00:06:46,706
y nos gustaría ajustar la opacidad, que
es una etiqueta que no hablamos,

137
00:06:46,706 --> 00:06:52,510
pero sólo se ocupa de la forma transparente
algo es, a 70%, en este caso.

138
00:06:52,510 --> 00:06:54,430
>> Hay dos opciones para
hojas de estilo de escritura.

139
00:06:54,430 --> 00:06:56,680
Puedes escribirlas
directamente en el código HTML

140
00:06:56,680 --> 00:06:59,690
mediante la colocación de las hojas de estilo
entre etiquetas de estilo.

141
00:06:59,690 --> 00:07:03,850
Y esas etiquetas de estilo van dentro de
las etiquetas de la cabeza de su página web.

142
00:07:03,850 --> 00:07:08,240
La forma quizás más preferido hacer
que es escribir un archivo .css aparte,

143
00:07:08,240 --> 00:07:12,360
y luego vincularlo a su
documentar el uso de etiquetas de enlace.

144
00:07:12,360 --> 00:07:14,690
Etiquetas de Enlace, de nuevo, son
diferente de hipervínculos,

145
00:07:14,690 --> 00:07:16,760
si usted recuerda de nuestro video de un HTML.

146
00:07:16,760 --> 00:07:19,030
Y las etiquetas de enlace son la forma en que
tire en archivos separados.

147
00:07:19,030 --> 00:07:23,900
Es algo así como el equivalente de
el #include para la programación web.

148
00:07:23,900 --> 00:07:27,140
>> Así que echemos un vistazo a table.HTML.

149
00:07:27,140 --> 00:07:29,380
Si usted recuerda de nuestra
Vídeo HTML, mostré

150
00:07:29,380 --> 00:07:32,000
un ejemplo de un muy
simple multiplicación

151
00:07:32,000 --> 00:07:35,160
tabla que se ve bastante
feo, y tal vez haya

152
00:07:35,160 --> 00:07:38,650
una manera de hacerlo mejor con
CSS, para que sea realmente se ven

153
00:07:38,650 --> 00:07:41,120
más como una multiplicación
mesa, o algo

154
00:07:41,120 --> 00:07:43,730
que no es simplemente pegadas
sin división real

155
00:07:43,730 --> 00:07:45,532
entre las filas y las columnas.

156
00:07:45,532 --> 00:07:47,490
Así que vayamos a
CS50 IDE, y echar un vistazo

157
00:07:47,490 --> 00:07:50,780
cómo CSS puede, más o menos, ajustar
lo que empezamos con el antes,

158
00:07:50,780 --> 00:07:53,290
y hacer algo mucho mejor.

159
00:07:53,290 --> 00:07:55,650
>> Así que estamos en CS50 IDE
ahora, y si no familiar,

160
00:07:55,650 --> 00:07:58,710
vamos a detenemos en este
mesa de la página HTML.

161
00:07:58,710 --> 00:08:01,090
Table.HTML básicamente
simplemente define el contenido

162
00:08:01,090 --> 00:08:05,044
de un multiple-- que se suponía que era
una mesa de cuatro por cuatro multiplicación.

163
00:08:05,044 --> 00:08:06,210
Es bastante sencillo.

164
00:08:06,210 --> 00:08:09,410
Y nos gustaría pensar que lo haría
mirar bastante bien organizado.

165
00:08:09,410 --> 00:08:15,277
Pero, de hecho, cuando nos previsualización Esta página,
vemos que es algo feo, ¿no?

166
00:08:15,277 --> 00:08:16,860
Claramente tenemos filas y columnas aquí.

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

168
00:08:18,350 --> 00:08:20,040
Pero no es una separación significativa.

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

170
00:08:23,105 --> 00:08:25,730
Y no hay separación entre
las filas y columnas en términos

171
00:08:25,730 --> 00:08:28,460
de las normas horizontales o verticales.

172
00:08:28,460 --> 00:08:31,530
Probablemente podríamos hacer este
mirar un poco mejor.

173
00:08:31,530 --> 00:08:32,934
Entonces intentemos.

174
00:08:32,934 --> 00:08:34,559
Así que voy a cerrar esta pestaña aquí.

175
00:08:34,559 --> 00:08:37,434
Y yo voy a cerrar mi table.HTML,
y tengo otra versión aquí

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

177
00:08:39,490 --> 00:08:40,655
Abriremos eso.

178
00:08:40,655 --> 00:08:42,530
El cuerpo de la página es
prácticamente lo mismo,

179
00:08:42,530 --> 00:08:44,238
pero he cambiado
poco en la parte superior.

180
00:08:44,238 --> 00:08:47,132
Y voy a desplazarme hasta aquí.

181
00:08:47,132 --> 00:08:49,340
Nótese que esta vez, estoy
usando etiquetas de estilo incrustadas.

182
00:08:49,340 --> 00:08:53,550
He abierto una etiqueta de estilo, y estoy ahora
la definición de una hoja de estilo CSS justo dentro

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

184
00:08:54,310 --> 00:08:56,310
Tengo una hoja de estilo que dice: mesa.

185
00:08:56,310 --> 00:08:58,170
Esa es mi selector de etiquetas.

186
00:08:58,170 --> 00:09:01,340
No estoy usando puntos o hachís,
que estaría haciendo si yo

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

188
00:09:03,710 --> 00:09:06,190
Tengo una tabla aquí-- selector de etiquetas.

189
00:09:06,190 --> 00:09:10,090
Este estilo va a
aplicará a cada etiqueta de mesa.

190
00:09:10,090 --> 00:09:14,950
Aparentemente quiero poner uno
pixel de ancho, borde azul sólido,

191
00:09:14,950 --> 00:09:15,779
dentro de mi mesa.

192
00:09:15,779 --> 00:09:18,320
Eso suena como lo haría probablemente
ayudar a la situación, ¿no?

193
00:09:18,320 --> 00:09:20,320
Vamos a tener
las cosas se ven mucho mejor.

194
00:09:20,320 --> 00:09:21,190
Así que esto está muy bien.

195
00:09:21,190 --> 00:09:23,540
Estilísticamente, acabo
incrustado mi hoja de estilo aquí.

196
00:09:23,540 --> 00:09:25,100
Es sin duda una
manera aceptable de hacerlo.

197
00:09:25,100 --> 00:09:26,391
Vamos a ver lo que esto se parece.

198
00:09:26,391 --> 00:09:29,790
Así que me voy a volver aquí, y
Voy a una vista previa de mi table2.HTML.

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

200
00:09:32,430 --> 00:09:36,470
Bueno, eso no es exactamente lo que yo quería,
pero es exactamente lo que habíamos pedido.

201
00:09:36,470 --> 00:09:39,530
Dijimos que este estilo es
va a aplicar a nuestra mesa.

202
00:09:39,530 --> 00:09:43,810
Nuestra mesa ahora tiene un píxel de un
amplia frontera, sólido azul alrededor.

203
00:09:43,810 --> 00:09:46,237
No estamos consiguiendo realmente
en las celdas de la tabla.

204
00:09:46,237 --> 00:09:47,570
Estamos en la mesa.

205
00:09:47,570 --> 00:09:49,310
Así CSS funcionó.

206
00:09:49,310 --> 00:09:51,890
Se ha aplicado una
hoja de estilo a nuestra mesa.

207
00:09:51,890 --> 00:09:53,981
Pero no acababa de hacer
lo que queríamos hacer.

208
00:09:53,981 --> 00:09:55,730
¿Cómo conseguimos hacer
lo que queremos que haga?

209
00:09:55,730 --> 00:09:59,287
>> Bueno, vamos a echar un vistazo a uno más
versión de esto en table3.HTML.

210
00:09:59,287 --> 00:10:00,870
Así que sólo voy a cerrar estas fichas.

211
00:10:00,870 --> 00:10:03,890
Voy a volver por aquí a mi
presentar árbol, y abrir table3.HTML.

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

213
00:10:07,680 --> 00:10:10,350
Una vez más, va a parecer bastante
similar aquí en el comienzo.

214
00:10:10,350 --> 00:10:14,460
Pero aviso, esta vez, en lugar de utilizar
una hoja de estilo incrustada justo allí,

215
00:10:14,460 --> 00:10:18,870
Voy a enlazar en un
hoja de estilo usando la etiqueta de enlace.

216
00:10:18,870 --> 00:10:22,480
Así que estoy aparentemente vincular en un
hoja de estilo llamado tables.CSS,

217
00:10:22,480 --> 00:10:25,090
y esto bien es igual
hoja de estilo simplemente designa todas bien,

218
00:10:25,090 --> 00:10:28,645
lo que es este archivo en relación con lo
Estoy doing-- es una hoja de estilo que estoy

219
00:10:28,645 --> 00:10:29,821
utilizando para mi página.

220
00:10:29,821 --> 00:10:32,320
Así que si realmente quiero ver lo que
Que estoy haciendo con la CSS aquí,

221
00:10:32,320 --> 00:10:35,010
Tengo que ir a voces que
table.CSS archivo también.

222
00:10:35,010 --> 00:10:37,490
Así que vamos a volver por aquí
de nuevo a nuestro árbol de archivos.

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

224
00:10:38,660 --> 00:10:40,490
Vamos a estallar abierto.

225
00:10:40,490 --> 00:10:43,070
Ahora estamos viendo un poco de la CSS.

226
00:10:43,070 --> 00:10:45,630
Al parecer, tengo un par
de cosas que hacer aquí.

227
00:10:45,630 --> 00:10:48,950
Aparentemente Quiero poner cinco
pixel de ancho, borde rojo sólido,

228
00:10:48,950 --> 00:10:50,287
alrededor de mi mesa.

229
00:10:50,287 --> 00:10:52,870
Ya sabemos que eso va
ir sólo en el 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 fila, me
aparentemente desee especificar

232
00:10:58,770 --> 00:11:01,950
que la altura de la fila es de 50 píxeles de alto.

233
00:11:01,950 --> 00:11:05,680
Así, por cada fila, recuerda
eso es lo que hace la etiqueta tr,

234
00:11:05,680 --> 00:11:08,550
Estoy haciendo 50 píxeles de alto.

235
00:11:08,550 --> 00:11:09,804
>> Por último, tengo este comentario.

236
00:11:09,804 --> 00:11:11,470
Y así es como hacemos comentarios en CSS.

237
00:11:11,470 --> 00:11:16,174
Es muy similar a tomar el bloque
comentarios sintaxis estrella Slash.

238
00:11:16,174 --> 00:11:17,090
Todo el texto que desee.

239
00:11:17,090 --> 00:11:19,470
No hay slash slash aunque en CSS.

240
00:11:19,470 --> 00:11:23,400
Para comentarios en línea cortos, tenemos
para utilizar este formato en particular aquí.

241
00:11:23,400 --> 00:11:26,830
Parece que estoy haciendo un
muchas cosas en mis etiquetas td.

242
00:11:26,830 --> 00:11:29,710
Recuerde etiquetas td, o mesa
datos, que en realidad son sólo

243
00:11:29,710 --> 00:11:32,210
las columnas dentro de
nuestras filas, y al parecer,

244
00:11:32,210 --> 00:11:35,090
para cada pieza de datos
en mi mesa, me quiero

245
00:11:35,090 --> 00:11:38,850
para establecer el color de fondo a
ser de color negro, el color sea blanco,

246
00:11:38,850 --> 00:11:40,320
color es color de primer plano.

247
00:11:40,320 --> 00:11:42,360
Así que esto va a ser
el texto de mi página.

248
00:11:42,360 --> 00:11:45,140
Quiero fuente grande, 22
señalar la fuente, y quiero

249
00:11:45,140 --> 00:11:47,001
que es de la familia de fuentes, Georgia.

250
00:11:47,001 --> 00:11:48,750
Así que no voy a
tener la fuente predeterminada.

251
00:11:48,750 --> 00:11:51,820
Voy a especificar Georgia, que
es una de esas fuentes seguras web

252
00:11:51,820 --> 00:11:53,830
que hemos visto antes.

253
00:11:53,830 --> 00:11:57,284
Quiero que mi texto se alinee
en el centro, en el centro de la caja,

254
00:11:57,284 --> 00:11:59,450
Yo no quiero que se dejó
alineado o alineado a la derecha.

255
00:11:59,450 --> 00:12:03,461
Y yo quiero que mi ancho de columna
a ser de 50 píxeles de ancho también.

256
00:12:03,461 --> 00:12:05,210
Echemos un vistazo a
el aspecto que tiene,

257
00:12:05,210 --> 00:12:07,470
y ver si esto es tal vez una mejora.

258
00:12:07,470 --> 00:12:12,890
Así que me voy a ir a table3.HTML, que
recuerdo, incluye table.CSS como un enlace,

259
00:12:12,890 --> 00:12:14,830
y vamos a obtener una vista previa.

260
00:12:14,830 --> 00:12:16,800
Eso es mucho mejor, ¿no?

261
00:12:16,800 --> 00:12:20,004
Esto es en realidad empezando a verse un
mucho más como una tabla de multiplicar.

262
00:12:20,004 --> 00:12:21,920
Tengo que borde rojo
alrededor de mi mesa, pero ahora

263
00:12:21,920 --> 00:12:26,700
También he especificado que
cada fila es de 50 píxeles de ancho,

264
00:12:26,700 --> 00:12:30,220
o que es 50 píxeles tall-- excusa
mí-- cada columna es de 50 píxeles de ancho.

265
00:12:30,220 --> 00:12:34,251
Los datos de cada columna, y sólo
los datos, tiene un fondo negro.

266
00:12:34,251 --> 00:12:36,000
Así que por eso los
líneas blancas están ahí.

267
00:12:36,000 --> 00:12:38,836
Debido a que el espacio en el
entre todas esas células,

268
00:12:38,836 --> 00:12:40,710
no es una frontera en
de por sí, es sólo

269
00:12:40,710 --> 00:12:43,170
Sólo estoy rellenando el
células, que en realidad

270
00:12:43,170 --> 00:12:46,310
hace que las fronteras de la tabla, que
al parecer, existía desde el principio, que

271
00:12:46,310 --> 00:12:47,887
era líneas blancas apenas finas.

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

273
00:12:48,720 --> 00:12:50,380
Ahora hacen estallar fuera de la pantalla.

274
00:12:50,380 --> 00:12:52,920
Y por lo que este es un muy simple
hoja de estilo que yo he aplicado,

275
00:12:52,920 --> 00:12:56,850
y ahora mi mesa se parece mucho más a
una mesa de cuatro por cuatro multiplicación,

276
00:12:56,850 --> 00:13:00,950
en lugar de un desastre simplemente confusa, donde
todo lo que es claramente filas y columnas,

277
00:13:00,950 --> 00:13:03,717
pero no super bien organizado.

278
00:13:03,717 --> 00:13:06,800
Estamos realmente sólo arañando la superficie
de lo que puede hacer con CSS aquí.

279
00:13:06,800 --> 00:13:10,330
Afortunadamente la documentación CSS
es bastante sencillo.

280
00:13:10,330 --> 00:13:14,000
Vamos a usar varios de sus
atributos, con bastante frecuencia.

281
00:13:14,000 --> 00:13:16,087
Los que hablamos
anteriormente en este vídeo.

282
00:13:16,087 --> 00:13:18,170
Hay varios que usted
probablemente no va a utilizar todo.

283
00:13:18,170 --> 00:13:19,469
Y eso está bien, también.

284
00:13:19,469 --> 00:13:22,010
Pero sólo sé, que hay una
gran cantidad de documentación que hay.

285
00:13:22,010 --> 00:13:25,110
Así que incluso si no cubrimos todo,
que sin duda no se queda por su cuenta.

286
00:13:25,110 --> 00:13:26,780
Pero CSS es muy divertido
para experimentar.

287
00:13:26,780 --> 00:13:29,040
Y me animo encarecidamente
jugar con sus páginas web,

288
00:13:29,040 --> 00:13:32,180
y ver cómo se puede hacer que
ver y sentir para mejorar el usuario

289
00:13:32,180 --> 00:13:34,790
experiencia de visitar su página.

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

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

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