Google
 

Home | Próximo »
A Propriedade background
Você está estudando a propriedade background,
do item de menu A propriedade background.



A propriedade background
A propriedade background é uma abreviatura, ou seja, uma forma de você declarar valores para todas as propriedades de estilização de fundo que você já estudou em uma única declaração.

Observe a sintaxe abaixo:
seletor {
   background:  background-color  backlground-image  background-repeat
   background-attachment  background-position;
}

Aplicando esta regra para um elemento div teríamos: 
div{
   background-color: #408080;
   background-image: url(imagem.gif);
   background-repeat: no-repeat;
   background-position: bottom right;
}

Agora veja a regra acima de forma abreviada:
div{ background:  #408080  url(imagem.gif) no-repeat bottom right;}

Repare que não é necessário declarar todos os valores, apenas aqueles que forem necessários ao seu documento. Veja a seguir em exemplo de aplicação usando a regra acima: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Aplicando a propriedade background</title>
      <style type="text/css" media="screen">
         #bloco{
            width: 500px;
            height: 200px;
            font-weight: bold;
            background: #408080 url(imagens/imagem.gif) no-repeat bottom right;
         }
      </style>	

   </head>
   <body>

      <div id="bloco">
         <p>Exemplo de aplicação da propriedade background.</p>
      </div>
   </body>
</html>

Veja o resultado do exemplo.

Gostou do site? Indique a seus amigos!
Home | Próximo »


Envie seu comentário:

Nome:     

E-mail:

Comentários:



  • Apoiam o Site