Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Web standard 2

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Web standard 2

  1. 1. Web Standard #2 @EBvi
  2. 2. ••• HTML
  3. 3. css<head> <title> </title> <link rel=”stylesheet” media=”all” type=”text/css” href=”hello.css” /> <script type=”text/javascript” src=”jquery.js”></script></head>...• .js .css•
  4. 4. <link> @import• <link rel=”stylesheet” type=”text/css” href=”hello.css” />• <style type=”text/css”> @import url(hello.css); </style>• IE6-7 link
  5. 5. id class• css id class• id• class
  6. 6. • <div id=”header”></div>• <div id=”content”></div>• <div id=”footer”></div>• <p class=”introduce”></p>• <span class=”warning”></span>
  7. 7. id• <div id=”nav”></div> <a href=”#nav”> </a>
  8. 8. • header, content, footer, sub, nav, sidebar, metadata, introduce ... (O)• italic, red, blue, high ... (X)••
  9. 9. CSS * # id . class > ( ) : []• http://www.w3.org/TR/CSS2/ selector.html
  10. 10. • #header {}• .title {} • div#time p strong {}• div.park {} • th, td {}• table > tbody {} • *[lang=ko]• input[alt] {}• a:link {}
  11. 11. • h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif }• h1, h2, h3 { font-family: sans-serif }
  12. 12. •*•• css•
  13. 13. IE• input[alt] {}• IE7 , ,•
  14. 14. CSS • 1. display • 8. border / background • 2. list-style • 9. color / font • 3. position • 10. text-decoration • 4. float • 11. text-align / vertical-align • 5. clear • 12. white-space • 6. width / height • 13. other text • 7. padding / margin • 14. contenthttp://www.clearboth.org/wiki/doku.php?id=document:css:ordering_properties
  15. 15. display• block :• inline :• none :• table IE9• inline-block IE8
  16. 16. display=block• width• height• block inline• css width/height
  17. 17. display=inline•• width height• inline• css width/height
  18. 18. • <p> <table> <form> <ul> <li> <h1> <div> block• <span> <strong> <a> <em> <img> <br> <input> inline•※
  19. 19. position staticabsolute offset fixed (IE7+)relative offsetinherit (IE8+)
  20. 20. position=static• top, left, right, bottom offset
  21. 21. position=relative• offset• offset relative
  22. 22. position=absolute• offset• z-index
  23. 23. floatleft floatright floatnone
  24. 24. clearleft floatright floatboth floatnone
  25. 25. • <div style=”float:left”></div>• <div style=”float:right”></div>• <div style=”clear:both”></div>
  26. 26. IE6• float margin• display:inline
  27. 27. IE6 Duplicate Character bug• float display:none• display:inline ,
  28. 28. •• hack• hack
  29. 29. padding / margin / border
  30. 30. padding / margin / border
  31. 31. Box model Problem• width IE border, padding width• DTD
  32. 32. • css• id , class• hack• Box model

×