FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS...

80
PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – P ARTE II

Transcript of FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS...

Page 1: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

PROGRAMAÇÃO PARA INTERNET RICA

Prof. Dr. Daniel Caetano

2012 - 1

FUNDAMENTOS DO CSS – PARTE II

Page 2: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Objetivos

• Apresentar o CSS como ferramenta de layout de página

• Capacitar para o posicionamento de elementos com o uso de CSS

• Apresentar a definição de estilos para tags específicas de uma região

• TRABALHO 2 ONLINE!

Page 3: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Material de Estudo

Material Acesso ao Material

Notas de Aula http://www.caetano.eng.br/aulas/pir/ (Aula 5)

Apresentação http://www.caetano.eng.br/aulas/pir/ (Aula 5)

Material Didático -

Google +“CSS” +tableless +tutorial

Web Sites http://www.w3.org/

Page 4: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

ESTILOS AVANÇADOS

Page 5: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Alguns tipos de estilos não foram discutidos

– Transparência

– Estilos associados a ações

– Estilos de posicionamento

• Iremos estudá-los nesta aula

Page 6: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Pseudo-Classes – Formas de definir estilos para situações

especiais

• Como faço para definir estilo para um elemento que ganhou foco?

• Como posso definir o estilo para um elemento cujo mouse esteja em cima?

• seletor:estado {

propriedade: valor;

}

Page 7: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Pseudo-Classes mais comuns

– :link Links não visitados

– :visited Links já visitados

– :hover Mouse sobre o elemento

– :active Elemento ativo (botão pressionado)

– :focus Elemento com foco ativo

Page 8: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Exemplos de Pseudo-Classes

a:link {

color: green;

text-decoration: none;

}

a:hover {

color: red;

text-decoration: underline;

}

Page 9: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Exemplos de Pseudo-Classes

input:focus {

background-color: yellow;

}

#menu:hover {

background-color: blue;

}

Page 10: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Pseudo-Elementos – Formas de definir estilos para elementos

especiais

• E se eu quiser definir um estilo para o primeiro elemento de uma lista?

• Ou definir algo diferente para o último?

• seletor:descritor {

propriedade: valor;

}

Page 11: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Pseudo-Elementos mais comuns

– :first-child Primeiro elemento

– :last-child Último elemento

– :first-letter Primeira letra

– :first-line Primeira linha

– :nth-child(regra) “Enésimo” elemento

Page 12: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Exemplos de Pseudo-Elementos

p:first-letter {

font-size: 1.2em;

}

p:first-line {

font-variant: small-caps;

}

li.menu:last-child {

border-right: none;

}

Page 13: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Exemplos de Pseudo-Elementos

td:nth-child(2n+1) {

background-color: white;

}

(A partir da posição 1, de dois em dois)

td:nth-child(2n+2) {

background-color: gray;

}

(A partir da posição 2, de dois em dois)

Page 14: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Transparência

• Propriedade padrão do CSS:

– opacity: x;

– x varia de 0.0 a 1.0

• FireFox a partir do 1.0

• Internet Explorer a partir do 9

• Notas de aula: para navegadores antigos

Page 15: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Ex.: opacity: 1.0

Page 16: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Ex.: opacity: 0.5

Page 17: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Queremos algo mais nessa linha!

Page 18: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Isso é possível usando o efeito de transparência de cor

• Quando queremos usar um bloco cuja cor de fundo seja translúcida, ao invés de definir a cor com isso...

#bloco {

background-color: rgb(50,50,50);

}

Page 19: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Estilos Avançados

• Definiremos assim:

#bloco {

background-color: rgba(50,50,50,0.5);

}

• RGBA permite definir a opacidade da cor

– Varia de 0.0 a 1.0

Page 20: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

DIVISÕES DE DOCUMENTO

Page 21: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

XHTML e o DIV

• Existe uma tag do XHTML chamada div

• A tag <div>...</div> marca uma divisão do documento

• A forma tradicional de usá-la é com o parâmetro id

<div id=“menu”>

...

</div>

Page 22: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

XHTML e o DIV

• A tag div não tem nenhum efeito visual padrão

• Ela serve para indicar quais partes do XHTML compõem um determinado elemento estrutural da página

• Divisões comuns:

– menus

– logotipo (cabeçalho)

– rodapé

– área de propagandas

– conteúdo

Page 23: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

XHTML e o DIV • Exemplo

Page 24: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

XHTML e o DIV

• Marcando como divs distintos, podemos configurá-los separadamente

• Com alguns ajustes de posicionamento, podemos modificar bastante o layout do site, sem nem mesmo mexer no XHTML

