Sistemas para internet Faccamp - aula7

202 visualizações

Publicada em

Publicada em: Educação
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
202
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

×