1
00:00:00,360 --> 00:00:02,029
Até agora, vimos como você pode

2
00:00:02,029 --> 00:00:03,588
usar CSS para decorar seu texto,

3
00:00:04,088 --> 00:00:06,405
mas também podemos usar CSS 
para mudar o layout.

4
00:00:06,405 --> 00:00:07,290
da nossa página.

5
00:00:07,408 --> 00:00:09,148
Podemos mover as coisas,

6
00:00:09,157 --> 00:00:10,030
mudar o tamanho,

7
00:00:10,030 --> 00:00:11,983
e até fazer sobreposições.

8
00:00:12,010 --> 00:00:13,551
Mas o que são as coisas que

9
00:00:13,551 --> 00:00:14,401
queremos mover?

10
00:00:14,498 --> 00:00:16,118
Algumas vezes elas são elementos

11
00:00:16,118 --> 00:00:17,339
que já criamos,

12
00:00:17,339 --> 00:00:18,812
como um certo parágrafo,

13
00:00:18,812 --> 00:00:20,672
ou um certo título.

14
00:00:21,231 --> 00:00:22,380
Mas algumas vezes, elas

15
00:00:22,380 --> 00:00:23,529
são grupos de elementos

16
00:00:23,529 --> 00:00:24,679
que já fizemos,

17
00:00:24,679 --> 00:00:26,889
como um pedaço de texto,

18
00:00:27,055 --> 00:00:30,065
ou um título e alguns parágrafos.

19
00:00:31,693 --> 00:00:32,946
Para movê-los juntos

20
00:00:32,946 --> 00:00:34,225
como uma unidade,

21
00:00:34,225 --> 00:00:35,404
precisamos introduzir

22
00:00:35,404 --> 00:00:36,744
duas novas tags HTML.

23
00:00:36,744 --> 00:00:37,984
Que chamamos de

24
00:00:37,984 --> 00:00:39,225
elementos de agrupamento.

25
00:00:39,246 --> 00:00:41,460
Não falamos sobre elas antes de CSS,

26
00:00:41,460 --> 00:00:42,662
porque são apenas úteis

27
00:00:42,662 --> 00:00:43,959
quando combinadas com CSS.

28
00:00:43,959 --> 00:00:47,204
Elas não tem significado semântico
para o navegador.

29
00:00:47,275 --> 00:00:49,176
A primeira tag é a tag ,

30
00:00:49,596 --> 00:00:51,516
e é a que usamos para agrupar

31
00:00:51,516 --> 00:00:52,756
um pedaço de um texto.

32
00:00:52,854 --> 00:00:54,193
Digamos que queremos colorir

33
00:00:54,193 --> 00:00:56,503
essa palavra "Love" de vermelho.

34
00:00:56,775 --> 00:00:58,692
E que apenas queremos colorir a palavra

35
00:00:58,692 --> 00:00:59,952
e não o resto do título.

36
00:01:00,327 --> 00:01:02,458
Colocamos o cursor antes de "Love",

37
00:01:02,458 --> 00:01:05,145
digitamos a tag inicial para .

38
00:01:05,145 --> 00:01:06,936
Colocamos o cursor depois da palavra,

39
00:01:07,747 --> 00:01:10,365
digitamos a tag final, ok

40
00:01:10,365 --> 00:01:12,003
Agora vamos estilizar esse 

41
00:01:12,003 --> 00:01:13,642
Poderíamos criar uma regra

42
00:01:13,642 --> 00:01:15,553
para colorir todos os s da página,

43
00:01:15,791 --> 00:01:17,279
mas talvez a gente não queira

44
00:01:17,279 --> 00:01:18,558
que todos sejam vermelhos.

45
00:01:18,558 --> 00:01:19,980
Vamos dar ao 

46
00:01:20,107 --> 00:01:22,570
uma class "lovey-dovey",

47
00:01:25,086 --> 00:01:28,353
e criar uma regra apenas para elementos

48
00:01:28,473 --> 00:01:30,370
que tenham class "lovey-dovey".

49
00:01:30,388 --> 00:01:34,255
Então, .lovey-dovey, color:red.

50
00:01:34,613 --> 00:01:37,293
Veja como ficou o texto agora!

51
00:01:37,763 --> 00:01:39,301
s são bons para agrupar

52
00:01:39,301 --> 00:01:40,509
pedaços de texto.

53
00:01:40,509 --> 00:01:41,717
Como agrupamos

54
00:01:41,727 --> 00:01:43,187
um conjunto de elementos?

55
00:01:43,507 --> 00:01:45,247
Aí é que surge a tag 

56
00:01:45,310 --> 00:01:46,747
Digamos que queremos agrupar

57
00:01:46,747 --> 00:01:47,717
essa seção no fim.

58
00:01:48,195 --> 00:01:49,464
O título "Official Info" e

59
00:01:49,464 --> 00:01:51,174
o parágrafo depois dele.

60
00:01:51,743 --> 00:01:52,714
Para fazer isso

61
00:01:52,714 --> 00:01:56,359
Vou colocar meu cursor antes de h3 e

62
00:01:56,929 --> 00:01:59,389
colocar a tag inicial de 

63
00:01:59,859 --> 00:02:02,259
E vou até o parágrafo final

