1
00:00:00,000 --> 00:00:00,290

2
00:00:00,290 --> 00:00:03,310
>> ALTAVOZ: Resulta que HTML no es
el único lenguaje que puede utilizar en el interior

3
00:00:03,310 --> 00:00:03,895
de una página web.

4
00:00:03,895 --> 00:00:08,100
Puedes usar algo llamado CSS, o
Hojas de Estilo en Cascada, también.

5
00:00:08,100 --> 00:00:12,120
CSS permite especificar mucho más
precisamente la estética de una Web

6
00:00:12,120 --> 00:00:16,930
página, incluyendo el diseño y el tamaño y la
colores y las fuentes y mucho más.

7
00:00:16,930 --> 00:00:20,820
Por ejemplo, vamos a crear una página web
aquí se llama css0 que representa un

8
00:00:20,820 --> 00:00:22,740
tu página de inicio para, por ejemplo, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> En esta página, vamos a tener de John Harvard
nombrar, debajo de la cual será

10
00:00:25,480 --> 00:00:28,500
un mensaje para sus visitantes, por debajo de
que será un pie de página, con

11
00:00:28,500 --> 00:00:30,590
decir, un poco de información del copyright.

12
00:00:30,590 --> 00:00:34,650
Para ello, vamos a definir tres divisiones
por la página usando una etiqueta

13
00:00:34,650 --> 00:00:35,670
llamado div.

14
00:00:35,670 --> 00:00:43,880
Abrir div soporte, John Harvard, cerca
div soporte, otro div paréntesis abierto,

15
00:00:43,880 --> 00:00:48,330
y ahora vamos a especificar algo
como, bienvenido a mi página de inicio!

16
00:00:48,330 --> 00:00:50,420
Y vamos a cerrar este div, también.

17
00:00:50,420 --> 00:00:53,700
>> Y ahora una tercera y última
div, los derechos de autor.

18
00:00:53,700 --> 00:00:58,250
Sólo para ser de lujo, permítanme usar ahora un archivo HTML
entidad, un símbolo que representa

19
00:00:58,250 --> 00:01:01,140
un personaje que no podía de otro modo
escriba en el teclado.

20
00:01:01,140 --> 00:01:07,490
En particular, me voy a hacer
signo, libra, 169, punto y coma.

21
00:01:07,490 --> 00:01:10,620
Resulta que es el código numérico
para el símbolo de derechos de autor.

22
00:01:10,620 --> 00:01:14,260
Entonces vamos a especificar John Harvard
aquí en la parte inferior.

23
00:01:14,260 --> 00:01:17,180
Vamos a cerrar el div y guarde el archivo.

24
00:01:17,180 --> 00:01:18,910
>> Ahora, ¿qué es esta etiqueta div?

25
00:01:18,910 --> 00:01:21,970
La etiqueta div simplemente define una división
de la página, que es esencialmente un

26
00:01:21,970 --> 00:01:23,310
región rectangular.

27
00:01:23,310 --> 00:01:26,850
Así que en este momento en el tiempo, tengo tres
regiones rectangulares, uno en la parte superior

28
00:01:26,850 --> 00:01:27,620
de la otra.

29
00:01:27,620 --> 00:01:30,610
Así que por ahora, el efecto es casi tan
aunque yo tenía tres párrafos.

30
00:01:30,610 --> 00:01:33,490
Pero no vamos a ver absolutamente tanto
espacio en blanco entre ellos.

31
00:01:33,490 --> 00:01:36,170
>> Vamos a guardar el archivo, cambie su
permisos y echar un vistazo por una

32
00:01:36,170 --> 00:01:37,990
momento en Chrome.

33
00:01:37,990 --> 00:01:43,040
Chmod a + r CSS0.html.

34
00:01:43,040 --> 00:01:52,440
Ahora vamos a abrir Chrome y visita
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
De hecho, esta es una página de inicio
por John Harvard.

36
00:01:54,630 --> 00:01:59,370
Ahora vamos a stylize un poco más
con precisión utilizando un poco de CSS.

37
00:01:59,370 --> 00:02:03,510
>> De vuelta en gedit, vamos a entrar en este
primera etiqueta div y añadir un estilo

38
00:02:03,510 --> 00:02:11,060
Atribuyo especificando que me gustaría un
tamaño de la fuente de, por ejemplo, 36 píxeles o píxeles.

39
00:02:11,060 --> 00:02:15,650
Y me gustaría que el peso de esta fuente
ser audaces en lugar de la predeterminada,

40
00:02:15,650 --> 00:02:16,980
lo cual es normal.

41
00:02:16,980 --> 00:02:21,170
Por segundo div, vamos a especificar
otro atributo de estilo que tiene un

42
00:02:21,170 --> 00:02:25,550
tamaño de fuente de 24 píxeles, por lo
un poco más pequeño.

43
00:02:25,550 --> 00:02:28,410
Cerrar comillas, tras el punto y coma.

