Tutoriais

Criando cada um dos layouts com CSS

Vamos criar um layout básico com duas colunas usando CSS. Primeiramente, estruturamos o HTML com duas divs, uma para cada coluna. Em seguida, no CSS, atribuímos uma largura de 50% a cada div e utilizamos a propriedade display: inline-block para posicioná-las lado a lado. Para criar um espaçamento entre as colunas, podemos adicionar uma margem.

<div class="colunas">
<div class="coluna">
  Conteúdo da coluna 1
</div>
<div class="coluna">
  Conteúdo da coluna 2
</div>
</div>

Linguagens e Conceitos Fundamentais

• HTML (HyperText Markup Language): Linguagem de programação por onde definimos toda a estrutura e o conteúdo de uma página web.
• CSS (Cascading Style Sheets): Linguagem de programação por onde definimos a aparência visual dos elementos HTML, incluindo layout, cores, fontes e muito mais.
• Margin: É aonde colocamos o espaço entre o elemento e outros elementos adjacentes em uma tag HTML. Ela pode ser definida dentro do escopo do CSS.
• Div (Divisão): É uma tag HTML utilizado como um container para outros elementos, permitindo aplicar estilos de forma mais precisa.
• Box Model: Modelo de caixa que envolve cada elemento HTML, personalizado através do CSS, composto por:
  • Content: Área onde o conteúdo é exibido.
  • Padding: Espaço entre o conteúdo e a borda.
  • Border: Borda do elemento.

Exemplos de Layouts

Layout Fixo

Nela, utilizamos duas divs com a classe “coluna”. A propriedade que define a largura, width: 50%, define-a com o mesmo tamanho, proporcional a cada lado. A propriedade float: left faz com que as divs flutuem para a esquerda, uma ao lado da outra. O padding adiciona espaço interno às colunas, para elas ficarem um pouco afastadas, mas sempre com a mesma proporção.

<!DOCTYPE html>
<html>
<head>
  <title>Layout de Duas Colunas - Fixo</title>
  <style>
    .coluna {
      width: 50%;
      float: left;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="coluna">
    Coluna da esquerda
  </div>
  <div class="coluna">
    Coluna da direita
  </div>
</body>
</html>

Layout Responsivo com CSS Grid

Utilizamos, dentro da classe de container, a função display: grid para criar um grid container. Depois, em grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); criaremos um número automático de colunas com largura mínima de 200px e que se adaptam ao tamanho da tela. Em gap: 20px;, estamos adicionando um espaço entre as colunas.

<!DOCTYPE html>
<html>
<head>
  <title>Layout Responsivo com Grid</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div>Coluna 1</div>
    <div>Coluna 2</div>
    <div>Coluna 3</div>
    </div>
</body>
</html>

Outros Tipos de Layout e Técnicas

• Flexbox: Outra ferramenta poderosa para criar layouts flexíveis e responsivos.
• Media Queries: Utilizadas para aplicar estilos diferentes dependendo do tamanho da tela.
• Posicionamento Absoluto e Relativo: Para posicionar elementos com precisão.

O que vem depois?

• Explore os diferentes valores das propriedades CSS: Experimente com diferentes valores para as propriedades de layout e veja como o resultado final muda.
• Utilize frameworks CSS: Frameworks como Bootstrap e Foundation oferecem componentes pré-construídos e facilitam a criação de layouts complexos.
• Pratique: A melhor forma de aprender é praticando. Crie seus próprios layouts e experimente diferentes técnicas.

Páginas: 1 2