CSS Fundo: Aprenda a Estilizar Páginas Web

Introdução

Neste laboratório, você aprenderá como aplicar estilos de fundo avançados usando CSS, com foco no aprimoramento do design de páginas web através da manipulação de cores e imagens. O laboratório cobre técnicas essenciais como definir cores de fundo para elementos HTML, adicionar e dimensionar imagens de fundo, controlar o posicionamento e a repetição de imagens, e combinar múltiplas propriedades de fundo para criar layouts web visualmente atraentes.

Através de exemplos práticos e hands-on, você explorará diferentes métodos de especificação de cores de fundo usando cores nomeadas, códigos hexadecimais e funções RGB, bem como aprenderá como incorporar imagens de fundo com técnicas precisas de dimensionamento e posicionamento. Ao final deste laboratório, você terá adquirido habilidades práticas no uso de propriedades de fundo CSS para criar designs de páginas web mais dinâmicos e envolventes.

Definir Cor de Fundo para Elementos HTML

Nesta etapa, você aprenderá como definir cores de fundo para elementos HTML usando CSS. As cores de fundo são uma maneira fundamental de aprimorar o design visual de páginas web, adicionando cor a diferentes elementos.

Primeiro, vamos criar um arquivo HTML para demonstrar a estilização da cor de fundo. Abra o WebIDE e crie um novo arquivo chamado styles.html no diretório ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Color Example</title>
    <style>
      /* Adicionaremos nosso CSS aqui */
    </style>
  </head>
  <body>
    <div class="box1">First Box</div>
    <div class="box2">Second Box</div>
    <p class="paragraph">This is a paragraph with a background color.</p>
  </body>
</html>

Agora, vamos adicionar algum CSS para definir cores de fundo para diferentes elementos. Atualize a seção <style> no arquivo HTML:

.box1 {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 10px;
}

.box2 {
  background-color: #ff5733;
  color: white;
  padding: 20px;
  margin: 10px;
}

.paragraph {
  background-color: rgb(200, 230, 255);
  padding: 15px;
}

Neste exemplo, demonstramos três maneiras de especificar cores de fundo:

Cor nomeada (blue)
Código de cor hexadecimal (#FF5733)
Função de cor RGB (rgb(200, 230, 255))

Salve o arquivo e abra-o em um navegador web para ver as diferentes cores de fundo aplicadas aos elementos.

Adicionar Imagem de Fundo com Dimensionamento

Nesta etapa, você aprenderá como adicionar imagens de fundo a elementos HTML e controlar seu dimensionamento usando CSS. Continuaremos construindo sobre o exemplo anterior, modificando o arquivo styles.html no diretório ~/project.

Primeiro, você precisará baixar uma imagem de amostra. Use o seguinte comando no terminal:

wget https://labex.io/courses/images/background-sample.jpg -O ~/project/background-sample.jpg

Agora, atualize o arquivo styles.html com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Sizing</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
      }

      .cover-background {
        background-image: url("background-sample.jpg");
        background-size: cover;
      }

      .contain-background {
        background-image: url("background-sample.jpg");
        background-size: contain;
      }

      .custom-size-background {
        background-image: url("background-sample.jpg");
        background-size: 200px 150px;
      }
    </style>
  </head>
  <body>
    <div class="image-container cover-background">
      Cover: Fills entire container
    </div>
    <div class="image-container contain-background">
      Contain: Fits entire image
    </div>
    <div class="image-container custom-size-background">
      Custom Size: 200x150 pixels
    </div>
  </body>
</html>

Este exemplo demonstra três maneiras diferentes de dimensionar imagens de fundo:

background-size: cover; - Dimensiona a imagem para cobrir todo o contêiner
background-size: contain; - Dimensiona a imagem para caber inteiramente dentro do contêiner
background-size: 200px 150px; - Define um tamanho específico em pixels para a imagem de fundo

Quando você abrir este arquivo HTML em um navegador, verá três técnicas diferentes de dimensionamento de imagem de fundo.

Posicionar Imagem de Fundo

Nesta etapa, você aprenderá como controlar o posicionamento de imagens de fundo usando CSS. Continuaremos modificando o arquivo styles.html no diretório ~/project para demonstrar diferentes técnicas de posicionamento de fundo.

Atualize o arquivo styles.html com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Positioning</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .top-left {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: top left;
      }

      .center {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: center;
      }

      .bottom-right {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: bottom right;
      }

      .custom-position {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: 20% 80%;
      }
    </style>
  </head>
  <body>
    <div class="image-container top-left">Top Left Position</div>
    <div class="image-container center">Center Position</div>
    <div class="image-container bottom-right">Bottom Right Position</div>
    <div class="image-container custom-position">Custom Position (20% 80%)</div>
  </body>
