Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula.

Apresentação em tema: "Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula."— Transcrição da apresentação:

1 Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula

2 Resumo da aula Conhecemos, nas últimas aulas, diversos seletores e propriedades do CSS; Nosso objetivo hoje será conhecer as propriedades que lidam com modelo de caixa para elementos em bloco; Entendendo este modelo poderemos conseguir dimensionar facilmente os elementos da tela;

3 313/1/2014 Material referente ao assunto da aula O Box Model: – http://www.pt- br.html.net/tutorials/css/lesson9.asp http://www.pt- br.html.net/tutorials/css/lesson9.asp Margin e Padding: – http://www.pt- br.html.net/tutorials/css/lesson10.asp http://www.pt- br.html.net/tutorials/css/lesson10.asp Bordas: – http://www.pt- br.html.net/tutorials/css/lesson11.asp http://www.pt- br.html.net/tutorials/css/lesson11.asp Altura e Largura: – http://www.pt- br.html.net/tutorials/css/lesson12.asp http://www.pt- br.html.net/tutorials/css/lesson12.asp

4 Material referente ao assunto da aula Tutorial sobre o Box Model: – http://maujor.com/tutorial/csscaixa.p hp http://maujor.com/tutorial/csscaixa.p hp The Box Model: – http://css-tricks.com/the-css-box- model/ http://css-tricks.com/the-css-box- model/

5 Material referente ao assunto da aula CSS – Guia de Bolso; – Editora AltaBooks; – 2008; – Download de um capítulo. Download de um capítulo 513/1/2014

6 6 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

7 713/1/2014 Tags HTML referenciadas na aula (em Inglês – site SitePoint)SitePoint Tag de estilo: ; Tag de link: ; Tag de script: ;<script>

8 Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)Sitepoint margin-top, margin-right, margin- bottom, margin-left, margin: determina a margem de um elemento; margin-topmargin-rightmargin- bottommargin-leftmargin padding-top, padding-right, padding- bottom, padding-left, padding: determina o enchimento (espaçamento) de um elemento. padding-toppadding-rightpadding- bottompadding-leftpadding

9 Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)Sitepoint border-top-color, border-top-style, border-top-width, border-top, border- right-color, border-right-style, border- right-width, border-right, border- bottom-color, border-bottom-style, border-bottom-width, border-bottom, border-left-color, border-left-style, border-left-width, border-left, border- color, border-style, border-width, border: modifica a borda de um elemento.border- colorborder-styleborder-width border

10 Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)Sitepoint outline-color, outline-style, outline- width, outline: determina a linha de contorno ao redor de um elemento; outline-coloroutline-styleoutline- widthoutline height: modifica a altura da área de conteúdo de um elemento; height min-height: altura mínima de um elemento; min-height max-height: altura máxima de um elemento; max-height

11 Propriedades CSS referenciadas na aula (em Inglês – Sitepoint)Sitepoint width: largura da área de conteúdo de um elemento; width min-width: largura mínima da área de conteúdo de um bloco; min-width max-width: largura máxima da área de conteúdo de um bloco; max-width

12 1213/1/2014 Exemplos da aula Exemplo Margem Padrão; Exemplo Margin Exemplo Margin Auto Exemplo Margin Em Exemplo Margin Negativa Exemplo Margin Porcentagem Exemplo Margin Resumida Exemplo Margin Resumida2

13 Exemplos da aula Exemplo Border Exemplo Border Específica Exemplo Border Resumida Exemplo Box Model Exemplo Padding Exemplo Width Height Exemplo Rollover 1313/1/2014

14 Existem 2 tipos de elementos em CSS Não- substituídos: – Maioria dos elementos; – Conteúdo apresentado em uma caixa gerada pelo próprio elemento;...

15 Existem 2 tipos de elementos em CSS Substituídos: – Minoria; – Conteúdo é substituído por algo que não é diretamente o conteúdo; – Também estão dentro de uma caixa;

16 Existem 2 tipos básicos de função de exibição de elemento Nível de bloco: – Quebra de linha antes e depois da caixa do elemento; – Se quiser mudar um elemento para bloco, usar display: block! Parágrafo Item de lista

17 Existem 2 tipos básicos de função de exibição de elemento Nível inline: – Não há quebra de linha antes e depois do elemento;

18 Hoje, vamos trabalhar apenas com elementos de bloco 1813/1/2014

19 Todos os elementos em CSS estão dentro de uma caixa

20 Box model para elementos em bloco

21 Box model para elementos em bloco IE (6 e 7) x Resto do Mundo

22 Visualizar o Box Model com Firebug Instalar o Firebug: – (Na PUCPR já está instalado) – http://www.getfirebug.com Tecla F12! 2213/1/2014

23 Margem Transparente; Largura do elemento (width) não inclui a margem; 2313/1/2014

24 Todo elemento possui uma margem padrão Cada navegador pode usar valores diferentes; Parágrafos no Firefox: – margin-top: 16px; – margin-bottom: 16px; 2413/1/2014

25 CSS Reset para margens Elimina problemas com as margens padrão diferentes para cada navegador; * { – margin: 0; – } 2513/1/2014

26 2613/1/2014 Margens Específicas

27 2713/1/2014 Visualização com o Firebug

28 Margens não se somam! O que vale é o maior valor! 30px de top + 50px de bottom = 50px de distância; 2813/1/2014

29 Representação resumida (shorthand) / 4 valores margin: top right bottom left; Sentido horário (TRouBLe); 2913/1/2014

30 Representação resumida (shorthand) / 1 valor 3013/1/2014

31 Representação resumida (shorthand) / 2 valores 3113/1/2014

32 Porcentagens se referem ao valor de width (largura) 3213/1/2014 1664 * 10% = 166

33 em se refere ao tamanho da letra (font-size) 3313/1/2014 16px = 1em Na minha configuração!

34 Margens podem ser negativas 3413/1/2014 Margens negativas podem ser usadas para esconder elementos; Máximo: -9999px;

35 Margin com valor auto Deixar o browser calcular a margem automaticamente; Pode ser usado para centralizar elementos (esquerda e direita igual); 3513/1/2014

36 Bordas Não devem ser consideradas para a largura (width) do elemento; Estilo: – Propriedade border-style – dashed, dotted, double, groove, inset, outset, ridge, solid; Cor: – Propriedade border-color; Largura: – Propriedade border-width; 3613/1/2014

37 Larguras de borda 3713/1/2014

38 Estilos de borda 3813/1/2014

39 3913/1/2014

40 4013/1/2014

41 Representação resumida (shorthand) 4113/1/2014

42 Bordas específicas 4213/1/2014

43 Espaçamento (padding) Distância entre a borda e o conteúdo; Sempre transparente; Cada elemento tem um valor padrão diferente; Não existe valor negativo; padding-top, padding-right, padding- left, padding (resumida); 4313/1/2014

44 CSS Reset para padding * { – padding:0; } 4413/1/2014

45 4513/1/2014

46 Largura da caixa 4613/1/2014

47 Altura da caixa 4713/1/2014

48 4813/1/2014 Largura = 25 + 15 + 15 + 1 + 1 = 57 Altura = 7 + 15 + 15 + 1 + 1 = 39

49 4913/1/2014 Próximas aulas de CSS CSS Posicionamento; Menus; Botões; Forms...