Capítulo 4: Layout com CSS – Minicurso HTML

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 propriedades top, bottom, left e right.
• absolute: posiciona o elemento em relação ao elemento pai mais próximo que tenha um posicionamento diferente de static.
• 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.