44
00:02:28,410 --> 00:02:33,255
>> Por último, en esta tercera div, vamos a hacer
estilo es igual al tamaño de presupuesto, la fuente, y

45
00:02:33,255 --> 00:02:35,340
digamos 12 píxeles en esta ocasión.

46
00:02:35,340 --> 00:02:37,280
Cerrar cotización después del punto y coma.

47
00:02:37,280 --> 00:02:40,200
Nótese entonces que me parece que tienen
especificado un poco de estilización para

48
00:02:40,200 --> 00:02:43,770
cada uno de estos tres divs utilizando,
resulta, CSS.

49
00:02:43,770 --> 00:02:47,820
De hecho, la sintaxis que se ve en
entre esas comillas es CSS,

50
00:02:47,820 --> 00:02:50,620
CSS específicamente propiedades
con valores.

51
00:02:50,620 --> 00:02:53,910
Y por esa primera etiqueta, donde tuve
dos de estas propiedades, tamaño de fuente y

52
00:02:53,910 --> 00:02:57,290
peso de la fuente, simplemente me separé
con punto y coma.

53
00:02:57,290 --> 00:02:59,940
>> Ahora, sólo por el bien de estilo, me
punto y coma también incluidos en

54
00:02:59,940 --> 00:03:00,880
el final de cada línea.

55
00:03:00,880 --> 00:03:04,270
Pero no son estrictamente necesarios,
sobre todo cuando sólo tiene un

56
00:03:04,270 --> 00:03:05,580
propiedad definida.

57
00:03:05,580 --> 00:03:08,370
Ahora vamos a guardar el archivo y vuelva a cargar
en Chrome, y ver lo que

58
00:03:08,370 --> 00:03:11,000
el efecto neto es.

59
00:03:11,000 --> 00:03:13,470
De vuelta en Chrome aquí,
hagamos click en Recargar.

60
00:03:13,470 --> 00:03:15,800
>> Ahora tenemos un poco más interesante
tu página de inicio para John

61
00:03:15,800 --> 00:03:19,000
Harvard, en el que la primera línea con
su nombre, que se encuentra dentro de ese

62
00:03:19,000 --> 00:03:23,470
primera div, es de 36 píxeles de alto y también
negrita, en el que la segunda línea,

63
00:03:23,470 --> 00:03:27,340
que es en ese segundo div, es decir 24
píxeles de alto, pero no en negrita.

64
00:03:27,340 --> 00:03:31,500
Y por lo que la tercera línea en ese tercer
div es de 12 píxeles de alto y también

65
00:03:31,500 --> 00:03:32,610
No negrita.

66
00:03:32,610 --> 00:03:35,380
Pero supongo que ahora me gustaría cambiar
todo de este texto sobre

67
00:03:35,380 --> 00:03:36,650
de tal manera que está centrada.

68
00:03:36,650 --> 00:03:40,480
>> Yo podría alinear cada uno de los individuos
divs como está centrada.

69
00:03:40,480 --> 00:03:45,330
Pero más fácilmente, podría envolver los
tres divs dentro de un cuarto, un div

70
00:03:45,330 --> 00:03:49,360
div padre, por así decirlo, y especificar
que que div y la totalidad de su

71
00:03:49,360 --> 00:03:52,610
descendientes deberían estar
centrar el texto alineado?

72
00:03:52,610 --> 00:03:54,120
Vamos a echar un vistazo.

73
00:03:54,120 --> 00:03:58,510
>> Dentro de gedit, vamos a volver a mi
cuerpo y añadir un nuevo div encima de la tapa con

74
00:03:58,510 --> 00:04:04,460
div, estilo es igual entre comillas
Centro texto alinee, cerca

75
00:04:04,460 --> 00:04:06,250
postular después del punto y coma.

76
00:04:06,250 --> 00:04:10,280
Y ahora, vamos a seguir adelante y todo guión
de aquellas líneas que hemos escrito antes.

77
00:04:10,280 --> 00:04:15,040
Y por debajo de la tercera div, vamos a
cerrar esta nueva div.

78
00:04:15,040 --> 00:04:18,829
>> En otras palabras, debido a los tres
divs originales ahora son hijos, por lo que

79
00:04:18,829 --> 00:04:22,110
Hablo, por un nuevo div padre y no tengo
especifiqué que me gustaría para alinear el

80
00:04:22,110 --> 00:04:26,140
texto de ese div padre en el centro
de la página, que la propiedad será

81
00:04:26,140 --> 00:04:28,290
heredado por todos esos niños.

82
00:04:28,290 --> 00:04:32,370
De hecho, vamos a guardar el archivo y
echar un vistazo en un navegador.

83
00:04:32,370 --> 00:04:34,650
Vamos Recargar en Chrome.

84
00:04:34,650 --> 00:04:37,540
Y ahí lo tenemos, un aún mejor
La página principal de John Harvard.

85
00:04:37,540 --> 00:04:39,872