DESENVOLVIMENTO DE APLICAÇÕES PARA WEB
PROF. ANDRÉ COSTA
CSS e JavaScript
andre.costa@pro.unifacs.br
CSS	
  
•  CSS - Cascading Style Sheets
•  É uma linguagem de estilo utilizada para
definir a apresentação de documentos
e...
CSS	
  
•  “Folha de estilo em cascata é um
mecanismo simples para adicionar estilos
(p.ex., fontes, cores, espaçamentos) ...
CSS	
  
•  Tipos de CSS
•  Linkadas ou Importadas
•  Incorporadas
•  Inline
CSS	
  
•  Linkadas ou Importadas
CSS	
  
•  Linkadas ou Importadas
CSS	
  
•  Incorporadas
CSS	
  
•  Inline
CSS	
  
•  Exemplo
CSS	
  
•  Sintaxe
seletor { propriedade: valor; }
seletor_2
{
propriedade_1: valor;
propriedade_2: valor;
}
CSS	
  
•  Seletores (principais)
tag {}
•  Ex.:
table
{
background-color: #cdcdcd;
text-align: center;
}
CSS	
  
•  Seletores (principais)
#id {}
•  Ex.:
#id_tabela
{
background-color: #cdcdcd;
text-align: center;
}
•  <table i...
CSS	
  
•  Seletores (principais)
.classe {}
•  Ex.:
.classe_tabela
{
background-color: #cdcdcd;
text-align: center;
}
•  ...
CSS	
  
