CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags na secção head dos documentos HTML, ou através de folhas de estilo externas (Leia: Tutorial: Aprender o básico sobre CSS ). Cada regra de estilização selecciona os elementos e depois aplica as regras aos mesmos.

O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte IX) vamos mostrar como fazer o posicionamento de fundos dos documentos em CSS de diferentes maneiras e fazer um pequeno resumo daquilo que você não deverá esquecer, mantendo sempre fresca a sua memória com alguns tópicos!

CSS

Não perca os artigos anteriores desta série:

1. CENTRAR CAIXAS DE CONTEÚDO

Um dos requisitos primários para apresentar conteúdo nos documentos é a capacidade de centrar horizontalmente os blocos de conteúdos, à semelhança do que acontecia com a tag <center> em HTML. Em CSS para centrar horizontalmente os conteúdos é utilizada a propriedade margin e o valor auto, deixando assim ao critério do CSS definir automaticamente as margens para o conteúdo. Quando é definido o valor auto à propriedade margin de um elemento, o navegador faz primeiro o calculo da distância para a direita e para a esquerda desse elemento, até aos limites do elemento superior, e de seguida divide o total da distância em dois para definir o valor de cada margem.

A título de exemplo, se for definida a propriedade margin:auto; a um elemento que tenha 100px de largura e que esteja dentro de um elemento superior que tenha 250px de largura, , o navegador irá dividir a diferença total de 150px em dois, ficando com 75px para cada um dos lados da div do elemento, centrando assim o conteúdo horizontalmente. De notar que a propriedade margin:auto; não trabalhar qualquer valor vertical, definindo as margens para o topo e para baixo para zero, não havendo assim margens superiores ou inferiores no elemento.

Nunca é demais salientar que a propriedade margin:auto; centra as caixas de conteúdo de nível de bloco e não deverá ser confundido com o text-align: center; que pode ser utilizado para centrar conteúdo dentro de caixas de conteúdo em linha. Vamos passar a demonstrar através da criação de um documento, a utilização do margin:auto;

  1. Crie um documento HTML e insira o seguinte código dentro da tag <body> para começar a criar o documento:
    <div>Posição standard
        <div class="stand">Posição Standard</div>
        <div class="stand center">Posição Centrada</div>
    </div>
  2.  Agora adicione um outro elemento div contendo mais três elementos:
    <div class="centro">Bloco centrado
    <div class="stand">Posição Standard</div>
    <div class="stand centro">Posição centrada</div>
    <div class="centro stand texto-centro">Bloco centrado + Conteúdo centrado</div>
    </div>
  3.  Guarde o documento HTML e crie um documento CSS. Linke-o ao documento HTML e insira o seguinte código para definir a largura, margem e cores de cada elemento:
    div {width: 20em; margin: 0 0 2em 0; border: 0.1em solid black; background: green}
  4.  De seguida adicione uma regra de estilização que se irá sobrepôr à anterior para os elementos que estão dentro de div’s:
    div.stand{ margin:0; width: 10em; background:yellow}
  5.  Adicione a seguinte regra de estilização para centrar os elementos que estão dentro das div’s:
    div.centro {margin: auto; background: aqua}
  6.  Por último adicione a seguinte regra de estilização para centrar o conteúdo que está dentro dos elementos que estão dentro de uma div:
    div.texto-centro {text-align: center; background: red}
  7.  Guarde ambos os documentos HTML e CSS e observe o resultado:
    Programação CSS para iniciantes (Parte X)

2. POSICIONAMENTO ABSOLUTO DE CAIXAS

Quando se esta a trabalhar as caixas de conteúdo de um elemento numa página web, a propriedade CSS position tem o valor standard de static, que representa o esquema normal de positionamento. Ao atribuir um valor diferente para a propriedade position do elemento, permite-lhe que esse elemento possa ser removido do esquema nromal e possa ser posicionado de forma independente. As alternativas ao valor static podem ser especificadas utilizando os valores absolute, relative e fixed, definindo assim uma alternativa ao esquema normal de posicionamento.

