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

Curso Superior de Tecnologia em Design Gráfico

DWEB - Design para
Web

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:10

1 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/carlosjoser2n



Objetivo da Aula

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



Agenda

n Componentes de caixa
de um elemento
n Deﬁnindo as dimensões
da caixa
n Deﬁnindo as dimensões
do conteúdo


Componentes de caixa de um elemento

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
Borda

Área margin

Área padding

width (100px)
Área conteúdo
Altura
height (70 px)

Largura



Definindo as dimensões do conteúdo

n  Width e height
î Useas propriedades width e height para
especiﬁcar a largura e altura da área de
conteúdo de um elemento.
n  Especiﬁque 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 deﬁniu as propriedades máximas e
mínimas para elementos em bloco.
î  Será útil se você quiser impor limites no tamanho do
elemento.



Modelo de caixa na prática

n  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.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;
style.css
float:left
}




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.



Definindo as dimensões da caixa

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)




î 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">




î 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
Strict Mode ou
<!DOCTYPE html> standards standards standards ?
Standard Mode
mode mode mode




î Modos de renderização XHTML 1.0:
IE8+, Firefox,
Chrome IE 7 IE 6
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"> Mode




î Modos de renderização XHTML 1.0:
IE8+, Firefox,
Chrome IE 7 IE 6
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
<!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"> Mode




n  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údo




n  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) = 60px


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!


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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Unb 2012.1 - dweb - e - css-pensando dentro da caixa

Ähnlich wie Unb 2012.1 - dweb - e - css-pensando dentro da caixa (20)

Mehr von Claudenio Alberto

Mehr von Claudenio Alberto (15)

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