Índice de Códigos

| |

Para explicações mais aprofundadas de alguns pontos, recomendo verificar este blog.

Códigos relativos ao texto
color: #FFF; /*cor do texto*/
font-family: Comic Sans; /* fonte */
font-size: 30px; /* tamanho do texto */
letter-spacing: Xpx; /* espaçamento das letras */
word-spacing: Xpc; /* espaçamento das palavras */
text-decoration: italic; /* itálico */
text-decoration: bold; /* negrito */
text-decoration: underline; /* sublinhado */
text-decoration: line-through; /* tachado */
text-decoration: overline; /* linha acima do texto */
text-decoration: underline overline; /* linhas acima e abaixo do texto */

Text Transform
text-transform: valor;
uppercase: todas as letras maiúsculas (ex.: FRASE DE EXEMPLO).
lowercase: todas as letras minúsculas (ex.: frase de exemplo).
capitalize: primeira letra de cada palavra maiúscula (ex.: Frase De Exemplo).

Alinhamento do texto
text-align: valor;
center: alinhamento central.
left: alinhamento à esquerda.
right: alinhamento à direita.

Códigos relativos à caixa
background: #FFF; /* cor do fundo */
background: url(url da imagem); /* imagem de fundo */

Margem e acolchoamento
margin: Xpx Xpx Xpx Xpx; /* margem (externa) */
padding: Xpx Xpx Xpx Xpx; /* acolchoamento (interno) */
(a ordem será topo, direita, abaixo e esquerda)

Se o valor for o mesmo para todos os lados:
margin: Xpx; /* margem (externa) */
padding: Xpx; /* acolchoamento (interno) */
Se quiser o código de cada lado separadamente:
margin-top: Xpx; /* margem do topo */
margin-right: Xpx; /* margem da direita */
margin-bottom: Xpx; /* margem de baixo */
margin-left: Xpx; /* margem da esquerda */

padding-top: Xpx; /* acolchoamento do topo */
padding-right: Xpx; /* acolchoamento da direita */
padding-bottom: Xpx; /* acolchoamento de baixo */
padding-left: Xpx; /* acolchoamento da esquerda */

Bordas
border: TAMANHOpx valor #COR;
solid: linha normal.
dotted: pontilhada.
dashed: tracejada.
double: dupla.
groove: entalhada.
ridge: saltada.
inset: aspecto fundo.
outset: aspecto saltado.

Para exemplos de cada estilo de borda, clique aqui.

Para bordas em lados específicos:
border-top: TAMANHOpx valor #COR; /* topo */
border-bottom: TAMANHOpx valor #COR; /* abaixo */
border-left: TAMANHOpx valor #COR; /* esquerda */
border-right: TAMANHOpx valor #COR; /* direita */
Obs.: border-bottom pode ser usado no texto como sublinhado decorado.

Códigos de transformação / animação
Para entender melhor como cada código funciona, sugiro verificar este site c:
Rotação
transform: rotate(ÂNGULOdeg) ;
-webkit-transform: rotate(ÂNGULOdeg) ;
-moz-transform: rotate(ÂNGULOdeg) ;
-o-transform: rotate(ÂNGULOdeg) ;
-ms-transform: rotate(ÂNGULOdeg) ;
Como editar: coloque o ângulo desejado para a rotação. Se for positivo (+), será no sentido horário, e se for negativo (-), será no sentido anti-horário.


Migração
transform: translate(LADOSpx, CIMA/BAIXOpx);
-webkit-transform: translate(LADOSpx, CIMA/BAIXOpx);
-moz-transform: translate(LADOSpx, CIMA/BAIXOpx);
-o-transform: translate(LADOSpx, CIMA/BAIXOpx);
-ms-transform: translate(LADOSpx, CIMA/BAIXOpx);
Como editar: coloque quantos pixels você quer que o objeto vá em cada direção. No caso dos lados, se o número for positivo (+) irá para a direita, e se for negativo (-) irá para a esquerda. No segundo caso, se for positivo (+) irá para baixo, e se for negativo (-) irá para cima.

Tamanho
transform: scale(NÚMERO);
-webkit-transform: scale(NÚMERO);
-moz-transform: scale(NÚMERO);
-o-transform: scale(NÚMERO);
-ms-transform: scale(NÚMERO);
Como editar: o número ser quantas vezes você quer que a imagem cresça (se for positivo) ou diminua (se for negativo).

Deformação
transform: skew(LADOSdeg, CIMA/BAIXOdeg) ;
-webkit-transform: skew(LADOSdeg, CIMA/BAIXOdeg) ;
-moz-transform: skew(LADOSdeg, CIMA/BAIXOdeg) ;
-o-transform: skew(LADOSdeg, CIMA/BAIXOdeg) ;
-ms-transform: skew(LADOSdeg, CIMA/BAIXOdeg) ;
Como editar: coloque o ângulo da deformação no campo correspondente.

página em construção: em breve mais códigos serão acrescentados