Os esquemas de posicionamento absolute, relative e fixed utilizam cada um deles um ou mais propriedades de offset em CSS, nomeadamente top, right, bottom e left, para definir a sua posição. Quando a propriedade de posição é definida como absolute, o esquema de posicionamento e posiciona esse elementos na distancia de offset definida a partir dos limites do elemento onde está inserido. Por exemplo, um elemento div que valores de top e left de 80px serão posicionados 80px abaixo e á direita dos limites do elemento onde está inserido.

Para verificar como funciona o que mencionámos acima, nada melhor que passar à prática e executar um exemplo:

  1. Crie um documento HTML e insira o seguinte código dentro da tag <body> para começar a criar o documento:
    <div class="top-left largo">Top: 0 Left: 0
    	<div class="bottom-right small">Bottom:0 Right:0 </div>
    </div>
    
    <div class="top-right large">Top: 0 Right:0
    	<div class="bottom-left small">Bottom:0 Left:0 </div>
    </div>
    
    <div class="bottom-left large">
    	<br /><br /><br />Bottom:0 Left:0
    <div class="top-right small">Top:0 Right:0</div>
    </div>
    
    <div class="bottom-right large">
    	<br /><br /><br />Bottom:0 Right:0
    <div class="top-left small">Top:0 Left:0 </div>
    </div>
  2. Guarde o documento HTML e crie um documento CSS e linke-o ao documento HTML. Insira o seguinte código no ficheiro CSS para definir o tamanho absoluto dos elementos:
    div.large{ width: 200px; height: 80px; border: 1px solid black}
    
    div.small{width: 80px; height: 40px; border: 1px solid black}
  3.  Agora adicione as seguintes regras de estilização para definir a posição absoluta de cada elemento:
    div.top-left{ position: absolute; top: 0px; left: 0px; background: lime}
    
    div.top-right { position: absolute; top: 0px; right: 0px; background: aqua }
    
    div.bottom-left { position: absolute; bottom: 0px; left: 0px; background: yellow}
    
    div.bottom-right{ position: absolute; bottom: 0px; right: 0px; background: orange}
  4.  Guarde o documento HTML e a folha de estilos CSS e verifique o resultado no seu navegador:
    Programação CSS para iniciantes (Parte X)

Note que cada uma das caixas de conteúdo exteriores irá manter a sua posição absoluta relativamente à janela mesmo que o tamanho da janela do navegador seja alterada, isto é a posição absoluta.

No próximo artigo iremos abordar mais conteúdos relacionados com as caixas de conteúdo, nomeadamente como as empilhar e como as posicionar de forma relativa a outros elementos no documento. Não perca!

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

Templates Incríveis para seus Projetos:

  • Estimation - Responsive Drupal Theme
  • Papa - Responsive Multipurpose VirtueMart Template
  • Vigo Shop - Responsive & Multipurpose Joomla Theme
  • Minima - Multipurpose Joomla Template
  • Noo Wedding - The Tasteful Joomla Wedding Template
  • Vigorous - Responsive Multi-Purpose Joomla Theme
  • Product - Responsive Business Joomla Template
  • QVA -One Page Multi-purpose JOOMLA-3X Template
  • BuyShop -  Premium Responsive Virtuemart theme
  • Start - One Page Responsive Joomla Template
  • Fresh Market - Responsive VirtueMart Template
  • Wine Shop - Responsive VirtueMart Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Gilmar Coimbra
    29 de maio de 2012

    Parabéns, uma vez mais, pelas excelentes postagens!
    (Tinha fechado todas as guias dos tutorais, mas fiz questão de abri-las novamente para agradecer-te).

    Não vi referência de um possível livro teu, sobre o DreamWeaver, existe? Se existir, quero comprar um!

    Obrigado.

    Responder

Comente o Artigo!

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7628

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz