PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-2

Objetivos Aresentar seudo-elementos e seudo-classes do CSS Aresentar o CSS como ferramenta de layout de ágina Caacitar ara o osicionamento de elementos com o uso de CSS TRABALHO A ONLINE!

Material de Estudo Material Notas de Aula Aresentação Material Didático - Acesso ao Material htt://www.caetano.eng.br/ (Aula 5) htt://www.caetano.eng.br/ (Aula 5) Google + CSS +tableless +tutorial Web Sites htt://www.w3.org/

ESTILOS AVANÇADOS

Estilos Avançados Alguns tios de estilos não foram discutidos Estilos associados a ações e à ordem dos elementos Estilos de osicionamento Iremos estudá-los nesta aula

Pseudo-Classes Formas de definir estilos ara estados dos elementos Como faço ara definir estilo ara um elemento que ganhou foco? Como osso definir o estilo ara um elemento cujo mouse esteja em cima? seletor:estado { roriedade: valor; }

Pseudo-Classes Pseudo-Classes mais comuns :link Links não visitados :visited Links já visitados :hover Mouse sobre o elemento :active Elemento ativo (botão ressionado) :focus Elemento com foco ativo

Pseudo-Classes Exemlos de Pseudo-Classes a:link { color: green; text-decoration: none; } a:hover { color: red; text-decoration: underline; }

Pseudo-Classes Exemlos de Pseudo-Classes inut:focus { background-color: yellow; } #menu:hover { background-color: blue; }

Pseudo-Elementos Definir estilos ara elementos que aareçam em determinada ordem (osição) E se eu quiser definir um estilo ara o rimeiro elemento de uma lista? Ou definir algo diferente ara o último? seletor:descritor { roriedade: valor; }

Pseudo-Elementos 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

Pseudo-Elementos Exemlos :first-letter { font-size: 1.2em; } :first-line { font-variant: small-cas; } li.menu:last-child { border-right: none; }

Pseudo-Elementos Exemlos tr:nth-child(2n+1) td { background-color: white; } (A artir da osição 1, de dois em dois) tr:nth-child(2n+2) td { background-color: gray; } (A artir da osição 2, de dois em dois)

POSICIONAMENTO COM O CSS: MOTIVAÇÃO

Exemlo de Mudança de Layout

POSICIONAMENTO COM O CSS: TIPOS DE POSICIONAMENTO

Posicionamento + CSS: osition Atributo osition: static Base: outros elementos Posicionamento adrão Elementos equenos Lado a lado Elementos grandes Um em baixo do outro img img img li

Posicionamento + CSS: osition Atributo osition: static Esaçamento margin Centralizar margin-left: auto; margin-right: auto; Tamanho Conteúdo, adding, border, width, height img img img li

Posicionamento + CSS: osition Atributo osition: absolute Base: janela Rola com documento Esaçamento margin, left, right, to bottom Tamanho Conteúdo, adding, border, width, height li img

Posicionamento + CSS: osition Atributo osition: relative Elemento relativo... Posiciona-se como static Para que serve? Muda comortamento dos abolutes internos! img img img li

Posicionamento + CSS: osition osition: absolute (dentro de relative) Base: elemento relativo Muda a referência! margin, left, right, to bottom <div id= d1 ></div> <div id= d2 > <div id= d3 > </div> div #d1 div #d2 relative #d3 absolute com to=0x e right=0x div #d3

Posicionamento + CSS: osition osition: absolute to 0x; right: 0x Dentro de relative x Dentro de static div div div div relative div div static div div absolute com to=0x e right=0x div absolute com to=0x e right=0x

Posicionamento + CSS: osition Atributo osition: fixed Base: janela (navegador) Esaçamento margin, left, right, to bottom Tamanho Conteúdo, adding, border, width, height img img img img li

POSICIONAMENTO COM O CSS: ELEMENTOS PRESOS ÀS LATERAIS

