laboratório de informática box model elementos em bloco 1º semestre 2009 > pucpr > bsi...
TRANSCRIPT
![Page 1: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/1.jpg)
Laboratório de InformáticaBox Model Elementos em Bloco
1º Semestre 2009 > PUCPR > BSI
Bruno C. de PaulaBruno C. de Paula
![Page 2: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/2.jpg)
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;
![Page 3: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/3.jpg)
311/04/23
Material referente ao assunto da aulaO Box Model:
–http://www.pt-br.html.net/tutorials/css/lesson9.asp
Margin e Padding:–http://www.pt-br.html.net/tutorials/css
/lesson10.aspBordas:
–http://www.pt-br.html.net/tutorials/css/lesson11.asp
Altura e Largura:–http://www.pt-br.html.net/tutorials/css
/lesson12.asp
![Page 4: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/4.jpg)
Material referente ao assunto da aula
Tutorial sobre o Box Model:–http://maujor.com/tutorial/csscaixa.ph
p
The Box Model:–http://css-tricks.com/the-css-box-mod
el/
![Page 5: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/5.jpg)
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c
apítulo.
511/04/23
![Page 6: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/6.jpg)
611/04/23
Tags HTML referenciadas na aula (em Português –site Referenciando)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>.
![Page 7: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/7.jpg)
711/04/23
Tags HTML referenciadas na aula (em Inglês – site SitePoint)
Tag de estilo: <style>;Tag de link: <link>;Tag de script: <script>;
![Page 8: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/8.jpg)
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.
![Page 9: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/9.jpg)
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.
![Page 10: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/10.jpg)
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;
![Page 11: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/11.jpg)
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;
![Page 12: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/12.jpg)
1211/04/23
Exemplos da aula
Exemplo Margem Padrão;Exemplo Margin Exemplo Margin AutoExemplo Margin EmExemplo Margin NegativaExemplo Margin PorcentagemExemplo Margin ResumidaExemplo Margin Resumida2
![Page 13: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/13.jpg)
Exemplos da aula
Exemplo BorderExemplo Border EspecíficaExemplo Border ResumidaExemplo Box ModelExemplo PaddingExemplo Width Height Exemplo Rollover
1311/04/23
![Page 14: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/14.jpg)
Existem 2 tipos de elementos em CSSNão-substituídos:
–Maioria dos elementos;
– Conteúdo apresentado em uma caixa gerada pelo próprio elemento;
<p></p><span></span>...
![Page 15: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/15.jpg)
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;
<img src=“”/><input type=“text”/>
![Page 16: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/16.jpg)
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!
<p>Parágrafo</p><div></div><li>Item de
lista</li>
![Page 17: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/17.jpg)
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;
<a href=“”></a><span></span><em></em>
![Page 18: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/18.jpg)
Hoje, vamos trabalhar apenas com elementos de bloco
1811/04/23
![Page 19: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/19.jpg)
Todos os elementos em CSS estão dentro de uma caixa
![Page 20: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/20.jpg)
Box model para elementos em bloco
![Page 21: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/21.jpg)
Box model para elementos em blocoIE (6 e 7) x Resto do Mundo
![Page 22: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/22.jpg)
Visualizar o Box Model com FirebugInstalar o Firebug:
– (Na PUCPR já está instalado)–http://www.getfirebug.com
Tecla F12!
2211/04/23
![Page 23: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/23.jpg)
Margem
Transparente;Largura do
elemento (width) não inclui a margem;
2311/04/23
![Page 24: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/24.jpg)
Todo elemento possui uma margem padrãoCada navegador pode usar valores
diferentes;
Parágrafos no Firefox: –margin-top: 16px;–margin-bottom: 16px;
2411/04/23
![Page 25: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/25.jpg)
CSS Reset para margens
Elimina problemas com as margens padrão diferentes para cada navegador;
* {–margin: 0;–}
2511/04/23
![Page 26: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/26.jpg)
2611/04/23
MargensEspecíficas
![Page 27: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/27.jpg)
2711/04/23
Visualização com o Firebug
![Page 28: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/28.jpg)
Margens não se somam!O que vale é o maior valor!30px de top + 50px de bottom = 50px de distância;
2811/04/23
![Page 29: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/29.jpg)
Representação resumida (shorthand) / 4 valores
margin: top right bottom left;Sentido horário (TRouBLe);
2911/04/23
![Page 30: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/30.jpg)
Representação resumida (shorthand) / 1 valor
3011/04/23
![Page 31: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/31.jpg)
Representação resumida(shorthand) / 2 valores
3111/04/23
![Page 32: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/32.jpg)
Porcentagens se referem ao valor de width (largura)
3211/04/23
1664 * 10% = 166
![Page 33: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/33.jpg)
“em” se refere ao tamanho da letra (font-size)
3311/04/23
16px = 1em Na minha configuração!
![Page 34: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/34.jpg)
Margens podem ser negativas
3411/04/23
Margens negativas podem ser usadas para esconder elementos;Máximo: -9999px;
![Page 35: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/35.jpg)
Margin com valor auto
Deixar o browser calcular a margem automaticamente;
Pode ser usado para centralizar elementos (esquerda e direita igual);
3511/04/23
![Page 36: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/36.jpg)
BordasNã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;
3611/04/23
![Page 37: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/37.jpg)
Larguras de borda
3711/04/23
![Page 38: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/38.jpg)
Estilos de borda
3811/04/23
![Page 39: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/39.jpg)
3911/04/23
![Page 40: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/40.jpg)
4011/04/23
![Page 41: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/41.jpg)
Representação resumida(shorthand)
4111/04/23
![Page 42: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/42.jpg)
Bordas específicas
4211/04/23
![Page 43: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/43.jpg)
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);
4311/04/23
![Page 44: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/44.jpg)
CSS Reset para padding
* {–padding:0;
}
4411/04/23
![Page 45: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/45.jpg)
4511/04/23
![Page 46: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/46.jpg)
Largura da caixa
4611/04/23
![Page 47: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/47.jpg)
Altura da caixa
4711/04/23
![Page 48: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/48.jpg)
4811/04/23
Largura = 25 + 15 + 15 + 1 + 1 = 57 Altura = 7 + 15 + 15 + 1 + 1 = 39
![Page 49: Laboratório de Informática Box Model Elementos em Bloco 1º Semestre 2009 > PUCPR > BSI Bruno C. de Paula](https://reader036.vdocuments.net/reader036/viewer/2022062623/552fc0fe497959413d8bbab4/html5/thumbnails/49.jpg)
4911/04/23
Próximas aulas de CSS
CSS Posicionamento;Menus;Botões;Forms...