Unb 2012.1 - dweb - e - css-pensando dentro da caixa

1 Tuesday, 10 de April de 12 Capítulo E - CSS (Pensando dentro da caixa)

Curso Superior de Tecnologia em Design Gráfico

E CSS : Pensando dentro da Caixa

DWEB - Design para Web

“Tu, porém, tens seguido a minha doutrina, modo de viver, intenção, fé, longanimidade, amor, paciência.” 2 Timóteo 3:10

DWEB - Design para Web / Carlos José


Contato

Carlos José

[email protected] www.carlosjose.net

twitter.com/carlosjoser2n



Objetivo da Aula

n Apresentar os fundamentos da linguagem de formatação CSS.



Agenda

n Componentes de caixa de um elemento

n Definindo as dimensões da caixa

n Definindo as dimensões do conteúdo



n  Introdução î De acordo com o modelo de caixa, cada

elemento em um documento gera uma caixa em que podemos aplicar propriedades como largura, altura, enchimento, bordas e margem. n  width, height, padding, border e margin

î Esta técnica é chamada de box model (modelo de caixa)

Componentes de caixa de um elemento



n Caixa de um elemento

Componentes de caixa de um elemento

width (100px)

height (70 px)

Borda

Área margin

Área padding

Área conteúdo

Largura

Altura



n Width e height î Use as propriedades width e height para

especificar a largura e altura da área de conteúdo de um elemento. n  Especifique valores de largura e altura apenas para

elementos de bloco e elementos de linha não textuais, como imagens.

n  Só para reforçar, nunca aplique as propriedades de largura e altura para elementos inline.

n  Por padrão, os valores de largura e altura de um elemento em bloco é calculado automaticamente pelo navegador.

Definindo as dimensões do conteúdo



n Width e height î Observações:

n  Apesar do elemento <a> ser inline, é possível aplicar as propriedades de largura e altura se forçarmos o seu comportamento em bloco com a propriedade display com o valor block.

n  Dimensões máximas e mínimas î  A partir das CSS2 se definiu as propriedades máximas e

mínimas para elementos em bloco. î  Será útil se você quiser impor limites no tamanho do

elemento.

Definindo as dimensões do conteúdo



n Box Model: î Para ver isto na prática, crie os documentos que

segue abaixo:

Modelo de caixa na prática

<!DOCTYP html> <html> <head> <meta charset=“utf-8" /> <title>Box Model</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id=“all”> <div id=“menu”>div menu</div> <div id=“content”>div content</div> </div> </body> </html> box.html



n Box Model: î Para ver isto na prática, crie os documentos que

segue abaixo: #all{ background-color:#333; width:500px; height:420px } #menu{ background-color:#999; float:left; width:200px } #content{ width:300px; padding:15px; border:2px solid #C00; background-color:#EFEFEF; float:left }

style.css




n Box Model: n  Relembrando:

î  a div all tem 500px de largura, a div menu tem 200px de largura e a div content tem 300px. Somando as larguras das div´s temos 500px porque não deu certo?




n Box Model: n  Explicando:

î  A resposta esta no enunciado, as margens (margin), a distância entre os limites e o conteúdo (padding) e a espessura das bordas (border) contam nas medidas de largura e altura da caixa.

î  O valor total da div content é 334 pixels, como chegamos a este valor?

î  Atenção! §  300 pixels [width] + 15 pixels [padding esquerdo] + 15

pixels [padding direito] + 2 pixels [borda esquerda] + 2 pixels [borda direita] = 334 pixels.

î  O que deve ser feito para resolver este problema?




n Box Model: n  Resolvendo:

î  334px + 200px = 534px î  Temos que subtrair os valores a mais da div content para

chegar ao valor real da div. §  300-15-15-2-2 = 266 px ou 300-34 = 266px

OBS: A regra acima explicada, foi aplicada apenas para a largura da div, para alterar a altura, aplique a mesma regra.




n XML Prolog e DOCTYPE: î Modos de renderização dos navegadores:

n  Idiossincrático (Quirks Mode) n  Padrão (Strict Mode ou Standard Mode) e n  Quase Padrão (Almost Strict Mode)

Definindo as dimensões da caixa



n XML Prolog e DOCTYPE: î Modos de renderização HTML 4.01:

