Propriedade-Display

Prévia do material em texto

1 
28 
Módulo 04 
Propriedade Display 
 
00:00:00 Vamos continuar então a construção da nossa navegação. 
A gente então, até agora a gente já criou a nossa nova navegação, já conseguimos ser específicas 
no CSS para que ele colocasse estilo só para os elementos que estão dentro da navegação principal. 
A gente já mudou a cor dos links, a gente já colocou o underline “_” aqui neles, a decoração do link, 
já tiramos o peso da fonte também, e definimos aqui uma cor para o nosso background. 
Então vamos voltar à nossa apresentação para ver o que falta a gente fazer. 
Bom, a gente tem aqui algumas coisas para fazer ainda, até chegar ao final, mas acho que a 
diferença mais gritante que a gente pode ver é a disposição dos links, que eles têm que ficar um do 
lado do outro, e lá no nosso site, eles estão aparecendo um embaixo do outro. 
Como será que a gente corrige isso? 
Assim como a gente pode definir no CSS cor de fonte, tamanho de fonte, largura de elementos, a 
gente também pode modificar a forma com que eles são exibidos na tela. 
Então os elementos já nascem com uma forma de exibição padrão deles. 
Então por exemplo aqui no nosso menu das divas, nas navegações, veja que eles estão um embaixo 
do outro naturalmente, a gente não fez nada para que eles ficassem assim, então eles já nasceram 
com uma forma de exibição padrão. 
Mas a gente consegue alterar essa forma de exibição com CSS. 
Vamos voltar na nossa apresentação aqui rapidinho. 
Existem duas formas principais de exibição dos nossos elementos. 
Então a primeira é o “display: block;” que a gente chama. 
“Display” significa “exibir”, então é um formato de exibição que a gente vai passar para os nossos 
elementos, então um deles, um dos principais, é o “display: block;”. 
Então ele alinha os elementos aqui, todos um sobre o outro, ele empilha esses elementos, e esses 
elementos, quando ele tem o formato de exibição de “block”, ou “bloco” para ficar mais fácil de 
entender, eles não permitem ter elementos ao redor. 
00:02:00 Quando estou com “display: block;”, eu não consigo colocar um elemento ao lado do outro, 
eles sempre vão ficar um em cima do outro, empilhados. 
E a gente tem o “display: inline-block;” E aí já no “display: inline-block;” a gente consegue colocar 
elementos ao redor um do outro, então eles continuam exibidos como bloco, só que alinhados, um 
ao lado do outro, eles conseguem ter outros elementos ao redor. 
 
2 
Então se a gente olhar para o nosso menu das divas, a gente vai ter que definir para ele um “display: 
inline-block;” porque ele já nasce como “display: block;”, por isso que ele está um embaixo do outro 
atualmente, e a gente vai conseguir modificar ele usando a propriedade “display”, passando o valor 
em “display: inline-block;”, porque a gente quer que um item fique ao lado do outro. 
Então vamos voltar lá no nosso código, e vamos definir esse “display”, essa propriedade “display” 
para cada item da nossa lista. 
Então a gente não vai definir ele para nossa tag <a>, que é o link propriamente dito, a gente quer 
que cada item da nossa lista, ele se posicione um ao lado do outro. 
Vamos voltar lá no nosso CSS. A gente já aprendeu aqui a especificidade, a gente quer só que os 
itens da lista do menu principal tenham esse comportamento. 
Então a gente vai aqui então usar, colocar aqui na parte de baixo, depois do <a>, digitar o seletor de 
classe “.”, vamos escrever o nome da classe, que é “principal”. 
Vamos passar então o elemento que a gente quer modificar, no nosso caso, são as <li>, a gente a 
chama aqui o seletor de “li”, então as “li” que estão dentro do principal, “.principal li{”, vão receber a 
propriedade “display” com valor “inline-block”. 
Certo? Então vamos salvar aqui, e vamos ver se aconteceu alguma coisa lá no nosso site. 
Vamos atualizar aqui. E funcionou, agora eles estão alinhados um ao lado do outro, certo, a gente já 
corrigiu aqui a exibição. 
A gente está cada vez mais próximo do resultado final, e a gente se vê no próximo vídeo.