CSS Básico

693 views
575 views

Published on

A importância do CSS e como ele funciona dentro da programação de um site. Esta aula mostra de maneira clara como o CSS facilita a vida do usuário final.

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
693
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
56
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS Básico

  1. 1. CSS BÁSICO RENATO MELO - 2014
  2. 2. Antigamente: Site com emaranhado de tags, estilos e formatações
  3. 3. Se o cliente pedisse alteração você tinha que alterar página por página.
  4. 4. Programação em Três Partes Html: Conteúdo CSS: Estilo Javascript: Inteligência
  5. 5. SEM PADRÕES ✗ Extensão da Mídia Impressa ✗ Layout baseado em Tabelas ✗ Conteúdo, Apresentação e Comportamento “aninhados” ✗ Código Incompreensível
  6. 6. COM PADRÕES ✔ Acessível de qualquer dispositivo ✔ Layout baseado em CSS ✔ Separação entre Conteúdo, Apresentação e Comportamento ✔ Código Acessível
  7. 7. VANTAGENS Carregamento mais rápido Menores custos com hospedagem Melhor Consistência Visual Redesign mais barato e eficiente Melhores resultados nos Mecanismos de Buscas Maior acessibilidade
  8. 8. Prazer CSS
  9. 9. nome Define um estilo único para um elemento: body, h1... TÉCNICO Parte mais importante
  10. 10. #nome Define um estilo único para um identificador #TIME Seguem as ordens do técnico
  11. 11. .jogador Joga para o #time .nome Define um estilo único para uma classe, que pode ser utilizada qualquer hora.
  12. 12. Exemplo body{ background: #ccc; font: 12pt Arial, Sans-Serif; color: #000; } #topo{ width: 780px; background: #ccc url(bgtopo.jpg) repeat-x; font-size: 20pt; color: #ff0000; } .produto{ float: right; text-align: center; font-size: 16pt; color: #ff0000; }
  13. 13. PADRÃO DE CORES
  14. 14. COR HEX É a cor do #
  15. 15. As Fontes também merecem atenção
  16. 16. Exemplos de fontes: Arial, Calibri, Verdana Trebuchet, Times New Roman...
  17. 17. Pode-se colocar mais de uma fonte + opção de “Sans-serif” ou “Serif”
  18. 18. NA PRÁTICA: Letras minúsculas Errado: <DIV><P>Aqui um texto!</P></DIV> Correto: <div><p>Aqui um texto!</p></div>
  19. 19. NA PRÁTICA: Abre e feche os comandos corretamente! Errado: <div><p>Aqui um <em>texto!</p></em></div> Correto: <div><p>Aqui um <em>texto! </em></p></div>
  20. 20. NA PRÁTICA: Feche todos os comandos Errado: <p>Um parágrafo. Correto: <p>Um parágrafo.</p>
  21. 21. NO CSS E DO HTML: Definido pelo # ou . Exemplo: -no CSS: #header {width:900px;} - no HTML: <div id=“header”>…</div>
  22. 22. ANOTE SUAS OBSERVAÇÕES /* Comentário */
  23. 23. DIVIDINDO UM SITE
  24. 24. #topo
  25. 25. #bemvindo
  26. 26. #login
  27. 27. #cabecalho
  28. 28. #logo
  29. 29. #box-procura
  30. 30. #menu
  31. 31. #destaque
  32. 32. #slider
  33. 33. AGORA FAÇA VOCÊ MESMO!
  34. 34. FAÇA A DIVISÃO DO SITE DA ESAMC: ESAMC.BR
  35. 35. FACEBOOK.COM/ RENATOMELOMKT renato@iskadigital.com.br

×