CSS Beyond the Basics

A CSS Lesson for frontend beginner in Alipay.com at 2009.

Transcript

1. CSS Beyond the Basics by Catge@Alipay UED ୍ᄅರྒ௹ರ
2. CSS Reset ୍ᄅರྒ௹ರ
3. Use CSS Reset Why need CSS reset? How to use it? Introduce some CSS reset. ୍ᄅರྒ௹ರ
4. Why need CSS Reset Different Internet Browser has different CSS default style adjust size and style of type to make uniform appearance ୍ᄅರྒ௹ರ
5. ୍ᄅರྒ௹ರ
6. How to use CSS Reset Put CSS reset at the top of CSS frame Avoid to use * CSS selector Don’t just CLEAR but RESET ୍ᄅರྒ௹ರ
7. CSS Reset Resource First CSS Reset by Tantek Global White Space Reset: *{ margin: 0;padding: 0;} YUI CSS Reset Reset Reloaded by Eric Meyer KISSY CSS Reset by lifesinger ୍ᄅರྒ௹ರ
8. How to use CSS Reset Put CSS reset at the top of CSS frame Avoid to use * CSS selector Don’t just CLEAR but RESET Less is more ୍ᄅರྒ௹ರ
9. CSS Box model ୍ᄅರྒ௹ರ
10. Two box models Quirks & Standards mode IE/Mozilla ‘s button Elements’ bug IE browser’s doctypes & the box model relation ୍ᄅರྒ௹ರ
11. IE Browsers, doctypes and the box model Doctype used Win/IE5 Win/IE6 HTML 4.01 Transitional ‐ missing doctype Quirks Quirks HTML 4.01 Transitional ‐ full doctype Standards Standards XHTML 1.0 Transitional ‐ full doctype Quirks Quirks XHTML 1.0 Transitional ‐ missing Prolog Standards Standards ୍ᄅರྒ௹ರ
12. Block & Inline ୍ᄅರྒ௹ರ
13. CSS Display 3 main display properties: block, inline, none Document flow How to hide an element? ୍ᄅರྒ௹ರ
14. Display:block Takes up the full width available, with a new line before and after <div>,<h1>...<h6>,<p>,<ul>,<ol> ,<dl>,<li>,<dt>,<dd>,<table>,<blo ckquote>,<pre>,<form> ୍ᄅರྒ௹ರ
15. Display:inline Takes up only as much width as it needs, and does not force new line <span>,<a>,<strong>,<em>,<img >,<br>,<input>,<abbr>,<acronym> ୍ᄅರྒ௹ರ
16. Document flow:Page display order ୍ᄅರྒ௹ರ
17. How to hide an Element? ୍ᄅರྒ௹ರ
18. Hide an element height:0;overflow:hidden; visibility:hidden; display:none; same color with the background position it far away from screen range ୍ᄅರྒ௹ರ
19. Two different method .fn-hide{display:none} D.addClass(el,’fn-hide’) el.style.display = ‘none’; ୍ᄅರྒ௹ರ
20. CSS Layout DIV+CSS VS TABLE ୍ᄅರྒ௹ರ
21. CSS based Layout Position Float Negative margin display:Table ୍ᄅರྒ௹ರ
22. Position Static Relative Absolute fixed In Document Flow out of Document Flow ୍ᄅರྒ௹ರ
23. Two Position layout Method relative + absolute; absolute; relative fixed ୍ᄅರྒ௹ರ
24. Float ୍ᄅರྒ௹ರ
25. What are floats used for? ୍ᄅರྒ௹ರ
26. Clear the Float .fn-clear:after{ clear:both; content:'.'; display:block; height:0; visibility:hidden; } .fn-clear{ zoom:1; } ୍ᄅರྒ௹ರ
27. Problems with Floats The Great Collapse Pushdown Double Margin Bug The 3px Jog Bottom Margin Bug ୍ᄅರྒ௹ರ
28. Negative margin Fix CSS bug Find new ideas about CSS layout Holy Grail layout Layout Gala by Alessandro ୍ᄅರྒ௹ರ
29. Table based Layout Table is a data container Table is structure not style Sometimes we use table based layout ୍ᄅರྒ௹ರ
30. CSS Selector ୍ᄅರྒ௹ರ
31. Type Selectors: div{color:#f00;} Descendant Selectors: div em{color:#f00;} ID Selectors: #head{color:#f00;} Class Selectors: .fn-hide{display:none;} Grouping Selectors: #head,#foot{color:#f00;} Universal Selectors: *{margin:0;} Child Selectors: #head > div{width:100px;} ୍ᄅರྒ௹ರ
32. Adjacent Selectors: p+p{color:#f00;} Attribute Selectors: input[type=text] {color:#f00;} CSS Pseudo-Classes Reference: a:link{color:#f00;} CSS Pseudo-Elements Reference: .fn- clear:after{color:#f00;} Detail... ୍ᄅರྒ௹ರ
33. CSS Selector priority important Style ID Pseudo- Class, attribute ,Class Pseudo- Elements ,Tag #head .link a:hover{c olor:#f00 ;} 0 1 1+1 1 ୍ᄅರྒ௹ರ
34. Multiple Class Names ୍ᄅರྒ௹ರ
35. Multiple Class Names .classA.classB{color:#f00;} <div class=”classA classB ...”> Used for Module Design ୍ᄅರྒ௹ರ
36. CSS Hacks ୍ᄅರྒ௹ರ
37. Your CSS Hacks? ୍ᄅರྒ௹ರ
38. CSS Hacks Hack as less as you can Web standard First, Acid3 Test Hack for IE, then IE6 Only use one hack method ୍ᄅರྒ௹ರ
39. IE Hacks #head{ height:30px; *height:33px;/* hack ie */ +height:32px;/* hack ie7 */ _height:30px;/* hack ie6 */ } ୍ᄅರྒ௹ರ
40. Browscap: No CSS Hack Have a look at Yahoo.com source code .ua-ie6 #head{height:30px;} .ua-ie7 #head{height:32px;} .ua-ff3 #head{height:33px;} ୍ᄅರྒ௹ರ
41. IE Haslayout ୍ᄅರྒ௹ರ
42. IE Haslayout Haslayout is a part of IE CSS Render Engine haslayout=-1, such as body,html,tqble,img,input,iframe,embe d,hr,marquee(not include div) Detail... ୍ᄅರྒ௹ರ
43. Activate Haslayout zoom:1 position:relative overflow:hidden _height:1% +min-height:0 ୍ᄅರྒ௹ರ
44. CSS Debug ୍ᄅರྒ௹ರ
45. How to debug CSS style Firebug Layout & Style panel CSS border trick CTRL+F5 force renew cache ୍ᄅರྒ௹ರ
46. CSS Specification ୍ᄅರྒ௹ರ
47. CSS Specification Separate words by a single dash, e.g. span.btn-ok-disabled Use a meaningful prefix and don’t add new one, e.g. .fn-, .ft-, .ico-, .btn-, .com- Use Class selector instead of ID selector No inline styles in HTML tags ୍ᄅರྒ௹ರ
48. CSS Tricks ୍ᄅರྒ௹ರ
49. Fonts settle multi-language align problem: SimsunaTahoma Tag ‘A’ without ‘href’ property cause ‘:hover’ style lapse ‘IE 1px bug’ fixed by ‘overflow:hidden’ Force word not wrap compatible with IE6,7,FF3đwhite-space:nowrap CSS files save as no BOM uft-8 format, ୍ᄅರྒ௹ರ
50. CSS comment avoid ‘/******/’ ‘caption’ set ‘padding’ instead of ‘margin’ in IE ‘overflow:auto’ element declare ‘position:relative’ to fix its child elements ‘ position bug No block element in inline element More... ୍ᄅರྒ௹ರ
51. catge.blogbus.com Thanks for reading ୍ᄅರྒ௹ರ