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!