</html>

Este exemplo demonstra quatro maneiras diferentes de posicionar imagens de fundo:

background-position: top left; - Posiciona a imagem no canto superior esquerdo
background-position: center; - Centraliza a imagem dentro do contêiner
background-position: bottom right; - Posiciona a imagem no canto inferior direito
background-position: 20% 80%; - Usa valores de porcentagem para posicionamento personalizado

Quando você abrir este arquivo HTML em um navegador, verá como diferentes valores de posicionamento afetam a colocação da imagem de fundo.

Controlar a Repetição da Imagem de Fundo

Nesta etapa, você aprenderá como controlar a repetição da imagem de fundo usando a propriedade CSS background-repeat. Continuaremos modificando o arquivo styles.html no diretório ~/project para demonstrar diferentes técnicas de repetição.

Atualize o arquivo styles.html com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Repetition</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .repeat {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat;
      }

      .repeat-x {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-x;
      }

      .repeat-y {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-y;
      }

      .no-repeat {
        background-image: url("background-sample.jpg");
        background-size: 200px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container repeat">Repeat (Default)</div>
    <div class="image-container repeat-x">Repeat X (Horizontal)</div>
    <div class="image-container repeat-y">Repeat Y (Vertical)</div>
    <div class="image-container no-repeat">No Repeat</div>
  </body>
</html>

Este exemplo demonstra quatro diferentes técnicas de repetição de imagem de fundo:

background-repeat: repeat; - Repete a imagem tanto horizontalmente quanto verticalmente (padrão)
background-repeat: repeat-x; - Repete a imagem apenas horizontalmente
background-repeat: repeat-y; - Repete a imagem apenas verticalmente
background-repeat: no-repeat; - Impede que a imagem se repita

Quando você abrir este arquivo HTML em um navegador, verá como diferentes valores de repetição afetam a exibição da imagem de fundo.

Combinar Múltiplas Propriedades de Fundo

Nesta etapa, você aprenderá como combinar múltiplas propriedades de fundo para criar designs de fundo mais complexos e interessantes. Modificaremos o arquivo styles.html no diretório ~/project para demonstrar técnicas avançadas de estilização de fundo.

Atualize o arquivo styles.html com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Background Properties</title>
    <style>
      .image-container {
        width: 600px;
        height: 400px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
        padding: 20px;
      }

      .multiple-backgrounds {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.5)
          ), url("background-sample.jpg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      .layered-backgrounds {
        background-image: url("small-pattern.png"), linear-gradient(to right, #ff6b6b, #4ecdc4);
        background-size:
          100px 100px,
          cover;
        background-position:
          top left,
          center;
        background-repeat: repeat, no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container multiple-backgrounds">
      Overlay Background with Image
    </div>
    <div class="image-container layered-backgrounds">
      Layered Background with Pattern and Gradient
    </div>
  </body>
</html>

Primeiro, baixe uma pequena imagem de padrão:

wget https://labex.io/courses/images/small-pattern.png -O ~/project/small-pattern.png

Este exemplo demonstra duas técnicas avançadas de fundo:

Múltiplos Fundos com Sobreposição:
- Usa um gradiente linear para criar uma sobreposição semi-transparente
- Combina o gradiente com uma imagem de fundo
- Aplica dimensionamento, posicionamento e repetição consistentes
Fundos em Camadas:
- Combina uma imagem de padrão repetitivo com um gradiente linear
- Usa diferentes dimensionamentos e posicionamentos para cada camada de fundo

Quando você abrir este arquivo HTML em um navegador, verá como múltiplas propriedades de fundo podem criar designs complexos e visualmente interessantes.

Resumo

Neste laboratório, os participantes aprenderam como aplicar estilos de fundo em CSS através de uma abordagem abrangente e passo a passo. O laboratório cobriu técnicas essenciais para aprimorar o design de páginas web, incluindo a definição de cores de fundo usando diferentes métodos, como cores nomeadas, códigos hexadecimais e funções RGB, e a exploração da manipulação de imagens de fundo.

Os exercícios práticos demonstraram como adicionar imagens de fundo a elementos HTML, controlar seu dimensionamento, posicionamento e repetição, e combinar múltiplas propriedades de fundo. Ao trabalhar com exemplos práticos, os alunos adquiriram habilidades práticas no uso de CSS para criar fundos de página web visualmente atraentes e dinâmicos com várias técnicas de estilização.

Aplicar Estilos de Fundo em CSS

Introdução

Definir Cor de Fundo para Elementos HTML

Adicionar Imagem de Fundo com Dimensionamento

Posicionar Imagem de Fundo

Controlar a Repetição da Imagem de Fundo

Combinar Múltiplas Propriedades de Fundo

Resumo