Recommandé
Web standard 2
- 1. Web Standard #2 @EBvi
- 2. • • • HTML
- 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. <link> @import • <link rel=”stylesheet” type=”text/css” href=”hello.css” /> • <style type=”text/css”> @import url(hello.css); </style> • IE6-7 link
- 5. id class • css id class • id • class
- 6. • <div id=”header”></div> • <div id=”content”></div> • <div id=”footer”></div> • <p class=”introduce”></p> • <span class=”warning”></span>
- 7. id • <div id=”nav”></div> <a href=”#nav”> </a>
- 8. • header, content, footer, sub, nav, sidebar, metadata, introduce ... (O) • italic, red, blue, high ... (X) • •
- 9. CSS * # id . class > ( ) : [] • http://www.w3.org/TR/CSS2/ selector.html
- 10. • #header {} • .title {} • div#time p strong {} • div.park {} • th, td {} • table > tbody {} • *[lang=ko] • input[alt] {} • a:link {}
- 11. • h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } • h1, h2, h3 { font-family: sans-serif }
- 12. •* • • css •
- 13. IE • input[alt] {} • IE7 , , •
- 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. content http://www.clearboth.org/wiki/doku.php?id=document:css:ordering_properties
- 15. display • block : • inline : • none : • table IE9 • inline-block IE8
- 16. display=block • width • height • block inline • css width/height
- 17. display=inline • • width height • inline • css width/height
- 18. • <p> <table> <form> <ul> <li> <h1> <div> block • <span> <strong> <a> <em> <img> <br> <input> inline •※
- 19. position static absolute offset fixed (IE7+) relative offset inherit (IE8+)
- 20. position=static • top, left, right, bottom offset
- 21. position=relative • offset • offset relative
- 22. position=absolute • offset • z-index
- 23. float left float right float none
- 24. clear left float right float both float none
- 25. • <div style=”float:left”></div> • <div style=”float:right”></div> • <div style=”clear:both”></div>
- 26. IE6 • float margin • display:inline
- 27. IE6 Duplicate Character bug • float display:none • display:inline ,
- 28. • • hack • hack
- 29. padding / margin / border
- 30. padding / margin / border
- 31. Box model Problem • width IE border, padding width • DTD
- 32. • css • id , class • hack • Box model
Notes de l'éditeur
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n