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}

QUER SER UM PROGRAMADOR FULL-STACK E DOMINAR AS PRINCIPAIS TECNOLOGIAS DO MERCADO?

Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.

Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!

CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES: