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

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

4 ESTILOS AVANÇADOS

5 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

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

7 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

8 Estilos Avançados Exemplos de Pseudo-Classes a:link { color: green; text-decoration: none; } a:hover { color: red; text-decoration: underline; }

9 Estilos Avançados Exemplos de Pseudo-Classes input:focus { background-color: yellow; } #menu:hover { background-color: blue; }

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

11 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

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

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

14 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

15 Estilos Avançados Ex.: opacity: 1.0

16 Estilos Avançados Ex.: opacity: 0.5

17 Estilos Avançados Queremos algo mais nessa linha!

18 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); }

19 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

20 DIVISÕES DE DOCUMENTO

21 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>

22 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

23 XHTML e o DIV Exemplo

24 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

25 XHTML e o DIV Exemplo

26 TAGS INTERNAS

27 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;

28 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

29 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>

30 POSICIONAMENTO COM O CSS: TIPOS DE POSICIONAMENTO

31 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

32 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

33 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 p li img

34 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

35 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

36 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

37 Posicionamento + CSS: position position: absolute Dentro de relative x Dentro de static div img div div div relative div img div static div img img em uma div absolute com top=0px e right=0px img em uma div absolute com top=0px e right=0px

38 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

39 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

40 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

41 POSICIONAMENTO COM O CSS: ELEMENTOS PRESOS ÀS LATERAIS

42 Posicionamento + CSS: float Atributo float: none Seguida a regra normal do posicionamento img p p p

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

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

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

46 Posicionamento + CSS: overflow Atributo overflow: visible O elemento desrespeita as medidas indicadas para que o conteúdo seja totalmente visível p p

47 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

48 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 p a definição original

49 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 p a definição original

50 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 p a definição original

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

52 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

53 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 p p img li

54 Posicionamento + CSS: z-index Atributo z-index: [valor]

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

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

57 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

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

59 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

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

61 Posicionamento + CSS: display Sem atributo display Apresenta elemento como previsto Listas, por exemplo li li li li ul

62 Posicionamento + CSS: display Sem atributo display: inline Apresenta elementos em linha Por exemplo, listas li li ul li li

63 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

64 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

65 POSICIONAMENTO NA PRÁTICA: TUTORIAL

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

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

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

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

70 POSICIONAMENTO EM APLICAÇÕES: TUTORIAL

71 Jogo da Velha

72 Jogo da Velha

73 Jogo da Velha

74 Jogo da Velha

75 Jogo da Velha

76 CONCLUSÕES

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

78 Próxima Aula JavaScript... Para fazer sites realmente dinâmicos e responsivos......temos que alterar suas propriedades na máquina do cliente!

79 PERGUNTAS?

80 BOM DESCANSO A TODOS!