Aula 10 e 11. box model

160 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
160
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
15
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 10 e 11. box model

  1. 1. Box Model CSS - Style Sheet Professor: Jolvani Aula 10 e 11
  2. 2. Box Model - CSS  Olá, Box Model é um dos principais conceitos usados na construção de nossas páginas.  O Box Model determina como os elementos são exibidos e como interagem entre si.  Cada elemento (in-line ou em bloco) esta representado por um box model, ou seja, O box model esta presente em cada elemento seja ele in-line ou elemento de bloco
  3. 3. Box Model - CSS  Composto por:  Preenchimento  Borda  Margem  Posição  Conteúdo “contente”  Possui largura, altura (width, height)  Entre o conteúdo e a borda existe o espaçamento (padding)  Depois a borda e por fim a margem.  Para verificarmos os Boxs, instalamos um plugin no nosso Firefox o “firebug”
  4. 4. Box Model - CSS  Para isso, no Firefox, vá em ferramentas -> complementos e pesquise por Firebug. Depois é só adicionar ou instalar.  Reinicie o Firefox.  Para acessar o Firebug, pressiona a tecla f12
  5. 5. Box Model - CSS  Identificando o elemento <p> no Firebug. Observe largura, altura, espaçamento, margem. Esse é o box que está no elemento.
  6. 6. Box Model - CSS  Alteramos as margens e verificamos... estilo.css  Estamos usando o firebug
  7. 7. Box Model - CSS  Alteramos as margens e verificamos... estilo.css
  8. 8. Box Model - CSS  Vejamos no box model ....  Observe, colocamos margens no topo, direta, abaixo e esquerda. Procure decorar essa ordem... Pois nessa ordem podemos fazer uma declaração abreviada. Da seguinte forma:  Ao invés do anterior, simplificando nosso desenvolvimento. Ou simplesmente uma das bordas. O navegador vai assumir que todas outras são de mesmo tamanho.
  9. 9. Box Model - CSS  Pode ser aplicado dois valores somente: Topo = 50, direito = 20, abaixo = 50 esquerdo = 20.  Três valores: segue a mesma ordem: topo: 50, direito: 20, abaixo: 30, esquerdo: 20.  Existem essas quatro formas...
  10. 10. Box Model - CSS  Propriedade padding: aqui = 0;  Ele pode ser apresentado das 4 maneiras como nas bordas.
  11. 11. Box Model - CSS  Propriedade Border: aqui = 0;  Ele é mais complexa que as anteriores.  Podemos usar as mesmas definições da seguinte maneira:  border-top-width: 2px (representando a largura), border-right-width: 5px ... Assim por diante; ou simplesmente border-width: 5px para todos os lados. Ou border-width: 3px 2px 3px 2px;  Só que para ver a borda precisamos atribuir uma cor a ela.... Border- color: red; ou border-top-color: red; ou ainda border-color: red green yellow cyan;  E também um estilo da borda... Ela permite a sintaxe abreviada acima. E recebe 4 valores, solid, rideg, dotted, dashed, double, inset, outset  border-style: solid
  12. 12. Box Model - CSS  Propriedade Border  Podemos utilizar uma declaração abreviada para definir todos as características da borda:
  13. 13. Próxima Aula: BoxModel

×