Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Beyond the Basics

kaiye
October 25, 2009

CSS Beyond the Basics

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

kaiye

October 25, 2009
Tweet

More Decks by kaiye

Other Decks in Programming

Transcript

  1. Use CSS Reset Why need CSS reset? How to use

    it? Introduce some CSS reset. ୍ᄅರྒ௹ರ
  2. Why need CSS Reset Different Internet Browser has different CSS

    default style adjust size and style of type to make uniform appearance ୍ᄅರྒ௹ರ
  3. 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 ୍ᄅರྒ௹ರ
  4. 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 ୍ᄅರྒ௹ರ
  5. 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 ୍ᄅರྒ௹ರ
  6. Two box models Quirks & Standards mode IE/Mozilla ‘s button

    Elements’ bug IE browser’s doctypes & the box model relation ୍ᄅರྒ௹ರ
  7. 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 ୍ᄅರྒ௹ರ
  8. CSS Display 3 main display properties: block, inline, none Document

    flow How to hide an element? ୍ᄅರྒ௹ರ
  9. 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> ୍ᄅರྒ௹ರ
  10. 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> ୍ᄅರྒ௹ರ
  11. Hide an element height:0;overflow:hidden; visibility:hidden; display:none; same color with the

    background position it far away from screen range ୍ᄅರྒ௹ರ
  12. Position Static Relative Absolute fixed In Document Flow out of

    Document Flow ୍ᄅರྒ௹ರ
  13. Problems with Floats The Great Collapse Pushdown Double Margin Bug

    The 3px Jog Bottom Margin Bug ୍ᄅರྒ௹ರ
  14. Negative margin Fix CSS bug Find new ideas about CSS

    layout Holy Grail layout Layout Gala by Alessandro ୍ᄅರྒ௹ರ
  15. Table based Layout Table is a data container Table is

    structure not style Sometimes we use table based layout ୍ᄅರྒ௹ರ
  16. 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;} ୍ᄅರྒ௹ರ
  17. 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... ୍ᄅರྒ௹ರ
  18. 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 ୍ᄅರྒ௹ರ
  19. CSS Hacks Hack as less as you can Web standard

    First, Acid3 Test Hack for IE, then IE6 Only use one hack method ୍ᄅರྒ௹ರ
  20. IE Hacks #head{ height:30px; *height:33px;/* hack ie */ +height:32px;/* hack

    ie7 */ _height:30px;/* hack ie6 */ } ୍ᄅರྒ௹ರ
  21. 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;} ୍ᄅರྒ௹ರ
  22. 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... ୍ᄅರྒ௹ರ
  23. How to debug CSS style Firebug Layout & Style panel

    CSS border trick CTRL+F5 force renew cache ୍ᄅರྒ௹ರ
  24. 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 ୍ᄅರྒ௹ರ
  25. 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, ୍ᄅರྒ௹ರ
  26. 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... ୍ᄅರྒ௹ರ