Introdução
Neste laboratório, você aprenderá a aplicar estilos de fundo avançados usando CSS, com foco em aprimorar o design de páginas web através da manipulação de cores e imagens. O laboratório abrange 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 nomes de cores, códigos hexadecimais e funções RGB, além de aprender a 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á a definir cores de fundo para elementos HTML usando CSS. As cores de fundo são uma forma 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 de cores 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>Exemplo de Cor de Fundo</title>
<style>
/* Adicionaremos nosso CSS aqui */
</style>
</head>
<body>
<div class="box1">Primeira Caixa</div>
<div class="box2">Segunda Caixa</div>
<p class="paragraph">Este é um parágrafo com cor de fundo.</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á a adicionar imagens de fundo a elementos HTML e a controlar seu dimensionamento usando CSS. Continuaremos a partir do exemplo anterior, modificando o arquivo styles.html no diretório ~/project.
A imagem de exemplo está no diretório ~/project.
Agora, atualize o arquivo styles.html com o seguinte conteúdo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dimensionamento de Imagem de Fundo</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: Preenche todo o contêiner
</div>
<div class="image-container contain-background">
Contain: Ajusta a imagem inteira
</div>
<div class="image-container custom-size-background">
Tamanho Personalizado: 200x150 pixels
</div>
</body>
</html>
Este exemplo demonstra três maneiras diferentes de dimensionar imagens de fundo:
background-size: cover;- Redimensiona a imagem para cobrir todo o contêinerbackground-size: contain;- Redimensiona a imagem para caber inteiramente dentro do contêinerbackground-size: 200px 150px;- Define um tamanho específico em pixels para a imagem de fundo
Ao abrir este arquivo HTML em um navegador, você verá três técnicas diferentes de dimensionamento de imagem de fundo.
Posicionar Imagem de Fundo
Nesta etapa, você aprenderá a 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>Posicionamento de Imagem de Fundo</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">Posição Superior Esquerda</div>
<div class="image-container center">Posição Centralizada</div>
<div class="image-container bottom-right">Posição Inferior Direita</div>
<div class="image-container custom-position">
Posição Personalizada (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 esquerdobackground-position: center;- Centraliza a imagem dentro do contêinerbackground-position: bottom right;- Posiciona a imagem no canto inferior direitobackground-position: 20% 80%;- Usa valores percentuais para posicionamento personalizado
Ao abrir este arquivo HTML em um navegador, você verá como diferentes valores de posicionamento afetam a colocação da imagem de fundo.
Controlar Repetição da Imagem de Fundo
Nesta etapa, você aprenderá a controlar a repetição de imagens 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>Repetição de Imagem de Fundo</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">Repetir (Padrão)</div>
<div class="image-container repeat-x">Repetir X (Horizontal)</div>
<div class="image-container repeat-y">Repetir Y (Vertical)</div>
<div class="image-container no-repeat">Não Repetir</div>
</body>
</html>
Este exemplo demonstra quatro técnicas diferentes de repetição de imagem de fundo:
background-repeat: repeat;- Repete a imagem tanto horizontal quanto verticalmente (padrão)background-repeat: repeat-x;- Repete a imagem apenas horizontalmentebackground-repeat: repeat-y;- Repete a imagem apenas verticalmentebackground-repeat: no-repeat;- Impede que a imagem se repita
Ao abrir este arquivo HTML em um navegador, você 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á a 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>Múltiplas Propriedades de Fundo</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.jpg"), 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 de Fundo com Imagem
</div>
<div class="image-container layered-backgrounds">
Fundo em Camadas com Padrão e Gradiente
</div>
</body>
</html>
small-pattern.jpg está no diretório ~/project.
Este exemplo demonstra duas técnicas avançadas de fundo:
Múltiplos Fundos com Overlay:
- Usa um gradiente linear para criar um overlay semitransparente
- Combina o gradiente com uma imagem de fundo
- Aplica dimensionamento, posicionamento e repetição consistentes
Fundos em Camadas:
- Combina uma imagem de padrão repetido com um gradiente linear
- Usa dimensionamento e posicionamento diferentes para cada camada de fundo
Ao abrir este arquivo HTML em um navegador, você verá como múltiplas propriedades de fundo podem criar designs complexos e visualmente interessantes.
Resumo
Neste laboratório, os participantes aprenderam a 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.
