A propriedade de exibição CSS é uma ferramenta poderosa para web designers. Ele permite controlar os layouts de elementos do site com estilo mínimo, com valores simples que são fáceis de lembrar.
Mas o que cada um desses valores faz e como eles funcionam? Vamos descobrir.
O que é a propriedade de exibição CSS?
A propriedade display especifica o tipo de renderização de caixa usada para elementos HTML em uma página da web. Isso resulta em uma variedade de comportamentos, incluindo não aparecer. Você pode editar esses valores em seu site por meio da folha de estilos ou das seções de personalização de CSS apropriadas em Ferramentas CMS como WordPress.
Mantenha os elementos alinhados com a exibição CSS: inline
Os valores de largura e altura não se aplicam a um elemento com exibição em linha; o conteúdo dentro define suas dimensões. Os elementos HTML embutidos podem ficar lado a lado com outros elementos, comportando-se como um. A exibição em linha é mais comumente usada para texto.
<!DOCTYPE html
>
<html lang="pt">
<cabeça>
<metacharset="utf-8">
<título>Valores de exibição CSS</title>
<estilo>
.em linha {
exibição: em linha;
tamanho da fonte: 3rem;
}
#inline-1 {
cor de fundo: amarelo;
preenchimento: 10px 0px 10px 10px;
}
#inline-2 {
cor de fundo: verde claro;
preenchimento: 10px 10px 10px 0px;
}
</style>
</head>
<corpo>
<h1>Exibição CSS Inline</h1>
<classe div="em linha" id="inline-1">Este é um texto</div>
<classe div="em linha" id="inline-2">com o valor da propriedade inline.</div>
</body>
</html>
Esta marcação HTML e CSS acima servem como um bom exemplo do valor de exibição em linha. Quando usado em conjunto, exibirá uma única linha de texto feita com dois elementos HTML diferentes.
Controlar layouts de sites com exibição CSS: bloco
De certa forma, o valor do bloco de exibição é o oposto do valor embutido. As dimensões de altura e largura podem ser definidas e os elementos com esse valor não podem ficar próximos um do outro. O exemplo acima mostra dois elementos com o valor do bloco. Elementos com o valor padrão do bloco são exibidos na largura máxima de seu elemento pai.
<!DOCTYPE html>
<html lang="pt">
<cabeça>
<metacharset="utf-8">
<título>Valores de exibição CSS</title>
<estilo>
.quadra {
exibição: bloco;
tamanho da fonte: 3rem;
largura: conteúdo de ajuste;
}
#Bloco 1 {
cor de fundo: amarelo;
preenchimento: 10px 10px 10px 10px;
}
#bloco-2 {
cor de fundo: verde claro;
preenchimento: 10px 10px 10px 10px;
}
</style>
</head>
<corpo>
<h1>Bloco de exibição CSS</h1>
<classe div="quadra" id="Bloco 1">Este é um texto</div>
<classe div="quadra" id="bloco-2">com o valor da propriedade do bloco.</div>
</body>
</html>Ao contrário do exemplo de estilo embutido, este exemplo de valor de bloco de exibição divide as linhas de texto em duas linhas diferentes. O valor fit-content width define a largura dos elementos para corresponder ao comprimento do texto.
Elementos HTML lado a lado Com exibição CSS: bloco em linha
O valor do bloco inline de exibição CSS funciona exatamente como um valor inline normal, apenas com a capacidade de adicionar dimensões específicas. Isso torna possível criar layouts semelhantes a grades sem ter elementos pai no lugar. Voltando ao exemplo anterior, adicionar o valor do bloco inline permite que os elementos fiquem próximos um do outro.
<!DOCTYPE html>
<html lang="pt">
<cabeça>
<metacharset="utf-8">
<título>Valores de exibição CSS</title>
<estilo>
.inline-block {
exibição: bloco em linha;
tamanho da fonte: 3rem;
largura: conteúdo de ajuste;
}
#inline-block-1 {
cor de fundo: amarelo;
preenchimento: 10px 10px 10px 10px;
}
#inline-block-2 {
cor de fundo: verde claro;
preenchimento: 10px 10px 10px 10px;
}
</style>
</head>
<corpo>
<h1>CSS Display Inline-Block (conjunto de largura)</h1>
<classe div="bloco em linha" id="inline-block-1">Este é um texto</div>
<classe div="bloco em linha" id="inline-block-2">com a propriedade inline-block
valor.</div>
</body>
</html>
O valor do bloco inline não parece muito diferente do valor inline. É importante observar que você pode definir as dimensões dos elementos com esse valor, facilitando o trabalho em determinados casos.
O valor de exibição mais simples é “nenhum”. Esse valor oculta o elemento e quaisquer elementos filho, juntamente com as margens e outras propriedades de espaçamento. Elementos com o valor CSS que não exibem nenhum valor ainda são visíveis nos inspetores do navegador.
Crie elementos flexíveis e responsivos com exibição CSS: flex
Display flex é um dos mais novos modos de layout CSS. Quando display flex está em um elemento pai, todos os elementos dentro dele se tornam elementos CSS flexíveis. O elemento pai nesta configuração é um flexbox.
Flexboxes criam designs responsivos com variáveis predefinidas, como largura e altura. Vale a pena aprendendo sobre flexboxes HTML/CSS antes de começar.
<!DOCTYPE html>
<html lang="pt">
<cabeça>
<metacharset="utf-8">
<título>Valores de exibição CSS</title>
<estilo>
.flex {
exibição: flexível;
tamanho da fonte: 3rem;
}
#flex-1 {
cor de fundo: amarelo;
largura: 40%;
altura: 100px;
}
#flex-2 {
cor de fundo: verde claro;
largura: 25%;
altura: 100px;
}
#flex-3 {
cor de fundo: azul claro;
largura: 35%;
altura: 100px;
}
</style>
</head>
<corpo>
<h1>Exibição CSS Flex</h1>
<classe div="flexionar">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>Posicionar Flexboxes Lado a Lado Com display: inline-flex
Inline-flex se comporta exatamente como um flexbox comum, com o benefício adicional de o elemento poder ficar ao lado de outros elementos.
<!DOCTYPE html>
<html lang="pt">
<cabeça>
<metacharset="utf-8">
<título>Valores de exibição CSS</title>
<estilo>
.inline-flex {
exibição: inline-flex;
tamanho da fonte: 3rem;
largura: 49.8%;
}
#inline-flex-1 {
cor de fundo: amarelo;
largura: 40%;
altura: 100px;
}
#inline-flex-2 {
cor de fundo: verde claro;
largura: 25%;
altura: 100px;
}
#inline-flex-3 {
cor de fundo: azul claro;
largura: 35%;
altura: 100px;
}
</style>
</head>
<corpo>
<h1>CSS Display Inline-Flex</h1>
<classe div="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<classe div="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Criar tabelas complexas com exibição CSS: tabela
O valor da tabela de exibição é uma reminiscência dos dias mais antigos do design de sites. Embora a maioria dos sites não use tabelas para seus layouts hoje, elas ainda são válidas para mostrar dados e conteúdo em um formato legível.
Adicionar o valor da tabela a um elemento HTML fará com que ele funcione como um elemento de tabela, mas você precisa de valores adicionais para que sua tabela funcione corretamente.
Exibição CSS: célula da tabela
Os elementos com o valor da célula da tabela atuam como células individuais dentro da tabela principal. E os valores tabela-coluna e tabela-linha agrupam essas células individuais.
Exibição CSS: linha de tabela
O valor da linha da tabela funciona exatamente como um
Exibição CSS: coluna de tabela
O valor table-column funciona de forma semelhante ao valor table-row, só que não divide sua tabela. Em vez disso, você pode usar esse valor para adicionar regras CSS específicas às diferentes colunas que já existem.
<!DOCTYPE html>
<html lang="pt">
<cabeça>
<metacharset="utf-8">
<título>Valores de exibição CSS</title>
<estilo>
.tabela {
exibição: mesa;
tamanho da fonte: 3rem;
}
.cabeçalho {
exibição: grupo de cabeçalho da tabela;
tamanho da fonte: 3rem;
}
#coluna-1 {
exibição: grupo-coluna-tabela;
cor de fundo: amarelo;
}
#coluna-2 {
exibição: grupo-coluna-tabela;
cor de fundo: verde claro;
}
#coluna-3 {
exibição: grupo-coluna-tabela;
cor de fundo: azul claro;
}
#linha-1 {
exibição: linha-tabela;
}
#linha-2 {
exibição: linha-tabela;
}
#linha-3 {
exibição: linha-tabela;
}
#célula {
exibição: célula-tabela;
preenchimento: 10px;
largura: 20%;
}
</style>
</head>
<corpo>
<h1>Tabela de Exibição CSS</h1>
<classe div="tabela">
<div id="coluna-1"></div>
<div id="coluna-2"></div>
<div id="coluna-3"></div>
<classe div="cabeçalho">
<div id="célula">Nome</div>
<div id="célula">Era</div>
<div id="célula">País</div>
</div>
<div id="linha-1">
<div id="célula">Jeff</div>
<div id="célula">21</div>
<div id="célula">EUA</div>
</div>
<div id="linha-2">
<div id="célula">Processar</div>
<div id="célula">34</div>
<div id="célula">Espanha</div>
</div>
<div id="linha-3">
<div id="célula">Boris</div>
<div id="célula">57</div>
<div id="célula">Cingapura</div>
</div>
</div>
</body>
</html>Criar tabelas lado a lado com exibição CSS: tabela em linha
Como as outras variantes inline que já vimos, inline-table possibilita colocar elementos de tabela ao lado de outros elementos.
Crie layouts de sites responsivos com exibição CSS: grade
O valor da grade de exibição CSS é semelhante ao valor da tabela, apenas as colunas e linhas de uma grade podem ter dimensionamento flexível. Isso torna as grades ideais para criar o layout principal das páginas da web. Eles deixam espaço para cabeçalhos e rodapés de largura total, além de possibilitar áreas de conteúdo de tamanhos diferentes.
<!DOCTYPE html>
<html lang="pt">
<cabeça>
<metacharset="utf-8">
<título>Valores de exibição CSS</title>
<estilo>
.rede {
exibição: grade;
tamanho da fonte: 3rem;
grid-template-áreas:
'cabeçalho cabeçalho cabeçalho'
'conteúdo da barra lateral esquerda conteúdo da barra lateral direita'
'rodapé rodapé rodapé rodapé';
intervalo: 10px;
}
#grid-1 {
área de grade: cabeçalho;
cor de fundo: amarelo;
altura: 100px;
preenchimento: 20px;
alinhamento de texto: centro;
}
#posição de largada 2 {
área de grade: barra lateral esquerda;
cor de fundo: verde claro;
altura: 200px;
preenchimento: 20px;
alinhamento de texto: centro;
}
#grid-3 {
grid-área: conteúdo;
cor de fundo: azul claro;
altura: 200px;
preenchimento: 20px;
alinhamento de texto: centro;
}
#grid-4 {
área de grade: barra lateral direita;
cor de fundo: verde claro;
altura: 200px;
preenchimento: 20px;
alinhamento de texto: centro;
}
#grid-5 {
área de grade: rodapé;
cor de fundo: amarelo;
altura: 100px;
preenchimento: 20px;
alinhamento de texto: centro;
}
</style>
</head>
<corpo>
<h1>Grade de exibição CSS</h1>
<classe div="rede">
<div id="grade-1">Cabeçalho</div>
<div id="posição de largada 2">Barra lateral esquerda</div>
<div id="grade-3">Contente</div>
<div id="grade-4">Barra lateral direita</div>
<div id="grade-5">Rodapé</div>
</div>
</body>
</html>
As grades são semelhantes aos flexboxes, só que podem colocar elementos abaixo e próximos um do outro. A propriedade grid-template-areas é vital para isso. Como você pode ver no código, nosso cabeçalho e rodapé ocupam quatro espaços na matriz, pois são de largura total. As barras laterais ocupam um slot cada, enquanto o conteúdo ocupa dois, dividindo efetivamente a linha do meio da grade em três colunas.
Exibição CSS: grade em linha
Usar o valor inline-grid permitirá que sua grade fique ao lado de outros elementos, assim como os outros valores inline neste guia.
Usando CSS Display para Web Design
A propriedade de exibição CSS oferece uma maneira prática de ajustar as estruturas dos elementos do site sem precisar alterar a marcação HTML. Isso é ideal para quem usa plataformas de entrega de conteúdo como Shopify ou WordPress, mas também pode ser útil para web design geral.