1. tableless.com.br Referência rápida de CSS
Sintaxe Modelos de Caixa Para caixas
Sintaxe height height; width; background
seletor {propriedade: valor;} margin-top; border
margin-right; border-bottom
CSS Externo border-left
width margin-bottom;
<link rel=”stylesheet” type=”text/css” border-right
margin-left;
href=”arquivo.css” /> border-top
padding-top;
CSS Interno padding-right; font
<style type=”text/css”> padding-bottom; list-style
border margin
seletor {propriedade: valor;} padding-left;
margin padding padding
</style>
CSS em linha Border Comentário
<tag style=”propriedade: valor;”> /* Comentário */
border-width Largura da borda
border-style dashed; dotted; double; groove; inset; Pseudo
Uso Geral outset; ridge; solid; none; Selectors
class Termo precedido por um ponto . border-color Cor da borda
:hover
ID Termo precedido por um # :active
Position :focus
div Elemento para dividir o layout
clear O elemento ignora o float de outros elementos :link
span Formatação em linha
both, left, right, none :visited
color Cor do texto
O elemento flutua para a esquerda ou direita
cursor Muda o cursos do mouse left, right, none
display block; inline; list-item; none left Desloca o elemento pela esquerda Media Types
Quando o conteúdo transborda auto, length values [pt, in, cm, px] all
do elemento. top Desloca o elemento pelo topo braille
visible, hidden, scroll, auto auto, length values [pt, in, cm, px] embossed
visibility visible, hidden position static, relative, absolute handheld
print
z-index Muda os elementos de camada projection
Para fontes auto, integer [higher numbers on top] screen
font-style italic, normal speech
font- normal, small-caps Background tty
variant background-color Muda a cor do background tv
font- bold, normal, lighter, bolder, background-image Define uma imagem de background Unidades
weight integer [100-900]
background-repeat repeat, no-repeat, repeat-x, repeat-y Numerais
font-size Tamanho da font background- Define se o background rola c/ a página %
attachment em
font-family Especifica a família da font
pt
background- (x y), top, center, bottom, left, right px
Para caixas de texto position
Keywords
letter-spacing Espaçamento entre as letras bolder
line-height Altura da entrelinha List lighter
text-align Alinhamento horizontal do texto list-style- Muda o tipo de bullet dos ítens de lista (li) larger
text- blink, line-through, none, type disc; circle; square; decimal; lower-roman; normal
decoration overline, underline upper-roman; lower-alpha; upper-alpha; none
text-indent Identação do texto Muda a posição do bullet
list-style- position
text- inside; outside
capitalise, lowercase, uppercase
transform list-style-style Define uma imagem como bullet
vertical-align Alinhamento vertical
word-spacing Espaço entre as palavras
Seletores
Propriedades herdadas
azimuth line-height * Define propriedade para TODOS os elementos
border-collapse list-style <tag> Define para todas as tags especificadas
border-spancing page tag * TUDO dentro da tag receberá as características
caption-side quotes tag tag Elemento dentro de elemento (EX: div span)
color speak tag, tag Agrupa vários elementos para a mesma caracteristica
cursor text-align EX: div, p, h1, h2, h3
direction text-indent tag > tag Seleciona elemento que é filho direto de outro.
empty-cells text-transform EX: div > span
font word-spacing tag + tag Seleciona todo elemento que é precedido por outro
letter-spacing white-space EX: div + p
.nome Todos elementos com a classe determinada
#nome Todos elementos com a identificação determinada
Versão original em ingles por: tag#nome Especifica elemento com classe ou identificação
tag.nome determinada
liquidicity
tag[atributo] Seleciona tag com determinado atributo
Seleciona tag com atributo com um
tag[atributo=”valor”] valor especifico
Especifica o valor de uma tag que
tag[atributo~=”valor”] tenha um atributo com diversos
valores separados com espaços.