Your SlideShare is downloading. ×
  • Like
Unb   2012.1 - dweb - e - css-pensando dentro da caixa
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 201 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
201
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb E CSS : Pensando dentro da Caixa “Tu, porém, tens seguido a minha doutrina, modo de viver, intenção, fé, longanimidade, amor, paciência.” 2 Timóteo 3:101 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 2. DWEB - Design para Web / Carlos José Contato Carlos José carlosjose.unibratec@gmail.com www.carlosjose.net twitter.com/carlosjoser2n2 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 3. DWEB - Design para Web / Carlos José Objetivo da Aulan Apresentar os fundamentos da linguagem de formatação CSS.3 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 4. DWEB - Design para Web / Carlos José Agendan Componentes de caixa de um elementon Definindo as dimensões da caixan Definindo as dimensões do conteúdo4 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 5. DWEB - Design para Web / Carlos José Componentes de caixa de um elementon  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)5 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 6. DWEB - Design para Web / Carlos José Componentes de caixa de um elementon  Caixa de um elemento Borda Área margin Área padding width (100px) Área conteúdo Altura height (70 px) Largura6 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 7. DWEB - Design para Web / Carlos José Definindo as dimensões do conteúdon  Width e height î Useas 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.7 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 8. DWEB - Design para Web / Carlos José Definindo as dimensões do conteúdon  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.8 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 9. DWEB - Design para Web / Carlos José Modelo de caixa na prátican  Box Model: î Para ver isto na prática, crie os documentos que segue abaixo: <!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.html9 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 10. DWEB - Design para Web / Carlos José Modelo de caixa na prátican  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; style.css float:left }10 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 11. DWEB - Design para Web / Carlos José Modelo de caixa na prátican  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?11 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 12. DWEB - Design para Web / Carlos José Modelo de caixa na prátican  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?12 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 13. DWEB - Design para Web / Carlos José Modelo de caixa na prátican  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.13 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 14. DWEB - Design para Web / Carlos José Definindo as dimensões da caixan  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)14 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 15. DWEB - Design para Web / Carlos José Definindo as dimensões da caixan  XML Prolog e DOCTYPE: î Modos de renderização HTML 4.01: IE8+, Firefox, Chrome IE 7 IE 6 Doctype Safari, Opera 7.5+ Opera Opera Mac IE 5 Konq 3.2 Konq 3.5+, HTML5 7.10 7.0 spec HTML 4.01 Com o identificador do sistema Almost Almost Almost Almost Strict Mode ou <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML standards standards standards standards Standard Mode 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> mode mode mode mode Strict Sem o identificador do sistema Almost Almost Almost Strict Mode ou Quirks <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML standards standards standards Standard Mode Mode 4.01//EN"> mode mode mode Com o identificador do sistema Almost Almost Almost <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Almost standards Quirks standards standards standards Transitional//EN" mode Mode mode mode mode Transitional "http://www.w3.org/TR/html4/loose.dtd"> Sem o identificador do sistema Quirks Quirks Quirks Quirks <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Quirks Mode Mode Mode Mode Mode Transitional//EN">15 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 16. DWEB - Design para Web / Carlos José Definindo as dimensões da caixan  XML Prolog e DOCTYPE: î Modos de renderização HTML 5: IE8+, Firefox, Chrome IE 7 IE 6 Safari, Opera 7.5+ Konq Doctype Konq 3.5+, HTML5 Opera Opera Mac IE 5 3.2 7.10 7.0 spec HTML 5 Almost Almost Almost Strict Mode ou <!DOCTYPE html> standards standards standards ? Standard Mode mode mode mode16 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 17. DWEB - Design para Web / Carlos José Definindo as dimensões da caixan  XML Prolog e DOCTYPE: î Modos de renderização XHTML 1.0: IE8+, Firefox, Chrome IE 7 IE 6 Doctype Safari, Opera 7.5+ Opera Opera Mac IE 5 Konq 3.2 Konq 3.5+, HTML5 7.10 7.0 spec XHTML 1.0 Com o identificador do sistema e com uma declaração XML <?xml version="1.0" encoding="UTF-8"?> Almost Almost Strict Mode ou Quirks Quirks standards standards Standard Mode Mode Mode <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 mode mode Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> Com o identificador do sistema e sem uma Strict declaração XML Almost Almost Almost Almost Strict Mode ou <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 standards standards standards standards Standard Mode Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- mode mode mode mode strict.dtd"> Sem identificador do sistema e sem uma declaração Strict Almost Almost XML Strict Mode ou Mode ou standards standards ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Standard Mode Standard mode mode Strict//EN"> Mode17 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 18. DWEB - Design para Web / Carlos José Definindo as dimensões da caixan  XML Prolog e DOCTYPE: î Modos de renderização XHTML 1.0: IE8+, Firefox, Chrome IE 7 IE 6 Doctype Safari, Opera 7.5+ Opera Opera Mac IE 5 Konq 3.2 Konq 3.5+, HTML5 7.10 7.0 spec XHTML 1.0 Com o identificador do sistema e com uma declaração XML <?xml version="1.0" encoding="UTF-8"?> Almost Almost Almost standards Quirks Quirks standards standards <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 mode Mode Mode mode mode Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> Com o identificador do sistema e sem uma Transitional declaração XML Almost Almost Almost <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Almost standards Quirks standards standards standards Transitional//EN" mode Mode mode mode mode "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> Sem identificador do sistema e sem uma declaração Strict Almost Almost XML Almost standards Mode ou standards standards ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 mode Standard mode mode Transitional//EN"> Mode18 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 19. DWEB - Design para Web / Carlos José Definindo as dimensões da caixan  Diferenças de renderização î Comportamento dos navegadores: área total margin Box Model W3C width border Strict Mode ou Standard Mode padding conteúdo área total margin Box Model Internet Explorer width border Almost standards mode padding conteúdo19 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 20. DWEB - Design para Web / Carlos José Definindo as dimensões da caixan  Diferenças de renderização î Comportamento dos navegadores: Box Model Internet Explorer Almost standards mode área total margin (10px) width (100px) border (2px) height (70 px) padding (3px) conteúdo Largura Total = (100)+(10+10) = 120px Altura Total = (70)+(10+10) = 90px Largura Conteúdo = (100)-(3+3)-(2+2) = 90px Altura Conteúdo = (70)-(3+3)-(2+2) = 60px20 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 21. DWEB - Design para Web / Carlos José Perguntas ?21 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 22. DWEB - Design para Web / Carlos José Considerações Finaisn  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!22 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12