Seo Portugal
 
 
Segunda, 22 Abril 2019
 
 

Cores e fundos CSS


 Propriedades CSS:

  •     color
  •     background-color
  •     background-image
  •     background-repeat
  •     background-attachment
  •     background-position
  •     background

Cor do primeiro plano: a propriedade 'color'

A propriedade color define a cor do primeiro plano de um elemento.

Colocar os cabeçalhos de primeiro nível H1 no documento sejam Azuis. O elemento HTML  é o elemento <h1>.

h1 {
color: #0000FF;
}

As cores podem ser definidas pelo seu valor hexadecimal como no exemplo acima (#ff0000), com uso do nome da cor ("red") ou ainda pelo seu valor rgb (rgb(255,0,0)).
A propriedade 'background-color'

A propriedade background-color define a cor do fundo de um elemento.

O elemento <body> contém todo o conteúdo de um documento HTML. Assim, para mudar a cor de fundo da página, devemos aplicar a propriedade background-color ao elemento <body>.

Neste caso aplicam-se diferentes cores de fundo para os elementos <body> e <h1>.

body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Foram aplicadas duas propriedades ao elemento <h1> separadas por um ponto e vírgula.
Images de fundo [background-image]

A propriedade CSS background-image é usada para definir uma imagem de fundo.

Imagem Fundo CSS
Para inserir uma imagem de fundo na página basta aplicar a propriedade background-image ao elemento <body> e especificar o caminho para onde está gravada a imagem.


body {
background-color: #FFCC66;
background-image: url("dog.jpg");
}
h1 {
color: #990000;
background-color: #FC9804;
}

NB: Notar como foi especificado o caminho para a imagem usando url("dog.jpg").
Isto significa que a imagem está localizada no mesmo diretório da folha de estilos.
Pode ser escolhido um outro diretório para gravar as imagens e o caminho seria url("../images/dog.jpg")
ou até mesmo hospedá-la na Internet: url("http://www.bitpt.com/estilos/dog.jpg").

Imagem de fundo repetida [background-repeat]

No exemplo anterior você observou que a imagem da borboleta repetiu tanto na vertical como na horizontal cobrindo todo o ecrân? A propriedade background-repeat controla o comportamento de repetição da imagem de fundo.

A tabela a seguir mostra os quatro diferentes valores para background-repeat.

table

 

 Value Description
 background-repeat: repeat-x A imagem repete-se na horizontal
 background-repeat: repeat-y A imagem repete-se na vertical
 background-repeat: repeat A imagem repete-se na tanto na horizontal como na vertical
 background-repeat: no-repeat  A imagem não se repete


Por exemplo, o código mostrado a seguir é para que a imagem não se repita:

body {
background-color: #FFCC66;
background-image: url("dog.jpg");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Image de fundo fixa [background-attachment]


A propriedade background-attachment define se a imagem será fixa ou se irá mudar juntamente com o elemento que a contém.

Uma imagem de fundo fixa permanece no mesmo sitio e não muda ao contrário da imagem que não é fixa e muda acompanhando o conteúdo.

Os quatro diferentes valores para background-attachment.

Value 
Description
 Background-attachment: scroll A imagem move-se com a página
 Background-attachment: fixed A imagem é fixa


Por exemplo, o código abaixo fixa a imagem.

body {
background-color: #FFCC66;
background-image: url("dog.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Posição da imagem de fundo [background-position]

Por padrão uma imagem de fundo é posicionada no canto superior esquerdo. A propriedade background-position permite alterar este posicionamento padrão e colocar a imagem em qualquer lugar.

Existem várias forms de definir a posição da imagem definindo valores para background-position. Todas elas utilizam de um sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador.

As coordenadas podem ser expressas em percentagem da largura da janeja, em unidades fixas (pixels, centímetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. A figura a seguir ilustra o modelo de coordenadas:

Coordenadas CSS

Exemplos de posicionamento no ecrân com CSS:.

Value
Description
 background-position: 2cm 2cm   A imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na página
 background-position: 50% 25% A imagem é centrada na horizontal e a um quarto (25%) para baixo na página


Compilando [background]

A propriedade background é uma abreviatura de todas as propriedades  anteriores.

Com background  declara-se várias propriedades simultâneamente de modo abreviado.

Por exemplo :

background-color: #FFCC66;
background-image: url("dog.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;

Usando background consegue-se
o mesmo resultado, abreviado desta forma:

background: #FFCC66 url("dog.jpg") no-repeat fixed right bottom;

A declaração abreviada deve seguir a
seguinte ordem:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Se uma das propriedades não for
declarada assume automaticamente o seu valor default. Por
exemplo, a propriedade background-attachment
e background-position não foram
declaradas no código mostrado a seguir:


background: #FFCC66 url("dog.jpg") no-repeat;

As duas propriedades não declaradas
assumirão o valor default: a imagem muda no
ecrãn  e

será posicionada no canto superior esquerdo (que
são os valores default para as propriedades não
declaradas).