fundamentos do parte ii · programaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1...
TRANSCRIPT
![Page 1: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/1.jpg)
PROGRAMAÇÃO PARA INTERNET RICA
Prof. Dr. Daniel Caetano
2012 - 1
FUNDAMENTOS DO CSS – PARTE II
![Page 2: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/2.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/3.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/4.jpg)
ESTILOS AVANÇADOS
![Page 5: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/5.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/6.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/7.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/8.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/9.jpg)
Estilos Avançados
• Exemplos de Pseudo-Classes
input:focus {
background-color: yellow;
}
#menu:hover {
background-color: blue;
}
![Page 10: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/10.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/11.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/12.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/13.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/14.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/15.jpg)
Estilos Avançados
• Ex.: opacity: 1.0
![Page 16: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/16.jpg)
Estilos Avançados
• Ex.: opacity: 0.5
![Page 17: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/17.jpg)
Estilos Avançados
• Queremos algo mais nessa linha!
![Page 18: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/18.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/19.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/20.jpg)
DIVISÕES DE DOCUMENTO
![Page 21: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/21.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/22.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/23.jpg)
XHTML e o DIV • Exemplo
![Page 24: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/24.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/25.jpg)
XHTML e o DIV • Exemplo
![Page 26: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/26.jpg)
TAGS INTERNAS
![Page 27: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/27.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/28.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/29.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/30.jpg)
POSICIONAMENTO COM O CSS: TIPOS DE
POSICIONAMENTO
![Page 31: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/31.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/32.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/33.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/34.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/35.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/36.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/37.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/38.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/39.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/40.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/41.jpg)
POSICIONAMENTO COM O CSS: ELEMENTOS
“PRESOS” ÀS LATERAIS
![Page 42: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/42.jpg)
Posicionamento + CSS: float
• Atributo float: none
• Seguida a regra normal
do posicionamento
img
p
p
p
![Page 43: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/43.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/44.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/45.jpg)
POSICIONAMENTO COM O CSS: VISUALIZANDO
CONTEÚDO DOS ELEMENTOS
![Page 46: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/46.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/47.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/48.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/49.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/50.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/51.jpg)
POSICIONAMENTO COM O CSS: CONTROLANDO QUEM
ESTÁ NA FRENTE
![Page 52: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/52.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/53.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/54.jpg)
Posicionamento + CSS: z-index
• Atributo z-index: [valor]
![Page 55: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/55.jpg)
POSICIONAMENTO COM O CSS: LIMITANDO O
TAMANHO DO CONTEÚDO
![Page 56: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/56.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/57.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/58.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/59.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/60.jpg)
POSICIONAMENTO COM O CSS: MODIFICANDO A
FORMA DE APRESENTAÇÃO
![Page 61: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/61.jpg)
Posicionamento + CSS: display
• Sem atributo display
• Apresenta elemento
como previsto
• Listas, por exemplo
ul
li
li
li
li
![Page 62: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/62.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/63.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/64.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/65.jpg)
POSICIONAMENTO NA PRÁTICA: TUTORIAL
![Page 66: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/66.jpg)
Layout Base: Tutorial Básico
MENU TÍTULO
SEÇÃO 1
![Page 67: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/67.jpg)
Layout Base: Tutorial Básico
MENU TÍTULO
SEÇÃO 1
![Page 68: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/68.jpg)
Layout Base: Tutorial Avançado LOGO TÍTULO
MENU1
MENU2 CONTEÚDO ADS
RODAPÉ
![Page 69: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/69.jpg)
Layout Base: Tutorial Avançado LOGO TÍTULO
MENU1
MENU2 CONTEÚDO ADS
RODAPÉ
![Page 70: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/70.jpg)
POSICIONAMENTO EM APLICAÇÕES: TUTORIAL
![Page 71: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/71.jpg)
Jogo da Velha
![Page 72: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/72.jpg)
Jogo da Velha
![Page 73: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/73.jpg)
Jogo da Velha
![Page 74: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/74.jpg)
Jogo da Velha
![Page 75: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/75.jpg)
Jogo da Velha
![Page 76: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/76.jpg)
CONCLUSÕES
![Page 77: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/77.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/78.jpg)
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 · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/79.jpg)
PERGUNTAS?
![Page 80: FUNDAMENTOS DO PARTE II · PROGRAMAÇÃO PARA INTERNET RICA Prof. Dr. Daniel Caetano 2012 - 1 FUNDAMENTOS DO CSS – PARTE II](https://reader033.vdocuments.net/reader033/viewer/2022053114/608cb2a2490aae328d2fd4d9/html5/thumbnails/80.jpg)
BOM DESCANSO A TODOS!