Cores e planos de fundo
Adicione cores e planos de fundo para destacar sua página
Cores e planos de fundo é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 4 aulas no total.
Cores e fundos
Boas-vindas à próxima lição! Hoje, aprenderemos a adicionar cores e fundos à sua página da web para deixá-la mais vibrante e visualmente atraente.
Por que usar cores e fundos?
As cores e os fundos podem:
- Tornar sua página da web mais atraente.
- Destacar conteúdo importante.
- Definir o clima ou o tema da sua página.
Vamos aprender a usá-los com eficácia!
Alterando a cor do texto
Você pode alterar a cor do texto usando a propriedade color. Você pode usar:
- Nomes de cores: Exemplo:
red,blue. - Códigos hexadecimais: Exemplo:
#ff0000,#0000ff. - Valores RGB: Exemplo:
rgb(255, 0, 0).
Exemplo:
<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>
Adicionando uma cor de fundo
A propriedade background-color é usada para alterar a cor de fundo de um elemento.
Exemplo:
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
This is a box with a gray background.
</div>
Fundo da página inteira
Você pode alterar a cor de fundo da página inteira aplicando a propriedade background-color à tag <body>.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a light blue background.</p>
</body>
</html>
Adicionando imagens de fundo
Você pode definir uma imagem como fundo usando a propriedade background-image.
Exemplo:
Neste exemplo:
background-size: cover;faz a imagem cobrir a página inteira.background-repeat: no-repeat;impede que a imagem se repita.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a background image.</p>
</body>
</html>
Combinando cores de texto e de fundo
Você pode combinar cores de texto e de fundo para criar designs visualmente atraentes. Certifique-se de que o texto esteja legível!
Exemplo:
<p style="color: white; background-color: black; padding: 10px;">
This is white text on a black background.
</p>
Experimente você mesmo
Vamos criar uma página da web com cores e fundos. Veja um exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
}
h1 {
color: darkblue;
}
p {
background-color: lightyellow;
padding: 10px;
border: 1px solid darkgray;
}
</style>
</head>
<body>
<h1>My Colorful Page</h1>
<p>This paragraph has a light yellow background with a border.</p>
</body>
</html>
Parabéns!
Parabéns! Você aprendeu a usar cores e fundos para tornar suas páginas da web mais vibrantes e visualmente atraentes. Na próxima lição, vamos nos aprofundar na formatação de texto para adicionar efeitos de negrito, itálico e outros ao seu texto. Prepare-se para aprimorar suas habilidades de design!
Perguntas Frequentes
A aula “Cores e planos de fundo” é grátis?
Sim — o texto completo de “Cores e planos de fundo” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 4 aulas no total.
O que vou aprender em “Cores e planos de fundo”?
Adicione cores e planos de fundo para destacar sua página Você pratica HTML for Kids com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML for Kids?
Nenhuma experiência prévia é necessária. HTML for Kids no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Cores e planos de fundo”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML for Kids?
Sim. Cada aula de HTML for Kids inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Estilos embutidos
- Noções básicas de CSS
- Cores e planos de fundo
- Formatação de texto