HTML&CSS 6 - Advanced CSS

Download HTML&CSS 6 - Advanced CSS

Post on 16-Jan-2015

1.357 views

Category:

Technology

10 download

DESCRIPTION

Slides for my in-house HTML & CSS trainning at SAPO. Intermediate CSS: position and float.

TRANSCRIPT

  • 1. HTML 6& CSSDINIS CORREIA 2011cbn

2. CSS1POSITION 2FLOAT & CLEAR 3LAYOUT 3. 3LAYOUTCSSna sesso anterior... 4. CADAELEMENTO UMACAIXAFOTO DE Z287MARC cHTTP://FLIC.KR/P/5S7L11 5. POSICIONAMENTOposition 6. CSSp { position: static; }p { position: relative; }p { position: absolute; }p { position: fixed; } 7. RELATIVE 8. CSSp { position: relative;} 9. CSSp { position: relative; top: 10px; right: 10px;} 10. CSSp { position: relative; bottom: 10px; left: 10px;} 11. CSS span { padding: 4px; background: yellow; position: relative; } 12. CSS span { padding: 4px; background: yellow; position: relative; top: 2px; left: 10px; } 13. 14. 15. 2px10px 16. ABSOLUTE 17. CSS span { padding: 4px; background: yellow; position: absolute; top: 2px; left: 10px; } 18. A posio de um elemento! posicionado absolutamente calculada a partir do elemento"posicionado" mais prximo. 19. HTMLBODY .HEADER .CONTENT P SPAN .FOOTER 20. HTMLBODY .HEADER .CONTENT P SPAN .FOOTER 21. HTMLBODY .HEADER .CONTENT P POSICIONADO SPAN .FOOTER 22. HTMLBODY .HEADER .CONTENT POSICIONADO P SPAN .FOOTER 23. HTMLBODY POSICIONADO .HEADER .CONTENT PSPAN .FOOTER 24. HTML LTIMO CASOBODY.HEADER.CONTENT P SPAN.FOOTER 25. CSS span { padding: 4px; background: yellow; position: absolute; top: 2px; left: 10px; } 26. CSS p { position: relative; } span { padding: 4px; background: yellow; position: absolute; top: 2px; left: 10px; } 27. CSS .outer { position: relative; } .inner { } 28. CSS .outer { position: relative; } .inner { position: absolute; top: 0; left: 0; } 29. CSS .outer { position: static; } .inner { position: absolute; top: 0; left: 0; } 30. CSS .outer { position: relative; height: 40px; } .inner { position: absolute; top: 0;left: 0;width: 400px;height: 200px; } 31. CSS .outer { position: relative; height: 40px; } .inner { position: absolute; top: 0;left: 10px;right: 10px;height: 200px; } 32. CSS .outer { position: relative; height: 40px; } .inner { position: absolute; top: 0;left: 10px;right: 10px;height: 200px; } 33. FIXED 34. CSS .inner { position: fixed; top: 10px; left: 10px; } 35. CSS .inner { position: fixed; top: 10px; left: 10px; } 36. CSS .inner { position: fixed; top: 10px; left: 10px; } 37. CSS .inner { position: fixed; top: 10px; left: 10px; } 38. Z-INDEX 39. Z-INDEXA 3 DIMENSO DO CSSFOTO DE MATT NEALE c HTTP://FLIC.KR/P/8947YE 40. x y 41. xy left topright bottom 42. xy z left top z-indexright bottom 43. z-index: 1; z-index: 2;z-index: 3; 44. z-index: 1; z-index: 2;z-index: 10; 45. CSS .box1 { position: absolute; } .box2 { position: absolute; } 46. CSS .box1 { position: absolute; } .box2 { position: absolute; } 47. CSS .box1 { position: absolute; z-index: 1; } .box2 { position: absolute; } 48. FLOAT & CLEAR 49. FLOAT 50. CSSp { float: none; }p { float: right; }p { float: left; } 51. ! semelhana dos elementosposicionados absolutamente,tambm so removidos do flow. 52. CSS span.a { padding: 2px; background: yellow; } 53. CSS span.a { padding: 2px; background: yellow; float: left; } 54. CSS span.a { padding: 2px;background: yellow;float: left; } span.b {padding: 2px;background: grey;float: left; } 55. CSS span.a { padding: 2px;background: yellow;float: left;height: 200px; } span.b {padding: 2px;background: grey;float: left; } 56. ! Flutuar um elemento torna-anum elemento block-level. 57. CSS span.a { span.c {padding: 2px;padding: 2px;background: yellow;background: #ccc;float: left; float: left;height: 200px; width: 34%;width: 34%; } } span.b {padding: 2px;background: grey;float: left;width: 34%; } 58. CSS span.a { padding: 2px; background: yellow; float: left; padding: 10px; margin: 0 10px 10px 0; } 59. CSS span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0; } p {padding: 5px;border: 2px solid #9a2a03 } 60. } 61. CSS span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0; } p {padding: 5px;border: 2px solid #9a2a03 } 62. CLEAR 63. CSS span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0; } p {padding: 5px;border: 2px solid #9a2a03clear: both; } 64. } 65. CSS span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0; } p {padding: 5px;border: 2px solid #9a2a03clear: both; } 66. CSS span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0; } p {padding: 5px;border: 2px solid #9a2a03clear: both; } 67. p { padding: 5px; border: 2px solid #9a2a03 clear: both;} 68. p { padding: 5px; border: 2px solid #9a2a03 clear: right;} 69. CSS span.a { padding: 2px;background: yellow;float: left;padding: 10px;margin: 0 10px 10px 0; } p {padding: 5px;border: 2px solid #9a2a03clear: left; } 70. CONTER UM FLOAT 71. HTML ...

72. HTML ...

73. CSS p { overflow: auto; } 74. HTML

...

CSS.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } *:first-child+html .clearfix { zoom: 1; } 75. http://bit.ly/html_clearfix