Cor e fundo
Cor e fundo
Cor e fundo é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 1 de 1. 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 1 aulas no total.
Introdução
Olá,
Podemos alterar as cores do texto com a propriedade Color.
Podemos atribuir valores a essa propriedade nos tipos RGB, HEX, HSL, RGBA ou HSLA.
Já usamos a propriedade color em muitos exemplos até agora. Agora vamos ilustrar seu uso com diferentes tipos de valor.
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>Plano de fundo
Podemos definir estilos para os planos de fundo dos elementos usando as propriedades de Background.
Agora vamos aprender as propriedades de background listadas abaixo.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
É uma propriedade usada para alterar a cor de fundo de um elemento.
Vamos ver um exemplo.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>Opacidade
É uma propriedade usada para alterar a opacidade do plano de fundo de um elemento.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>Opacidade - 2
A alteração da opacidade do CSS é mostrada na imagem acima.
Imagem de plano de fundo
A propriedade background-image é usada para adicionar imagens ao plano de fundo de um elemento.
Temos a imagem em https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png.
Agora vamos definir um elemento div e adicionar uma imagem ao seu plano de fundo.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position
background-size
Se você observou nosso exemplo acima, percebeu que não conseguimos posicionar a imagem corretamente porque o tamanho padrão dela é maior que a área onde vamos adicioná-la.
Usaremos a propriedade background-size para resolver isso.
A propriedade background-size pode receber valores como cover, contain e auto; também podemos atribuir a ela um valor específico para a largura e a altura.
Vamos atualizar nosso exemplo novamente.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position 2
Agora vamos definir seu valor como uma porcentagem para a propriedade background-position.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-repeat
No entanto, há um problema aqui. Como o tamanho da imagem era menor que o tamanho do plano de fundo do elemento, ela foi usada mais de uma vez para preencher a área.
Para evitar isso, use a propriedade background-repeat (com os valores repeat, repeat-x, repeat-y, initial, inherit ou no-repeat).
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>anexo do plano de fundo
Outra propriedade do plano de fundo é background-attachment. Com essa propriedade, podemos determinar se a imagem de plano de fundo rolará na página.
Essa propriedade aceita os valores fixed ou scroll.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Atalho do plano de fundo
Quando queremos aplicar as propriedades do plano de fundo que aprendemos nos exemplos acima, talvez precisemos definir de 4 a 5 linhas de expressões.
Usamos a propriedade de atalho do plano de fundo para fazer essa definição em uma única linha.
Vamos conferir nosso exemplo.
Na propriedade do plano de fundo, são definidos no-repeat, size, o posicionamento na página e a URL da imagem de origem.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Parabéns
Parabéns 🎉
Nesta seção, aprendemos sobre cor e plano de fundo.
Na próxima seção, aprenderemos os conceitos de caixa, bloco e inline
Perguntas Frequentes
A aula “Cor e fundo” é grátis?
Sim — o texto completo de “Cor e 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 1 aulas no total.
O que vou aprender em “Cor e fundo”?
Cor e fundo 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 1 de 1.
Quanto tempo leva a aula “Cor e 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.