HTML&CSS 7 - Tips & Tricks

1,090 views

Published on

Slides for my in-house HTML & CSS trainning at SAPO.

Tips, tricks, do's and don'ts.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,090
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
63
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML&CSS 7 - Tips & Tricks

  1. 1. HTML TIPS TRICKS& CSS DONTS DOSDINIS CORREIA 2011 cbn
  2. 2. O CSS É COMO O XADREZ FOTO DE KEVIN OMARA c HTTP://FLIC.KR/P/3TYZSI
  3. 3. HTMLSEMÂNTICO
  4. 4. <p  class="titulo">SAPO.pt</p><div  class="nav"> ...</div>
  5. 5. <p  class="titulo">SAPO.pt</p><div  class="nav"> ...</div>
  6. 6. <h1>SAPO.pt</h1><ul  class="nav"> ...</ul>
  7. 7. <div  class="barra-­‐verde"> ...</div>
  8. 8. <div  class="barra-­‐verde"> ...</div>
  9. 9. <div  class="header"> ...</div>
  10. 10. <p>O  Tribunal  de  Instrução  Criminal  de  Lisboa  <br>  decidiu  hoje  levar  a  julgamento</p>
  11. 11. <p>O  Tribunal  de  Instrução  Criminal  de  Lisboa  <br>  decidiu  hoje  levar  a  julgamento</p>
  12. 12. <p>Ó  mar  salgado,  quanto  do  teu  sal<br>São  lágrimas  de  Portugal!<br>Por  te  cruzarmos,  quantas  mães  choraram,<br>Quantos  filhos  em  vão  rezaram!<br>Quantas  noivas  ficaram  por  casar<br>Para  que  fosses  nosso,  ó  mar!</p>
  13. 13. http://naked.dustindiaz.com
  14. 14. PROGRESSIVEENHANCEMENT
  15. 15. CONTEÚDO HTML APRESENTAÇÃO CSSCOMPORTAMENTOJavaScript
  16. 16. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  17. 17. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  18. 18. CSSCONDITIONAL
  19. 19. p  { margin:  10px; _margin:  20px;}
  20. 20. p  { margin:  10px; _margin:  20px;}
  21. 21. <link  type="text/css"  rel="stylesheet"  href="global.css"><!-­‐-­‐[if  IE  6]><link  type="text/css"  rel="stylesheet"  href="ie6.css"><![end  if]-­‐-­‐>
  22. 22. http://bit.ly/conditional_css
  23. 23. http://bit.ly/css_compat
  24. 24. LIDAR COM BUGSDE CSSFOTO DE BRIAN SEARLE c HTTP://FLIC.KR/P/5KVVSL
  25. 25. http://bit.ly/ie_bugs
  26. 26. CSS RESET
  27. 27. 1 2 3 User User Author agent
  28. 28. http://bit.ly/reset_meyerweb
  29. 29. http://bit.ly/reset_meyerweb
  30. 30. COMENTÁRIOS
  31. 31. “Comments as notes-to-future-self FTW @gruber — http://twitter.com/gruber/status/391293102
  32. 32. /*  Header  */h1.logoul.nav  {  ...  }ul.nav  li  {  ..  }/*  Content  */.item  {  ...  }  
  33. 33. http://bit.ly/css_edit
  34. 34. http://bit.ly/css_edit
  35. 35. <div  class="container"> <div  class="header"> <ul  class="nav"> <li>  ...  </li> </ul> <div  class="search"> ... </div> </div></div>
  36. 36. <div  class="container"> <div  class="header"> <ul  class="nav"> <li>  ...  </li> </ul> <div  class="search"> ... </div> <!-­‐-­‐  Um  comentário  -­‐-­‐> </div></div>
  37. 37. <div  class="container"> <div  class="header"> <ul  class="nav"> <li>  ...  </li> </ul> <div  class="search"> ... </div> <!-­‐-­‐  /.search  -­‐-­‐> </div> <!-­‐-­‐  /.header  -­‐-­‐></div><!-­‐-­‐  /.container  -­‐-­‐>
  38. 38. FERRAMENTAS
  39. 39. http://bit.ly/firebug
  40. 40. http://bit.ly/firebug
  41. 41. http://bit.ly/notepad_plus
  42. 42. E AINDA...
  43. 43. http://bit.ly/css_cheat_sheet
  44. 44. http://alistapart.com
  45. 45. http://www.456bereastreet.com
  46. 46. http://www.webdesignerwall.com
  47. 47. http://css-tricks.com
  48. 48. http://csszengarden.com
  49. 49. http://csszengarden.com
  50. 50. http://csszengarden.com
  51. 51. OBRIGADOdiniscorreia@mac.com@diniscorreia

×