Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sistemas para internet Faccamp - aula7

212 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Sistemas para internet Faccamp - aula7

  1. 1. SISTEMAS PARA INTERNET I AULA – 7 rbonacin@yahoo.com.br rodrigo.bonacin@gmail.com 1
  2. 2. PLANO – AULA 7  CSS - Cascading Style Sheets  O que CSS faz  Como CSS Trabalha  Regras  Propriedades e Valores  Atividade Prática 6 2
  3. 3. O QUE CSS FAZ E COMO TRABALHA 3  Uma maneira de compreender CSS  Pense que todo elemento html tem uma “caixa” invisível em volta  O CSS coloca “estilos” e controla estas “caixas”  Em HTML  Existem elementos de blocos como  <h1>-<h6>, <p> , <div> ..  Existem elementos de linha  <b>, <i>, <img>, <em>, <span> …
  4. 4. O QUE CSS FAZ E COMO TRABALHA 4  Lembra no nosso primeira página de HTML  Que era apenas um texto
  5. 5. O QUE CSS FAZ E COMO TRABALHA 5  Vamos inserir um CSS simples
  6. 6. O QUE CSS FAZ E COMO TRABALHA 6  Vamos inserir um CSS simples Na tag <head>
  7. 7. O QUE CSS FAZ E COMO TRABALHA 7  Vamos inserir um CSS simples Incluir uma tag <link>
  8. 8. O QUE CSS FAZ E COMO TRABALHA 8  Vamos inserir um CSS simples Nome do arquivo CSS associado
  9. 9. O QUE CSS FAZ E COMO TRABALHA 9  Vamos inserir um CSS simples Tipo do arquivo “text/css”
  10. 10. O QUE CSS FAZ E COMO TRABALHA 10  Vamos inserir um CSS simples Especifica o tipo de relacionamento entre a pagina e o arquivo ligado ... No caso de CSS sempre stylesheet
  11. 11. O QUE CSS FAZ E COMO TRABALHA 11  Um CSS simples
  12. 12. O QUE CSS FAZ E COMO TRABALHA 12  Um CSS simples Este é o SELETOR ele fiz a quem a definição aplica ... Neste caso as tags html <p>
  13. 13. O QUE CSS FAZ E COMO TRABALHA 13  Um CSS simples Esta é a DECLARAÇÃO de estilo, neste caso estou colocando: Borda sólida de 1 pixel e vermelha em <p>
  14. 14. O QUE CSS FAZ E COMO TRABALHA 14  Um CSS simples
  15. 15. O QUE CSS FAZ E COMO TRABALHA 15  Um CSS simples Note que todas as tags <p> ficaram com uma borda vermelha (como estivessem em caixas)
  16. 16. O QUE CSS FAZ E COMO TRABALHA 16  Colocando uma borda verde do título maior e azul nos menores
  17. 17. O QUE CSS FAZ E COMO TRABALHA 17  Colocando uma borda verde do título maior e azul nos menores Tamanho 2px, tracejada e verde
  18. 18. O QUE CSS FAZ E COMO TRABALHA 18  Colocando uma borda verde do título maior e azul nos menores Tamanho 3px, pontilhada e azul
  19. 19. O QUE CSS FAZ E COMO TRABALHA 19  Um CSS simples
  20. 20. O QUE CSS FAZ E COMO TRABALHA 20  Um CSS simples Estilo do <h1>
  21. 21. O QUE CSS FAZ E COMO TRABALHA 21  Um CSS simples Estilo do <h2> Estilo do <h2>
  22. 22. O QUE CSS FAZ E COMO TRABALHA 22  O CSS pode ir no próprio arquivo HTML
  23. 23. O QUE CSS FAZ E COMO TRABALHA 23  O CSS pode ir no próprio arquivo HTML Para todo o corpo da página
  24. 24. O QUE CSS FAZ E COMO TRABALHA 24  O CSS pode ir no próprio arquivo HTML Vai usar fonte da família airal
  25. 25. O QUE CSS FAZ E COMO TRABALHA 25  O CSS pode ir no próprio arquivo HTML O fundo vai ser da cor que tem: r = 185 g = 179 b = 175
  26. 26. O QUE CSS FAZ E COMO TRABALHA 26  O CSS pode ir no próprio arquivo HTML Para h1 ... usar cor branca
  27. 27. O QUE CSS FAZ E COMO TRABALHA 27  O CSS pode ir no próprio arquivo HTML
  28. 28. REGRAS DE SELETORES HTML 28  Tipos de seletores  Seletor Universal * {}  Aplica a todos os elementos da página  Ex: * {font-family: Arial, Verdana, sans-serif;}
  29. 29. REGRAS DE SELETORES HTML 29  Tipos de seletores  Seletor Universal
  30. 30. REGRAS DE SELETORES HTML 30  Tipos de seletores  Seletor Universal
  31. 31. REGRAS DE SELETORES HTML 31  Tipos de seletores  Seletor de Tipo h1 {}, h2 {}, p {}, i{}, b{} ...  Aplica a um tipo de elemento/tag  Ex: h1 {font-family: "Courier New", monospace;} i {color: green;}
  32. 32. REGRAS DE SELETORES HTML 32  Tipos de seletores  Seletor de Tipo
  33. 33. REGRAS DE SELETORES HTML 33  Tipos de seletores  Seletor de Tipo
  34. 34. REGRAS DE SELETORES HTML 34  Tipos de seletores  Seletor de Tipo
  35. 35. REGRAS DE SELETORES HTML 35  Tipos de seletores  Seletor de Classe .nomedaclasse {} nomedotipo.nomedaclasse {}  Aplica a uma classe de acordo com o atribuit class=“” no html  Ex: .page {border: 1px solid #665544;} p.page {border: 2px solid #665544;}
  36. 36. REGRAS DE SELETORES HTML 36  Tipos de seletores  Seletor de Classe .nomedaclasse {} nomedotipo.nomedaclasse {}  Aplica a uma classe de acordo com o atribuit class=“” no html  Ex: .page {border: 1px solid #665544;} p.page {border: 2px solid #665544;} Para todas as tags html com o atributo class=“page”
  37. 37. REGRAS DE SELETORES HTML 37  Tipos de seletores  Seletor de Classe .nomedaclasse {} nomedotipo.nomedaclasse {}  Aplica a uma classe de acordo com o atribuit class=“” no html  Ex: .page {border: 1px solid #665544;} p.page {border: 2px solid #665544;} Para todas as tags html do tipo <p> com o atributo class=“page”
  38. 38. REGRAS DE SELETORES HTML 38  Tipos de seletores  Seletor de Classe
  39. 39. REGRAS DE SELETORES HTML 39  Tipos de seletores  Seletor de Classe
  40. 40. REGRAS DE SELETORES HTML 40  Tipos de seletores  Seletor de Classe
  41. 41. REGRAS DE SELETORES HTML 41  Tipos de seletores  Seletor de ID #identificadorcunico{}  Aplica ao elemento html com um determinado ID que deve ser único  Ex: p#Intro {font-size: 100%;}
  42. 42. REGRAS DE SELETORES HTML 42  Tipos de seletores Seletor de ID
  43. 43. REGRAS DE SELETORES HTML 43  Tipos de seletores Seletor de ID
  44. 44. REGRAS DE SELETORES HTML 44  Tipos de seletores Seletor de ID
  45. 45. REGRAS DE SELETORES HTML 45  Tipos de seletores  Seletor de filho elemento1>elemento2{}  Aplica somente as tags do tipo 2 que estão dentro diretamente de tags do tipo 1  Ex: li>a {color: green;}
  46. 46. REGRAS DE SELETORES HTML 46  Tipos de seletores  Seletor de filho
  47. 47. REGRAS DE SELETORES HTML 47  Tipos de seletores  Seletor de filho
  48. 48. REGRAS DE SELETORES HTML 48  Tipos de seletores  Seletor de filho
  49. 49. REGRAS DE SELETORES HTML 49  Tipos de seletores  Seletor de descendente elemento1 elemento2{}  Aplica somente as tags do tipo 2 que estão dentro diretamente ou indiretamente de tags do tipo 1  Ex: li a {color: green;}
  50. 50. REGRAS DE SELETORES HTML 50  Tipos de seletores  Seletor de descendente
  51. 51. REGRAS DE SELETORES HTML 51  Tipos de seletores  Seletor de descendente
  52. 52. REGRAS DE SELETORES HTML 52  Tipos de seletores  Seletor de descendente
  53. 53. REGRAS DE SELETORES HTML 53  Tipos de seletores  Seletor de próximo adjacente/irmão elemento1+elemento2{}  Aplica somente as tags do tipo 2 que vem após as tags do tipo 1 (e não todas)  Ex: h1+p {color: red;}
  54. 54. REGRAS DE SELETORES HTML 54  Tipos de seletores  Seletor de próximo adjacente/irmão
  55. 55. REGRAS DE SELETORES HTML 55  Tipos de seletores  Seletor de próximo adjacente/irmão
  56. 56. REGRAS DE SELETORES HTML 56  Tipos de seletores  Seletor de adjacente/irmão (anterior e próximo) elemento1~elemento2{}  Aplica somente as tags do tipo 2 que são “irmãs” das tags do tipo 1  Ex: h1~p {color: red;}
  57. 57. REGRAS DE SELETORES HTML 57  Tipos de seletores  Seletor de adjacente/irmão (anterior e próximo)
  58. 58. REGRAS DE SELETORES HTML 58  Tipos de seletores  Seletor de adjacente/irmão (anterior e próximo)
  59. 59. PRIORIDADES E HERANÇA 59  Quanto temos duas regras iguais  Vale a última  Exemplo: i {color: green;} i {color: red;}
  60. 60. PRIORIDADES E HERANÇA 60  Quanto temos duas regras iguais  Vale a última  Exemplo: i {color: green;} i {color: red;} Fica valendo o verde
  61. 61. PRIORIDADES E HERANÇA 61  Quanto temos duas regras iguais
  62. 62. PRIORIDADES E HERANÇA 62  Quanto temos duas regras iguais
  63. 63. PRIORIDADES E HERANÇA 63  Quando tem duas regras sobre o mesmo elemento  Vale a mais específica  Da caixa mais interna  Da que especifica um subconjunto ou um elemento em particular  Exemplo: p {font-size: 80%;} p#intro {font-size: 120%;}
  64. 64. PRIORIDADES E HERANÇA 64  Quando tem duas regras sobre o mesmo elemento  Vale a mais específica  Da caixa mais interna  Da que especifica um subconjunto ou um elemento em particular  Exemplo: p {font-size: 80%;} p#Intro {font-size: 120%;} Vale esta pois especifica um único elemento
  65. 65. PRIORIDADES E HERANÇA 65  Quando tem duas regras sobre o mesmo elemento O de baixo é mais específico que o de cima ... pois é aplicado a um subconjunto
  66. 66. PRIORIDADES E HERANÇA 66  Quando tem duas regras sobre o mesmo elemento O de baixo é mais específico que o de cima ... pois é aplicado a um subconjunto
  67. 67. PRIORIDADES E HERANÇA 67  Quando tem duas regras sobre o mesmo elemento
  68. 68. PRIORIDADES E HERANÇA 68  Quando tem duas regras sobre o mesmo elemento
  69. 69. PRIORIDADES E HERANÇA 69  Os elementos mais internos “herdam a propriedade do mais externo”  Ele pode sobrescrever ou manter o valor mais externo  Ex: body { font-family: Arial, Verdana, sans-serif; color: #665544; padding: 10px;}
  70. 70. PRIORIDADES E HERANÇA 70  Os elementos mais internos “herdam a propriedade do mais externo”  Ele pode sobrescrever ou manter o valor mais externo  Ex: body { font-family: Arial, Verdana, sans-serif; color: #665544; padding: 10px;} Todas tags terão estas propriedades a menos que as sobreescreva
  71. 71. PRIORIDADES E HERANÇA 71  Os elementos mais internos “herdam a propriedade do mais externo”
  72. 72. PRIORIDADES E HERANÇA 72  Os elementos mais internos “herdam a propriedade do mais externo”
  73. 73. PRIORIDADES E HERANÇA 73  “herdam a propriedade do mais externo”
  74. 74. ATIVIDADES PRÁTICAS EM SALA EDP 6  Fazer em até três pessoas  De preferência duplas  A média das práticas dará a nota o EDP  Ou seja 25%  A prática deve ser entregue durante a aula 74
  75. 75. ATIVIDADES PRÁTICAS EM SALA EDP 6 75

×