• Assim, sempre usaremos a tag div para delimitar as informações que sempre serão apresentadas conjuntamente

Page 25: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

XHTML e o DIV • Exemplo

Page 26: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

TAGS INTERNAS

Page 27: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Tags Internas

• Antes de ir para o posicionamento...

• Vez ou outra queremos que, por exemplo, apenas os parágrafos dentro da div #conteudo apareçam em vermelho... Como fazer?

• Simples!

#conteudo p {

color: red;

}

Page 28: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Tags Internas

• Sempre que indicarmos dois seletores separados por espaço:

seletor1 seletor2 {

propriedade: valor;

}

• A propriedade se aplicará apenas quando o seletor2 aparecer dentro do seletor1

Page 29: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Tags Internas

• O principal uso disso é definir propriedades visuais diferentes para as mesmas tags que apareçam em divs diferentes...

• Mas nada impede de definir uma propriedade específica para duas tags aninhadas

em strong { text-variant: small-caps; } • Isso vai transformar em small-caps apenas os textos

que estiverem marcados com <em><strong>texto em small-caps</strong></em>

Page 30: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

POSICIONAMENTO COM O CSS: TIPOS DE

POSICIONAMENTO

Page 31: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: position

• Atributo position: static

• Base: outros elementos

• Posicionamento padrão

– Elementos pequenos

• Lado a lado

– Elementos grandes

• Um em baixo do outro

img img img

p

li

p

Page 32: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: position

• Atributo position: static

• Espaçamento

– margin

• Centralizar

– margin-left: auto;

– margin-right: auto;

• Tamanho

– Conteúdo, padding,

border, width, height

img img img

p

li

p

Page 33: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: position

• Atributo position: absolute

• Base: elemento pai

– Padrão: documento

• Espaçamento

– margin, left, right, top

bottom

• Tamanho

– Conteúdo, padding,

border, width, height

p

li

p

img

Page 34: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: position

• Atributo position: relative

• Base: outros elementos

• Posicionamento padrão

– Elementos pequenos

• Lado a lado

– Elementos grandes

• Um em baixo do outro

img img img

p

li

p

Page 35: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: position

• Atributo position: relative

• Espaçamento

– Margin

• Centralizar

– margin-left: auto;

– margin-right: auto;

• Tamanho

– Conteúdo, padding,

border, width, height

img img img

p

li

p

Page 36: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: position

• Atributo position: absolute

– Dentro de um relative

• Base: elemento pai

• Espaçamento

– margin, left, right, top

bottom

• Tamanho

– Conteúdo, padding,

border, width, height

div

div relative

div img

img em uma div absolute com

top=0px e right=0px

Page 37: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: position • position: absolute

– Dentro de relative x Dentro de static

div

div relative

div img

img em uma div absolute com top=0px e right=0px

div

div static

div img

div img

img em uma div absolute com top=0px e right=0px

Page 38: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: position

• Atributo position: fixed

• Base: janela (navegador)

• Espaçamento

– margin, left, right, top

bottom

• Tamanho

– Conteúdo, padding,

border, width, height

img img img

p

p

img

li

Page 39: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: position

• Atributo position: fixed

• Base: janela (navegador)

• Espaçamento

– margin, left, right, top

bottom

• Tamanho

– Conteúdo, padding,

border, width, height

img img img

p

p

img

li

Page 40: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: position

• Atributo position: fixed

• Base: janela (navegador)

• Espaçamento

– margin, left, right, top

bottom

• Tamanho

– Conteúdo, padding,

border, width, height

img img img

p

p

img

li

Page 41: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

POSICIONAMENTO COM O CSS: ELEMENTOS

“PRESOS” ÀS LATERAIS

Page 42: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: float

• Atributo float: none

• Seguida a regra normal

do posicionamento

img

p

p

p

Page 43: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: float

• Atributo float: left

• Elmento “gruda” na

lateral... E os outros

elementos “escorrem”

à sua volta

p

p

p

img

Page 44: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: float

• Atributo float: right

• Elmento “gruda” na

lateral... E os outros

elementos “escorrem”

à sua volta

p

p

p

img

Page 45: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

POSICIONAMENTO COM O CSS: VISUALIZANDO

CONTEÚDO DOS ELEMENTOS

Page 46: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: overflow

• Atributo overflow: visible

• O elemento desrespeita

as medidas indicadas

para que o conteúdo

seja totalmente visível

p

p

Page 47: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: overflow

• Atributo overflow: visible

• O elemento desrespeita

as medidas indicadas

para que o conteúdo

seja totalmente visível

Aqui há um texto com overflow: visible ativado, permitindo todo

o texto e desrespeitando a definição original

