O CSS é usado não apenas para estilizar elementos HTML, mas também para criar layouts de página. A criação de layouts é uma parte importante do design de sites, pois ajuda a organizar o conteúdo de uma página para torná-la mais fácil de usar e agradável aos olhos.
Neste capítulo, veremos como criar layouts usando CSS, incluindo caixas, posicionamento e grade.
Caixas em CSS
Em CSS, todos os elementos HTML são considerados caixas retangulares. Uma caixa tem quatro propriedades: conteúdo, preenchimento, borda e margem. O conteúdo é a área real ocupada pelo elemento. O preenchimento é o espaço entre o conteúdo e a borda. A borda é a linha ao redor da caixa, e a margem é o espaço entre a borda e os outros elementos da página.
.box {
width: 200px;
height: 200px;
background-color: #ff0000;
padding: 20px;
border: 1px solid #000;
margin: 20px;
}
Neste exemplo, criamos uma caixa com uma largura e altura de 200 pixels, uma cor de fundo vermelha e uma borda preta sólida de 1 pixel. Também adicionamos um preenchimento interno de 20 pixels e uma margem externa de 20 pixels.
Posicionamento em CSS
O posicionamento em CSS é usado para controlar a posição de elementos em uma página. Existem quatro valores de posicionamento:
static
: é o valor padrão e significa que o elemento é posicionado de acordo com o fluxo normal do documento.relative
: posiciona o elemento de acordo com sua posição original, mas permite que ele seja deslocado usando as propriedadestop
,bottom
,left
eright
.absolute
: posiciona o elemento em relação ao elemento pai mais próximo que tenha um posicionamento diferente destatic
.fixed
: posiciona o elemento em relação à janela do navegador, independentemente do posicionamento dos outros elementos na página.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 50px;
}
Neste exemplo, definimos um elemento pai com um posicionamento relativo e um filho com um posicionamento absoluto. O filho é posicionado a 50 pixels do topo e a 50 pixels da esquerda em relação ao elemento pai.
Grade em CSS
A grade em CSS é uma maneira de organizar o conteúdo da página em uma grade de linhas e colunas. A grade é definida usando a propriedade display: grid
. Podemos definir o número de colunas e linhas usando as propriedades grid-template-columns
e grid-template-rows
, respectivamente.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}
.item {
background-color: #ccc;
border: 1px solid #000;
padding: 20px;
}
Neste exemplo, criamos uma grade com três colunas e duas linhas. A largura da primeira e última colunas é definida como 1fr
, enquanto a largura da segunda coluna é definida como 2fr
.
A altura da primeira linha é definida como 100 pixels e a altura da segunda linha é definida como 200 pixels.
Dentro da grade, criamos elementos com uma cor de fundo cinza claro, uma borda preta sólida de 1 pixel e um preenchimento interno de 20 pixels.
Conclusão
Neste capítulo, aprendemos sobre caixas, posicionamento e grade em CSS. Esses conceitos são importantes para criar layouts de página eficazes e esteticamente agradáveis.
Usando essas técnicas, podemos controlar a posição, o tamanho e o estilo dos elementos HTML em uma página da web.
No próximo capítulo, veremos como usar CSS para criar efeitos de animação em elementos HTML.
+ Não há comentários
Adicione o seu