Propriedade Display
Objetos inline
A
No código XHTML há dois tipos de objetos: o objeto de linha, conhecido como "inline" e o objeto de bloco, conhecido também como "block".
Os objetos inline são aqueles objetos utilizados em linhas de texto, por exemplo a tags de formatação como "b" ou "i". Elas formatam uma linha de texto, sem quebras de linhas, servem para marcar uma parte do texto. Precisamos chamar a atenção para uma pequena regra: Nenhum objeto de linha pode conter um objeto de bloco. Portanto é extremamente errado, escrever código como:
<b><div>Um "b" não pode conter um "div".</div></b>
Ou qualquer código parecido. Por isso, lembre-se: Nenhum objeto de linha pode conter um objeto de bloco.
Objetos de bloco
Objetos de bloco funcionam como caixas para guardar certas informações. Você pode colocar outros objetos dentro deles, para dividi-los e organizá-los.
Um objeto de bloco largamente usado é o "div". O "div" serve para conter outros objetos. Principalmente outros objetos de bloco. Ele é uma caixa e seu conteúdo são outros objetos. Outros objetos de bloco são: Form, p, ul, ol, h1 até h6 etc.
Uma característica dos objetos de bloco é que quando usados, eles causam quebra de linha no começo e no final do objeto.
Todo e qualquer objeto de bloco pode conter qualquer objeto de linha.
Dentro dos objetos de bloco, existe o grupo dos objetos de texto, que são aqueles que só podem conter texto (e claro objetos inline), proibidos de conter outros objetos de bloco. Objetos de texto são, por exemplo, o "p" e o "blockquote".
Eles não podem conter nada além de texto e tags inline.
Já o objeto "div" pode conter todo e qualquer objeto. O formulário também pode conter todo e qualquer objeto. Desta forma não tem restrição.
Logo, para decorar essa regra, apenas lembre-se da função semântica dos objetos: P serve para criar parágrafos, logo, só serve para conter textos. DIV serve para dividir o layout, logo pode conter todos os elementos. E assim por diante.
Mudando essas condições
Agora que já sabemos como as tags funcionam, podemos começar a brincar com a propriedade display. A propriedade display serve para controlar a visualização das tags. Ela controla se uma tag aparecerá como inline ou block. Então, você pode simplesmente mudar a visualização de um "b" por exemplo, fazendo-o aparecer no browser como uma tag de bloco. Veja este exemplo.
Você faz o "b", que é uma tag inline, "emular" uma tag de bloco. E agora, você pode controlar fatores, que em tags inline não são permitidas, como por exemplo, mudar o tamanho de largura, altura, colocar margem, e etc…
Mas atenção: A propriedade não muda a função semântica da tag. A tag "b" de nosso exemplo, continua tendo sua função, que é deixar o texto em negrito. Ela ainda é proibida de conter tags de bloco.
Os valores da propriedade display
A propriedade display tem uma série de valores interessantes que vão desde transformar tags inline em blocos, e vice-versa, até fazer o "div" emular uma tabela. Por isso, mãos à obra!
Explicarei a fundo, apenas as propriedades que você usará com mais freqüência. E uma ou outra que seja interessante você saber.
Valores Descrição Suporte
none O elemento não será mostrado. Todos os browser.
block O elemento será mostrado como um objeto em bloco, com quebras de linha antes ou depois, como por exemplo, a tag div, form, h1, h2, h3, etc. Todos os browser.
inline O elemento será mostrado como um objeto em linha, sem quebra de linha antes ou depois, como por exemplo, a tag B, I, etc. Todos os browser.
table Essa propriedade faz o objeto emular um tabela. Com uma quebra de linha antes e depois. KMOS
table-column Essa propriedade faz o objeto emular uma coluna de tabela. KMOS
* KMOS: Konqueror, Mozilla, Opera, Safari
O valor NONE
O valor none dispensa grandes explicações. Ele apenas define se o objeto aparecerá na tela ou não. Se você definir para um objeto um display: none; esse objeto não aparecerá na tela.
Muito útil para o pessoal que gosta de fazer coisas aparecerem e desaparecerem DHTML. Fazer submenus e outras brincadeiras que todos conhecem.
Os valores INLINE e BLOCK
Os valores inline e block servem para controlar como um objeto será exibido na tela. Se ele será exibido como uma tag de linha (inline) ou se será exibido como uma tag de bloco (block).
Analisemos o seguinte código:
Veja o resultado.O que aconteceu? Simples. A tag "b" é uma tag de linha. Ou seja, ela serve apenas para marcar texto, ela serve para marcar uma LINHA de texto.Código HTML:<html>
<head>
<title>Teste</title>
<style>
b {
display:block; /* Faz com que a tag B apareça como um bloco */
background: red; /* só para gente visualizar melhor */
}
</style>
</head>
<body>
<b>Veja, se parece com DIV, mas na verdade é o um B!</b>
</body>
</html>
No código acima, nós mudamos isso. Definimos para ela um "display:block;". Isso fez com que ela se comportasse no browser como um objeto de bloco, exatamente igual a uma tag "div" por exemplo. Mas, a função semântica da tag "b" continua a mesma. Ela não se transformou em um div, e agora pode conter qualquer objeto. Ela ainda serve apenas para marcar uma linha de texto.
Podemos fazer a mesma coisa com um "div". O "div" é uma tag de bloco. Então, podemos inverter isso, transformando-o em uma tag de linha. Usando o valor inline, desta forma:
Veja o resultado.Código HTML:<html>
<head>
<title>Teste</title>
<style>
div {
display:inline; /* Faz com que a tag DIV apareça como um objeto de linha */
background: red; /* só para gente visualizar melhor */
}
</style>
</head>
<body>
<div>Veja, se parece com B, mas na verdade é o um DIV!</div>
</body>
</html>
Muito simples não é?
Esses dois valores serão os mais usados por você em seu desenvolvimento. Por exemplo, você transformará freqüentemente links ("a") em tags de bloco. Para por exemplo, fazer um mapa de imagens, um botão, etc…
Veja esse exemplo:
Veja o resultado - Um link quadrado!.Código HTML:<html>
<head>
<title>Teste</title>
<style>
a {
display:block; /* Faz com que o LINK, normalmente um objeto de linha, apareça como um BLOCO*/
width:200px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body>
<a href="http://www.imperyusgames.com.br/" mce_href="http://www.imperyusgames.com.br/" >
Este é um link quadrado! <br />
Perceba que a área clicável se extende por todo o quadrado.
</a>
</body>
</html>
O valor "inline" faz objetos de bloco transformarem-se em objetos de linha. Por exemplo, um "div" pode ficar como um "b" ou "i".
O valor "block" faz objetos de linha, transformarem-se em objetos de bloco. Por exemplo, um "div" transforma-se em um "b".
A propriedade display não muda o valor semântico da tag. Um "div", mesmo com diplay:inline; continua sendo um "div", um "b", mesmo com display:block; continua sendo um "b".
A propriedade display não muda a função da tag.
Mensagem de moderação: Tópico modificado com alteração de nome de fóruns. by ZEH
