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

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: Acontece que o HTML não é
a única língua que você pode usar dentro

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

4
00:00:03,895 --> 00:00:08,100
Você pode usar algo chamado CSS, ou
Cascading Style Sheets, também.

5
00:00:08,100 --> 00:00:12,120
CSS permite que você especifique muito mais
precisamente a estética de um web

6
00:00:12,120 --> 00:00:16,930
página, incluindo layout e os tamanhos e
cores e fontes e muito mais.

7
00:00:16,930 --> 00:00:20,820
Por exemplo, vamos criar uma página web
aqui chamado css0 que representa um

8
00:00:20,820 --> 00:00:22,740
home page para, digamos, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> Nesta página, vamos ter de John Harvard
nome, sob o qual será

10
00:00:25,480 --> 00:00:28,500
uma bela mensagem para os seus visitantes, sob
que será um rodapé, com

11
00:00:28,500 --> 00:00:30,590
dizer, algumas informações sobre direitos autorais.

12
00:00:30,590 --> 00:00:34,650
Para fazer isso, vamos definir três divisões
para a página usando uma tag

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

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

15
00:00:43,880 --> 00:00:48,330
e agora vamos especificar algo
como, bem-vindo à minha página!

16
00:00:48,330 --> 00:00:50,420
E vamos fechar essa div, também.

17
00:00:50,420 --> 00:00:53,700
>> E agora, um terceiro e último
div, direitos autorais.

18
00:00:53,700 --> 00:00:58,250
Só para ser extravagante, deixe-me usar agora um HTML
entidade, um símbolo que representa

19
00:00:58,250 --> 00:01:01,140
um personagem que você não podia de outro modo
digite no teclado.

20
00:01:01,140 --> 00:01:07,490
Em particular, eu vou fazer
comercial, libra, 169, ponto e vírgula.

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

22
00:01:10,620 --> 00:01:14,260
Então vamos especificar John Harvard
aqui na parte inferior.

23
00:01:14,260 --> 00:01:17,180
Vamos fechar a div e salve o arquivo.

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

25
00:01:18,910 --> 00:01:21,970
A tag div simplesmente define uma divisão
da página, que é essencialmente um

26
00:01:21,970 --> 00:01:23,310
região retangular.

27
00:01:23,310 --> 00:01:26,850
Portanto, neste momento no tempo, eu tenho três
regiões retangulares, um em cima

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

29
00:01:27,620 --> 00:01:30,610
Então, por agora, o efeito é quase tão
embora eu tinha três parágrafos.

30
00:01:30,610 --> 00:01:33,490
Mas não veremos tão grande
espaço em branco entre eles.

31
00:01:33,490 --> 00:01:36,170
>> Vamos salvar este arquivo, altere a sua
permissões e dar uma olhada para um

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
Vamos agora abrir Chrome e visita
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Na verdade, aqui está uma home page
por John Harvard.

36
00:01:54,630 --> 00:01:59,370
Vamos agora estilizar um pouco mais
precisamente usando algum CSS.

37
00:01:59,370 --> 00:02:03,510
>> De volta ao gedit, vamos entrar nessa
primeira tag div e adicionar um estilo

38
00:02:03,510 --> 00:02:11,060
atribuem especificando que eu gostaria de uma
tamanho da fonte, por exemplo, 36 pixels, ou px.

39
00:02:11,060 --> 00:02:15,650
E eu gostaria que o peso desta fonte
ser ousado em vez do padrão,

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, vamos especificar
outro atributo de estilo que tem um

42
00:02:21,170 --> 00:02:25,550
tamanho da fonte de 24 pixels, então
um pouco menor.

43
00:02:25,550 --> 00:02:28,410
Citações fechar após o ponto e vírgula.

44
00:02:28,410 --> 00:02:33,255
>> Por fim, nesta terceira div, vamos fazer
estilo é igual tamanho citação, fonte e

45
00:02:33,255 --> 00:02:35,340
digamos que 12 pixels dessa vez.

46
00:02:35,340 --> 00:02:37,280
Fechar citação após o ponto e vírgula.

47
00:02:37,280 --> 00:02:40,200
Observe, então, que me parece ter
especificou um pouco de estilização para

