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

2
00:00:00,290 --> 00:00:03,310
>> Speak: Acontece que o HTML non é
a única lingua que pode usar dentro

3
00:00:03,310 --> 00:00:03,895
dunha páxina web.

4
00:00:03,895 --> 00:00:08,100
Podes usar algo chamado CSS, ou
CSS, tamén.

5
00:00:08,100 --> 00:00:12,120
CSS permite que especifique máis
precisamente a estética dun web

6
00:00:12,120 --> 00:00:16,930
páxina, incluíndo esquema e os tamaños e
cores e fontes e moito máis.

7
00:00:16,930 --> 00:00:20,820
Por exemplo, imos crear unha páxina web
aquí chamado css0 que representa un

8
00:00:20,820 --> 00:00:22,740
páxina principal para, digamos, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Nesta páxina, imos ter de John Harvard
nome, baixo o cal será

10
00:00:25,480 --> 00:00:28,500
unha fermosa mensaxe para os seus visitantes, baixo
que será un pé, con

11
00:00:28,500 --> 00:00:30,590
dicir, unha información sobre dereitos de autor.

12
00:00:30,590 --> 00:00:34,650
Para iso, imos definir tres divisións
á páxina usando unha etiqueta

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

14
00:00:35,670 --> 00:00:43,880
Abrir soporte div, John Harvard, preto
div soporte, outra div soporte aberto,

15
00:00:43,880 --> 00:00:48,330
e agora imos indicar algo
como, benvido á miña páxina!

16
00:00:48,330 --> 00:00:50,420
E imos pechar esta div, tamén.

17
00:00:50,420 --> 00:00:53,700
>> E agora, un terceiro e último
div, dereitos de autor.

18
00:00:53,700 --> 00:00:58,250
Só ser extravagante, déixeme usar agora un HTML
entidade, un símbolo que representa

19
00:00:58,250 --> 00:01:01,140
un personaxe que non podía doutro xeito
escriba no teclado.

20
00:01:01,140 --> 00:01:07,490
En particular, eu vou facer
comercial, libra, 169, punto e coma.

21
00:01:07,490 --> 00:01:10,620
Acontece que é o código numérico
ao símbolo de copyright.

22
00:01:10,620 --> 00:01:14,260
Entón imos especificar John Harvard
aquí na parte inferior.

23
00:01:14,260 --> 00:01:17,180
Imos pechar a div e salva o arquivo.

24
00:01:17,180 --> 00:01:18,910
>> Agora, o que é esa etiqueta div?

25
00:01:18,910 --> 00:01:21,970
A etiqueta div simplemente define unha división
da páxina, que é esencialmente un

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

27
00:01:23,310 --> 00:01:26,850
Polo tanto, neste momento no tempo, eu teño tres
rexións rectangulares, un encima

28
00:01:26,850 --> 00:01:27,620
do outro.

29
00:01:27,620 --> 00:01:30,610
Entón, por agora, o efecto é case tan
aínda que eu tiña tres parágrafos.

30
00:01:30,610 --> 00:01:33,490
Pero non veremos tan grande
espazo en branco entre eles.

31
00:01:33,490 --> 00:01:36,170
>> Imos gardar este ficheiro, cambie a súa
permisos e dar un ollo a un

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

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

34
00:01:43,040 --> 00:01:52,440
Imos agora abrir Chrome e visita
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
De feito, aquí está unha páxina principal
por John Harvard.

36
00:01:54,630 --> 00:01:59,370
Imos agora estilizar un pouco máis
precisamente utilizando algún CSS.

37
00:01:59,370 --> 00:02:03,510
>> De volta ao gedit, imos entrar nesa
primeira etiqueta div e engadir un estilo

38
00:02:03,510 --> 00:02:11,060
atribúen especificando que me gustaría un
tamaño do tipo de letra, por exemplo, 36 píxeles, ou px.

39
00:02:11,060 --> 00:02:15,650
E gustaríame que o peso desta fonte
ser ousado no canto do estándar,

40
00:02:15,650 --> 00:02:16,980
o que é normal.

41
00:02:16,980 --> 00:02:21,170
Para a segunda div, imos especificar
outro atributo de estilo que ten un

42
00:02:21,170 --> 00:02:25,550
tamaño do tipo de letra de 24 píxeles, entón
un pouco menor.

43
00:02:25,550 --> 00:02:28,410
Citas pechar despois do punto e coma.

44
00:02:28,410 --> 00:02:33,255
>> Finalmente, nesta terceira div, imos facer
estilo é igual tamaño cita, fonte e

45
00:02:33,255 --> 00:02:35,340
digamos que 12 píxeles desta vez.

46
00:02:35,340 --> 00:02:37,280
Pechar cita despois do punto e coma.

47
00:02:37,280 --> 00:02:40,200
Teña en conta, entón, que me parece
especificou un pouco de estilización para

48
00:02:40,200 --> 00:02:43,770
cada un destes tres divs usando,
ao parecer, CSS.

49
00:02:43,770 --> 00:02:47,820
En realidade, a sintaxe que ve na
entre esas comiñas é CSS,

50
00:02:47,820 --> 00:02:50,620
especificamente CSS propiedades
con valores.

51
00:02:50,620 --> 00:02:53,910
E para que a primeira etiqueta, onde tiven
dúas desas propiedades, tamaño da fonte e

52
00:02:53,910 --> 00:02:57,290
peso da fonte, eu simplemente separados
los con un punto e coma.

53
00:02:57,290 --> 00:02:59,940
>> Agora, só por mor do estilo, eu
punto e coma tamén incluídos no

54
00:02:59,940 --> 00:03:00,880
Ao final de cada liña.

55
00:03:00,880 --> 00:03:04,270
Pero eles non son estrictamente necesarios,
especialmente cando só ten unha

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

57
00:03:05,580 --> 00:03:08,370
Imos agora gardar o ficheiro e recargue
en Chrome, e ver o que

58
00:03:08,370 --> 00:03:11,000
o efecto neto é.

59
00:03:11,000 --> 00:03:13,470
Volver en Chrome aquí,
imos prema Recargar.

60
00:03:13,470 --> 00:03:15,800
>> Agora temos un pouco máis interesante
páxina principal para John

61
00:03:15,800 --> 00:03:19,000
Harvard, no que a primeira liña con
o seu nome, o que está dentro dese

62
00:03:19,000 --> 00:03:23,470
primeiro div, é de 36 píxeles de altura e tamén
negra, polo que a segunda liña,

63
00:03:23,470 --> 00:03:27,340
que é, en que a segunda div, é 24
píxeles de altura, aínda que non en negra.

64
00:03:27,340 --> 00:03:31,500
E en que a terceira liña na que a terceira
div é de 12 píxeles de altura e tamén

65
00:03:31,500 --> 00:03:32,610
non negra.

66
00:03:32,610 --> 00:03:35,380
Pero supoñamos que agora me gustaría cambiar
todo isto texto sobre

67
00:03:35,380 --> 00:03:36,650
de tal forma que é centrado.

68
00:03:36,650 --> 00:03:40,480
>> Podería aliñar cada do individuo
divs como centrado.

69
00:03:40,480 --> 00:03:45,330
Pero, máis facilmente, eu podería implicar os
tres divs dentro dunha cuarta, unha div

70
00:03:45,330 --> 00:03:49,360
div pai, por así dicir, e seleccione
que que div e todos os seus

71
00:03:49,360 --> 00:03:52,610
descendentes debe ser
texto aliñado centro?

72
00:03:52,610 --> 00:03:54,120
Imos dar un ollo.

73
00:03:54,120 --> 00:03:58,510
>> Dentro gedit, imos voltar para o meu
corpo e engadir un novo top up div con

74
00:03:58,510 --> 00:04:04,460
div, o estilo é igual entre comiñas
centro aliñar texto, close

75
00:04:04,460 --> 00:04:06,250
cotar despois do punto e coma.

76
00:04:06,250 --> 00:04:10,280
E agora, imos adiante e todo guión
desas liñas que escribiu antes.

77
00:04:10,280 --> 00:04:15,040
E por baixo dese terceiro div, imos
pechar esta nova div.

78
00:04:15,040 --> 00:04:18,829
>> Noutras palabras, por que os tres
divs orixinais son agora os nenos, por así

79
00:04:18,829 --> 00:04:22,110
dicir, dunha nova div pai e eu teño
especificou que me gustaría aliñar o

80
00:04:22,110 --> 00:04:26,140
texto desta div pai no centro
da páxina, que a propiedade será

81
00:04:26,140 --> 00:04:28,290
herdado por todas eses nenos.

82
00:04:28,290 --> 00:04:32,370
De feito, imos gardar o ficheiro e
bótalle un ollo nun navegador.

83
00:04:32,370 --> 00:04:34,650
Imos volver cargar en Chrome.

84
00:04:34,650 --> 00:04:37,540
E aí temos que, unha aínda mellor
páxina principal para John Harvard.

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