Curso Desenvolvimento WEB com PHP - CSS

3,150 views

Published on

Material utilizado durante o curso de Desenvolvimento WEB com PHP, realizado na UNIPAR campus Paranavaí em março de 2010.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,150
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
168
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Curso Desenvolvimento WEB com PHP - CSS

  1. 1. <style type=“text/css”><br />Desenvolvimento WEB com PHP<br />
  2. 2. CSS<br />
  3. 3. CascadeStyle Sheet<br /><ul><li>Lista de estilo em cascata
  4. 4. Lista de estilos?
  5. 5. Simplificando...
  6. 6. Conjunto de regras que definem como os elementos da página devem ser exibidos</li></li></ul><li>Entendendo<br /><ul><li>Uma das recomendações do W3C
  7. 7. Separa a apresentação (layout) da estrutura
  8. 8. Permite controle centralizado do layout
  9. 9. Edição de páginas leves (cache)
  10. 10. Fácil manutenção de grandes sites (projetos)
  11. 11. Portabilidade</li></li></ul><li>Declarando<br /><style type="text/css"><br /> ... trecho do código ...<br /></style><br /><style type="text/css"><br /><!--<br /> ... trecho do código ...<br />--><br /></style><br />
  12. 12. Estrutura do código (regra)<br />Declaração<br />seletor {<br /> propriedade : valor;<br />}<br />Valor da propriedade<br /> aplicada - EX: #FFFFFF<br />Em qual TAG será aplicada <br />a propriedade - EX: BODY<br />Propriedade a ser aplicada<br />EX: BACKGROUND<br />
  13. 13. Métodos de atribuição dos estilos<br />Método IN-LINE (atributo style)<br /><html><br /><head><br /><title> Exemplo </title><br /></head><br /><body style="background-color:#FF0000"><br /><p> Página com fundo vermelho </p><br /></body><br /></html><br />
  14. 14. Métodos de atribuição dos estilos<br />Método EXTERNO (link para folhas de estilo)<br /><head><br /> <link rel=stylesheethref="estilo.css" type="text/css"><br /></head><br />body {<br /> background-color: #FF0000;<br />}<br />
  15. 15. Comentários<br />Método EXTERNO (link para folhas de estilo)<br />...<br /> /* este é um comentário em css */<br /> div {<br />background-color: #FF0000;<br /> }<br />...<br />
  16. 16. Propriedades<br /><ul><li>BACKGROUND
  17. 17. background-color (hexa, nome)
  18. 18. background-image (url)
  19. 19. background-repeat (no-repeat)
  20. 20. background-attachment (fixed, scroll)
  21. 21. background-position (nome, valor)
  22. 22. background</li></li></ul><li>Propriedades<br /><ul><li>FONT
  23. 23. font-family (arial, verdana, sans-serif)
  24. 24. font-style (italic)
  25. 25. font-weight (bold)
  26. 26. font-size (px, pt, %)</li></li></ul><li>Propriedades<br /><ul><li>TEXT
  27. 27. text-indent (recuo de primeira linha)
  28. 28. text-align (justify, center)
  29. 29. text-decoration (underline)</li></li></ul><li>Seletores<br />Tag<br />Classe<br />ID<br />Universal<br />tag{...}<br />tag.classe {...} ou .classe {...<br />#id {...}<br />* {...}<br />
  30. 30. DIV (elemento HTML)<br />Cria uma divisão lógica no documento<br />...<br /> <div><br /> conteúdo<br /> </div><br />...<br />
  31. 31. Composição dos elementos<br />MARGEM (margin)<br />BORDA (border)<br />PREENCHIMENTO (padding)<br />ÁREA DO CONTEÚDO<br />
  32. 32. Propriedades<br /><ul><li>MARGEM / BORDA / ESPAÇAMENTO
  33. 33. margin (px,%)
  34. 34. border (solid, dotted)
  35. 35. padding (px)</li></li></ul><li>Propriedades<br />position : absolute;<br />top<br />left<br />
  36. 36. Centralizando um elemento<br />top : 50%; left : 50%;<br />top<br />left<br />
  37. 37. Centralizando um elemento<br />margin-top : -50%(obj); margin-left : -50%(obj);<br />top<br />left<br />
  38. 38. Manipulando imagens<br /><ul><li>border
  39. 39. width
  40. 40. height</li></li></ul><li>Pseudo-classe<br />link (links não visitados)<br />visited (links visitados)<br />hover (sobre o link)<br />...<br /> a:link {<br />background-color: #ff0000;<br /> }<br />...<br />
  41. 41. Botões<br /><ul><li>text-decoration
  42. 42. display
  43. 43. line-height
  44. 44. cursor</li></li></ul><li>Estilizando<br /><ul><li>tabelas
  45. 45. formulários
  46. 46. listas (barra de menus)</li></li></ul><li>Flutuação<br />Modelo de posicionamento (absoluto)<br />Valores comuns:<br /> - left<br /> - right<br />...<br />float : left;<br />...<br />
  47. 47. Flutuação<br />Caixas sem flutuação<br />001<br />002<br />003<br />
  48. 48. Flutuação<br />Caixa 001 com flutuação a direita (right)<br />002<br />001<br />003<br />
  49. 49. Flutuação<br />Caixas com flutuação a esquerda (left) menu<br />001<br />003<br />002<br />
  50. 50. Layout<br />Layout...<br />
  51. 51. Dúvidas? Sugestões?will_magalhaes@yahoo.com.br<br />
  52. 52. Bibliografia<br /><ul><li>Livro
  53. 53. Criando páginas web com CSS
  54. 54. Sites
  55. 55. http://www.w3schools.com
  56. 56. http://www.html.net
  57. 57. http://www.apostilando.com
  58. 58. http://www.tableless.com.br</li></ul>alexandre.chokito@gmail.com will_magalhaes@yahoo.com.br<br />
  59. 59. Slides disponíveis em:www.slideshare.com/wmagalhaes<br />
  60. 60. JBRIGADO!<br /></style><br />

×