WEBVTT

00:00:00.360 --> 00:00:02.029
Até agora, vimos como você pode

00:00:02.029 --> 00:00:03.588
usar CSS para decorar seu texto,

00:00:04.088 --> 00:00:06.405
mas também podemos usar CSS 
para mudar o layout.

00:00:06.405 --> 00:00:07.290
da nossa página.

00:00:07.408 --> 00:00:09.148
Podemos mover as coisas,

00:00:09.157 --> 00:00:10.030
mudar o tamanho,

00:00:10.030 --> 00:00:11.983
e até fazer sobreposições.

00:00:12.010 --> 00:00:13.551
Mas o que são as coisas que

00:00:13.551 --> 00:00:14.401
queremos mover?

00:00:14.498 --> 00:00:16.118
Algumas vezes elas são elementos

00:00:16.118 --> 00:00:17.339
que já criamos,

00:00:17.339 --> 00:00:18.812
como um certo parágrafo,

00:00:18.812 --> 00:00:20.672
ou um certo título.

00:00:21.231 --> 00:00:22.380
Mas algumas vezes, elas

00:00:22.380 --> 00:00:23.529
são grupos de elementos

00:00:23.529 --> 00:00:24.679
que já fizemos,

00:00:24.679 --> 00:00:26.889
como um pedaço de texto,

00:00:27.055 --> 00:00:30.065
ou um título e alguns parágrafos.

00:00:31.693 --> 00:00:32.946
Para movê-los juntos

00:00:32.946 --> 00:00:34.225
como uma unidade,

00:00:34.225 --> 00:00:35.404
precisamos introduzir

00:00:35.404 --> 00:00:36.744
duas novas tags HTML.

00:00:36.744 --> 00:00:37.984
Que chamamos de

00:00:37.984 --> 00:00:39.225
elementos de agrupamento.

00:00:39.246 --> 00:00:41.460
Não falamos sobre elas antes de CSS,

00:00:41.460 --> 00:00:42.662
porque são apenas úteis

00:00:42.662 --> 00:00:43.959
quando combinadas com CSS.

00:00:43.959 --> 00:00:47.204
Elas não tem significado semântico
para o navegador.

NOTE Paragraph

00:00:47.275 --> 00:00:49.176
A primeira tag é a tag ,

00:00:49.596 --> 00:00:51.516
e é a que usamos para agrupar

00:00:51.516 --> 00:00:52.756
um pedaço de um texto.

00:00:52.854 --> 00:00:54.193
Digamos que queremos colorir

00:00:54.193 --> 00:00:56.503
essa palavra "Love" de vermelho.

00:00:56.775 --> 00:00:58.692
E que apenas queremos colorir a palavra

00:00:58.692 --> 00:00:59.952
e não o resto do título.

00:01:00.327 --> 00:01:02.458
Colocamos o cursor antes de "Love",

00:01:02.458 --> 00:01:05.145
digitamos a tag inicial para .

00:01:05.145 --> 00:01:06.936
Colocamos o cursor depois da palavra,

00:01:07.747 --> 00:01:10.365
digitamos a tag final, ok

00:01:10.365 --> 00:01:12.003
Agora vamos estilizar esse 

00:01:12.003 --> 00:01:13.642
Poderíamos criar uma regra

00:01:13.642 --> 00:01:15.553
para colorir todos os s da página,

00:01:15.791 --> 00:01:17.279
mas talvez a gente não queira

00:01:17.279 --> 00:01:18.558
que todos sejam vermelhos.

00:01:18.558 --> 00:01:19.980
Vamos dar ao 

00:01:20.107 --> 00:01:22.570
uma class "lovey-dovey",

00:01:25.086 --> 00:01:28.353
e criar uma regra apenas para elementos

00:01:28.473 --> 00:01:30.370
que tenham class "lovey-dovey".

00:01:30.388 --> 00:01:34.255
Então, .lovey-dovey, color:red.

00:01:34.613 --> 00:01:37.293
Veja como ficou o texto agora!

00:01:37.763 --> 00:01:39.301
s são bons para agrupar

00:01:39.301 --> 00:01:40.509
pedaços de texto.

00:01:40.509 --> 00:01:41.717
Como agrupamos

00:01:41.727 --> 00:01:43.187
um conjunto de elementos?

00:01:43.507 --> 00:01:45.247
Aí é que surge a tag 

00:01:45.310 --> 00:01:46.747
Digamos que queremos agrupar

00:01:46.747 --> 00:01:47.717
essa seção no fim.

00:01:48.195 --> 00:01:49.464
O título "Official Info" e

00:01:49.464 --> 00:01:51.174
o parágrafo depois dele.

00:01:51.743 --> 00:01:52.714
Para fazer isso

00:01:52.714 --> 00:01:56.359
Vou colocar meu cursor antes de h3 e

00:01:56.929 --> 00:01:59.389
colocar a tag inicial de 

00:01:59.859 --> 00:02:02.259
E vou até o parágrafo final