•  Seletores (principais)
tag_pai tag_filho {}
•  Ex.:
table tr td { color: #FF0000; }
•  <table>
<tr>
<td>Texto m...
CSS	
  
•  Seletores (principais)
tag_pai tag_filho.classe {}
•  Ex.:
table tr td.textoVermelho { color: #FF0000; }
•  <ta...
CSS	
  
•  Propriedades
•  Font
CSS	
  
•  Propriedades
•  Text
CSS	
  
•  Propriedades
•  Margin
CSS	
  
•  Propriedades
•  Border
CSS	
  
•  Propriedades
•  Padding
CSS	
  
•  Propriedades
•  Background
CSS	
  
•  Propriedades
•  List
CSS	
  
Mão	
  na	
  massa!	
  	
  
	
  
Crie	
  uma	
  folha	
  de	
  es/lo	
  para	
  o	
  layout	
  criado	
  
com	
  H...
CSS	
  
Mão	
  na	
  massa!	
  	
  
	
  
Pra/que!!	
  Agora	
  que	
  tem	
  o	
  conhecimento	
  de	
  
HTML	
  e	
  CSS,...
JS	
  
•  JS - JavaScript
•  É uma linguagem client-side baseada no
ECMAScript para navegadores web.
•  Dá mais inteligênc...
JS	
  
•  Como utilizar?
•  Incorporado ao HTML
JS	
  
•  Como utilizar?
•  Importado de um arquivo JavaScript
JS	
  
•  Exemplo
JS	
  
•  Exemplo
JS	
  
•  Exemplo
JS	
  
•  Função
JS	
  
•  Interagindo com HTML (DHTML)
JS	
  
•  Interagindo com HTML (DHTML)
•  onClick
•  onChange
•  onSubmit
•  onBlur / onFocus
•  onMouseOver / onMouseOut
...
JS	
  
•  Interagindo com HTML (DHTML)
•  document.getElementById(“id”).value
•  document.getElementById(“id”).innerHTML
•...
JS	
  
JS	
  
•  jQuery
•  É um framework JavaScript amplamente
utilizado que fornece diversos componentes
prontos para os usuári...
JS	
  
Mão	
  na	
  massa!	
  	
  
	
  
Pra/que!!	
  Agora	
  que	
  você	
  conhece	
  JavaScript,	
  
faça	
  a	
  valid...
Próximos SlideShares
Carregando em…5
×

Aula 4 e 5 css e java script

474 visualizações

Publicada em

CSS e JavaScript

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
474
No SlideShare
0
A partir de incorporações
0
Número de incorporações
266
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 4 e 5 css e java script

  1. 1. DESENVOLVIMENTO DE APLICAÇÕES PARA WEB PROF. ANDRÉ COSTA CSS e JavaScript andre.costa@pro.unifacs.br
  2. 2. CSS   •  CSS - Cascading Style Sheets •  É uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
  3. 3. CSS   •  “Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.” Maujor (o dinossauro da CSS) http://www.maujor.com/
  4. 4. CSS   •  Tipos de CSS •  Linkadas ou Importadas •  Incorporadas •  Inline
  5. 5. CSS   •  Linkadas ou Importadas
  6. 6. CSS   •  Linkadas ou Importadas
  7. 7. CSS   •  Incorporadas
  8. 8. CSS   •  Inline
  9. 9. CSS   •  Exemplo
  10. 10. CSS   •  Sintaxe seletor { propriedade: valor; } seletor_2 { propriedade_1: valor; propriedade_2: valor; }
  11. 11. CSS   •  Seletores (principais) tag {} •  Ex.: table { background-color: #cdcdcd; text-align: center; }
  12. 12. CSS   •  Seletores (principais) #id {} •  Ex.: #id_tabela { background-color: #cdcdcd; text-align: center; } •  <table id=“id_tabela”></table>
  13. 13. CSS   •  Seletores (principais) .classe {} •  Ex.: .classe_tabela { background-color: #cdcdcd; text-align: center; } •  <table class=“classe_tabela”></table>
  14. 14. CSS   •  Seletores (principais) tag_pai tag_filho {} •  Ex.: table tr td { color: #FF0000; } •  <table> <tr> <td>Texto modificado</td> </tr> <tr> <td>Texto modificado</td> </tr> </table>
  15. 15. CSS   •  Seletores (principais) tag_pai tag_filho.classe {} •  Ex.: table tr td.textoVermelho { color: #FF0000; } •  <table> <tr> <td>Texto</td> </tr> <tr> <td class=“textoVermelho”>Texto modificado</td> </tr> </table>
  16. 16. CSS   •  Propriedades •  Font
  17. 17. CSS   •  Propriedades •  Text
  18. 18. CSS   •  Propriedades •  Margin
  19. 19. CSS   •  Propriedades •  Border
  20. 20. CSS   •  Propriedades •  Padding
  21. 21. CSS   •  Propriedades •  Background
  22. 22. CSS   •  Propriedades •  List
  23. 23. CSS   Mão  na  massa!       Crie  uma  folha  de  es/lo  para  o  layout  criado   com  HTML.  
  24. 24. CSS   Mão  na  massa!       Pra/que!!  Agora  que  tem  o  conhecimento  de   HTML  e  CSS,  desenvola  o  seu  próprio  site.  
  25. 25. JS   •  JS - JavaScript •  É uma linguagem client-side baseada no ECMAScript para navegadores web. •  Dá mais inteligência às páginas web •  Dá suporte a Orientação a Objetos (OO) •  Sintaxe semelhante à PHP, JAVA, C/C++, etc.
  26. 26. JS   •  Como utilizar? •  Incorporado ao HTML
  27. 27. JS   •  Como utilizar? •  Importado de um arquivo JavaScript
  28. 28. JS   •  Exemplo
  29. 29. JS   •  Exemplo
  30. 30. JS   •  Exemplo
  31. 31. JS   •  Função
  32. 32. JS   •  Interagindo com HTML (DHTML)
  33. 33. JS   •  Interagindo com HTML (DHTML) •  onClick •  onChange •  onSubmit •  onBlur / onFocus •  onMouseOver / onMouseOut •  onKeyPress / onKeyDown / onKeyUp
  34. 34. JS   •  Interagindo com HTML (DHTML) •  document.getElementById(“id”).value •  document.getElementById(“id”).innerHTML •  document.getElementById(“id”).src •  document.getElementById(“id”).style.display
  35. 35. JS  
  36. 36. JS   •  jQuery •  É um framework JavaScript amplamente utilizado que fornece diversos componentes prontos para os usuários. Vale a pena estudar o jQuery!!!
  37. 37. JS   Mão  na  massa!       Pra/que!!  Agora  que  você  conhece  JavaScript,   faça  a  validação  da  página  de  cadastro  na   Agenda  desenvolvida  em  sala  de  aula.  

×