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

Transcrição

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

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!

3 Material de Estudo Material Notas de Aula Aresentação Material Didático - Acesso ao Material htt:// (Aula 5) htt:// (Aula 5) Google + CSS +tableless +tutorial Web Sites htt://

4 ESTILOS AVANÇADOS

5 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

6 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; }

7 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

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

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

10 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; }

11 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

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

13 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)

14 POSICIONAMENTO COM O CSS: MOTIVAÇÃO

15 Exemlo de Mudança de Layout

16 Exemlo de Mudança de Layout

17 POSICIONAMENTO COM O CSS: TIPOS DE POSICIONAMENTO

18 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

19 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

20 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

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

22 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

23 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

24 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

25 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

26 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

27 POSICIONAMENTO COM O CSS: ELEMENTOS PRESOS ÀS LATERAIS

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

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

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

31 POSICIONAMENTO COM O CSS: VISUALIZANDO CONTEÚDO DOS ELEMENTOS

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

33 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

34 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

35 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

36 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

37 POSICIONAMENTO COM O CSS: CONTROLANDO QUEM ESTÁ NA FRENTE

38 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

39 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

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

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

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

43 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

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

45 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

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

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

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

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

50 POSICIONAMENTO NA PRÁTICA: TUTORIAL

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

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

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

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

55 Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ

56 Layout Base: Tutorial Avançado LOGO TÍTULO MENU1 MENU2 CONTEÚDO ADS RODAPÉ

57 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

58 POSICIONAMENTO EM APLICAÇÕES: TUTORIAL

59 Jogo da Velha

60 Jogo da Velha

61 Jogo da Velha

62 Jogo da Velha

63 Jogo da Velha

64 CONCLUSÕES

65 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!

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

67 PERGUNTAS?

68 BOM DESCANSO A TODOS!