SISTEMAS PARA INTERNET I
AULA – 7
rbonacin@yahoo.com.br
rodrigo.bonacin@gmail.com
1
PLANO – AULA 7
 CSS - Cascading Style Sheets
 O que CSS faz
 Como CSS Trabalha
 Regras
 Propriedades e Valores
 Ativ...
O QUE CSS FAZ E COMO TRABALHA
3
 Uma maneira de compreender CSS
 Pense que todo elemento html tem uma “caixa”
invisível ...
O QUE CSS FAZ E COMO TRABALHA
4
 Lembra no nosso primeira página de HTML
 Que era apenas um texto
O QUE CSS FAZ E COMO TRABALHA
5
 Vamos inserir um CSS simples
O QUE CSS FAZ E COMO TRABALHA
6
 Vamos inserir um CSS simples
Na tag <head>
O QUE CSS FAZ E COMO TRABALHA
7
 Vamos inserir um CSS simples
Incluir uma tag <link>
O QUE CSS FAZ E COMO TRABALHA
8
 Vamos inserir um CSS simples
Nome do arquivo CSS
associado
O QUE CSS FAZ E COMO TRABALHA
9
 Vamos inserir um CSS simples
Tipo do arquivo
“text/css”
O QUE CSS FAZ E COMO TRABALHA
10
 Vamos inserir um CSS simples
Especifica o tipo de
relacionamento entre a
pagina e o arq...
O QUE CSS FAZ E COMO TRABALHA
11
 Um CSS simples
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
tag...
O QUE CSS FAZ E COMO TRABALHA
13
 Um CSS simples
Esta é a DECLARAÇÃO de estilo, neste
caso estou colocando:
Borda sólida ...
O QUE CSS FAZ E COMO TRABALHA
14
 Um CSS simples
O QUE CSS FAZ E COMO TRABALHA
15
 Um CSS simples