Doctype

IE8+, Firefox, Chrome

Safari, Opera 7.5+ Konq 3.5+, HTML5

spec

IE 7 Opera 7.10

IE 6 Opera

7.0 Mac IE 5 Konq 3.2

HTML 4.01

Strict

Com o identificador do sistema <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Strict Mode ou Standard Mode

Almost standards

mode

Almost standards

mode

Almost standards

mode

Almost standards

mode Sem o identificador do sistema <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


Almost standards

mode

Almost standards

mode

Quirks Mode

Almost standards

mode

Transitional

Com o identificador do sistema <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Almost standards mode

Almost standards

mode

Almost standards

mode

Almost standards

mode

Quirks Mode

Sem o identificador do sistema <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Quirks Mode Quirks Mode

Quirks Mode

Quirks Mode

Quirks Mode




n XML Prolog e DOCTYPE: î Modos de renderização HTML 5:

Doctype

IE8+, Firefox, Chrome Safari, Opera 7.5+ Konq 3.5+, HTML5

spec

IE 7 Opera 7.10

IE 6 Opera

7.0 Mac IE 5 Konq

3.2

HTML 5

<!DOCTYPE html> Strict Mode ou Standard Mode

Almost standards

mode

Almost standards

mode

Almost standards

mode ?




n XML Prolog e DOCTYPE: î Modos de renderização XHTML 1.0:

Doctype



spec

IE 7 Opera 7.10

IE 6 Opera


XHTML 1.0

Strict

Com o identificador do sistema e com uma declaração XML <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Almost standards

mode

Quirks Mode

Almost standards

mode

Quirks Mode

Com o identificador do sistema e sem uma declaração XML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Almost standards

mode

Almost standards

mode

Almost standards

mode

Almost standards

mode

Sem identificador do sistema e sem uma declaração XML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">


Almost standards

mode

Almost standards

mode

Strict Mode ou Standard

Mode

?




n XML Prolog e DOCTYPE: î Modos de renderização XHTML 1.0:

Doctype



spec

IE 7 Opera 7.10

IE 6 Opera


XHTML 1.0

Transitional

Com o identificador do sistema e com uma declaração XML <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Almost standards

mode

Quirks Mode

Almost standards

mode

Quirks Mode

Com o identificador do sistema e sem uma declaração XML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Almost standards

mode

Almost standards

mode

Almost standards

mode

Quirks Mode

Sem identificador do sistema e sem uma declaração XML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">


Almost standards

mode

Almost standards

mode

Strict Mode ou Standard

Mode ?




n Diferenças de renderização î Comportamento dos navegadores:

área total

margin

border

padding

conteúdo

width

área total

margin

border

padding

conteúdo

width

Box Model W3C

Box Model Internet Explorer






n Diferenças de renderização î Comportamento dos navegadores:

width (100px)

height (70 px)

área total

margin (10px)

border (2px)

padding (3px)

conteúdo

Largura Total = (100)+(10+10) = 120pxAltura Total = (70)+(10+10) = 90pxLargura Conteúdo = (100)-(3+3)-(2+2) = 90pxAltura Conteúdo = (70)-(3+3)-(2+2) = 60px

width (100px)

height (70 px)

área total

margin (10px)

border (2px)

padding (3px)

conteúdo

Largura Total = (100)+(10+10) = 120pxAltura Total = (70)+(10+10) = 90pxLargura Conteúdo = (100)-(3+3)-(2+2) = 90pxAltura Conteúdo = (70)-(3+3)-(2+2) = 60px

Box Model Internet Explorer Almost standards mode




Perguntas

?



Considerações Finais

n  Fontes: î  http://www.mapsd.com.br/blog/index.php/2010/01/modos-de-

renderizacao-standards-mode-vs-quirks-mode/ î  http://en.wikipedia.org/wiki/Quirks_mode î  http://www.maujor.com.br î  http://pt.wikipedia.org î  http://www.w3c.org î  http://www.w3schools.com î  http://www.revolucao.etc.br î  http://www.brunotorres.net î  http://www.alistapart.com î  http://www.tableless.com.br î  http://www.bergbrandt.com î  ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para

iniciantes, 3 a Edição

Obrigado!

Documents

Unb 2012.1 - dweb - e - css-pensando dentro da caixa