Propriedades CSS: guia de referncia

Notas de Aula
Prof. Alexandro dos Santos Silva
alexandrossilva@gmail.com

INTRODUO
Para rpida consulta s propriedades CSS, segue uma relao na prxima pgina, em formato adotado por Filho (2012). Constam as seguintes informaes sobre cada propriedade:

Nome;
Descrio de sua finalidade;
Indicativo de ser herdada ou no;
Indicao da especificao CSS (CSS1 ou CSS2)
Navegadores com suporte propriedade, acompanhado de verso (mnima ou superior);
Possveis valores.

Sobre a relao de navegadores com suporte propriedade, adotada a seguinte legenda: IE (Internet Explorer), F (Firefox) e N (Netscape).
Alm disso, as propriedades esto divididas em 13 tpicos, a saber:

Fundo;
Bordas;
Linhas de contorno;
Margens;
Enchimento (padding);
Classificao (forma de exibio);
Posicionamento;
Dimensionamento;
Fonte;
Texto;
Listas e marcadores;
Tabelas;
Gerao de contedo.

GUIA DE REFERNCIA
FUNDO
Define todos os parmetros referentes ao fundo de um elemento. Aceita de 1 a 5 valores.
background

Valores: background-color | background-image | background-repeat | background-attachment | backgroundposition

No herdada CSS1

IE 4 F 1 N 6

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS1

IE 4 F 1 N 6

No herdada CSS1

IE 4 F 1 N 6

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS1

IE 4 F 1 N 6

CSS2
No herdada CSS1
CSS2

IE 4 F 1 N 6
IE 4 F 1 N 4
IE 4 F 1 N 6

Define a cor de fundo de um elemento.

background-color
Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%) | transparent
Define uma imagem como fundo de um elemento.
background-image
Valores: url | none
Define se a imagem vai repetir (formando um mosaico) ou no e a direo da repetio.
background-repeat
Valores: repeat | repeat-x | repeat-y | no-repeat
Define se a imagem de fundo de um elemento ficar fixa ou se ir rolar junto com o contedo.
background-attachment
Valores: scroll | fixed
Define o ponto onde inicia o desenho da imagem de fundo.
background-position

Valores: top left | top center | top right | center left | center center | center right | bottom left | bottom center |
bottom right | x% y% | x unids_css y unids_css
BORDAS
Define o estilo, a espessura e a cor das 4 bordas. Aceita de 1 a 3 valores.

border
Valores: border-style | border-width | border-color
border-top
border-right
border-bottom
border-left

Definem o estilo, a espessura e a cor das bordas superior, direita, inferior e esquerda. Aceitam de 1 a 3 valores.

border-top-style
border-top-width
border-top-color

Definem o estilo, a espessura e a cor da borda superior. Aceitam de 1 a 3 valores.

Valores: border-style | border-width | border-color

Valores: border-style | border-width | border-color

border-right-style
border-right-width
border-right-color

Definem o estilo, a espessura e a cor da borda direita. Aceitam de 1 a 3 valores.

border-bottom-style
border-bottom-width
border-bottom-color

Definem o estilo, a espessura e a cor da borda inferior. Aceitam de 1 a 3 valores.

border-left-style
border-left-width
border-left-color

Definem o estilo, a espessura e a cor da borda esquerda. Aceitam de 1 a 3 valores.

Valores: border-style | border-width | border-color

Valores: border-style | border-width | border-color

Valores: border-style | border-width | border-color

CSS2
No herdada CSS1
CSS2

IE 4 F 1 N 6
IE 4 F 1 N 4
IE 4 F 1 N 6

CSS2
No herdada CSS1
CSS2

IE 4 F 1 N 6
IE 4 F 1 N 4
IE 4 F 1 N 6

CSS2
No herdada CSS1
CSS2

IE 4 F 1 N 6
IE 4 F 1 N 4
IE 4 F 1 N 6

No herdada CSS1

IE 4 F 1 N 6

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS1

IE 4 F 1 N 6

No herdada CSS2

IE -- F 1.5 N -

No herdada CSS2

IE -- F 1.5 N -

No herdada CSS2

IE -- F 1.5 N -

No herdada CSS2

IE -- F 1.5 N -

No herdada CSS1

IE 4 F 1 N 4

Define o estilo das 4 bordas. Aceita de 1 a 4 valores.

border-style
Valores: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Define a espessura das 4 bordas. Aceita de 1 a 4 valores.
border-width
Valores: thin | medium | thick | unids_css
Define a cor das 4 bordas. Aceita de 1 a 4 valores.
border-color
Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%)
LINHAS DE CONTORNO
Define o estilo, a espessura e a cor da linha de contorno. Aceita de 1 a 3 valores.
outline
Valores: outline-style | outline-width | outline-color
Define o estilo da linha de contorno.
outline-style
Valores: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Define a espessura da linha de contorno.
outline-width
Valores: thin | medium | thick | unids_css
Define a cor da linha de contorno.
outline-color
Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%) | invert
MARGENS
margin

Define as 4 margens do elemento. Aceita de 1 a 4 valores.

Valores: margin-top | margin-right | margin-bottom | margin-left

margin-top
margin-right
margin-bottom
margin-left

Definem as margens superior, direita, inferior e esquerda.

No herdada CSS1

IE 3
IE 3
IE 4
IE 3

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS2

IE 4 F 1 N 6

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS2

IE 4 F 1 N 4

Valores: auto | unids_css | %

F1
F1
F1
F1

N4
N4
N4
N4

ENCHIMENTO (PADDING)
Define o espao entre o contedo e os 4 limites do elemento. Aceita de 1 a 4 valores.
padding
Valores: padding-top | padding-right | padding-bottom | padding-left
padding-top
padding-right
padding-bottom
padding-left

Definem o espao entre o contedo e os limites superior, direito, inferior e esquerdo.

Valores: unids_css | %
CLASSIFICAO (FORMA DE EXIBIO)
Define os lados de um elemento onde no so permitidos elementos flutuantes.

clear
Valores: left | right | both | none
Define um formato para o cursor.
cursor

Valores: url | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize | text | wait | help
Define se um elemento deve ser apresentado e a forma de apresentao.

display

Valores: none | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | tableheader-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption
Define o alinhamento de um elemento e controla o fluxo de texto ou de outros elementos ao seu redor.

float
Valores: left | right | none
Define a posio de um elemento como esttica, relativa, absoluta ou fixa.
position
Valores: static | relative | absolute | fixed
Define se um elemento deve ficar visvel ou invisvel.
visibility
Valores: visible | hidden | collapse

POSICIONAMENTO
top
right
bottom
left

Definem a distncia do elemento em relao ao limite do elemento que o contm.

No herdada CSS2

IE 4
IE 5
IE 5
IE 4

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS2

IE 4 F 1 N 6

No herdada CSS2

IE 4 F 1 N 6

No herdada CSS2

IE 4 F 1 N 6

No herdada CSS1

IE 4 F 1 N 4
IE 4 F 1 N 6

No herdada CSS2

IE -- F 1 N 6
IE -- F 1 N 6

No herdada CSS2

IE -- F 1 N 6
IE -- F 1 N 6

Valores: auto | unids_css | %

F1
F1
F1
F1

N4
N6
N6
N4

Define o alinhamento vertical do elemlento.

vertical-align
Valores: baseline | sub | super | top | text-top | middle | bottom | text-bottom | unids_css | %
Define a forma de um elemento.
clip
Valores: auto | shape
Define o que deve ocorrer quando o contedo de um elemento excede sua rea.
overflow
Valores: visible | hidden | scroll | auto
Define a ordem de apresentao dos elementos quando h sobreposio.
z-index
Valores: auto | nmero
DIMENSIONAMENTO
width
height

Definem a largura e a altura de um elemento.

max-width
max-height

Definem a largura mxima e a altura mxima de um elemento.

min-width
min-height

Definem a largura mnima e a altura mnima de um elemento.

Valores: auto | unids_css | %

Valores: none | unids_css | %

Valores: unids_css | %
Define a distncia entre linhas de texto.

line-height

Herdada

CSS1

IE 4 F 1 N 4

Herdada

CSS1

IE 4 F 1 N 4

Valores: normal | nmero | unids_css | %

FONTE
Define vrios valores da fonte.
font

Valores: font-family | font-size/line-height | font-style | font-weight | font-variant | caption | icon | menu |

message-box | small-caption | status-bar

Define o tipo de fonte.

font-family

Herdada

CSS1

IE 3 F 1 N 4

Herdada

CSS1

IE 3 F 1 N 4

Herdada

CSS1

IE 4 F 1 N 4

Herdada

CSS1

IE 4 F 1 N 4

Herdada

CSS2 IE -- F -- N --

Herdada

CSS1

Herdada

CSS2 IE -- F -- N --

Herdada

CSS1

IE 3 F 1 N 4

Herdada

CSS1

IE 4 F 1 N 4

Herdada

CSS1

IE 4 F 1 N 4

Herdada

CSS1

IE 4 F 1 N 4

Valores: family-name | generic-family

