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

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;

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

Material referente ao assunto da aula Tutorial sobre o Box Model: – hp hp The Box Model: – model/ model/

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 Tags HTML referenciadas na aula (em Português –site Referenciando)Referenciando Tag de estilo: ; Tag de link: ; Tag de script:.

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

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

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

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

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

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

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

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

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;

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

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;

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

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

Box model para elementos em bloco

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

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

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

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

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

2613/1/2014 Margens Específicas

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

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

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

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

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

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

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

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

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

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

Larguras de borda 3713/1/2014

Estilos de borda 3813/1/2014

3913/1/2014

4013/1/2014

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

Bordas específicas 4213/1/2014

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

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

4513/1/2014

Largura da caixa 4613/1/2014

Altura da caixa 4713/1/2014

4813/1/2014 Largura = = 57 Altura = = 39

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