1
00:00:00,000 --> 00:00:00,300

2
00:00:00,300 --> 00:00:04,840
>> COLUNA: Então, na verdade, não é o melhor
projetar para misturar CSS com HTML.

3
00:00:04,840 --> 00:00:08,700
Em vez disso, é melhor levar o seu
CSS, colocá-lo em algum lugar central, e

4
00:00:08,700 --> 00:00:11,430
de alguma forma, aplicá-lo à
tags em sua página web.

5
00:00:11,430 --> 00:00:15,290
Para conseguir isso, nós podemos realmente parar
usando o atributo de estilo e, em vez

6
00:00:15,290 --> 00:00:19,290
use uma marca de estilo, que pertence ao
cabeça de uma página web ao lado, para

7
00:00:19,290 --> 00:00:20,700
exemplo, o seu título.

8
00:00:20,700 --> 00:00:24,400
>> Vamos tentar dar um presente e re-implementar
uma home page para John Harvard

9
00:00:24,400 --> 00:00:26,410
usando a tag Style.

10
00:00:26,410 --> 00:00:28,930
Eu já chegou nos iniciados
aqui com três divs para

11
00:00:28,930 --> 00:00:30,260
Homepage de John Harvard.

12
00:00:30,260 --> 00:00:33,990
Mas primeiro vamos agora vá até este primeiro
div e adicionar um novo atributo,

13
00:00:33,990 --> 00:00:38,680
nomeadamente ID, e especificar que uma única
identificador para esse div especial

14
00:00:38,680 --> 00:00:42,390
deve ser, por exemplo, entre aspas
"Top", um nome arbitrário, mas

15
00:00:42,390 --> 00:00:45,840
descritiva na medida em que este é div
de fato no topo da minha página.

16
00:00:45,840 --> 00:00:48,920
>> Para a próxima div, vamos dar-lhe um
ID diferente de entre aspas

17
00:00:48,920 --> 00:00:54,080
"Média", e vamos dar o terceiro div
um ID de entre aspas "de baixo". Nós

18
00:00:54,080 --> 00:00:57,740
Agora temos três identificador único
ao qual podemos aplicar algumas CSS

19
00:00:57,740 --> 00:01:01,210
propriedades, mas em primeiro lugar, do retorno deixar
na cabeça da página.

20
00:01:01,210 --> 00:01:04,760
Logo acima do título aqui, eu vou
vá em frente e definir o estilo

21
00:01:04,760 --> 00:01:07,120
e feche o estilo.

22
00:01:07,120 --> 00:01:10,340
>> Dentro deste momento, eu estou indo para definir
algumas propriedades CSS, ou seja, a

23
00:01:10,340 --> 00:01:14,550
mesmos que eu já tinha em Estilo
atributos, mas aqui eles vão ser

24
00:01:14,550 --> 00:01:16,320
definido de forma centralizada.

25
00:01:16,320 --> 00:01:20,880
Para fazer isso, eu vou especificar a libra
símbolo seguido de topo, assim

26
00:01:20,880 --> 00:01:24,710
especificando que o seguinte CSS
propriedades devem ser aplicadas a qualquer

27
00:01:24,710 --> 00:01:28,800
Elemento HTML tem o único
identificador de topo.

28
00:01:28,800 --> 00:01:32,240
Estou passando então a ter algum aberto e
chaves fechadas, e eu vou

29
00:01:32,240 --> 00:01:39,170
especificar, por exemplo, o tamanho da fonte deve ser 36
pixels, o peso da fonte deve ser ousado.

30
00:01:39,170 --> 00:01:41,810
>> Para manter as coisas limpas, eu estou colocando cada
dessas propriedades agora em sua própria

31
00:01:41,810 --> 00:01:44,610
linha, mas isso é apenas um
convenção estilística.

32
00:01:44,610 --> 00:01:47,830
Abaixo disso, vamos agora definir outra
selector, por assim dizer.

33
00:01:47,830 --> 00:01:52,680
Este para a tag HTML que tem
identificador único de meio.

34
00:01:52,680 --> 00:01:57,540
E, aqui, vamos especificar um tamanho de fonte
de 24 pixels, que a seguir outra

35
00:01:57,540 --> 00:02:01,520
seletor para baixo, e dentro
de que, vamos especificar um

36
00:02:01,520 --> 00:02:03,850
tamanho da fonte de 12 pixels.

37
00:02:03,850 --> 00:02:09,350
>> Vamos agora salvar, alterar as permissões
, e carregar esta página em um navegador,

38
00:02:09,350 --> 00:02:14,230
chmod a + r css-1.html.

39
00:02:14,230 --> 00:02:22,260
Vamos abrir Chrome e visitar
http://localhost/css-1.html.

40
00:02:22,260 --> 00:02:22,960
Não é mau.

41
00:02:22,960 --> 00:02:26,930
Exatamente como eu pretendia, mas eu gostaria de
levar as coisas um passo adiante agora e

42
00:02:26,930 --> 00:02:29,050
O texto de centro John Harvard.

43
00:02:29,050 --> 00:02:32,080
Agora, para fazê-lo, eu poderia envolver o
página inteira em uma div como eu

44
00:02:32,080 --> 00:02:33,800
fiz um exemplo anterior.

45
00:02:33,800 --> 00:02:37,820
Ou eu posso ser mais inteligente e perceber que
todas estas estão no interior de divs

46
00:02:37,820 --> 00:02:42,420
o corpo de minha página, então por que não se aplica apenas
uma ou mais propriedades CSS para o corpo

47
00:02:42,420 --> 00:02:43,850
marcar a si mesmo?

48
00:02:43,850 --> 00:02:45,460
>> Para isso, vamos fazer isso.

49
00:02:45,460 --> 00:02:47,650
Vamos voltar para gedit aqui.

50
00:02:47,650 --> 00:02:52,460
Vamos rolar para trás até a tag estilo,
e vamos especificar apenas um seletor

51
00:02:52,460 --> 00:02:54,520
usando essa tag nome, Corpo.

52
00:02:54,520 --> 00:03:00,580
Abaixo disso, vamos colocar nossas chaves
seguido pelo centro text-align.

53
00:03:00,580 --> 00:03:05,580
Vamos agora salvar a página e recarregar
lo dentro desse browser.

54
00:03:05,580 --> 00:03:08,090
Atualizar no Chrome, e voila.

55
00:03:08,090 --> 00:03:11,000
Agora temos página de John Harvard
centrado como pretendíamos.

56
00:03:11,000 --> 00:03:12,619