Upload
internet
View
104
Download
0
Embed Size (px)
Citation preview
Laboratório de InformáticaBox Model Elementos em Bloco
1º Semestre 2009 > PUCPR > BSI
Bruno C. de PaulaBruno 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;
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
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/
Material referente ao assunto da aula
CSS – Guia de Bolso;–Editora AltaBooks;–2008;–Download de um c
apítulo.
511/04/23
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>.
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>;
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.
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.
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;
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;
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
Exemplos da aula
Exemplo BorderExemplo Border EspecíficaExemplo Border ResumidaExemplo Box ModelExemplo PaddingExemplo Width Height Exemplo Rollover
1311/04/23
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>...
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”/>
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>
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>
Hoje, vamos trabalhar apenas com elementos de bloco
1811/04/23
Todos os elementos em CSS estão dentro de uma caixa
Box model para elementos em bloco
Box model para elementos em blocoIE (6 e 7) x Resto do Mundo
Visualizar o Box Model com FirebugInstalar o Firebug:
– (Na PUCPR já está instalado)–http://www.getfirebug.com
Tecla F12!
2211/04/23
Margem
Transparente;Largura do
elemento (width) não inclui a margem;
2311/04/23
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
CSS Reset para margens
Elimina problemas com as margens padrão diferentes para cada navegador;
* {–margin: 0;–}
2511/04/23
2611/04/23
MargensEspecíficas
2711/04/23
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;
2811/04/23
Representação resumida (shorthand) / 4 valores
margin: top right bottom left;Sentido horário (TRouBLe);
2911/04/23
Representação resumida (shorthand) / 1 valor
3011/04/23
Representação resumida(shorthand) / 2 valores
3111/04/23
Porcentagens se referem ao valor de width (largura)
3211/04/23
1664 * 10% = 166
“em” se refere ao tamanho da letra (font-size)
3311/04/23
16px = 1em Na minha configuração!
Margens podem ser negativas
3411/04/23
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);
3511/04/23
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
Larguras de borda
3711/04/23
Estilos de borda
3811/04/23
3911/04/23
4011/04/23
Representação resumida(shorthand)
4111/04/23
Bordas específicas
4211/04/23
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
CSS Reset para padding
* {–padding:0;
}
4411/04/23
4511/04/23
Largura da caixa
4611/04/23
Altura da caixa
4711/04/23
4811/04/23
Largura = 25 + 15 + 15 + 1 + 1 = 57 Altura = 7 + 15 + 15 + 1 + 1 = 39
4911/04/23
Próximas aulas de CSS
CSS Posicionamento;Menus;Botões;Forms...