Aula 24,25,26 e 27. posicionamento

380 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
380
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
24
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 24,25,26 e 27. posicionamento

  1. 1. Posicionamento CSS - Style Sheet Professor: Jolvani Aula 24,25,26 e 27
  2. 2. Posicionamento (fluxo normal) CSS - Style Sheet Professor: Jolvani Aula 24
  3. 3. Posicionamento (fluxo normal)- CSS  Bem vindos a aula de posicionamento  Posicionamento usando as propriedades  Três formas de Posicionamento  Precisamos lembrar dos tipos em bloco e in-line  Se não definirmos nenhum tipo de posicionamento existe uma organização natural do navegador  O Fluxo normal exibe cada elemento na ordem em que é colocado a marcação veja mais...
  4. 4. Posicionamento (fluxo normal)- CSS  O Fluxo normal exibe cada elemento na ordem (h1,h2,div,p...) em que é colocado a marcação, veja mais... Cada elemento em bloco aparecem na ordem em que são escritos no documento html, são empilhados de cima para baixo representando o fluxo normal. Cada novo elemento provoca uma quebra de linha e ocupa toda largura do documento.
  5. 5. Posicionamento (fluxo normal)- CSS  Para ver os espaços que os elementos estão ocupando vamos colocar uma borda em cada um deles  Adicione a parágrafo <p> no código acima...  Os elementos inline sua formatação se da na horizontal, pois eles não provocam quebra de linha e dentro do box em que ela está;  Ao redimensionar nosso navegador, os elementos  Automaticamente se ajustam, verifique...
  6. 6. Posicionamento (fluxo normal)- CSS  Ao redimensionar nosso navegador, os elementos  Automaticamente se ajustam, verifique.  Essas são as regras do fluxo normal. Lembre-se temos ainda o float e absoluto
  7. 7. Posicionamento (fluxo normal)- CSS  Esses posicionamentos são fundamentais para ajustarmos os elementos nas páginas que construirmos...  Existem as propriedades para o sistema de posicionamento...  Position:static – representa exatamente o fluxo normal visto anteriormente. Exemplo:  Usando position:static não será alterado se definirmos no css a propriedade “left:160px” e “top:130px” por exemplo pois no fluxo normal declarando static, seu texto fica estático....
  8. 8. Posicionamento (fluxo normal)- CSS  Alternado o valor de position:  Veja a disposição do titulo 2.  Experimente usar nos elementos in-line...  Então fluxo é a forma como os elementos estão dispostos dentro de sua página.
  9. 9. Posicionamento (float) CSS - Style Sheet Professor: Jolvani Aula 25
  10. 10. Posicionamento (float)- CSS  Posicionamento float permite que reposicionamos os elementos fazendo com que seu espaço original seja ocupado, diferentemente do fluxo normal visto anteriormente.  Alterar cor de fundo elemento <p> e aumentar as dimensões dos elementos h1 e h3 e p (somente a altura), depois usaremos a propriedade “float”  Float:left; faz com que os elementos flutuem à esquerda (h1,h3,p)  Veja o resultado... Redimensione seu navegador e observe...
  11. 11. Posicionamento (float)- CSS  Lembrem-se: para fazer um menu horizontal ou itens flutuar para a esquerda eu necessito da propriedade float...
  12. 12. Posicionamento (float)- CSS  Podemos também flutuar somente um ou alguns elementos, para isso defina um id no html como “tit” por exemplo e atribua float:left para ele. Verifique se o elemento seguinte não sobrepõem seu espaço.  Vamos ao exemplo:  Limpar o float para os outro elementos clear:left ou clear:both
  13. 13. Posicionamento (float)- CSS  Limpar o float para os outro elementos clear:left ou clear:both
  14. 14. Posicionamento (float)- CSS  Podemos usar float:right -> flutuar à direita.  Ex: flutuando elementos inline: uma imagem à direita:  Vamos adequar nosso documento para ilustrar um novo exemplo  Aumentar parágrafo 2. Conhecimento Multidisciplinar (copie e cole)  Retirar float:
  15. 15. Posicionamento (float)- CSS  Faremos um destaque em parte do texto:
  16. 16. Posicionamento (absoluto) CSS - Style Sheet Professor: Jolvani Aula 26
  17. 17. Posicionamento (Absolute)- CSS  O posicionamento absoluto é regido pelas propriedades position, com valores absolute e fixed (fixo).  Para esta aula remova todos os parágrafos do html anterior, e colocamos uma <div>  No css deixamos apenas o elemento <h3>
  18. 18. Posicionamento (Absolute)- CSS  Verifique o exemplo:  O elemento 3 ocupou o lugar do elemento 2  Observe que a borda do elemento 2 ocupa o espaço do texto  Então 1 e 3 estão no fluxo normal e 2 absoluto de posicionamento  Alterar cor de fundo elemento 2
  19. 19. Posicionamento (Absolute)- CSS  O posicionamento absoluto funciona junto com outras propriedades:  Parece que o elemento 2 esta com o posicionamento mais abaixo (top:50px), porém o seu posicionamento se dá através do elemento 1, dessa forma as distâncias são iguais. Posicionamento absoluto.  No posicionamento estático (fluxo normal) não é permitido a propriedade “left” e “top”
  20. 20. Posicionamento (Absolute)- CSS  Colocando Borda na div:  O contexto de posicionamento estabelece a origem de sistema de coordenadas para posicionamento absoluto. A regra que regue o posicionamento do elemento estabelece que os elementos posicionados com a declaração absoluta serão deslocados como base para uma determinação de coordenadas para o ancestral mais próximo...  Alterando o código da <div>
  21. 21. Posicionamento (Absolute)- CSS  <div>  #dois  Elemento 2 sobrepõem elemento 1: então elemento 2 posicionado agora em relação ao <div>
  22. 22. Posicionamento (Absolute)- CSS  Altere o html tirando o elemento 2 da div e colocando abaixo, fora dela...  Observe que o elemento 2, agora se posiciona em relação a janela do Browser. Em relação ao body
  23. 23. Posicionamento (Absolute)- CSS  Retorne com os código anterior...  É possível usar um valor negativo também:  Ex: em #dois altere  Top:0px para top:-20px;  Diferença entre valor absoluto e valor fixed  Absoluto: muda quando usa-se uma barra de rolagem por exemplo:  Fixed: o elemento acompanha a rolagem, veja
  24. 24. Posicionamento (Z-index) CSS - Style Sheet Professor: Jolvani Aula 27
  25. 25. Posicionamento (Z-Index)- CSS  Posicionamento em várias camadas: A propriedade z-index permite posicionar os elementos em locais específicos, definindo qual vai a frente ou atrás na apresentação do nosso browser.  Deixamos a página no seguinte formato:  Elementos em bloco;  Quebra de linha;  Espaço h3 + quebra;  REVISANDO...
  26. 26. Posicionamento (Z-Index)- CSS  Lembrem do esquema de posicionamento: float:left;
  27. 27. Posicionamento (Z-Index)- CSS  Lembrem do esquema de posicionamento: float:right;  Alterando para float:right;  Altera-se o posicionamento dos elementos;
  28. 28. Posicionamento (Z-Index)- CSS  Se eu quisesse quebrar, fazer com que o elemento azul ficasse na parte de baixo.... float:left;  No elemento #três { clear: left; }
  29. 29. Posicionamento (Z-Index)- CSS  Outra característica importante, é quando flutua-se um elemento, somente um, abre-se espação para outro elemento ocupar o espaço dele... Flutuando elemento verde... float:left;  O elemento amarelo passou a ocupar a posição que estava sendo ocupada do elemento 1 verde. Ficando posicionado atrás do elemento verde.  Com z-index nos definimos quem vem para frente ou quem vai para trás.
  30. 30. Posicionamento (Z-Index)- CSS  O outro foi o posicionamento absoluto...  O Elemento 1 verde saiu do fluxo e agora o elemento 2 amarelo passou a ocupar aquela posição do verde.  Uma característica é quantos pixels acima ou abaixo queremos posicionar.
  31. 31. Posicionamento (Z-Index)- CSS  Com o esquema de posicionamento absoluto o elemento corre a janela quando temos a barra de rolagem  Mas se usarmos fixo (fixed)...
  32. 32. Posicionamento (Z-Index)- CSS  Onde entra o z-index: ele define ordem e a prioridade de apresentação de cada um desses elementos:  Prioridade inferior aos elementos amarelo e azul.
  33. 33. Posicionamento (Z-Index)- CSS  Onde entra o z-index: ele define ordem e a prioridade de apresentação de cada um desses elementos:  Colocando z-index: -2 no elemento amarelo (2), para que o z-index funcione é necessário sair do fluxo normal, usar position...
  34. 34. Posicionamento (Z-Index)- CSS  Onde entra o z-index: ele define ordem e a prioridade de apresentação de cada um desses elementos:  Nos 3 elementos
  35. 35. Posicionamento (Z-Index)- CSS  A partir de agora podemos trabalhar com layout;  Até a próxima aula.
  36. 36. Próxima Aula: Layout - Tableless

×