Usando CSS Display para controlar layouts de sites

Usando CSS Display para controlar layouts de sites

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.





MAKEUSEO VÍDEO DO DIA

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

  texto com valor em linha css

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</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.



adicionar programação de aulas ao calendário do google

Controlar layouts de sites com exibição CSS: bloco

  elementos com bloco de exibição css

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</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

  elementos html com valor de bloco em linha css

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</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.





Ocultar elementos do site com exibição CSS: nenhum

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

  flexbox de exibição css

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.

como assistir netflix com amigos online

Flexboxes criam designs responsivos com variáveis ​​predefinidas, como largura e altura. Vale a pena aprendendo sobre flexboxes HTML/CSS antes de começar.

4B8553AF011488B693BBC238B69A5F102CBFFFFAF

Posicionar Flexboxes Lado a Lado Com display: inline-flex

  flexbox de exibição css com valor embutido

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="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

  tabela html básica feita com css

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 table-row funciona exatamente como um elemento HTML . Como pai de elementos com o valor table-cell, ele dividirá sua tabela em linhas horizontais.

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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</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

  elementos css com valor de 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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>

As grades são semelhantes às 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, efetivamente dividindo a linha do meio da grade em três colunas.

forçar a movimentação de aplicativos para o cartão SD

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.