Aulas
Disciplinas

Cursos / Informática para Internet / Autoria Web / Aula

arrow_back Aula 05 - Estilizando planos de fundo, fontes, links e listas

Estilização

Até agora, você aprendeu a sintaxe geral da linguagem CSS, ou seja, o que constitui uma regra e como escrevê-la. A partir de agora, você conhecerá as propriedades existentes para estilizar os elementos de um documento (X)HTML. Vamos começar pelo plano de fundo ou, em inglês, background.

Background (plano de fundo)

A propriedade background destina-se a definir as características do plano de fundo dos elementos XHTML. Os planos de fundo das tags de marcação podem ser cores ou imagens. Na ausência de declaração de background, o plano de fundo ficará transparente, que é a “cor” default.

Existem seis propriedades para estilizar planos de fundo, que estão listadas no Quadro 1, a seguir, com os possíveis valores que cada propriedade pode assumir.

Propriedade Função Valor
background-color Define uma cor para o plano de fundo. Este valor pode ser dado como:
código hexadecimal: #FFFFFF
código rgb: rgb(255,235,0)
nome da cor: red, blue, green...etc
transparente: transparent
background-image Define uma imagem para o plano de fundo. URL: url("caminho/imagem.gif")
background-repeat Define a maneira como a imagem de fundo é posicionada. não repete: no-repeat
repete vertical e horizontal: repeat
repete vertical: repeat-y
repete horizontal: repeat-x
background-attachment Define se a imagem de fundo “rola” ou não com a tela. imagem fixa na tela: fixed imagem "rola" com a tela: scroll
background-position Define como e onde a imagem de fundo é posicionada. x-pos y-pos
x-% y-%
top left
top Center
top right
center left
center center
bottom right
center right
bottom center
bottom left
background Maneira abreviada de todas as propriedades. Qualquer dos valores descritos acima, na seguinte ordem:
background-color
background-image
background-repeat
background-attachment
background-position
Quadro 1 – Propriedades relacionadas ao plano de fundo

Vamos ver alguns exemplos?

As figuras a seguir mostram a aplicação de algumas propriedades listadas acima. Na Figura 1, a propriedade background-color define:

- uma cor para o plano de fundo da página (azul), sendo aplicado ao elemento <body>,

- uma cor para o plano de fundo dos títulos de nível 1 (amarelo), sendo aplicado ao elemento <h1>,

- uma cor para o plano de fundo dos parágrafos (azul claro), sendo aplicado ao elemento <p>.

Exemplo do uso da propriedade background-color

Na Figura 2, foram adicionadas as propriedades background-image, backgroud-repeat e background-position, da seguinte maneira:

- o plano de fundo do elemento <body> além de ter a cor azul, possui uma imagem repetida na coordenada y (background-repeat: repeat-y;), ou seja, na vertical;

- o plano de fundo do elemento <p> foi estilizado com a cor amarela e com uma imagem que não se repete (background-repeat: no-repeat;), além de estar posicionado no topo do lado direito (background-position: top right;).

Exemplo do uso das propriedades background-image, backgroud-repeat e background-position

Observe que foi possível aplicar as propriedades de plano de fundo aos elementos <body>, <p> e <h1>, e não para por aí. Você pode aplicar também a links, tabelas, listas e a quaisquer outros elementos. Vamos fazer uma atividade?

Um dos recursos mais esperados no CSS3 é a possibilidade nativa de adicionar múltiplas imagens de fundo. A sintaxe é muito simples, basta adicionar as urls separadas por vírgula.

background: url(img_arvore.gif), url(img_flor.gif);

Versão 5.3 - Todos os Direitos reservados