Os principais atributos CSS

Atributo Descrição
{ background: trasparent | color || url || repeat
|| scroll || posição }
Especifica a transparência / cor/ imagem/ url da imagem/
posição da imagem/ repetição da imagem do plano de fundo do documento
{ background-attachment: scroll | fixed } Define se a imagem de fundo rolará com o conteúdo ou será
fixa
{ background-color: color | transparent } Indica a cor e transparência da cor do plano de
fundo
{ background-image: url | none } Espeficida o url da imagem de plano de fundo
{ background-position: [ posição ] | largura
| {1,2} | [ top | center | bottom ] || [ left | center | right ]}
Indica a posição inicial da imagem de fundo do documento
Indica a posição inicial da imagem de fundo do documento
em relação ao eixo X.
Indica a posição inicial da imagem de fundo do documento
em relaçao ao eixo Y.
{ background-repeat: repeat | repeat-x | repeat-y | no-repeat
}
Define como e se a imagem de fundo se repete.
{ border: largura || estilo || color } Define a largura, estilo e cor de todas as quatro bordas
{ border-bottom: largura || estilo || color
}
Define a largura, estilo e cor da borda inferior
{ border-bottom-color: color } Define a cor da borda inferior
{ border-bottom-style: none | solid | double | groove | ridge
| inset | outset }
Define o estilo da borda inferior
{ border-bottom-width: thin | medium | thick | largura com unidade de medida específica } Define a largura da borda inferior
{ border-color: color {1,4} } Define a cor de todas as bordas
{ border-left: largura || estilo || color
}
Define a largura, estilo e cor da borda esquerda
{ border-left-color: color } Define a cor da borda esquerda
{ border-left-style: none | solid | double | groove | ridge
| inset | outset }
Define o estilo da borda esquerda
{ border-left-width: thin | medium | thick | largura } Define a largura da borda esquerda.
{ border-right: largura || estilo || color
}
Define a largura, estilo e cor da borda direita
{ border-right-color: color } Especifica a cor da borda direita.
{ border-right-style: none | solid | double | groove | ridge
| inset | outset }
Define o estilo da borda direita.
{ border-right-width: thin | medium | thick | largura } Define a largura da borda direita.
{ border-style: none | solid | double | groove | ridge | inset
| outset }
Define o estilo da borda.
{ border-top: largura || estilo || color
}
Define a largura, estilo e cor da borda superior
{ border-top-color: color } Define a cor da borda superior
{ border-top-style: none | solid | double | groove | ridge
| inset | outset }
Define o estilo da borda superior
{ border-top-width: thin | medium | thick | largura } Define a largura da borda superior
{ border-width: [ thin | medium | thick | largura ] {1,4}
}
Especifica a largura de todas as bordas de um elemento
{ clear: none | left | right | both } Diz em qual lado do elemento não é permitido elementos
flutuantes – ou com estilo float.
{ clip: coordenadas top right bottom left | auto } Especifica  a parte visível do elemento – age como uma
espécie de recorte. Só funciona para elementos posicionados de maneira fixed ou
absolute e overflow independe de posicionamento
{ color: color } Especifica a cor do texto.
{ cursor: auto | crosshair | default | hand | move | e-resize
| ne-resize | nw-resize | n-resize | se-rezise | sw-resize | s-rezise |
w-reseze | text | wait | help }
Define o tipo do ponteiro/cursor do mouse.
{ display: none | texto_vazio } Determina se um elemento estará visível e reserva um espaço
para o mesmo.
{ font-family: [ nome da fonte | familia-genérica
]
Estabelece os tipos de fonte que serão utilizados no
elemento.
{ filter: blendtrans | revealtrans | alpha | blur | croma
| dropshadow | fliph | flipv | glow | gray | invert | light | mask | shadow
| wave | xray }
Define o tipo de filtro a ser aplicado em um elemento.
{ font: [ estilo || variante || bold? ] tamanho [ primeira letra maiúscula?]  família de fontes ] } Define os atributos da fonte de um elemento
{ font-family: familia de fonte} Determina uma família de fontes a ser utilizada.
{ font-size: xx-large | x-large | large | medium | small |
x-small | xx-small | larger | smaller | porcentagem | tamanho
}
Determina o tamanho da fonte
{ font-style: normal | italic | oblique } Estabelece o estilo da fonte
{ font-variant: normal | small-caps } Especifica se a primeira letra de cada palavra deverá ter
letras maiúsculas ou não.
{ font-weight: normal | bold | bolder | lighter | 100 | 200
| 300 | 400 | 500 | 600 | 700 | 800 | 900 }
Especifica quão grossa é a fonte, caso o estilo bold
seja ativado.
{ height: tamanho | auto } Especifica a altura de um elemento
{ left: tamanho | porcentagem | auto } Especifica a posição esquerda de um elemento.
{ margin-left: tamanho | porcentagem |
auto }
Especifica o tamanho da margem esquerda de um elemento.
{ letter-spacing: normal | tamanho } Determina o espaço entre os caracteres de texto.
{ line-height: normal | tamanho | porcentagem
}
Determina a distância entre as linhas de texto adjacentes.
{ list-style: tipo || posição || URL
}
Permite estabelecer o estilo de uma lista <LI>
{ list-style-image: URL | none } Define a imagem que será utilizada como marcador em uma lista (<LI>).
{ list-style-position: inside | outside } Estabelece a posiçao aonde uma lista do tipo (<LI>)
será exibida.
{ list-style-type: disk | circle | square | decimal | lower-roman
| lower-alpha | upper-alpha | none }
Caso não se utilize uma imagem como marcador de uma lista <LI>,
define o estilo dos marcadores pré-definidos.
{ margin: [ tamanho | porcentagem | auto
] {1,4} }
Permite especificar as quatro margens de um documento.
{ margin-bottom: tamanho | porcentagem
| auto }
Especifica o tamanho da margem inferior de um elemento.
{ margin-left: tamanho | porcentagem |
auto }
Especifica o tamanho da margem esquerda de um elemento.
{ margin-right: tamanho | porcentagem |
auto }
Especifica o tamanho da margem direita de um elemento.
{ margin-top: tamanho | porcentagem | auto
}
Especifica o tamanho da margem superior de um elemento.
{ overflow: none | clip | scroll } Define como será exibida uma imagem ou texto que é maior que
sua moldura.
{ padding: [ tamanho | porcentagem ] {1,4}
}
Estabelece um espaço interno em torno de um elemento em todos os
lados.
{ padding-bottom: tamanho | porcentagem
}
Estabelece um espaço interno em torno de um elemento, abaixo.
{ padding-left: tamanho | porcentagem } Estabelece um espaço interno em torno de um elemento, à sua esquerda.
{ padding-right: tamanho | porcentagem
}
Estabelece um espaço interno em torno de um elemento, à sua direita.
{ padding-top: tamanho | porcentagem } Estabelece um espaço interno em torno de um elemento, em cima do
mesmo.
{ page-break-after: auto | always left | right } Ao imprimir um documento, após imprimir esse elemento, será
aplicada uma quebra de página.
{ page-break-before: auto | always left | right } Ao imprimir um documento, antes de imprimir esse elemento,
será aplicada uma quebra de página.
{ height: tamanho | porcentagem | auto
}
Determina a altura de um elemento.
{ position: absolute | relative | static } Determina como o elemento está posicionado na página.
{ float: left | right | none } Determina com o elemento flutuará na página.
{ text-align: left | right | center | justify } Especifica o alinhamento do texto.
{ text-decoration: none |[ underline || overline || line-through] } Especifica um tipo de decoração para o texto.
{ text-indent: tamanho | porcentagem } Récuo da primeira linha do parágrafo.
{ text-transform: capitalize | uppercase | lowercase | none
}
Especifica como o texto será captalizado.
{ top: tamanho | porcentagem | auto } Determina a posição superior do elemento.
{ vertical-align: baseline | sub | super | top | text-top
| middle | bottom | text-bottom | porcentagem }
Determina o alinhamento vertical de um elemento.
{ visibility: visible | hidden | inherit } Especifica se o elemento estará visível.
{ width: tamanho | porcentagem | auto } Especifica  a largura de um elemento.
{ z-index: número } Estabelece a posição do elemento em uma pilha –  se está
por cima ou por baixo de  outros elementos. É muito utilizado em menus.

// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

// Seja o primeiro a comentar!