64
00:02:02,690 --> 00:02:04,595
e escrevo a tag final de .

65
00:02:04,595 --> 00:02:06,100
Temos um .

66
00:02:06,100 --> 00:02:08,027
Agora precisamos estilizá-lo.

67
00:02:08,190 --> 00:02:09,548
Para estilizar um 

68
00:02:09,568 --> 00:02:11,426
Eu vou dar um ID para ele

69
00:02:11,426 --> 00:02:13,089
"official-info".

70
00:02:13,089 --> 00:02:15,982
E adiciono uma regra para ele

71
00:02:15,982 --> 00:02:17,057
aqui em cima.

72
00:02:17,092 --> 00:02:21,602
Então #official-info e background.

73
00:02:21,685 --> 00:02:23,715
Vamos torná-lo um bonito cinza.

74
00:02:23,884 --> 00:02:26,934
Vamos escolher... este.. Está ótimo.

75
00:02:27,133 --> 00:02:28,369
Agora veja que o  se

76
00:02:28,369 --> 00:02:29,605
tornou uma caixa cinza

77
00:02:29,605 --> 00:02:31,651
contendo todos elementos
dentro dela.

78
00:02:31,731 --> 00:02:34,523
E é diferente de dar a cada um 
separadamente

79
00:02:34,554 --> 00:02:35,778
um background cinza.

80
00:02:35,778 --> 00:02:38,162
Se tivéssemos feito assim,
haveria um espaço entre

81
00:02:38,162 --> 00:02:39,508
eles que não ficaria cinza.

82
00:02:39,520 --> 00:02:41,120
Precisamos fazer um ,

83
00:02:41,129 --> 00:02:43,899
se quisermos uma caixa ao redor de tudo.

84
00:02:44,708 --> 00:02:46,185
Você pode pensar em 

85
00:02:46,185 --> 00:02:47,735
como sendo para agrupar texto.

86
00:02:48,303 --> 00:02:50,759
E pode pensar em 

87
00:02:50,759 --> 00:02:52,269
para agrupar elementos.

88
00:02:52,478 --> 00:02:55,378
Mas há outra forma de distingui-los.

89
00:02:55,451 --> 00:02:56,854
Veja que há dois tipos de

90
00:02:56,854 --> 00:02:58,104
elementos no mundo CSS:

91
00:02:58,412 --> 00:03:00,077
Inline e block.

92
00:03:00,077 --> 00:03:01,742
Um elemento inline não tem

93
00:03:01,742 --> 00:03:03,403
uma linha nova depois dele.

94
00:03:03,403 --> 00:03:05,064
Se fizer vários deles,

95
00:03:05,064 --> 00:03:06,726
ficarão na mesma linha.

96
00:03:06,726 --> 00:03:08,751
Alguns exemplos sobre os quais já falamos

97
00:03:08,751 --> 00:03:11,651
são  e .

98
00:03:11,832 --> 00:03:13,432
E você pode ver nesta imagem,

99
00:03:13,451 --> 00:03:16,431
como o texto flui depois dela.

100
00:03:16,616 --> 00:03:18,373
Não há uma linha nova depois dela.

101
00:03:18,373 --> 00:03:20,130
Um elemento block

102
00:03:20,130 --> 00:03:21,620
tem uma linha nova depois

103
00:03:21,620 --> 00:03:23,110
e isso é o que a maioria

104
00:03:23,110 --> 00:03:24,602
das tags HTML criam.

105
00:03:24,818 --> 00:03:26,978
Veja todos os exemplos nesta página.

106
00:03:27,041 --> 00:03:29,850
Os títulos, os parágrafos, a lista.

107
00:03:29,850 --> 00:03:31,889
O navegador coloca linha nova

108
00:03:31,889 --> 00:03:33,699
depois de todos eles,

109
00:03:33,732 --> 00:03:36,152
sem que você precise de uma tag 
.

110
00:03:36,867 --> 00:03:38,779
O que isso tem a ver com 

111
00:03:38,779 --> 00:03:39,797
e ?

112
00:03:39,835 --> 00:03:43,203
Bom, um  cria um elemento inline

113
00:03:43,203 --> 00:03:47,123
e um  cria um elemento block

114
00:03:47,252 --> 00:03:49,492
Isto significa, que se você põe um 

115
00:03:49,492 --> 00:03:53,432
e não adiciona outro estilo,

116
00:03:53,940 --> 00:03:56,270
o navegador irá tornar essa parte

117
00:03:56,270 --> 00:03:57,691
da página em um bloco.

118
00:03:57,691 --> 00:03:59,112
Como aquele texto que

119
00:03:59,112 --> 00:04:00,534
está envolto em um ,

120
00:04:00,534 --> 00:04:02,984
agora têm linhas novas antes e depois.

121
00:04:02,998 --> 00:04:05,495
E talvez isso seja o que você quer.

122
00:04:05,495 --> 00:04:07,525
Apenas lembre-se da diferença.

123
00:04:07,553 --> 00:04:09,383
E continue.. porque há muito mais que

124
00:04:09,395 --> 00:04:10,885
podemos fazer com essas tags.

125
00:04:10,885 --> 00:04:12,763
Especialmente o poderoso !

126
00:04:12,803 --> 00:04:14,000
Legendado por [Fred Guth]
Revisado por [Cainã Perri]