Aula 10 e 11. box model
-
Upload
jolvani-morgan -
Category
Technology
-
view
21 -
download
1
Transcript of Aula 10 e 11. box model
Box ModelCSS - Style Sheet
Professor: Jolvani
Aula 10 e 11
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
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”
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
Box Model - CSS Identificando o elemento <p> no Firebug. Observe largura,
altura, espaçamento, margem. Esse é o box que está no elemento.
Box Model - CSS Alteramos as margens e verificamos... estilo.css
Estamos usando o firebug
Box Model - CSS Alteramos as margens e verificamos... estilo.css
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.
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...
Box Model - CSS Propriedade padding: aqui = 0;
Ele pode ser apresentado das 4 maneiras como
nas bordas.
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
Box Model - CSS Propriedade Border
Podemos utilizar uma declaração abreviada para definir todos as características da borda:
Próxima Aula: BoxModel