p

Page 48: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: overflow

• Atributo overflow: hidden

• O elemento respeita

as medidas indicadas,

ainda que isso

signifique cortar o

conteúdo

Aqui há um texto com overflow: visible ativado, permitindo todo

o texto e desrespeitando a definição original

p

Page 49: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: overflow

• Atributo overflow: scrollbar

• O elemento respeita

as medidas indicadas,

mas sempre serão

mostradas barras de

rolagem

Aqui há um texto com overflow: visible ativado, permitindo todo

o texto e desrespeitando a definição original

p

Page 50: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: overflow

• Atributo overflow: auto

• O elemento respeita

as medidas indicadas,

mas se o conteúdo não

couber, mostra a barra

de rolagem necessária

Aqui há um texto com overflow: visible ativado, permitindo todo

o texto e desrespeitando a definição original

p

Page 51: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

POSICIONAMENTO COM O CSS: CONTROLANDO QUEM

ESTÁ NA FRENTE

Page 52: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: z-index

• Atributo z-index: [valor]

• Controla o nível do

elemento

• Padrão: o que vem

depois no XHTML, fica

por cima

img img img

p

p

img

li

Page 53: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: z-index

• Atributo z-index: [valor]

• Controla o nível do

elemento

• Padrão: o que vem

depois no XHTML, fica

por cima

• Mudando o z-index...

img img img

li

p

p

img

Page 54: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: z-index

• Atributo z-index: [valor]

Page 55: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

POSICIONAMENTO COM O CSS: LIMITANDO O

TAMANHO DO CONTEÚDO

Page 56: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: max-width

• Atributo max-width: 700px

• Se a tela for menor

– Desenha menor

img img img

p

li

p

Page 57: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: max-width

• Atributo max-width: 700px

• Se a tela for menor

– Desenha menor

• Se a tela for maior

– Limita o tamanho!

img img img

p

li

p

Page 58: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: min-width

• Atributo min-width: 700px

• Se a tela for maior

– Desenha maior

img img img

p

li

p

Page 59: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: min-width

• Atributo min-width: 700px

• Se a tela for maior

– Desenha maior

• Se a tela for menor

– Põe barra de rolagem!

img img img

p

li

p

Page 60: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

POSICIONAMENTO COM O CSS: MODIFICANDO A

FORMA DE APRESENTAÇÃO

Page 61: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: display

• Sem atributo display

• Apresenta elemento

como previsto

• Listas, por exemplo

ul

li

li

li

li

Page 62: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: display

• Sem atributo display: inline

• Apresenta elementos

em linha

• Por exemplo, listas

ul li li li li

Page 63: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: display • Sem atributo display: block

• Alguns elementos do

XHTML, com a tag

<span>...</span> não

“ocupam espaço” por

padrão e podem se

sobrepor

span span span

Page 64: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Posicionamento + CSS: display • Sem atributo display: block

• Alguns elementos do

XHTML, com a tag

<span>...</span> não

“ocupam espaço” por

padrão e podem se

sobrepor

• display: block impede

isso

span span span

Page 65: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

POSICIONAMENTO NA PRÁTICA: TUTORIAL

Page 66: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Layout Base: Tutorial Básico

MENU TÍTULO

SEÇÃO 1

Page 67: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Layout Base: Tutorial Básico

MENU TÍTULO

SEÇÃO 1

Page 68: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Layout Base: Tutorial Avançado LOGO TÍTULO

MENU1

MENU2 CONTEÚDO ADS

RODAPÉ

Page 69: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Layout Base: Tutorial Avançado LOGO TÍTULO

MENU1

MENU2 CONTEÚDO ADS

RODAPÉ

Page 70: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

POSICIONAMENTO EM APLICAÇÕES: TUTORIAL

Page 71: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Jogo da Velha

Page 72: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Jogo da Velha

Page 73: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Jogo da Velha

Page 74: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Jogo da Velha

Page 75: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Jogo da Velha

Page 76: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

CONCLUSÕES

Page 77: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Resumo

• CSS permite total liberdade de formatação de XHTML

• O uso depende da correta compreensão da lógica do posicionamento CSS...

• ...e de uma adequada análise prévia do layout desejado

• TAREFA

– Trabalho A... Já está online!

Page 78: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

Próxima Aula

• JavaScript...

–Para fazer sites realmente dinâmicos e responsivos...

– ...temos que alterar suas propriedades na máquina do cliente!

Page 79: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

PERGUNTAS?

Page 80: FUNDAMENTOS DO PARTE II · Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ . ... •CSS permite total liberdade de formatação de XHTML

BOM DESCANSO A TODOS!