Unb   2012.1 - dweb - e - css-pensando dentro da caixa
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 493 views

 

Statistics

Views

Total Views
493
Views on SlideShare
493
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • DWEB - Design para Web / Carlos José Perguntas ?21 Capítulo E - CSS (Pensando dentro da caixa) Tuesday, 10 de April de 12
  • 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