Posicionamento + CSS: float Atributo float: none Seguida a regra normal do osicionamento img

Posicionamento + CSS: float Atributo float: left Elmento gruda na lateral... E os outros elementos escorrem à sua volta img

Posicionamento + CSS: float Atributo float: right Elmento gruda na lateral... E os outros elementos escorrem à sua volta img

POSICIONAMENTO COM O CSS: VISUALIZANDO CONTEÚDO DOS ELEMENTOS

Posicionamento + CSS: overflow Atributo overflow: visible O elemento desreseita as medidas indicadas ara que o conteúdo seja totalmente visível

Posicionamento + CSS: overflow Atributo overflow: visible O elemento desreseita as medidas indicadas ara que o conteúdo seja totalmente visível Aqui há um texto com overflow: visible ativado, ermitindo todo o texto e desreseitando a definição original

Posicionamento + CSS: overflow Atributo overflow: hidden O elemento reseita as medidas indicadas, ainda que isso signifique cortar o conteúdo Aqui há um texto com overflow: visible ativado, ermitindo todo o texto e desreseitando a definição original

Posicionamento + CSS: overflow Atributo overflow: scrollbar O elemento reseita as medidas indicadas, mas semre serão mostradas barras de rolagem Aqui há um texto com overflow: visible ativado, ermitindo todo o texto e desreseitando a definição original

Posicionamento + CSS: overflow Atributo overflow: auto O elemento reseita 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, ermitindo todo o texto e desreseitando a definição original

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 deois no XHTML, fica or cima img img img img li

Posicionamento + CSS: z-index Atributo z-index: [valor] Controla o nível do elemento Padrão: o que vem deois no XHTML, fica or cima Mudando o z-index... img img img img li

Posicionamento + CSS: z-index Atributo z-index: [valor] Z X Y

POSICIONAMENTO COM O CSS: LIMITANDO O TAMANHO DO CONTEÚDO

Posicionamento + CSS: max-width Atributo max-width: 700x Se a tela for menor Desenha menor img img img li

Posicionamento + CSS: max-width Atributo max-width: 700x Se a tela for menor Desenha menor Se a tela for maior Limita o tamanho! img img img li

Posicionamento + CSS: min-width Atributo min-width: 700x Se a tela for maior Desenha maior img img img li

Posicionamento + CSS: min-width Atributo min-width: 700x Se a tela for maior Desenha maior Se a tela for menor Põe barra de rolagem! img img img li

POSICIONAMENTO COM O CSS: MODIFICANDO A FORMA DE APRESENTAÇÃO

Posicionamento + CSS: dislay Sem atributo dislay: block Aresenta elemento como revisto Listas, or exemlo li li li li ul

Posicionamento + CSS: dislay Sem atributo dislay: inline Aresenta elementos em linha Por exemlo, listas li li ul li li

Posicionamento + CSS: dislay Sem atributo dislay: none Some com elementos li li ul li li

POSICIONAMENTO NA PRÁTICA: TUTORIAL

Entendendo o osicionamento... Acomanhe o rofessor com o código os ara entender o mecanismo...

Layout Base: Tutorial Básico MENU TÍTULO SEÇÃO 1

Layout Base: Tutorial Básico Construa com o rofessor ara comreender o rocesso...

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É No código do tutorial, dentro da asta EXTRA, você encontrará esse site, incluindo um asso a asso, além de um outro site com osicionamento

POSICIONAMENTO EM APLICAÇÕES: TUTORIAL

Jogo da Velha

CONCLUSÕES

Resumo CSS ermite total liberdade de formatação de XHTML O uso deende da correta comreensão da lógica do osicionamento CSS......e de uma adequada análise révia do layout desejado TAREFA Trabalho A...! Já dá ra fazer!

Próxima Aula JavaScrit... Para fazer sites realmente dinâmicos e resonsivos......temos que alterar suas roriedades na máquina do cliente!

PERGUNTAS?

BOM DESCANSO A TODOS!