Fundos e Cores CSS: Estilize Páginas Web

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.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 99%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

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.css para 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 color para um cinzento escuro usando rgb(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 body existente para adicionar a propriedade background-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 body no seu ficheiro styles.css.
Adicione a propriedade background-repeat e defina o seu valor para no-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 propriedade background-position à regra body.
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-color e um código hexadecimal.
Alterar a cor do texto com a propriedade color e um valor rgb().
Adicionar uma background-image usando a função url().
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.

Cores e Fundos CSS