Cores e fundos em CSS

As propriedades color e background especificam as cores dos textos (normalmente chamadas de foreground color) e as cores ou imagens aplicadas no fundo dos elementos (background), respectivamente. Neste post veja cores e fundos em CSS.

Abaixo estão listados essas propriedades e a descrição de suas funcionalidades. Veja:

color: Especifica a cor do texto contido no elemento:

body {color: #000000}
a {color: #0000FF}

background-color: Especifica a cor de fundo de um elemento:

h1 {background-color: #C8C8C8}
div span {background-color: #00F00F}
	
/*o valor "transparent" especifica que a cor do elemento pai deve ser utilizada como cor de fundo do elemento atual*/

background-image: Configura uma imagem como plano de fundo:

body {background-image: url(fundo.gif)}
div {background-image: url(tela.gif)}

background-repeat: Especifica como a imagem de fundo definida na propriedade background-image será repetida se o tamanho da mesma for menor que a área de apresentação do elemento:

body {background-repeat: repeat-y}
div {background-repeat: no-repeat}
    
/*repeat-x: a imagem será repetida somente no sentido horizontal, criando uma faixa horizontal entre as margens esquerda e direita do elemento */

background-attachment: Especifica se a imagem definida na propriedade background-image ficará fixa ou se acompanhará a rolagem da área de apresentação do navegador:

body {background-attachment: fixed}
div {background-attachment: scroll}

background-position: Essa propriedade especifica a posição inicial da imagem de fundo definida na propriedade background-image na área de apresentação do elemento. O par de coordenadas corresponde à posição inicial da imagem com relação aos eixos X (horizontal) e Y (vertical). Os valores padrão dessa propriedade são: 0% e 0%:

body {background-position: center top}
div {background-position: 10px 20px}

background: Essa propriedade é um atalho para especificar as propriedades background-color, background-image, background-repeat, background-attachment e background-position em um único local da folha de estilo. As propriedades que não tiverem valor fornecido, assumem o seu valor padrão:

body {background: #ff00f0 url(fundo.gif) no-repeat center top}
div {background: #fff0f0 url(tela.gif) repeat left top}

Bordas em CSS

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: css

O seu computador está lento, travando ou dando tela azul… e você não faz ideia do que fazer?

Saiba que isso pode estar te fazendo perder dinheiro — seja com manutenção cara ou oportunidades que você está deixando passar.

Com o Super Técnico 2.0, você aprende na prática como diagnosticar defeitos, montar computadores do zero e fazer upgrades que realmente aumentam o desempenho, mesmo que você esteja começando do absoluto zero.

Você pode usar esse conhecimento para:

✔ Resolver seus próprios problemas sem depender de ninguém
✔ Ganhar dinheiro com manutenção e suporte técnico
✔ Ou até entrar de vez no mercado de TI

Tudo com aulas diretas ao ponto, sem enrolação e focadas no que realmente funciona no dia a dia.

👉 CLIQUE AQUI AGORA e veja todos os detalhes antes que essa oportunidade passe: