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]