00:02:02.690 --> 00:02:04.595
e escrevo a tag final de .

00:02:04.595 --> 00:02:06.100
Temos um .

00:02:06.100 --> 00:02:08.027
Agora precisamos estilizá-lo.

00:02:08.190 --> 00:02:09.548
Para estilizar um 

00:02:09.568 --> 00:02:11.426
Eu vou dar um ID para ele

00:02:11.426 --> 00:02:13.089
"official-info".

00:02:13.089 --> 00:02:15.982
E adiciono uma regra para ele

00:02:15.982 --> 00:02:17.057
aqui em cima.

00:02:17.092 --> 00:02:21.602
Então #official-info e background.

00:02:21.685 --> 00:02:23.715
Vamos torná-lo um bonito cinza.

00:02:23.884 --> 00:02:26.934
Vamos escolher... este.. Está ótimo.

00:02:27.133 --> 00:02:28.369
Agora veja que o  se

00:02:28.369 --> 00:02:29.605
tornou uma caixa cinza

00:02:29.605 --> 00:02:31.651
contendo todos elementos
dentro dela.

00:02:31.731 --> 00:02:34.523
E é diferente de dar a cada um 
separadamente

00:02:34.554 --> 00:02:35.778
um background cinza.

00:02:35.778 --> 00:02:38.162
Se tivéssemos feito assim,
haveria um espaço entre

00:02:38.162 --> 00:02:39.508
eles que não ficaria cinza.

00:02:39.520 --> 00:02:41.120
Precisamos fazer um ,

00:02:41.129 --> 00:02:43.899
se quisermos uma caixa ao redor de tudo.

00:02:44.708 --> 00:02:46.185
Você pode pensar em 

00:02:46.185 --> 00:02:47.735
como sendo para agrupar texto.

00:02:48.303 --> 00:02:50.759
E pode pensar em 

00:02:50.759 --> 00:02:52.269
para agrupar elementos.

00:02:52.478 --> 00:02:55.378
Mas há outra forma de distingui-los.

00:02:55.451 --> 00:02:56.854
Veja que há dois tipos de

00:02:56.854 --> 00:02:58.104
elementos no mundo CSS:

00:02:58.412 --> 00:03:00.077
Inline e block.

00:03:00.077 --> 00:03:01.742
Um elemento inline não tem

00:03:01.742 --> 00:03:03.403
uma linha nova depois dele.

00:03:03.403 --> 00:03:05.064
Se fizer vários deles,

00:03:05.064 --> 00:03:06.726
ficarão na mesma linha.

00:03:06.726 --> 00:03:08.751
Alguns exemplos sobre os quais já falamos

00:03:08.751 --> 00:03:11.651
são  e .

00:03:11.832 --> 00:03:13.432
E você pode ver nesta imagem,

00:03:13.451 --> 00:03:16.431
como o texto flui depois dela.

00:03:16.616 --> 00:03:18.373
Não há uma linha nova depois dela.

00:03:18.373 --> 00:03:20.130
Um elemento block

00:03:20.130 --> 00:03:21.620
tem uma linha nova depois

00:03:21.620 --> 00:03:23.110
e isso é o que a maioria

00:03:23.110 --> 00:03:24.602
das tags HTML criam.

00:03:24.818 --> 00:03:26.978
Veja todos os exemplos nesta página.

00:03:27.041 --> 00:03:29.850
Os títulos, os parágrafos, a lista.

00:03:29.850 --> 00:03:31.889
O navegador coloca linha nova

00:03:31.889 --> 00:03:33.699
depois de todos eles,

00:03:33.732 --> 00:03:36.152
sem que você precise de uma tag 
.

00:03:36.867 --> 00:03:38.779
O que isso tem a ver com 

00:03:38.779 --> 00:03:39.797
e ?

00:03:39.835 --> 00:03:43.203
Bom, um  cria um elemento inline

00:03:43.203 --> 00:03:47.123
e um  cria um elemento block

00:03:47.252 --> 00:03:49.492
Isto significa, que se você põe um 

00:03:49.492 --> 00:03:53.432
e não adiciona outro estilo,

00:03:53.940 --> 00:03:56.270
o navegador irá tornar essa parte

00:03:56.270 --> 00:03:57.691
da página em um bloco.

00:03:57.691 --> 00:03:59.112
Como aquele texto que

00:03:59.112 --> 00:04:00.534
está envolto em um ,

00:04:00.534 --> 00:04:02.984
agora têm linhas novas antes e depois.

00:04:02.998 --> 00:04:05.495
E talvez isso seja o que você quer.

00:04:05.495 --> 00:04:07.525
Apenas lembre-se da diferença.

00:04:07.553 --> 00:04:09.383
E continue.. porque há muito mais que

00:04:09.395 --> 00:04:10.885
podemos fazer com essas tags.

00:04:10.885 --> 00:04:12.763
Especialmente o poderoso !

00:04:12.803 --> 00:04:14.000
Legendado por [Fred Guth]
Revisado por [Cainã Perri]