CSS - Manual de Estilo (parte 2)

Neste segundo artigo veremos como aplicar estilo ao plano de fundo de elementos, aplicar estilo aos textos e também entender o que é o Modelo da Caixa e como utilizá-lo para deixar nossas páginas web mais estilosas.

[ Hits: 21.489 ]

Por: Cicero Juliao da Silva Junior em 04/09/2009


Aplicando estilo ao background



No primeiro artigo desta série vimos os conceitos principais sobre Folhas de Estilo em Cascata, as famosas CSS. Desta vez seremos mais específicos, tendo nossa atenção para exemplos práticos.

Aplicaremos estilo a alguns itens da página e o primeiro deles será o background. Se você não leu o primeiro artigo da série, acesse-o em CSS - Manual Básico Sobre Estilo.

Novamente, estaremos com uma tradução livre dos manuais da W3Schools. Se preferir ler o original, em inglês, siga o link W3Schools - CSS.

Quando falamos em background, normalmente você pode pensar no background da página web. No entanto o conceito aqui é mais genérico. Podemos trabalhar tanto com o background da página como especificar algum elemento, como um cabeçalho ou até mesmo um parágrafo. Vejamos como fazer isso.

As propriedades de background em CSS são usadas para definir efeitos no background de um elemento. Tais propriedades são indicadas por:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Color

A propriedade background-color é usada para especificar a cor do background de um elemento. Mas isso é óbvio. :) A cor do background de uma página é definido pelo seletor "body":

body {background-color:#c2b1de}

Você pode indicar a cor do background das formas abaixo.
  • Nome - escreva o nome da cor, em inglês. Por exemplo, "blue"
  • RGB - um valor RGB, como "rgb(240,120,120)"
  • Hexagonal - um valor hexagonal, como "#ff0000"

No seguinte exemplo, os elementos h1, p, e div possuem cores diferentes de background:

h1 {background-color:#b5e144}

p {background-color:#cc6600}

div {background-color:#b4a4ce}

Se você desejar entender como indicar as cores usando os formatos RGB ou hexadecimal, leia a dica Entendendo as Cores Hexadecimais (RGB) aqui mesmo no Viva o Linux.

Background Image

A propriedade background-image indica uma imagem como sendo o background de um elemento. Funciona como a propriedade anterior, mas em vez de indicar uma cor ela indica uma imagem. Como padrão, a imagem é repetida até preencher o elemento inteiro.

Use uma sintaxe como indicada abaixo:

body {background-image:url("<imagem.extensão>)}

Se for usar essa propriedade, tome muito cuidado. Uma imagem como fundo pode dificultar bastante a leitura dos elementos que estão sobre ele. Principalmente se houver texto sobre a imagem. A sugestão é: se for preciso, ou interessante, o uso de imagem como fundo, então teste bem antes de publicar a página.

Note que o padrão é repetir a imagem tanto horizontal quanto verticalmente. Mas algumas imagens ficam estranhas assim. Por isso é possível repetir apenas horizontalmente (verticalmente). Para repetir apenas na horizontal (vertical) use a opção "repeat-x" (repeat-y), conforme o exemplo abaixo.

body {
   background-image:url("imagemDeFundo.png");
   background-repeat:repeat-x;
}

Também é possível mostrar uma imagem como background uma única vez. Para isso, siga a seguinte sintaxe:

body
{
   background-image:url("<imagemDeFundo.png>");
   background-repeat:no-repeat;
}

No caso acima a imagem é mostrada como fundo no mesmo lugar do texto dos demais elementos. É claro que possivelmente desejaremos mudar a posição da imagem no caso do elemento em questão ser um texto, de forma que não impeça a facilidade de leitura do texto.

Para especificar a posição da imagem, use a propriedade "background-position":

body
{
   background-image:url("<imagemDeFundo.png>");
   background-repeat:no-repeat;
   background-position:top right;
}

Valores adicionais para se usar com a propriedade "background-position" são:
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

Outro característica muito interessante é o uso da propriedade "background-attachment". Com ela podemos indicar se uma imagem de fundo será fixa ou rolará junto com a página. Por exemplo, se queremos ter uma imagem como fundo de nossa página, com o texto sendo rolado enquanto a imagem fica fixa, podemos usar a sintaxe abaixo.

<html>
<head>
<style type="text/css">
body
{
   background-image:url("imagemDeFundo.gif");
   background-repeat:no-repeat;
   background-attachment:fixed
}
</style>
</head>

<body>

<restanteDaPagina>
...

</body>
</html>

É claro que podemos usar as várias propriedades que vimos acima em um mesmo elemento. Por exemplo, podemos usar a configuração abaixo.

body {background:#c2b1de url("<imagemDeFundo.png>") no-repeat top right}

Aqui há algo importante a notar. Podemos usar as várias propriedades juntas, inclusive sem a obrigação de usar todas elas. Ou seja, juntamos as propriedades que desejamos. Mas é preciso usar em uma ordem precisa. Note bem: se for usar várias propriedades, declarando todas juntas, escreva seguindo a ordem abaixo.
  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

    Próxima página

Páginas do artigo
   1. Aplicando estilo ao background
   2. Estilos em textos
   3. Fontes
   4. Modelo da Caixa
Outros artigos deste autor

Octave - Programação científica no Linux

Guia Introdutório do Linux

Grace - Gráficos em ciência

Baixando ISOs-Linux em altíssima velocidade

Python, o curso (parte 1)

Leitura recomendada

Entendendo validações e operações aritméticas com Javascript

Automação de tarefas com Gulp

AJAX - Parte 1

Introdução ao Jython

Extensões imperdíveis para quem usa o Git (e o GitHub) no Brackets

  
Comentários
[1] Comentário enviado por giselinhaconfere em 04/11/2010 - 10:59h

modo de instalaçõa dos programas e como efetuar danwold

[2] Comentário enviado por giselinhaconfere em 04/11/2010 - 11:00h

como efetuar danwold

[3] Comentário enviado por giselinhaconfere em 04/11/2010 - 11:00h

o que é firewall


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts