Post on 24-May-2015
description
1
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
CSS Cascading Style SheetsFolhas de Estilo em CascataParte III - b
2
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
PosicionamentoEssas propriedades classificam, posicionam os elementos e definem a
disposição em que os mesmos devem aparecer.
Display
Especifica como um elemento deve ser exibido em um documento.
Seletor {display: valor}
Div {display: block}
div.ajuda {display: none}
O navegador apresenta o elemento como um elemento interno. É o valor
padrão. Inline
Não exibe o elemento embora o carregue na memória. none
O navegador apresenta o elemento como um elemento em bloco. block
DescriçãoValor
3
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
TopEspecifica a distância vertical do elemento em relação àmargem superior de sua área de apresentação.
Seletor {top: valor}
div {top: 20px}
p {top: auto}
Outros exemplos:
div {right: 20px}
div {left: 20px}
div {bottom: 20px}
A distância é calculada automaticamente em relação à margem superior do elemento pai. È o valor padrão.
auto
Especifica a distância em valores fixos.Tamanho
Especifica a distância em porcentagem relativa ao tamanho do elemento pai.Porcentagem
DescriçãoValor
4
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
PositionEspecifica o método de posicionamento utilizado pelo elemento.
Seletor {position: valor}
div {position: absolute}
p {position: relative}
O elemento é posicionado obedecendo a ordem de aparecimento no documento. As propriedades top e left não tem efeito nesse caso. É o valor padrão.
static
O elemento é posicionado em uma posição relativa a ocupada se estivesse como valor static.
relative
Igual ao valor absolute, mas o elemento se mantém fixo em sua posição mesmo que o documento seja movido pelas barras de rolagem.
fixed
O elemento é posicionamento levando em consideração os valores das propriedades top e left.
Absolute
DescriçãoValor
5
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
FloatEspecifica se os elementos são apresentados seguindo o fluxo normal do
conteúdo do documento.Seletor {float: valor}Div {float: left}P {float: none}
O elemento flutua a direita do conteúdo.right
O elemento flutua a esquerda do conteúdo.left
O elemento não flutua sobre o conteúdo. É o valor padrão.none
DescriçãoValor
6
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Z-index Especifica uma Terceira dimensão, diferente das especificadas pelas
propriedades top e left, que permitirá que os elementos sejam posicionados uns sobre os outros, dando uma sensação de proximidade.
Seletor {z-index: valor}div {z-index: auto}p span {z-index:0}
Especifica a ordem de apresentação a ser utilizada.número
Utiliza o valor atribuído ao elemento-pai. É o valor padrão.
auto
DescriçãoValor