Aula 4 css

1.467 visualizaciones

Publicado el

CSS

Publicado en: Educación
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Aula 4 css

  1. 1. DESENVOLVIMENTO DE APLICAÇÕES PARA WEB PROF. ANDRÉ COSTA CSS 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.  

×