Introdução ao CSS

599 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
599
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
25
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução ao CSS

  1. 1. Agradecimentos a prof. Dra. Renata Pontin de Mattos Fortes Introdução a CSS Willian Massami Watanabe wwatanabe@utfpr.edu.br 1Wednesday, December 5, 12
  2. 2. Sumário • Histórico • Definição • Por que usar CSS? • Vantagens • Sintaxe básica • Como inserir uma folha de estilo • Agrupando elementos • Algumas propriedades 2Wednesday, December 5, 12
  3. 3. Histórico • A especificação CSS-1 foi criada pela Microsoft (1996) • A W3C aprovou, formalizou e recomendou a especificação • 1998 surge o CSS-2, como extensão da CSS-1 e resolvendo algumas de suas limitações • CSS-3 está atualmente como release • http://www.css3.info/ 3Wednesday, December 5, 12
  4. 4. Definição • CSS - Cascading Style Sheets • Styles descrevem como os documentos devem ser apresentados • Styles são normalmente armazenados em Style Sheets • Múltiplas definições de estilo vão cascatear em um 4Wednesday, December 5, 12
  5. 5. Por que usar CSS? • HTML não tem um conjunto infinito de tags • HTML, por si só, não tem informações relacionada à apresentação • Um Browser (navegador) não tem idéia do que está representado em um documento HTML • A informação em um documento HTML pode não estar na forma em que se deseja apresentá-la; • Portanto, deve existir algo que, em adição ao documento HTML, forneça informações sobre a maneira que o mesmo deve ser apresentado ou processado; • Solução: CSS. 5Wednesday, December 5, 12
  6. 6. Vantagens • Separa o conteúdo da apresentação • Portanto, os autores de conteúdo não precisam se preocupar com a apresentação • Reuso de dados: o mesmo conteúdo pode ser visualizado de formas diferentes em vários contextos • Estilo customizado às preferências do usuário (acessibilidade): tamanho de impressão, cor, layout simplificado para “leitores” auditivos • Uma única folha de estilo pode definir e manter a consistência de uma coleção de documentos, por exemplo: caso um usuário queira alterar a cor de fundo de um site basta atualizar código fonte 6Wednesday, December 5, 12
  7. 7. Sintaxe básica seletor {propriedade: valor} body {color:black} p {font-family:"sans serif"} p {text-align:center;color:red} h1,h2,h3,h4,h5,h6 {color:green} 7Wednesday, December 5, 12
  8. 8. Sintaxe básica Comentários em CSS /* isto é um comentário e não será interpretado pelo navegador... */ body {color:black} 8Wednesday, December 5, 12
  9. 9. Sintaxe básica Exemplo 1 9Wednesday, December 5, 12
  10. 10. Sintaxe básica Exemplo 2 10Wednesday, December 5, 12
  11. 11. Sintaxe básica Exemplo 2 11Wednesday, December 5, 12
  12. 12. Como inserir uma folha de estilo • Existem três formas de inserção de folhas de estilo: • Folhas de estilo externas (External Style Sheet) • Folhas de estilo internas (Internal Style Sheet) • Folhas de estilo inline 12Wednesday, December 5, 12
  13. 13. Como inserir uma folha de estilo Folhas de estilo externas 13Wednesday, December 5, 12
  14. 14. Como inserir uma folha de estilo Folhas de estilo • Ideal para aplicar em várias páginas externas • Cada página deve linkar à página de estilo usando a tag <link> • A tag <link> deve vir no cabeçalho do arquivo .html <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 14Wednesday, December 5, 12
  15. 15. Como inserir uma folha de estilo Folhas de estilo externas • Para que a página default.html carregue as regras de CSS definidas no arquivo style.css, utiliza-se a seguinte referência: 15Wednesday, December 5, 12
  16. 16. Como inserir uma folha de estilo Folhas de estilo externas 16Wednesday, December 5, 12
  17. 17. Como inserir uma folha de estilo Folhas de estilo • Outras formas de realizar a declaração externas de folhas de estilo externas <head> <style type="text/css"> @import url("estilo.css"); </style> </head> <head> <style type="text/css"> @import "dojo/dojo/resources/dojo.css"; </style> </head> 17Wednesday, December 5, 12
  18. 18. Como inserir uma folha de estilo Folhas de estilo internas 18Wednesday, December 5, 12
  19. 19. Como inserir uma folha de estilo Folhas de estilo • Utilizado quando um documento internas tem um estilo único <head> <style type="text/css"> hr {color:sienna} p {margin-left:20px} body {background-image:url("images/back40.gif")} </style> </head> 19Wednesday, December 5, 12
  20. 20. Como inserir uma folha de estilo Folhas de estilo internas 20Wednesday, December 5, 12
  21. 21. Como inserir uma folha de estilo Folhas de estilo internas Folhas de estilo interna para sobrescrever a externa 21Wednesday, December 5, 12
  22. 22. Como inserir uma folha de estilo Folhas de estilo inline 22Wednesday, December 5, 12
  23. 23. Como inserir uma folha de estilo • Usado quando um estilo deve ser Folhas de estilo aplicado num único elemento; inline • Mistura o conteúdo com a apresentação; • O estilo é definido dentro do elemento: <p style="color:sienna;margin-left:20px">This is a paragraph.</p> 23Wednesday, December 5, 12
  24. 24. Como inserir uma folha de estilo • Se diferentes estilos forem definidos para um mesmo elemento, utilizando o mesmo SELETOR, prevalece o de maior prioridade → Cascading • Ordem crescente de prioridade (Cascading Order): 1. Definição do navegador (Browser) 2. Folhas de estilo externas 3. Folhas de estilo internas 4. Estilos inline 24Wednesday, December 5, 12
  25. 25. Como inserir uma folha de estilo Folhas de estilo Folhas de estilo externas internas <h3 style=“font-size:13pt”> Folhas de estilo ... inline </h3> 25Wednesday, December 5, 12
  26. 26. Como inserir uma folha de estilo • Como resultado do cascateamento dos estilos: color:red; →Declaração Externa text-align:right; →Declaração Interna font-size:30pt →Declaração Inline outras configurações →Browser 26Wednesday, December 5, 12
  27. 27. Agrupando elementos • Usando classes • Temos duas listas de links para diferentes tipos de uvas usadas na produção de vinho branco e de vinho tinto 27Wednesday, December 5, 12
  28. 28. Agrupando elementos • Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os demais links na página permaneçam na cor azul. 28Wednesday, December 5, 12
  29. 29. Agrupando elementos • Agora podemos definir propriedades específicas para links pertencentes as classes whitewine e redwine, respectivamente. 29Wednesday, December 5, 12
  30. 30. Agrupando elementos • Usando ID 30Wednesday, December 5, 12
  31. 31. Agrupando elementos • Usando ID 31Wednesday, December 5, 12
  32. 32. Agrupando elementos • Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id; • O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento. 32Wednesday, December 5, 12
  33. 33. Agrupando elementos • Exemplo utilizando o elemento <span> 33Wednesday, December 5, 12
  34. 34. Agrupando elementos • Obs: é claro que você pode usar id para estilizar o elemento <span>; contudo deverá usar uma única id para cada um os três elementos <span>. • Enquanto <span> é usado dentro de um elemento no nível de bloco, <div> é usado para agrupar um ou mais elementos no nível de bloco. 34Wednesday, December 5, 12
  35. 35. Agrupando elementos • Exemplo utilizando o elemento <div> 35Wednesday, December 5, 12
  36. 36. Agrupando elementos • Exemplo utilizando o elemento <div> 36Wednesday, December 5, 12
  37. 37. Algumas propriedades • background-color 37Wednesday, December 5, 12
  38. 38. Algumas propriedades • background-image 38Wednesday, December 5, 12
  39. 39. Algumas propriedades • background-image mais dicas http://maujor.com/tutorial/backtut.php 39Wednesday, December 5, 12
  40. 40. Algumas propriedades • background-image mais dicas • background-repeat • background-attachment • background position http://maujor.com/tutorial/backtut.php 40Wednesday, December 5, 12
  41. 41. Algumas propriedades • line-height 41Wednesday, December 5, 12
  42. 42. Algumas propriedades • text-transform 42Wednesday, December 5, 12
  43. 43. Algumas propriedades • text-decoration 43Wednesday, December 5, 12
  44. 44. Algumas propriedades • font-style 44Wednesday, December 5, 12
  45. 45. Onde procurar ajuda • www.w3schools.com • www.pt-br.html.net/tutorials/css/ • www.maujor.com/tutorial/ • www.csszengarden.com/ 45Wednesday, December 5, 12
  46. 46. Exercício • Fazer uma página web que apresente o seguinte conteúdo: 46Wednesday, December 5, 12

×