Note que todas as tags <p> ficaram com
uma borda vermelha (como estivess...
O QUE CSS FAZ E COMO TRABALHA
16
 Colocando uma borda verde do título maior e
azul nos menores
O QUE CSS FAZ E COMO TRABALHA
17
 Colocando uma borda verde do título maior e
azul nos menores
Tamanho 2px, tracejada e v...
O QUE CSS FAZ E COMO TRABALHA
18
 Colocando uma borda verde do título maior e
azul nos menores
Tamanho 3px, pontilhada e ...
O QUE CSS FAZ E COMO TRABALHA
19
 Um CSS simples
O QUE CSS FAZ E COMO TRABALHA
20
 Um CSS simples
Estilo do <h1>
O QUE CSS FAZ E COMO TRABALHA
21
 Um CSS simples
Estilo do <h2>
Estilo do <h2>
O QUE CSS FAZ E COMO TRABALHA
22
 O CSS pode ir no próprio arquivo HTML
O QUE CSS FAZ E COMO TRABALHA
23
 O CSS pode ir no próprio arquivo HTML
Para todo o corpo
da página
O QUE CSS FAZ E COMO TRABALHA
24
 O CSS pode ir no próprio arquivo HTML
Vai usar fonte da
família airal
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...
O QUE CSS FAZ E COMO TRABALHA
26
 O CSS pode ir no próprio arquivo HTML
Para h1 ... usar cor
branca
O QUE CSS FAZ E COMO TRABALHA
27
 O CSS pode ir no próprio arquivo HTML
REGRAS DE SELETORES HTML
28
 Tipos de seletores
 Seletor Universal
* {}
 Aplica a todos os elementos da página
 Ex:
* ...
REGRAS DE SELETORES HTML
29
 Tipos de seletores
 Seletor Universal
REGRAS DE SELETORES HTML
30
 Tipos de seletores
 Seletor Universal
REGRAS DE SELETORES HTML
31
 Tipos de seletores
 Seletor de Tipo
h1 {}, h2 {}, p {}, i{}, b{} ...
 Aplica a um tipo de ...
REGRAS DE SELETORES HTML
32
 Tipos de seletores
 Seletor de Tipo
REGRAS DE SELETORES HTML
33
 Tipos de seletores
 Seletor de Tipo
REGRAS DE SELETORES HTML
34
 Tipos de seletores
 Seletor de Tipo
REGRAS DE SELETORES HTML
35
 Tipos de seletores
 Seletor de Classe
.nomedaclasse {}
nomedotipo.nomedaclasse {}
 Aplica ...
REGRAS DE SELETORES HTML
36
 Tipos de seletores
 Seletor de Classe
.nomedaclasse {}
nomedotipo.nomedaclasse {}
 Aplica ...
REGRAS DE SELETORES HTML
37
 Tipos de seletores
 Seletor de Classe
.nomedaclasse {}
nomedotipo.nomedaclasse {}
 Aplica ...
REGRAS DE SELETORES HTML
38
 Tipos de seletores
 Seletor de Classe
REGRAS DE SELETORES HTML
39
 Tipos de seletores
 Seletor de Classe
REGRAS DE SELETORES HTML
40
 Tipos de seletores
 Seletor de Classe
REGRAS DE SELETORES HTML
41
 Tipos de seletores
 Seletor de ID
#identificadorcunico{}
 Aplica ao elemento html com um d...
REGRAS DE SELETORES HTML
42
 Tipos de seletores
Seletor de ID
REGRAS DE SELETORES HTML
43
 Tipos de seletores
Seletor de ID
REGRAS DE SELETORES HTML
44
 Tipos de seletores
Seletor de ID
REGRAS DE SELETORES HTML
45
 Tipos de seletores
 Seletor de filho
elemento1>elemento2{}
 Aplica somente as tags do tipo...
REGRAS DE SELETORES HTML
46
 Tipos de seletores
 Seletor de filho
REGRAS DE SELETORES HTML
47
 Tipos de seletores
 Seletor de filho
REGRAS DE SELETORES HTML
48
 Tipos de seletores
 Seletor de filho
REGRAS DE SELETORES HTML
49
 Tipos de seletores
 Seletor de descendente
elemento1 elemento2{}
 Aplica somente as tags d...
REGRAS DE SELETORES HTML
50
 Tipos de seletores
 Seletor de descendente
REGRAS DE SELETORES HTML
51
 Tipos de seletores
 Seletor de descendente
REGRAS DE SELETORES HTML
52
 Tipos de seletores
 Seletor de descendente
REGRAS DE SELETORES HTML
53
 Tipos de seletores
 Seletor de próximo adjacente/irmão
elemento1+elemento2{}
 Aplica somen...
REGRAS DE SELETORES HTML
54
 Tipos de seletores
 Seletor de próximo adjacente/irmão
REGRAS DE SELETORES HTML
55
 Tipos de seletores
 Seletor de próximo adjacente/irmão
REGRAS DE SELETORES HTML
56
 Tipos de seletores
 Seletor de adjacente/irmão (anterior e próximo)
elemento1~elemento2{}
...
REGRAS DE SELETORES HTML
57
 Tipos de seletores
 Seletor de adjacente/irmão (anterior e próximo)
REGRAS DE SELETORES HTML
58
 Tipos de seletores
 Seletor de adjacente/irmão (anterior e próximo)
PRIORIDADES E HERANÇA
59
 Quanto temos duas regras iguais
 Vale a última
 Exemplo:
i {color: green;}
i {color: red;}
PRIORIDADES E HERANÇA
60
 Quanto temos duas regras iguais
 Vale a última
 Exemplo:
i {color: green;}
i {color: red;}
Fi...
PRIORIDADES E HERANÇA
61
 Quanto temos duas regras iguais
PRIORIDADES E HERANÇA
62
 Quanto temos duas regras iguais
PRIORIDADES E HERANÇA
63
 Quando tem duas regras sobre o mesmo
elemento
 Vale a mais específica
 Da caixa mais interna
...
PRIORIDADES E HERANÇA
64
 Quando tem duas regras sobre o mesmo
elemento
 Vale a mais específica
 Da caixa mais interna
...
PRIORIDADES E HERANÇA
65
 Quando tem duas regras sobre o mesmo
elemento
O de baixo é mais específico que
o de cima ... po...
PRIORIDADES E HERANÇA
66
 Quando tem duas regras sobre o mesmo
elemento
O de baixo é mais específico que
o de cima ... po...
PRIORIDADES E HERANÇA
67
 Quando tem duas regras sobre o mesmo
elemento
PRIORIDADES E HERANÇA
68
 Quando tem duas regras sobre o mesmo
elemento
PRIORIDADES E HERANÇA
69
 Os elementos mais internos “herdam a
propriedade do mais externo”
 Ele pode sobrescrever ou ma...
PRIORIDADES E HERANÇA
70
 Os elementos mais internos “herdam a
propriedade do mais externo”
 Ele pode sobrescrever ou ma...
PRIORIDADES E HERANÇA
71
 Os elementos mais internos “herdam a
propriedade do mais externo”
PRIORIDADES E HERANÇA
72
 Os elementos mais internos “herdam a
propriedade do mais externo”
PRIORIDADES E HERANÇA
73
 “herdam a propriedade do mais externo”
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...
ATIVIDADES PRÁTICAS EM SALA
EDP 6
75
Próximos SlideShares
Carregando em…5
×

Sistemas para internet Faccamp - aula7

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

×