Carregar apresentação
A apresentação está carregando. Por favor, espere
PublicouGabrielly De Oliveira Alterado mais de 10 anos atrás
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...
Apresentações semelhantes
© 2024 SlidePlayer.com.br Inc.
All rights reserved.