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.

CSS
.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.
CSS
.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.

CSS
.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.

Postar um comentário

Postagem Anterior Próxima Postagem