• Bem Vindo!

    Seja bem vindo ao Per Voi. Prazer, eu sou a Luh, tenho 28 anos, sou carioca e vascaína. Aqui nesse cantinho você poderá encontrar alguns materiais criados por mim e outros que fui juntando ao longo do tempo, da minha vida virtual. Espero que aproveite bem tudo que estou disponibilizando.
    Não esquecendo é claro de ler os Termos para isso!
    Bjsss Luh Princess
  • Me encontre aqui:

    Mia Vita - Dolce Illusione.com
    Gmail Msn Orkut
  • Calendário

    Agosto 2008
    D S T Q Q S S
    « Mai    
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31  
  • Comunidade

  • Enquete

    O que gostaria que tenha no Per Voi?

    Tutoriais para WP
    Temas Free
    Temas Base
    Utilitários
    Scripts
    Gifs e Acessórios
    Lays Free


  • Parcerias

     ~ Drikoti


    Gifs para você!!
  • Estatísticas

    Total de Posts: 95
    Total de Comentários: 38
    Total de Categorias: 16
    Post: É...eu ainda estou viva! o/
    Comentário: patricia
1,227 VisitasHome » Atributos do CSS
Última Atualização: 17/08/2007 - 02:15:14

Atributos do CSS


Z index:

z-index - Define uma hierarquia na sobreposição dos objetos.

Position:

position - Posicionamento dos objetos.
absolute - Posicionamento absoluto.
relative - Posicionamento relativo.
static - Posicionamento Estático.

Exemplo do código:

position: absolute;

Direction:

direction - Define um sentido de leitura jogando o texto à margem direita ou esquerda.
ltr - Da esquerda para a direita.
rtl - Da direita para a esquerda.

Exemplo do código:

direction: ltr;

Writing Mode:

writing-mode - Gerencia o modo da escrita.
lr-tb - Escrita da esquerda para a direita, do topo para baixo.
tb-rl - Escrita do topo para baixo, da direita para a esquerda.

Exemplo do código:

writing-mode: lr-tb;

White Space:

white-space - Gerencia como o browser deve tratar os espaços em branco.
normal - Espaços normais, condição default.
pre - Manterá todos os espaços inseridos.
nowrap - Elimina a quebra de linha.

Exemplo do código:

white-space: normal;

Cursor:

cursor - Altera o formato do cursor.
help - Interrogação.
crosshair - Cruz.
default - Cursor padrão.
hand - Mão padrão.
move - Cruz com setas.
text - Inserção.
wait - Ampulheta.
n-resite - Seta para o norte.
ne-resize - Seta para o nordeste.
e-resize - Seta para o leste.
se-resize - Seta para o sudeste.
s-resize - Seta para o sul.
sw-resize - Seta para o sudoeste.
w-resize - Seta para o oeste.
nw-resize - Seta para o noroeste.

Exemplo do código:

cursor: hand;

Widht:

width - Define a largura do objeto.
percentage (%) - Porcentagem.
inches (in) - Polegadas.
pointd (pt)- Pontos.
pixels (px)- Pixels.

Exemplo do código:

width: 100%;

Height:

height - Define a altura do objeto.
percentage (%) - Porcentagem.
inches (in) - Polegadas.
pointd (pt)- Pontos.
pixels (px)- Pixels.

Exemplo do código:

height: 18px;

Vertical align:

vertical-align - Alinhamento vertical de objetos.
top - Alinhamento pelo topo.
baseline - Alinhamento pela base.
middle - Alinhamento pelo meio.
percentage - Especifica uma porcentagem vertical no alinhamento.
sub - Cria um texto sub-escrito.
super - Cria um texto sobre-escrito.

Exemplo do código:

vertical-align: middle;

Font:

font-family - Seleciona o tipo que você quer usar na fonte.
Arial - Arial.
Bookman Old Style - Bookman Old Style.
Courier New - Courier New.
MS Sans Serif - MS Sans Serif.
Times New Roman - Times New Roman.
Verdana – Verdana.

Exemplo do código:

font-family: verdana;

font-size - Muda o tamanho absoluto ou relativo da fonte, a mais utilizada é px.
px - Determina a espessura em pixels.
xx-small - Muito pequeno.
x-small - Muito pequeno.
small - Pequeno.
medium - Médio.
large - Grande.
big - Grande.
x-large - Muito grande.
xx-large - Muito grande.

Exemplo do código:

font-size: 10px;

font-weight - Define a espessura da fonte.
extra-bold - Extra negrito.
bold - Negrito.
semi-bold - Semi negrito.
medium - Médio.
semi-light - Semi leve.
light - Leve.
extra-light - Extra leve.

Exemplo do código:

font-weight: bold;

font-style - Seleciona o estilo da fonte.
italic - Italico.
normal - Normal.
oblique - Obliquo.

Exemplo do código:

font-style: oblique;

Text:

text-align - Especifica o alinhamento do texto.
left - Pelo lado esquesdo.
center - Pelo centro.
right - Pelo lado direito.
justify - Justificado.

Exemplo do código:

text-align: center;

text-transform - Transformação do texto.
capitalize - Converte a primeira letra de cada palavra em maiúscula.
lowercase - Converte todo o texto em letras minúsculas.
upppercase - Converte todo o texto em letras maiúsculas.

Exemplo do código:

text-transform: uppercase;

text-decoration - Altera o atributo do texto.
none - Nenhum.
underline - Sublinhado.
overline - Sobrelinha.
line-through - Riscado.
italic - Itálico.

Exemplo do código:

text-decoration: underline;

