Laboratório de Informática Box Model Elementos em Bloco

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

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. Material referente ao assunto da aula • O Box Model: • http://www.pt-br.html.net/tutorials/css/lesson9.asp • Margin e Padding: • http://www.pt-br.html.net/tutorials/css/lesson10.asp • Bordas: • http://www.pt-br.html.net/tutorials/css/lesson11.asp • Altura e Largura: • 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.php • The 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.

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

7. Tags HTML referenciadas na aula (em Inglês – site SitePoint) • Tag de estilo: <style>; • Tag de link: <link>; • Tag de script: <script>;

8. Propriedades CSS referenciadas na aula (em Inglês – Sitepoint) • margin-top, margin-right, margin-bottom, margin-left, margin: determina a margem de um elemento; • padding-top, padding-right, padding-bottom, padding-left, padding: determina o “enchimento” (espaçamento) de um elemento.

9. Propriedades CSS referenciadas na aula (em Inglês – 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.

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

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

12. 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

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

15. Substituídos: Minoria; Conteúdo é substituído por algo que não é diretamente o conteúdo; Também estão dentro de uma caixa; <img src=“”/> <input type=“text”/> Existem 2 tipos de elementos em CSS

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

17. Nível inline: Não há quebra de linha antes e depois do elemento; <a href=“”></a> <span></span> <em></em> Existem 2 tipos básicos de função de exibição de elemento

18. Hoje, vamos trabalhar apenas com elementos de bloco

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 blocoIE (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!

23. Margem • Transparente; • Largura do elemento (width) não inclui a margem;

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

25. CSS Reset para margens • Elimina problemas com as margens padrão diferentes para cada navegador; • * { • margin: 0; • }

26. MargensEspecíficas

27. 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;

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

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

31. Representação resumida(shorthand) / 2 valores

32. Porcentagens se referem ao valor de width (largura) 1664 * 10% = 166

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

34. Margens podem ser negativas • 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);

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;

37. Larguras de borda

38. Estilos de borda

41. Representação resumida(shorthand)

42. Bordas específicas

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);

44. CSS Reset para padding • * { • padding:0; • }

46. Largura da caixa width + padding-left + padding-right + border-left + border-right

47. Altura da caixa height + padding-top + padding-bottom + border-top + border-bottom

48. Largura = 25 + 15 + 15 + 1 + 1 = 57 Altura = 7 + 15 + 15 + 1 + 1 = 39

49. Próximas aulas de CSS • CSS Posicionamento; • Menus; • Botões; • Forms...