Variáveis CSS

Quando vamos mexer no template de um blog logo nos deparamos com um monte de variáveis que nem sempre sabemos do que se trata, esse post vai tentar desvendar a maioria delas. Colocarei aqui as que eu conheço, que fui as poucos descobrindo o que era (às vezes com a ajuda de sites e blogs, outra na raça mesmo), se alguém perceber que coloquei algo errado ou quiser adicionar alguma, é só dizer que eu arrumo e claro, dou os devidos créditos.

[EDIT] Depois que eu terminei, fui procurar algumas variáveis que eu não conhecia (como a do text-transform que eu só conhecia a UPPERCASE), e encontrei o Maujor, que já faz um tempo que até recomendo aqui e me ajuda bastante, mas ainda não tinha visto a página de Propriedade do texto deles. Dêem uma passada lá e confiram! Propriedade CSS text

Se eu tivesse encontrado antes teria apenas linkado as propriedades de texto, mas como já fiz vou manter o link e o meu trabalho lá embaixo.[/EDIT]

Chega de enrolação, vamos lá!

background: aqui é o fundo do 'objeto', elemento. Você pode por uma cor, ou uma imagem.

Exemplo:

Com cor:
background: #000000;

Com imagem:
background: url(http://url-da-imagem/) X;

X pode ser substituído por:
repeat - se você quiser que a imagem se repita
no-repeat - se você não quer que a imagem se repita
top - topo
bottom - abaixo
right - direita
left - esquerda

É possível também fazer combinações assim:

background: url(http://url-da-imagem/) no-repeat top left;

Outra possibilidade é combinar cor com imagem, então, onde não tiver a imagem aparecerá a cor escolhida:

background: #000000 url(http://url-da-imagem/) no-repeat bottom left;

border: Borda

Exemplo:

border: 1px solid #000000;

Em azul: a espessura da borda, troque o '1' pelo número desejado.
Em vermelho: o tipo da borda (solid, dashed e dotted).
Em verde: a cor.

Você pode por borda só em determinado lugar:

Veja as possibilidades:

border-bottom; 1px solid #000000;

border-right;1px solid #000000;

border-top;1px solid #000000;

border-left;1px solid #000000;

Veja os estilos de borda possíveis no Blogger:

border:1px solid #000000

border:1px dashed #000000

border:1px dotted #000000

margin: distância entre um elemento e outro (coluna a outra, por ex.)

Ex:
margin: 10px 10px 10px 10px;

padding: distância entre o contéudo e as bordas Entenda melhor a diferença entre padding e margin

Ex:
padding: 10px 10px 10px 10px;

widht: largura

Ex:
widht: 500px;

height: altura

Ex:
height: 500px;

float:flutuação (right ou left)

Ex:
float: right;

color: cor do texto

Ex:
color: #000000;

font: tipo da fonte

Ex:
font: $bodyfont;

text-align: alinhamento do texto (left, right, center, justify>

Ex:
text-align: left;

text-decoration: decoração do texto

Ex:
text-decoration: underline;

text-transform: tranforma o texto não importando como você escreva, pode deixar por exemplo todas maíscula.

Ex:
text-transform: uppercase;

letter-spacing: espaço entre as letras.

Ex:
letter-spacing: 1px;

line-height: altura da linha. (não é tamanho da fonte!)

Ex:
line-height: 1px;

font-size: tamanho da fonte

Ex:
font-size: 20px;

ATENÇÃO

PRIMEIRO: Os valores como da margin que vem 4 valores seguidos (1px 1px 1px 1px;) tem sentido horário, sendo o primeiro o topo, ou seja:

margin: 1px (topo), 1px (direita), 1px (abaixo), 1px (esquerda);

SEGUNDO:Você perceberá que todas as medidas estão em PIXELS (PX), porém existem outros tipos de medidas, que explicarei em outro post, ok?

Por enquanto é isso.
Demorei mais do que o esperado para postar pois foi trabalhoso achar uma formatação que me sastifizesse, não sei bem se essa o fez, mas acho que ficou razoável.
Dúvidas, sugestões e críticas (inclusive de formatação, por favor), por favor, comentem!

Até a próxima!