Introdução
Bem-vindo ao laboratório de Cores e Fundos em CSS! No design web, cores e fundos são fundamentais para criar websites visualmente apelativos e fáceis de usar. Eles ajudam a definir o tom, melhorar a legibilidade e guiar a atenção do utilizador.
Neste laboratório, terá experiência prática com algumas das propriedades CSS mais comuns usadas para controlar a aparência dos elementos. Aprenderá a definir cores de fundo, aplicar cores de texto, usar imagens de fundo e controlar como essas imagens são exibidas. Cobriremos as seguintes propriedades: background-color, color, background-image, background-repeat e background-position.
Ao final deste laboratório, terá uma compreensão sólida de como estilizar as cores e os fundos das suas páginas web.
Definir a propriedade background-color usando código hexadecimal
Nesta etapa, aprenderá a alterar a cor de fundo de toda a página. Usaremos a propriedade background-color e um código de cor hexadecimal (hex). Códigos hexadecimais são uma forma comum de representar cores no desenvolvimento web, começando com um # seguido por seis caracteres (0-9, a-f).
Primeiro, precisa de editar o ficheiro styles.css. Pode encontrar este ficheiro no explorador de ficheiros no lado esquerdo do WebIDE.
- Clique no ficheiro
styles.csspara o abrir no editor. - Adicione a seguinte regra CSS para definir a cor de fundo para o elemento
<body>. Isto aplicará o estilo a toda a página.
body {
background-color: #f0f8ff;
}
Esta regra seleciona o elemento body e define a sua cor de fundo para um tom de azul claro conhecido como "AliceBlue".
Após adicionar o código, guarde o ficheiro (pode usar Ctrl+S ou Cmd+S). Para ver as suas alterações, clique no separador Web 8080 no topo da interface. Deverá ver o fundo da página mudar de branco para azul claro.
Aplicar a propriedade color com valores RGB
Agora que definiu a cor de fundo, vamos alterar a cor do texto do título principal. Usaremos a propriedade color, que define a cor do conteúdo de texto de um elemento. Para isto, usaremos o formato de cor rgb().
A função rgb() define uma cor usando os seus componentes Vermelho (Red), Verde (Green) e Azul (Blue), com cada valor a variar entre 0 e 255.
Continue a editar o ficheiro styles.css.
- Adicione uma nova regra CSS para selecionar o elemento
<h1>. - Dentro desta regra, defina a propriedade
colorpara um cinzento escuro usandorgb(60, 60, 60).
Adicione o seguinte código ao seu ficheiro styles.css:
h1 {
color: rgb(60, 60, 60);
}
Guarde o ficheiro e mude para o separador Web 8080 para pré-visualizar as suas alterações. O título "Welcome to LabEx" deverá agora estar cinzento escuro, fazendo-o destacar-se contra o fundo azul claro.
Usar a propriedade background-image com url
Além de cores sólidas, o CSS permite usar imagens como fundos. A propriedade background-image é usada para este fim. Especifica o caminho da imagem usando a função url().
Nesta etapa, adicionará uma imagem de fundo ao body da página. O script de configuração já criou um ficheiro de imagem chamado labex.svg no seu diretório de projeto.
- Volte ao seu ficheiro
styles.css. - Modifique a regra
bodyexistente para adicionar a propriedadebackground-image.
Adicione a seguinte linha dentro das chaves do seletor body:
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
}
Após guardar o ficheiro, verifique o separador Web 8080. Notará que a imagem (labex.svg) aparece na página. Por defeito, as imagens de fundo repetem-se horizontal e verticalmente para preencher todo o elemento. Na próxima etapa, aprenderemos a controlar este comportamento.
Implementar a propriedade background-repeat no-repeat
Como viu na etapa anterior, as imagens de fundo repetem-se por defeito. A propriedade background-repeat dá-lhe controlo sobre este comportamento. Pode assumir vários valores, incluindo repeat (o padrão), repeat-x (repetir horizontalmente), repeat-y (repetir verticalmente) e no-repeat.
Nesta etapa, irá impedir que a imagem de fundo se repita.
- Continue a editar a regra
bodyno seu ficheirostyles.css. - Adicione a propriedade
background-repeate defina o seu valor parano-repeat.
A sua regra body deverá agora parecer-se com isto:
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
background-repeat: no-repeat;
}
Guarde o ficheiro e atualize o separador Web 8080. Verá agora apenas uma única instância da imagem de fundo, localizada no canto superior esquerdo da página.
Adicionar a propriedade background-position center
Atualmente, a única imagem de fundo está posicionada no canto superior esquerdo da página. Pode alterar a sua posição usando a propriedade background-position. Esta propriedade aceita valores como left, right, top, bottom e center, bem como valores de comprimento ou percentagem específicos.
Para esta etapa final, irá centrar a imagem de fundo tanto horizontal como verticalmente.
- No seu ficheiro
styles.css, adicione a propriedadebackground-positionà regrabody. - Defina o seu valor para
center.
A regra body completa será agora:
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
background-repeat: no-repeat;
background-position: center;
}
Guarde as suas alterações e veja o resultado no separador Web 8080. A imagem de fundo deverá agora estar perfeitamente centrada na página.
Resumo
Parabéns por completar o laboratório! Aprendeu com sucesso a estilizar as cores e os fundos de uma página web usando propriedades CSS fundamentais.
Neste laboratório, praticou:
- Definir a cor de fundo de uma página com
background-colore um código hexadecimal. - Alterar a cor do texto com a propriedade
colore um valorrgb(). - Adicionar uma
background-imageusando a funçãourl(). - Controlar a repetição de imagens com
background-repeat: no-repeat;. - Posicionar uma imagem de fundo com
background-position: center;.
Estas propriedades são ferramentas essenciais para qualquer desenvolvedor web. Sinta-se à vontade para experimentar mais, alterando os valores ou tentando imagens diferentes para ver o que consegue criar.
