fundamentos do parte ii · programaÇÃo para internet rica prof. dr. daniel caetano 2012 - 1...
TRANSCRIPT
PROGRAMAÇÃO PARA INTERNET RICA
Prof. Dr. Daniel Caetano
2012 - 1
FUNDAMENTOS DO CSS – PARTE II
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!
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/
ESTILOS AVANÇADOS
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
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;
}
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
Estilos Avançados
• Exemplos de Pseudo-Classes
a:link {
color: green;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
Estilos Avançados
• Exemplos de Pseudo-Classes
input:focus {
background-color: yellow;
}
#menu:hover {
background-color: blue;
}
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;
}
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
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;
}
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)
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
Estilos Avançados
• Ex.: opacity: 1.0
Estilos Avançados
• Ex.: opacity: 0.5
Estilos Avançados
• Queremos algo mais nessa linha!
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);
}
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
DIVISÕES DE DOCUMENTO
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>
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
XHTML e o DIV • Exemplo
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
XHTML e o DIV • Exemplo
TAGS INTERNAS
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;
}
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
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>
POSICIONAMENTO COM O CSS: TIPOS DE
POSICIONAMENTO
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
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
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
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
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
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
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
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
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
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
POSICIONAMENTO COM O CSS: ELEMENTOS
“PRESOS” ÀS LATERAIS
Posicionamento + CSS: float
• Atributo float: none
• Seguida a regra normal
do posicionamento
img
p
p
p
Posicionamento + CSS: float
• Atributo float: left
• Elmento “gruda” na
lateral... E os outros
elementos “escorrem”
à sua volta
p
p
p
img
Posicionamento + CSS: float
• Atributo float: right
• Elmento “gruda” na
lateral... E os outros
elementos “escorrem”
à sua volta
p
p
p
img
POSICIONAMENTO COM O CSS: VISUALIZANDO
CONTEÚDO DOS ELEMENTOS
Posicionamento + CSS: overflow
• Atributo overflow: visible
• O elemento desrespeita
as medidas indicadas
para que o conteúdo
seja totalmente visível
p
p
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
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
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
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
POSICIONAMENTO COM O CSS: CONTROLANDO QUEM
ESTÁ NA FRENTE
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
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
Posicionamento + CSS: z-index
• Atributo z-index: [valor]
POSICIONAMENTO COM O CSS: LIMITANDO O
TAMANHO DO CONTEÚDO
Posicionamento + CSS: max-width
• Atributo max-width: 700px
• Se a tela for menor
– Desenha menor
img img img
p
li
p
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
Posicionamento + CSS: min-width
• Atributo min-width: 700px
• Se a tela for maior
– Desenha maior
img img img
p
li
p
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
POSICIONAMENTO COM O CSS: MODIFICANDO A
FORMA DE APRESENTAÇÃO
Posicionamento + CSS: display
• Sem atributo display
• Apresenta elemento
como previsto
• Listas, por exemplo
ul
li
li
li
li
Posicionamento + CSS: display
• Sem atributo display: inline
• Apresenta elementos
em linha
• Por exemplo, listas
ul li li li li
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
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
POSICIONAMENTO NA PRÁTICA: TUTORIAL
Layout Base: Tutorial Básico
MENU TÍTULO
SEÇÃO 1
Layout Base: Tutorial Básico
MENU TÍTULO
SEÇÃO 1
Layout Base: Tutorial Avançado LOGO TÍTULO
MENU1
MENU2 CONTEÚDO ADS
RODAPÉ
Layout Base: Tutorial Avançado LOGO TÍTULO
MENU1
MENU2 CONTEÚDO ADS
RODAPÉ
POSICIONAMENTO EM APLICAÇÕES: TUTORIAL
Jogo da Velha
Jogo da Velha
Jogo da Velha
Jogo da Velha
Jogo da Velha
CONCLUSÕES
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!
Próxima Aula
• JavaScript...
–Para fazer sites realmente dinâmicos e responsivos...
– ...temos que alterar suas propriedades na máquina do cliente!
PERGUNTAS?
BOM DESCANSO A TODOS!