SlideShare uma empresa Scribd logo
1
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
CSS
Cascading Style Sheets
Folhas de Estilo em Cascata
Parte III - b
2
Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010
Posicionamento
Essas 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
Top
Especifica 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
Position
Especifica 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
Float
Especifica 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

Mais conteúdo relacionado

PPTX
El planeta tierra
PPT
Publicidad En Internet
PDF
Bebe
 
PDF
Cecytem tecnico en informatica PDF
DOCX
Intel atom i
PDF
Apresentação Phrisma Empresas
PPT
Oficinas Tecnológicas UFT
PPT
Teatro Arlequim
El planeta tierra
Publicidad En Internet
Bebe
 
Cecytem tecnico en informatica PDF
Intel atom i
Apresentação Phrisma Empresas
Oficinas Tecnológicas UFT
Teatro Arlequim

Destaque (20)

PPTX
Trabajo de sistemas 1
PPT
Enxergando o cliente com novos olhos
PPTX
PARADIGMA SOCIOCULTURAL
PPTX
La guajira vrp
PPTX
C:\users\windows vista\desktop\introducción a la seguridad en el trabajo
ODP
Bellman: Clube Exclusivo Terminador Eficaz oferece vantagens para pecuaristas
PDF
Instalación de os commerce
DOC
Paginas de mat iv
PPT
PDF
Apresentacao da Cost and Profitability Consulting Novembro 2010
PDF
Fachadas fotovoltaicas
PPTX
C:\fakepath\nanotecnología informatica
PPSX
LABOR SUBLIME...
PPT
Parque infantil
PPTX
Presentación comercios con sonido uno
PPTX
Presentación1
PPS
Rio Caño Cristales - Colombia
PPT
Gloria jimenez bárbaracabral_grupalgriego
PPTX
Trabalho puc-sp
Trabajo de sistemas 1
Enxergando o cliente com novos olhos
PARADIGMA SOCIOCULTURAL
La guajira vrp
C:\users\windows vista\desktop\introducción a la seguridad en el trabajo
Bellman: Clube Exclusivo Terminador Eficaz oferece vantagens para pecuaristas
Instalación de os commerce
Paginas de mat iv
Apresentacao da Cost and Profitability Consulting Novembro 2010
Fachadas fotovoltaicas
C:\fakepath\nanotecnología informatica
LABOR SUBLIME...
Parque infantil
Presentación comercios con sonido uno
Presentación1
Rio Caño Cristales - Colombia
Gloria jimenez bárbaracabral_grupalgriego
Trabalho puc-sp
Anúncio

Mais de Denise Lima (20)

PPTX
Alfabetismo visual elementos_sintaticos2
PPTX
Movimentos artísticos início século XX
PPTX
Pós modernismo
PPTX
Pop art
PPTX
Pop art
PDF
Bauhaus & Estilo Internacional
PPTX
Artigo cientifico
PPTX
Orientação para o projeto de pesquisa
PPT
Tecnicas para composição.
PPTX
Classificacao tipografia
DOCX
Dicas assombrosas
PPTX
Raizes design
PPTX
Alternativas ao estilo internacional
PPTX
Design antes do design
PPT
Dreamweaver - configurando o servidor remoto
PDF
Trabalho layout elastico
PDF
Css parte iii_a
PDF
CSS parte II pdf...
PPT
Css parte II
PPT
Css – cascading style sheets
Alfabetismo visual elementos_sintaticos2
Movimentos artísticos início século XX
Pós modernismo
Pop art
Pop art
Bauhaus & Estilo Internacional
Artigo cientifico
Orientação para o projeto de pesquisa
Tecnicas para composição.
Classificacao tipografia
Dicas assombrosas
Raizes design
Alternativas ao estilo internacional
Design antes do design
Dreamweaver - configurando o servidor remoto
Trabalho layout elastico
Css parte iii_a
CSS parte II pdf...
Css parte II
Css – cascading style sheets
Anúncio

Css parte iii_b

  • 1. 1 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 CSS Cascading Style Sheets Folhas de Estilo em Cascata Parte III - b
  • 2. 2 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Posicionamento Essas 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. 3 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Top Especifica 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. 4 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Position Especifica 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. 5 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Float Especifica 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. 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