CSS

3,214 views

Published on

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

No Downloads
Views
Total views
3,214
On SlideShare
0
From Embeds
0
Number of Embeds
205
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. Diego Potapczuk [email_address] diegoliveira.com.br CSS Junho de 2008
  2. 2. CSS <ul><li>CSS é a folha de estilo mais utilizada na internet. </li></ul><ul><li>Atualmente na versão 2.1 </li></ul><ul><li>Define uma folha de estilo em cascata. </li></ul>
  3. 3. Sintaxe básica do CSS
  4. 4. Seletores Casa com qualquer elemento F que se segue imediatamente a E. E + F Adjacente Casa com qualquer elemento F que seja filho do elemento E. E > F Filho Casa com qualquer elemento F que seja descendente do elemento E. E F Descendente Casa com qualquer elemento cuja id seja footer . #footer ID Casa com qualquer elemento cujo atributo class tem o valor info . .info Classe Casa com qualquer elemento E. E Tipo Casa com qualquer elemento. * Universal Descrição Formato Seletor Visão geral da sintaxe dos seletores CSS 2.1
  5. 5. Seletores <ul><li>Pseudo-classes </li></ul><ul><ul><li>:active </li></ul></ul><ul><ul><li>:focus </li></ul></ul><ul><ul><li>:hover </li></ul></ul><ul><ul><li>:link </li></ul></ul><ul><ul><li>:visited </li></ul></ul><ul><li>Pseudo-elements </li></ul><ul><ul><li>:first-letter </li></ul></ul><ul><ul><li>:first-line </li></ul></ul>
  6. 6. Tags CSS <ul><li>Background </li></ul><ul><ul><li>background-attachment </li></ul></ul><ul><ul><li>background-color </li></ul></ul><ul><ul><li>background-image </li></ul></ul><ul><ul><li>background-position </li></ul></ul><ul><ul><li>background-repeat </li></ul></ul>
  7. 7. Tags CSS <ul><li>Border </li></ul><ul><ul><li>border </li></ul></ul><ul><ul><li>border-bottom </li></ul></ul><ul><ul><li>border-left </li></ul></ul><ul><ul><li>border-right </li></ul></ul><ul><ul><li>border-top </li></ul></ul><ul><ul><li>border-color </li></ul></ul><ul><ul><li>border-style </li></ul></ul><ul><ul><li>border-width </li></ul></ul>
  8. 8. Tags CSS <ul><li>Classification </li></ul><ul><ul><li>clear </li></ul></ul><ul><ul><li>cursor </li></ul></ul><ul><ul><li>display </li></ul></ul><ul><ul><li>float </li></ul></ul><ul><ul><li>position </li></ul></ul><ul><ul><li>visibility </li></ul></ul>
  9. 9. Tags CSS <ul><li>Dimension </li></ul><ul><ul><li>height </li></ul></ul><ul><ul><li>line-height </li></ul></ul><ul><ul><li>max-height </li></ul></ul><ul><ul><li>max-width </li></ul></ul><ul><ul><li>min-height </li></ul></ul><ul><ul><li>min-width </li></ul></ul><ul><ul><li>width </li></ul></ul>
  10. 10. Tags CSS <ul><li>Font </li></ul><ul><ul><li>font-family </li></ul></ul><ul><ul><li>font-size </li></ul></ul><ul><ul><li>font-style </li></ul></ul><ul><ul><li>font-weight </li></ul></ul>
  11. 11. Tags CSS <ul><li>Generated Content </li></ul><ul><ul><li>quotes </li></ul></ul>
  12. 12. Tags CSS <ul><li>List and Marker </li></ul><ul><ul><li>list-style </li></ul></ul><ul><ul><li>list-style-image </li></ul></ul><ul><ul><li>list-style-position </li></ul></ul><ul><ul><li>list-style-type </li></ul></ul><ul><ul><li>marker-offset </li></ul></ul>
  13. 13. Tags CSS <ul><li>Margin </li></ul><ul><ul><li>margin </li></ul></ul><ul><ul><li>margin-bottom </li></ul></ul><ul><ul><li>margin-left </li></ul></ul><ul><ul><li>margin-right </li></ul></ul><ul><ul><li>margin-top </li></ul></ul>
  14. 14. Tags CSS <ul><li>Padding </li></ul><ul><ul><li>padding </li></ul></ul><ul><ul><li>padding-bottom </li></ul></ul><ul><ul><li>padding-left </li></ul></ul><ul><ul><li>padding-right </li></ul></ul><ul><ul><li>padding-top </li></ul></ul>
  15. 15. Tags CSS <ul><li>Positioning </li></ul><ul><ul><li>Bottom </li></ul></ul><ul><ul><li>left </li></ul></ul><ul><ul><li>overflow </li></ul></ul><ul><ul><li>position </li></ul></ul><ul><ul><li>right </li></ul></ul><ul><ul><li>top </li></ul></ul><ul><ul><li>vertical-align </li></ul></ul><ul><ul><li>z-index </li></ul></ul>
  16. 16. Tags CSS <ul><li>Table </li></ul><ul><ul><li>border-collapse </li></ul></ul><ul><ul><li>border-spacing </li></ul></ul><ul><ul><li>empty-cells </li></ul></ul>
  17. 17. Tags CSS <ul><li>Text </li></ul><ul><ul><li>color </li></ul></ul><ul><ul><li>line-height </li></ul></ul><ul><ul><li>letter-spacing </li></ul></ul><ul><ul><li>text-align </li></ul></ul><ul><ul><li>text-decoration </li></ul></ul><ul><ul><li>text-indent </li></ul></ul><ul><ul><li>text-transform </li></ul></ul><ul><ul><li>white-space </li></ul></ul><ul><ul><li>word-spacing </li></ul></ul>
  18. 18. Prática <ul><li>XHTML </li></ul><ul><li>CSS </li></ul><ul><li>Ferramentas e validação </li></ul>
  19. 19. Cria ção do documento padrão <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> </li></ul><ul><li><title>Untitled Document</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  20. 20. Criação da estrutura do site <ul><li><div id=&quot;base&quot;> </li></ul><ul><li> <div id=&quot;topo&quot;>Cabeçalho</div> </li></ul><ul><li><div id=&quot;menu&quot;>Menu</div> </li></ul><ul><li><div id=&quot;conteudo&quot;>Conteudo</div> </li></ul><ul><li><div id=&quot;rodape&quot;>Rodape</div> </li></ul><ul><li></div> </li></ul>
  21. 21. Aplicando CSS a um documento HTML <ul><li>Método 1: In-line (o atributo style) </li></ul><ul><ul><li><body style=&quot;background-color: #FF0000;&quot;> </li></ul></ul><ul><li>M étodo 2 : interna (dentro do html) </li></ul><ul><ul><li><style type=&quot;text/css&quot;> </li></ul></ul><ul><ul><ul><li><!-- </li></ul></ul></ul><ul><ul><ul><li>body { </li></ul></ul></ul><ul><ul><ul><li>background-color: #FF0000; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>--> </li></ul></ul></ul><ul><ul><ul><li></style> </li></ul></ul></ul><ul><li>M étodo 3 : externa (em um arquivo css) </li></ul><ul><ul><li><link href=&quot;css/estilo.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> </li></ul></ul>
  22. 22. Criação da estrutura do site <ul><li>/************************************** </li></ul><ul><li>*** Corpo *** </li></ul><ul><li>**************************************/ </li></ul><ul><li>body { </li></ul><ul><li>margin: 0; </li></ul><ul><li>padding: 0; </li></ul><ul><li>text-align: center; </li></ul><ul><li>} </li></ul><ul><li>#base { </li></ul><ul><li>width: 90%; </li></ul><ul><li>margin: 10px auto; </li></ul><ul><li>background-color: #fff; </li></ul><ul><li>color: #333; </li></ul><ul><li>border: 1px solid gray; </li></ul><ul><li>font-family:Geneva, Arial, Helvetica, sans-serif; </li></ul><ul><li>} </li></ul>
  23. 23. Criação da estrutura do site <ul><li>/************************* </li></ul><ul><li>*** Topo *** </li></ul><ul><li>**************************/ </li></ul><ul><li>#topo { </li></ul><ul><li>padding: 20px; </li></ul><ul><li>background-color: #ddd; </li></ul><ul><li>border-bottom: 1px solid gray; </li></ul><ul><li>} </li></ul>
  24. 24. Criação da estrutura do site <ul><li>/************************************** </li></ul><ul><li>*** Menu *** </li></ul><ul><li>**************************************/ </li></ul><ul><li>#menu { </li></ul><ul><li>float: left; </li></ul><ul><li>width: 194px; </li></ul><ul><li>font-size: 80%; </li></ul><ul><li>} </li></ul>
  25. 25. Criação da estrutura do site <ul><li>/************************************** </li></ul><ul><li>*** Conteudo *** </li></ul><ul><li>**************************************/ </li></ul><ul><li>#conteudo { </li></ul><ul><li>margin-left: 200px; </li></ul><ul><li>border-left: 1px solid gray; </li></ul><ul><li>padding: 15px; </li></ul><ul><li>min-height:200px; </li></ul><ul><li>background-color:#eee; </li></ul><ul><li>} </li></ul>
  26. 26. Criação da estrutura do site <ul><li>/************************************** </li></ul><ul><li>*** Rodape *** </li></ul><ul><li>**************************************/ </li></ul><ul><li>#rodape { </li></ul><ul><li>clear: both; </li></ul><ul><li>margin: 0; </li></ul><ul><li>padding: .5em; </li></ul><ul><li>color: #333; </li></ul><ul><li>background-color: #ddd; </li></ul><ul><li>border-top: 1px solid gray; </li></ul><ul><li>} </li></ul>
  27. 27. Site final
  28. 28. Web Developer Toolbar <ul><li>Diversas ferramentas para desenvolvedores de sites </li></ul>
  29. 29. Wave Toolbar <ul><li>Ferramenta de validação de acessibilidade. </li></ul>
  30. 30. Boas práticas CSS
  31. 31. Boas práticas CSS
  32. 32. Boas práticas CSS
  33. 33. Sites para consulta <ul><li>DocTypes </li></ul><ul><ul><li>http ://gutfeldt.ch/matthias/articles/doctypeswitch/table.html </li></ul></ul><ul><li>Tags do XHTML </li></ul><ul><ul><li>http://www.w3schools.com/tags/default.asp </li></ul></ul><ul><li>Conceito de Tableless </li></ul><ul><ul><li>http://www.plasmadesign.com.br/stupidtables/ </li></ul></ul><ul><li>Uso de Web Developer para auxiliar a acessibilidade </li></ul><ul><ul><li>http://www.ariadne.ac.uk/issue44/lauke/ </li></ul></ul><ul><li>Recomendações da W3C sobre acessiblidade </li></ul><ul><ul><li>http://www.w3.org/TR/WCAG10/ </li></ul></ul><ul><li>Referencia do CSS 2 </li></ul><ul><ul><li>http ://meyerweb.com/eric/css/references/css2ref.html </li></ul></ul><ul><li>Material sobre CSS </li></ul><ul><ul><li>http://meyerweb.com/eric/css/edge/index.html </li></ul></ul><ul><ul><li>http://www.maujor.com </li></ul></ul><ul><li>Utilidades das listas </li></ul><ul><ul><li>http://www.alistapart.com/stories/taminglists/ </li></ul></ul><ul><li>Utilidades para web developers </li></ul><ul><ul><li>http://webdevelopersfieldguide.com/ </li></ul></ul>
  34. 34. Muito obrigado <ul><li>Dúvidas ? </li></ul>

×