HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Dimensionamento

Margin - Permite controlar o espaçamento entre os elementos.
margin-bottom  - Define uma margem da base.
margin-left  - Define uma margem esquerda.
margin-right  - Define uma margem direita.
margin-top  - Define uma margem de topo.
margin  - Maneira abreviada para definir todas as propriedades relativas às quatro margens de um elemento.
Valores possíveis:
auto Determinado automaticamente pelo Navegador.
comprimento Define um comprimento fixo (qualquer medida válida em css)
%
Define o comprimento da margem como uma percentagem da altura do documento (para bottom e top) ou como uma percentagem da largura do documento (para left e right.).
Exemplos:
h1 {margin: 10px}  todas as margens têm 10px
h2 {margin: 10px 2%}  top e bottom têm 10px, left e right têm 2% da largura total do documento.
h3 {margin: 10px 2% -10px}  top tem 10px, left e right têm 2% da largura total do documento e bottom têm -10px (valor negativo).
h4 {margin: 10px 2% -10px auto}  top têm 10px, right têm 2% da largura total, bottom tem -10px e left será escolhida pelo navegador.

Overflow - Define o que ocorre quando o conteúdo de um elemento excede a sua área
visible  - Mostra todo o conteúdo. Uma parte será apresentada já fora da área do elemento a que pertence.
hidden - O conteúdo é cortado. A parte que excede a área disponível não será mostrada.
scroll - O conteúdo é cortado, mas o navegador acrescenta barras de rolagem para que o restante conteúdo também possa ser visto se necessário.
auto - Caso ocorra um corte no conteúdo por ele exceder a área disponível o navegador acrescenta barras de rolagem para que o excedente também possa ser visto se necessário.
Exemplo:
div { width: 150px; height: 100px; overflow: auto }  caso o conteúdo exceda a área definida de 150px por 100px apresentará barras de rolagem

padding - Cria um espaçamento entre o conteúdo e as suas quatro bordas.
padding-bottom  - Espaço entre o conteúdo e a borda da base.
padding-left  - Espaço entre o conteúdo e a borda esquerda.
padding-right  - Espaço entre o conteúdo e a borda direita.
padding-top  - Espaço entre o conteúdo e a borda do topo.
Valores válidos:
comprimento
%

Exemplos:
h1 { padding-bottom: 10px }
h2 {padding: 10px 2%}  (topo e base 10px; esquerdo e direito 2% da largura total do elemento)
h3 {padding: 8px 3% 13px}  (topo  8px, direita e esquerda 3% da largura total do elemento e base 13px)
h4 {padding: 8px 3% 13px 10px}  (topo  8px, direita 3% da largura total do elemento, esquerda 13px e base 10px)

position - Posicionamento de objetos.
A ordem de colocação dos elementos numa página consiste em desenhá-los à medida que eles vão surgindo. Este método é designado por posicionamento relativo.

No posicionamento absoluto os elementos de bloco podem ser colocados em qualquer local da página podendo, inclusive, sobreporem-se. Tudo se passa como se a página fosse uma mesa na qual podemos sobrepor camadas de filmes transparentes. A hierarquia de sobreposição obedece a regra geral, isso é, os objetos definidos por último irão sobrepor os anteriores.

absolute  - O posicionamento é definido pelas margens superior e esquerda da tela
relative  - A referência é o canto superior esquerdo da tela e o ponto que ocupa a posição definida é o canto superior esquerdo do elemento posicionado.
Exemplo:
h1 { position:absolute; left:120px; top:130px }

vertical-align - Alinhamento vertical de objetos em relação ao texto
baseline  - A linha de base do elemento é alinhada com a linha de base do elemento que o contém.
bottom   - Alinha o limite inferior do elemento o mais baixo possível na linha a que pertence.
middle  - Alinhamento pelo meio.
percentage  - Especifica uma porcentagem vertical no alinhamento.
sub  - Cria um texto sub-escrito.
super   - Cria um texto sobre-escrito.
text-bottom - Alinha o limite de baixo do elemento com o limite de baixo do texto na linha a que pertence.
text-top
- Alinha o topo do elemento com o limite mais alto do texto na linha a que pertence.
top - Alinhamento pelo topo.
Exemplo:
img { vertical-align: bottom }

width e heigh - Define a largura e altura do objeto.
Unidade de medidas: pt (pontos),  px (pixeis), ou qualquer medida válida em css.

z-index - Define uma hierarquia na sobreposição dos objetos. Quando dois ou mais elementos ocupam a mesma área aquele que possuir o valor de z-index mais elevado ficará por cima do (s) elemento (s).
auto  - O valor de z-index é escolhido pelo navegador
número - Define o valor de z-index do elemento
Exemplo:
img { z-index: -2 }
Notas: O z-index pode assumir valores negativos.
Só produz efeito quando aplicada a elementos posicionados de forma absoluta (position: absolute)

Valores Normalmente Usados em Cascading Style Sheets

pt
pc in
cm
mm
px
%
em
ex

 ponto - (1/72 in) medida tipográfica destinada essencialmente para definir as diversas fontes
 pica - 1 pc é o mesmo que 12pt
 polegada - medida do sistema métrico americano
 centímetro
 milímetro
 pixel - unidade de medida ideal para o monitor, é a mais usada e de fácil compreensão
 porcentagem - em relação a outro valor de mesma natureza
 altura da fonte do elemento - 1 em é igual ao tamanho do tipo de fonte que está sendo usado
 1 ex é igual à altura da letra "x" no tipo de fonte que está sendo usado

Obs: não deixe espaço entre o valor e a unidade de medida pois alguns navegadores não saberão interpretar corretamente a medida expressa dessa forma. Ex: o correto é 15px e não 15 px
Quando o valor for zero não é necessário indicar a unidade de medida