48
00:02:40,200 --> 00:02:43,770
cada um destes três divs usando,
ao que parece, CSS.

49
00:02:43,770 --> 00:02:47,820
Na verdade, a sintaxe que você vê na
entre essas aspas é CSS,

50
00:02:47,820 --> 00:02:50,620
especificamente CSS propriedades
com valores.

51
00:02:50,620 --> 00:02:53,910
E para que a primeira tag, onde tive
duas dessas propriedades, tamanho da fonte e

52
00:02:53,910 --> 00:02:57,290
peso da fonte, eu simplesmente separados
los com um ponto e vírgula.

53
00:02:57,290 --> 00:02:59,940
>> Agora, só por causa do estilo, eu
ponto e vírgula também incluídos no

54
00:02:59,940 --> 00:03:00,880
No final de cada linha.

55
00:03:00,880 --> 00:03:04,270
Mas eles não são estritamente necessários,
especialmente quando você só tem uma

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

57
00:03:05,580 --> 00:03:08,370
Vamos agora salvar o arquivo e recarregue
no Chrome, e ver o que

58
00:03:08,370 --> 00:03:11,000
o efeito líquido é.

59
00:03:11,000 --> 00:03:13,470
Voltar no Chrome aqui,
vamos clique em Recarregar.

60
00:03:13,470 --> 00:03:15,800
>> Agora temos um pouco mais interessante
home page para John

61
00:03:15,800 --> 00:03:19,000
Harvard, em que a primeira linha com
seu nome, o que está dentro desse

62
00:03:19,000 --> 00:03:23,470
primeiro div, é de 36 pixels de altura e também
negrito, pelo que a segunda linha,

63
00:03:23,470 --> 00:03:27,340
que é, em que a segunda div, é 24
pixels de altura, mas não em negrito.

64
00:03:27,340 --> 00:03:31,500
E em que a terceira linha em que a terceira
div é de 12 pixels de altura e também

65
00:03:31,500 --> 00:03:32,610
não negrito.

66
00:03:32,610 --> 00:03:35,380
Mas suponha que agora eu gostaria de mudar
tudo isso texto sobre

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

68
00:03:36,650 --> 00:03:40,480
>> Eu poderia alinhar cada do indivíduo
divs como sendo centrado.

69
00:03:40,480 --> 00:03:45,330
Mas, mais facilmente, eu poderia envolver os
três divs dentro de uma quarta, uma div

70
00:03:45,330 --> 00:03:49,360
div pai, por assim dizer, e especifique
que que div e todos os seus

71
00:03:49,360 --> 00:03:52,610
descendentes deve ser
texto alinhado centro?

72
00:03:52,610 --> 00:03:54,120
Vamos dar uma olhada.

73
00:03:54,120 --> 00:03:58,510
>> Dentro de gedit, vamos voltar para o meu
corpo e adicionar um novo top up div com

74
00:03:58,510 --> 00:04:04,460
div, o estilo é igual entre aspas
centro alinhar texto, close

75
00:04:04,460 --> 00:04:06,250
cotar após o ponto e vírgula.

76
00:04:06,250 --> 00:04:10,280
E agora, vamos em frente e tudo travessão
dessas linhas que digitou antes.

77
00:04:10,280 --> 00:04:15,040
E abaixo desse terceiro div, vamos
fechar esta nova div.

78
00:04:15,040 --> 00:04:18,829
>> Em outras palavras, porque os três
divs originais são agora as crianças, por assim

79
00:04:18,829 --> 00:04:22,110
dizer, de uma nova div pai e eu tenho
especificou que eu gostaria de alinhar o

80
00:04:22,110 --> 00:04:26,140
texto dessa div pai no centro
da página, que a propriedade será

81
00:04:26,140 --> 00:04:28,290
herdado por todas essas crianças.

82
00:04:28,290 --> 00:04:32,370
Na verdade, vamos salvar o arquivo e
dê uma olhada em um navegador.

83
00:04:32,370 --> 00:04:34,650
Vamos recarregar no Chrome.

84
00:04:34,650 --> 00:04:37,540
E aí temos que, uma ainda melhor
home page para John Harvard.

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