text-indent - Cria um parágrafo no início do texto.
inches (in) - Polegadas.
centimeters (cm) - Centímetros.
points (pt) - Pontos.
pixels (px) - Pixels.

Exemplo do código:

text-indent: 5px;

Line Height:

line-height - Define a espessura da linha.
centimeters (cm) - Centímetros.
percentage (%) - Porcentagem.
inches (in) - Polegadas.
pointd (pt)- Pontos.
pixels (px)- Pixels.

Exemplo do código:

line-height: 15px;

Letter Spacing:

letter-spacing - Define um espaço entre as letras.
centimeters (cm) - Centímetros.
inches (in) - Polegadas.
pointd (pt)- Pontos.
pixels (px)- Pixels.

Exemplo do código:

letter-spacing: 3px;

Word Spacing:

word-spacing - Define um espaço entre as palavras.
centimeters (cm) - Centímetros.
inches (in) - Polegadas.
pointd (pt)- Pontos.
pixels (px)- Pixels.

Exemplo do código:

word-spacing: 5px;

Float:

float - Define o objeto como flutuante.
left - Objeto à esquerda.
right - Objeto à direita.
none - Mostra o objeto sem alteração.

Exemplo do código:

line-height: 25px;

Padding:

padding - Cria um espaçamento entre o objeto e as suas quatro bordas.
padding-top - Espaço entre o objeto e a borda do topo.
padding-bottom - Espaço entre o objeto e a borda da base.
padding-left - Espaço entre o objeto e a borda esquerda.
padding-right - Espaço entre o objeto e a borda direita.

Exemplo:

padding-right: 5px;

Margin:

margin - Define uma margem equidistante entre o objeto e seus quatro lados.
margin-top - Define uma margem de topo.
margin-bottom - Define uma margem da base.
margin-left - Define uma margem esquerda.
margin-right - Define uma margem direita.

Exemplo:

margin-top: 30px;

Background:

background-attachment - Determina se a imagem será fixa ou não.
fixed - Fixa a imagem de fundo.

Exemplo:

background-attachment: fixed;

background-repeat - Define a disposição que a imagem deverá ocupar no fundo.
no-repeat - É posicionada no canto superior esquerdo.
repeat-x - A imagem irá se repetir na horizontal.
repeat-y - A imagem irá se repetir na vertical.

Exemplo:

background-repeat: repeat-x;

background-image - Define uma imagem de fundo na página, parágrafo ou texto.
url - Indica o diretório e o nome do arquivo.
color - Indica a cor que você deseja usar

Exemplo:

background: url('images/fundo.jpg');
background: #FFFFFF url('images/fundo.jpg' ) repeat-x scroll;
 

background-position - Determina uma posição onde a imagem de fundo deve aparecer.
bottom - Alinha a imagem de background na base.
center - Centraliza a imagem de background.
left - Alinha de background à imagem a esquerda.
right - Alinha de background à imagem a direita.
top - Alinha a imagem de background no topo.
centimeters (cm) - Centímetros.
percentage (%) - Porcentagem.
inches (in) - Polegadas.
pointd (pt)- Pontos.
pixels (px)- Pixels.

Exemplo:

background-position: bottom;

Border:

border-top - Borda no topo da imagem ou texto.
border-top-width - Largura da borda topo.
border-top-style - Estilo da borda topo.
border-top-color - Cor da borda topo.

border-bottom - Borda na base da imagem ou texto.
border-bottom-width - Largura da borda base.
border-bottom-style - Estilo da borda base.
border-bottom-color - Cor da borda base.

border-left - Borda à esquerda da imagem ou texto.
border-left-width - Largura da borda esquerda.
border-left-style - Estilo da borda esquerda.
border-left-color - Cor da borda esquerda.

border-right - Borda à direita da imagem ou texto..
border-right-width - Largura da borda direita.
border-right-style - Estilo da borda direita.
border-right-color - Cor da borda direita.

border-style - Define o estilo que deseja na borda.
solid - Sólida.
dashed - Tracejada.
dotted - Pontilhada.
double - Dupla.
groove - Entalhada.
ridge - Eriçada.
inset - Baixo relevo.
outset - Alto relevo.
none - Sem borda.

border-width - Especifica a espessura da borda, a mais utilizada é px.
px - Determina a espessura em pixels.
thin - Fina.
medium - Média.
thick - Grossa.

border-color - Define a cor que deseja na borda.
border-color - #FFFFFF

Exemplo:

border-bottom: 2px dotted #FFFFFF;
 

Filter:

filter - Cria efeito visuais em objetos.
alpha - Efeito de opacidade.
blur - Efeito 3D.
chroma - Filtra uma cor pré-definida do objeto.
dropshadow - Efeito de sombreamento disfocado.
fliph - Inverte a imagem do objeto horizontalmente.
flipv - Inverte a imagem do objeto verticalmente.
glow - Efeito de borramento.
gray - Apresenta o objeto em tons de cinza.
invert - Inverte as cores do objeto.
mask - Efeito transparente negativa.
motion-blur - Cria um efeito de velocidade ao objeto.
shadow - Efeito sombreado.
wave - Efeito de ondulação.
xray - Filtro de cores semelhante ao gray.

Exemplo:

filter: shadow;

Essa página foi desenvolvida por mim.Não redistribua e se utilizar dê os devidos créditos.

Qualquer dúvida, pergunte em Ask-me.




© Dolce Illusione.com/PER VOI εїз | Editado por Luh Princess

Melhor visualização: IE 7.0. | Melhor resolução: 1024 x 768.

Bad Behavior has blocked 265 access attempts in the last 7 days.