A Propriedade CSS display: none, inline-block, list-item e table

Neste tutorial de CSS, vamos falar de mais alguns valores e funções da propriedade display do CSS, como o none, inline-block, list-item dentre outros.

Já tem certificado de Webmaster? Obtenha aqui e comece a ganhar dinheiro criando sites!

A Propriedade CSS - display

Em nosso artigo passado sobre a propriedade display do CSS - Elementos inline e block, introduzimos o conceito de display, que é uma propriedade do CSS que é responsável pela maneira como os elementos de seu site serão exibidos.
(display, em inglês é exibir, mostrar)

Aprendemos dois importantes conceitos, de inline e block, que são a maneira na qual os elementos se comportam, em sua forma padrão no HTML, onde é possível mudar essa maneira que eles agem com o CSS, especificamente com os códigos display: inline e display: block, em sua folha de estilos.

Basicamente, os elementos que tem display: block por padrão, são aqueles que são renderizados no browser como um bloco, com uma quebra (espaçamento) de linha acima e abaixo.
Exemplos destes tipos de elemento são as tags de cabeçalho H (h1, h2, h3, h4, h5 e h6), parágrafo <p> e a tag <div>.

Já os elementos do tipo display: inline, não possuem essa quebra, esse espaçamento que o isola do conteúdo que vem antes e depois, em seu site.
Exemplos desse tipo são as tags <b> de negrito, itálico <i> e a span.

Para mais detalhes, exemplos e códigos veja o tutorial sobre display inline e block, que indicamos no início deste tutorial.
Agora vamos estudar outras funções dessa propriedade display.

A propriedade CSS display: none

A função do display: none, no começo, é no mínimo estranha: ela simplesmente esconde o elemento em questão. Sim, dá pra ver pelo nome "none" (nada, nenhum) de display: none.

Experimente o seguinte código HTML, onde temos dois parágrafos.
O primeiro está ok, é um parágrafo normal.
Já o segundo parágrafo, colocamos um estilo CSS, através da propriedade display e do valor "none", então quando você testar e rodar seu documento HTML, vai ver apenas o primeiro parágrafo:

<p>Tutorial de CSS - Curso HTML Progressivo</p>
<p style="display: none;">Este parágrafo somente webmasters que sabem CSS vão ver :)</p>

Esse valor none da propriedade CSS display é muito útil quando aliada com algum efeito, principalmente de programação através de JavaScript.
Por exemplo, você passa o mouse em cima de um link ou menu, e aparece outra coisa, como uma imagem.

Antes a imagem era display: none, pois não aparecia.
Então você passa o mouse em alguma região, o JavaScript detecta e transforma ela em display: inline ou display: block e a dita cuja se torna visível.
Você tira o mouse de lá, e o elemento se torna display: nome, sumindo novamente.

Faz sentido agora o display none?
Usaremos ela, no futuro, em nosso curso de CSS, para criar belos efeitos só usando CSS.



Propriedade CSS display: inline-block

Como o próprio valor "inline-block" da propriedade display CSS pode sugerir, essa opção é uma espécia de mistura, um pouco de uma e outra característica da display:inline e display:block.

O que a propriedade e valor dizem é que iremos trabalhar com um bloco, mas um block inline.
Ou seja, nessa propriedade display do CSS, um típico bloco terá comportamento de inline.
Assim, ele vai ter algo antes ou depois (algum conteúdo ou elemento), e adjacente, na mesma linha.

É um bloco, um elemento block, mas que age como se fosse inline (um bloco ao lado de outros elementos, ele não tem aquela quebra de linha nem antes nem depois do bloco).

Vamos mostrar isso na prática, criando um bloco chamado 'meuBloco' através de uma div (que é display: block, por padrão):

<body>
Este texto vem antes do bloco 'meuBloco' 
<div class="meuBloco">
	Este é um bloco comum, com texto.<br />
	É uma div (block por default). <br />
	Porém, está como display: inline-block; <br />
	Logo, se comportará como inline. <br />
</div>
Este texto vem depois do bloco 'meuBloco'. <br>
Notaram como o bloco, que é uma < div > se comporta como se fosse inline?
 </body>

Agora vamos aplicar um estilo CSS a este bloco, colocando uma borda para identificarmos e um texto dentro:

.meuBloco{
	border: solid;
	display: inline-block;
}

Rode e veja o resultado:
Tutorial de CSS sobre a propriedade display


Propriedade CSS display: list-item

Ao usar a propriedade display com o valor "list-item" você está querendo dizer que aquele elemento em questão faz parte de uma lista, uma típica lista que estudamos em nossos tutoriais de Formatação de Textos em HTML e CSS.

Ou seja, não importa o elemento que você selecionou (uma tag div, span, uma tag de cabeçalho h1, uma imagem, link ou que quiser), irá se comportar como o item de uma lista.

Propriedade CSS display: table

Assim como podemos fazer qualquer elemento se tornar se comportar como o item de uma lista, através da propriedade CSS display: list-item, podemos fazer o mesmo com tabelas.

Usando a propriedade CSS display: table, o elemento vai se portar como uma <table>.

Propriedade CSS display com elementos de tabela

Se lembrar bem de nossos estudos de Tabelas em HTML, ela possui diversos elementos únicos, como os de coluna e linha.

Pois bem, como podemos fazer qualquer elemento se portar como um do tipo <table>, também podemos fazer ele se comportar como um dos membros de uma tabela.
Veja as possibilidades da propriedade display com valores de elementos de tabela:

  • display: caption
  • display: cell
  • display: column
  • display: row
  • display: table- column-group
  • display: table-header-group
  • display: table-footer-group
  • display: table-row-group

Iremos usar e falar sobre ela em nossos tutoriais sobre tabelas em CSS.

Um comentário:

Anônimo disse...

Me ajudou, Valew