Define o tamanho da fonte.
font-size
Valores: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | unids_css | %
Define o estilo da fonte.
font-style
Valores: normal | italic | oblique
Define a espessura do trao da fonte.
font-weight
Valores: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-size-adjust

Define que o tamanho da fonte deve ser ajustado, caso o browser tenha de utilizar outro tipo de fonte que no o
escolhido em font-family.
Valores: none | nmero
Define se deve ser utilizado um tipo de fonte "small-caps" ou normal.

font-variant

IE 4 F 1 N 6

Valores: normal | small-caps

Define uma contrao ou expanso na largura da fonte.
font-stretch

Valores: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semiexpanded | expanded | extra-expanded | ultra-expanded
TEXTO
Define a cor do texto.

color
Valores: nomecor | #rrggbb | #rgb | rgb(d,d,d) | rgb(d%,d%,d%)
Define o alinhamento do texto.
text-align
Valores: left | right | center | justify
Define um deslocamento para a direita ou esquerda da primeira linha do texto.
text-indent
Valores: unids_css | %
Define um efeito decorativo para o texto.
text-decoration
Valores: none | underline | overline | line-through | blink

Define que o texto deve ser capitalizado ou ser exibido todo em maisculas ou minsculas.
text-transform

Herdada

CSS1

IE 4 F 1 N 4

Herdada

CSS1

IE 4 F 1 N 6
IE 6 F 1 N 6

Herdada

CSS1

IE 5 F 1 N 4

Herdada

CSS2

IE 6 F 1 N 6

No herdada CSS1

IE 4 F 1 N 6

No herdada CSS1

IE 4 F 1 N 4

No herdada CSS1

IE 4 F 1 N 6

No herdada CSS1

IE 4 F 1 N 6

No herdada CSS2

IE 5 F 1 N 7

Valores: none | capitalize | uppercase | lowercase

letter-spacing
word-spacing

Definem um aumento ou diminuio no espao entre os caracteres ou entre as palavras.

Valores: normal | unids_css
Define o tratamento a ser dado ao espao em branco existente dentro de um elemento.

white-space
Valores: normal | pre | nowrap
Define a direo em que escrito o texto. Da esquerda para a direita ou da direita para a esquerda.
direction
Valores: ltr | rtl
LISTAS E MARCADORES
Define todos os parmetros referentes a uma lista. Aceita de 1 a 3 valores.
list-style
Valores: list-style-type | list-style-position | list-style-image
Define o tipo de marcador de item da lista.
list-style-type

Valores: none | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha
| upper-alpha | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana
| katakana | hiragana-iroha | katakana-iroha
Define a posio do marcador de item da lista.

list-style-position
Valores: inside | outside
Define a imagem a ser utilizada como marcador de item da lista.
list-style-image
Valores: none | url
TABELAS
Define se os traos das bordas sero fundidos ou mantidos separados.
border-collapse
Valores: collapse | separate
Define a distncia entre as bordas de clulas adjacentes. S aplicvel quando border-collapse for separate.

No herdada CSS2 IE 5M F 1 N 6

border-spacing
Valores: unids_css
empty-cells

Define se as clulas sem contedo visvel devem ter bordas ou no. S aplicvel quando border-collapse for

No herdada CSS2 IE 5M F 1 N 6

separate.
Valores: show | hide
Define a posio da legenda na tabela.
No herdada CSS2 IE 5M F 1 N 6

caption-side
Valores: top | bottom | left | right
Define como ser desenhada a tabela
table-layout

No herdada CSS2

IE 5 F 1 N 6

No herdada CSS2

IE -- F 1 N 6

Valores: auto | fixed

GERAO DE CONTEDO
Gera contedo para um elemento. Utilizada com os pseudo-elementos :before e :after.
content

Valores: string | url | counter(name) | counter(name, list-style-type) | counters(name, string) | counters(name,

string, list-style-type) | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote
Define em quanto ser incrementado o contador a cada ocorrncia de um seletor.

No herdada CSS2 IE -- F -- N --

counter-increment
Valores: none | nmero identificador
Define o valor a ser atribudo ao contador a cada ocorrncia de um seletor.

No herdada CSS2 IE -- F -- N --

counter-reset
Valores: none | nmero identificador
Define o estilo das aspas.

No herdada CSS2

quotes

IE -- F 1 N 6

Valores: none | string string

REFERNCIAS BIBLIOGRFICAS
FILHO, Aires Bento Pereira. Propriedades CSS - Guia de Referncia. Disponvel em < http://www.abpsoft.com/criacaoweb/cssguiaref.html>. Acesso em 04 de novembro de 2012.