Entendendo
Style Sheets - Parte 4
Aplicando
CSS a imagens
Comandos:
• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background
color
Podemos aplicar cores a qualquer
elemento de uma página html. Para tanto, utilizamos nomes ou números
hexadecimais da mesma forma que na programação em html básico.
A novidade em CSS é que podemos utilizar diretamente valores
RGB para definir a cor.
Exemplo: itálicos
em vermelho podem ser definidos por:
Nome:
I { color:
red }
Valor numérico:
I { color:
#FF0000 }
Código RGB:
I { color:
rgb (255, 0, 0) }
O
Internet Explorer 3 não é compatível com a definição
em código rgb, mas ambos Netscape 4 e IE 4 aceitam.
background-color
da
mesma forma que no comando color, podemos aplicar valores numéricos,
nomes ou códigos RGB para configurar uma cor de fundo de qualquer elemento
da página html, incluindo imagens.
P.cinza {
background-color: gray }
Neste exemplo
você pode observar a cor cinza aplicada a todo o fundo deste parágrafo.
Observações:
No IE3 e no Netscape
4 a cor aparece apenas atrás de cada palavra, enquanto no IE4
teremos um retângulo de cor envolvendo todo o parágrafo.
O IE3 não aceita
o comando background-color, mas aceita o comando background,
que será discutido mais a frente.
background-image
Com este comando podemos
facilmente aplicar uma gif ou jpg atrás de qualquer elemento html.
<P STYLE="background-imagem:
url (nome_da_imagem.gif)>
Como
exemplo, aplicamos uma imagem atrás de todo este parágrafo.
A figura se repete continuamente, da mesma forma que o background de uma página
html.
Assim como podemos aplicar
a imagem na tag <BODY> fazendo com que a figura se repita por
toda a página, podemos
aplicá-la a uma única palavra, somente. O valor : url (none)
serve para desativar qualquer valor aplicado anteriormente ao background-image.
Observações:
O IE3 só aceita o
comando background, que será discutido posteriormente, mas não
o comando background-image.
O Netscape Comunicator às
vezes não reage corretamente quando colocamos uma imagem em apenas
parte de um parágrafo.
background-repeat
Com este comando podemos
definir se a imagem de fundo se repetirá continuamente ou não.
<P STYLE="background-repeat:
no-repeat; background-imagem: url (nome_da_imagem.gif)>
O
mesmo parágrafo que havíamos configurado anteriormente terá
a imagem aplicada só ao canto superior esquerdo, em vez de se repetir
continuamente.
Podemos
também definir que as imagens se repitam só na horizontal, como
executamos neste parágrafor para exemplificar, utilizando o valor repeat-x.
Para repetições na vertical, aplicamos o alor repeat-y.
O valor repeat, sozinho, serve para fazer o fundo repetir-se em ambas
as direções, eliminando qualquer estilo estipulado anteriormente.
background-attachment
Normalmente quando movimentamos
a barra de scroll em uma página html o seu background se move junto
com o conteúdo da página. Em Style Sheets podemos definir um
fundo fixo para uma página. Para tal efeito, utilizamos o comando background-attachment.
BODY { background-attachment:
fixed; background-image: url (nome_da_imagem.jpg) }
Infelizmente essa propriedade
não funciona no Netscape Navigator. Há dois valores possíveis:
fixed (fixo) e scroll (para garantir que o fundo role junto com a página).
background-position
Por fim, podemos controlar
exatamente onde a imagem de fundo aparecerá atrás do elemento
ao qual a estamos aplicando.
P { background-position:
rigth center; background-repeat: no-repeat; background-image: url (nome_da_imagem.jpg)
}
Este
comando também só pode ser visualizado no Internet Explorer.
Neste parágrafo aplicamos a imagem ao centro direito do parágrafo.
A primeira palavra na configuração da posição
da imagem de fundo define o valor horizontal. A segunda palavra se refere
ao posicionamento vertical da imagem.
Podemos definir o posicionamento
da imagem de fundo em palavras-chave:
- right (alinhamento à
direita)
- left (alinhamento à esquerda)
- center (centralizado)
- top (alinhamento superior)
- bottom (alinhamento inferior).
P { background-position:
50px 20px; background-repeat: no-repeat; background-image: url (nome_da_imagem.jpg)
}
Para
definir o posicionamento de maneira mais precisa podemos utilizar unidades
de medida, como fizemos com este parágrafo. As unidades que podem
ser utilizadas são as mesmas que vem sendo discutidas anteriormente:
px, pt, em, cm...
Por último, também
podemos utilizar valores de percentagem para definir o posicionamento
de uma imagem atrás de um elemento do html:
P { background-position:
50% 80%; background-repeat: no-repeat; background-image: url (nome_da_imagem.jpg)
}
Neste
exemplo a imagem aparecerá 50% distante da margem direita, calculados
pelo espaço horizontal ocupado pelo parágrafo, e a 80% do seu
topo.
background
A vantagem de utilizar este
comando é podermos aplicar todos os atributos vistos até agora
(cor de fundo, imagem, posicionamento) de uma única vez. Ele também
permite que as páginas possam ser visualizadas no Internet Explorer
3. Para tanto, siga o seguinte modelo:
P { background:
url (nome_da_imagem.gif) #FF0000 repeat-x 20px 30px}
