-
Até agora, vimos como você pode
-
usar CSS para decorar seu texto,
-
mas também podemos usar CSS
para mudar o layout.
-
da nossa página.
-
Podemos mover as coisas,
-
mudar o tamanho,
-
e até fazer sobreposições.
-
Mas o que são as coisas que
-
queremos mover?
-
Algumas vezes elas são elementos
-
que já criamos,
-
como um certo parágrafo,
-
ou um certo título.
-
Mas algumas vezes, elas
-
são grupos de elementos
-
que já fizemos,
-
como um pedaço de texto,
-
ou um título e alguns parágrafos.
-
Para movê-los juntos
-
como uma unidade,
-
precisamos introduzir
-
duas novas tags HTML.
-
Que chamamos de
-
elementos de agrupamento.
-
Não falamos sobre elas antes de CSS,
-
porque são apenas úteis
-
quando combinadas com CSS.
-
Elas não tem significado semântico
para o navegador.
-
A primeira tag é a tag ,
-
e é a que usamos para agrupar
-
um pedaço de um texto.
-
Digamos que queremos colorir
-
essa palavra "Love" de vermelho.
-
E que apenas queremos colorir a palavra
-
e não o resto do título.
-
Colocamos o cursor antes de "Love",
-
digitamos a tag inicial para .
-
Colocamos o cursor depois da palavra,
-
digitamos a tag final, ok
-
Agora vamos estilizar esse
-
Poderíamos criar uma regra
-
para colorir todos os s da página,
-
mas talvez a gente não queira
-
que todos sejam vermelhos.
-
Vamos dar ao
-
uma class "lovey-dovey",
-
e criar uma regra apenas para elementos
-
que tenham class "lovey-dovey".
-
Então, .lovey-dovey, color:red.
-
Veja como ficou o texto agora!
-
s são bons para agrupar
-
pedaços de texto.
-
Como agrupamos
-
um conjunto de elementos?
-
Aí é que surge a tag
-
Digamos que queremos agrupar
-
essa seção no fim.
-
O título "Official Info" e
-
o parágrafo depois dele.
-
Para fazer isso
-
Vou colocar meu cursor antes de h3 e
-
colocar a tag inicial de
-
E vou até o parágrafo final
-
e escrevo a tag final de .
-
Temos um .
-
Agora precisamos estilizá-lo.
-
Para estilizar um
-
Eu vou dar um ID para ele
-
"official-info".
-
E adiciono uma regra para ele
-
aqui em cima.
-
Então #official-info e background.
-
Vamos torná-lo um bonito cinza.
-
Vamos escolher... este.. Está ótimo.
-
Agora veja que o se
-
tornou uma caixa cinza
-
contendo todos elementos
dentro dela.
-
E é diferente de dar a cada um
separadamente
-
um background cinza.
-
Se tivéssemos feito assim,
haveria um espaço entre
-
eles que não ficaria cinza.
-
Precisamos fazer um ,
-
se quisermos uma caixa ao redor de tudo.
-
Você pode pensar em
-
como sendo para agrupar texto.
-
E pode pensar em
-
para agrupar elementos.
-
Mas há outra forma de distingui-los.
-
Veja que há dois tipos de
-
elementos no mundo CSS:
-
Inline e block.
-
Um elemento inline não tem
-
uma linha nova depois dele.
-
Se fizer vários deles,
-
ficarão na mesma linha.
-
Alguns exemplos sobre os quais já falamos
-
são e .
-
E você pode ver nesta imagem,
-
como o texto flui depois dela.
-
Não há uma linha nova depois dela.
-
Um elemento block
-
tem uma linha nova depois
-
e isso é o que a maioria
-
das tags HTML criam.
-
Veja todos os exemplos nesta página.
-
Os títulos, os parágrafos, a lista.
-
O navegador coloca linha nova
-
depois de todos eles,
-
sem que você precise de uma tag
.
-
O que isso tem a ver com
-
e ?
-
Bom, um cria um elemento inline
-
e um cria um elemento block
-
Isto significa, que se você põe um
-
e não adiciona outro estilo,
-
o navegador irá tornar essa parte
-
da página em um bloco.
-
Como aquele texto que
-
está envolto em um ,
-
agora têm linhas novas antes e depois.
-
E talvez isso seja o que você quer.
-
Apenas lembre-se da diferença.
-
E continue.. porque há muito mais que
-
podemos fazer com essas tags.
-
Especialmente o poderoso !
-
Legendado por [Fred Guth]
Revisado por [Cainã Perri]
