Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS 101

7,517 views

Published on

2011 新人培训, 讲 CSS 基础。

Published in: Technology
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Njce! Thanks for sharing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

CSS 101

  1. 1. CSS101by http://sofish.de
  2. 2. 1CSS101by http://sofish.de
  3. 3. 1. 5. Hack2. 6. CSS3. 7. CSS34. 8.
  4. 4. 1.
  5. 5. 1. margin padding border
  6. 6. 1. margin padding border non-­‐replaced  margin-­‐top   margin-­‐bottom replaced  /  non-­‐replaced  elements http://reference.sitepoint.com/css/replacedelements
  7. 7. Q&A
  8. 8. Q&A
  9. 9. 2. 1 #id  .class 2 [rel=”nofollow”]  :hover 3 4 *
  10. 10. 2. 1 #id  .class 2 [rel=”nofollow”]  :hover 3 4 *
  11. 11. 2. 1 2
  12. 12. 2. 1
  13. 13. 2. 1 ID 0,  1,  0,  0 CLASS 0,  0,  1,  0 0,  0,  0,  1 * style=”” 1,  0,  0,  0 !important specificity  *   @import  at  rule  
  14. 14. 2. 1 ID 0,  1,  0,  0 CLASS 0,  0,  1,  0 0,  0,  0,  1 * style=”” 1,  0,  0,  0 !important specificity  *   @import  at  rule   *
  15. 15. 2. 1 <div  id=”alipay”  class=”b  a”>        <span>sofish</span> </div> <style>        .a{color:green;}        .b{color:blue;} </style>
  16. 16. 2. 1 <div  id=”alipay”  class=”b  a”>        <span>sofish</span> </div>
  17. 17. 2. 1 <div  id=”alipay”  class=”b  a”>        <span>sofish</span> </div> <style>        div{color:green;}        span{color:blue;} </style>
  18. 18. 2. 1 <div  id=”alipay”  class=”b  a”>        <span>sofish</span> </div>
  19. 19. 2. 1 <div  id=”alipay”  class=”b  a”>        <span>sofish</span> </div> <style>        div{color:green!important;}        #alipay{color:blue;} </style>
  20. 20. 2. 1 <div  id=”alipay”  class=”b  a”> !important          <span>sofish</span> </div>
  21. 21. 2. 1 <div  id=”alipay”  class=”b  a”> !important          <span>sofish</span> </div> <style>        div  span{color:green;}        span{color:blue;} </style>
  22. 22. 2. 1 <div  id=”alipay”  class=”b  a”> !important          <span>sofish</span> </div> base:   <style>        div  span{color:green;}        span{color:blue;} </style>
  23. 23. 2. 1 <div  id=”alipay”  class=”b  a”> !important          <span>sofish</span> </div> base:   <style>        div  span{color:green;}        span{color:blue;} </style> IE  @import  
  24. 24. 2. 1 2
  25. 25. 2. 2
  26. 26. 2. 2 ID CLASS *
  27. 27. 2. 2 ID CLASS * http://code.google.com/speed/page-speed/docs/rendering.html
  28. 28. 2. 2 ID CLASS * http://code.google.com/speed/page-speed/docs/rendering.html
  29. 29. Q&A
  30. 30. Q&A
  31. 31. 3. 1 static 2 relative 3 absolute 4 fixed
  32. 32. 3. 1 static -­‐-­‐>   2 relative 3 absolute 4 fixed
  33. 33. 3. 1 static -­‐-­‐>   2 relative -­‐-­‐>   3 absolute 4 fixed
  34. 34. 3. 1 static -­‐-­‐>   2 relative -­‐-­‐>   3 absolute -­‐-­‐>   4 fixed
  35. 35. 3. 1 static -­‐-­‐>   2 relative -­‐-­‐>   3 absolute -­‐-­‐>   4 fixed -­‐-­‐>  
  36. 36. 3. 1 static -­‐-­‐>   -­‐-­‐>   -­‐-­‐>   -­‐-­‐>  
  37. 37. 3. 1 static -­‐-­‐>   -­‐-­‐>   -­‐-­‐>   -­‐-­‐>  
  38. 38. 3. 2 relative
  39. 39. 3. 2 relative
  40. 40. 3. 3 absolute
  41. 41. 3. 3 absolute
  42. 42. 3. 4 fixed
  43. 43. 3. 4 fixed
  44. 44. 3. 4 fixed  position:absolute;   “html”
  45. 45. 3. 1  static   2 fixed   3  ie6/ie7    bug
  46. 46. 3. 1  static   2 fixed   3  ie6/ie7    bug IE6/7
  47. 47. 3. 1  static   2 fixed   3  ie6/ie7    bug bug IE6/7
  48. 48. Q&A
  49. 49. Q&A
  50. 50. 4. 1 none  ( ) 2 right 3 left
  51. 51. 4. 1 none  ( )
  52. 52. 4. 1 none  ( )
  53. 53. 4. 2 right  
  54. 54. 4. 2 right  
  55. 55. 4. 3 left  
  56. 56. 4. 3 left  
  57. 57. 4. 3 left  
  58. 58. 4. 3 left  
  59. 59. 4. 3 left  
  60. 60. 4. 3 left  
  61. 61. 4. 1  vs   2 clearfix
  62. 62. 4. 1  vs   2 clearfix /*    */ .clearfix:after  {   visibility:hidden;   display:block;   font-­‐size:0;   content:"  ";   clear:both;   height:0; } .clearfix  {   zoom:1;  /*  for  IE6  IE7  */ }
  63. 63. 4. 1  vs   2 clearfix /*    */ .clearfix:after  {   visibility:hidden;   display:block;   font-­‐size:0;   content:"  ";   clear:both;   height:0; } .clearfix  {   zoom:1;  /*  for  IE6  IE7  */ }
  64. 64. Q&A
  65. 65. Q&A
  66. 66. 5. HACK 1 IE  bug  &&  hasLayout 2  HACK
  67. 67. 5. HACK 1 IE  bug  &&  hasLayout
  68. 68. 5. HACK 1 IE  bug  &&  hasLayout IE <!-­‐-­‐[if  lte  IE  7]>  ...  <![endif]-­‐-­‐>
  69. 69. 5. HACK 1 IE  bug  &&  hasLayout .all-­‐IE{property:value9;} .gte-­‐IE-­‐8{property:value0;} .lte-­‐IE-­‐7{*property:value;} .IE-­‐7{+property:value;} .IE-­‐6{_property:value;}   .not-­‐IE{property//:value;}
  70. 70. 5. HACK 1 IE  bug  &&  hasLayout .all-­‐IE{property:value9;} .gte-­‐IE-­‐8{property:value0;} .lte-­‐IE-­‐7{*property:value;} .IE-­‐7{+property:value;} .IE-­‐6{_property:value;}   .not-­‐IE{property//:value;}  IE6/7    bug    hasLayout  
  71. 71. 5. HACK 1 IE  bug  &&  hasLayout .all-­‐IE{property:value9;} .gte-­‐IE-­‐8{property:value0;} .lte-­‐IE-­‐7{*property:value;} .IE-­‐7{+property:value;} .IE-­‐6{_property:value;}   .not-­‐IE{property//:value;}  IE6/7    bug    hasLayout    hasLayout  hasLayout    3    bug
  72. 72. 5. HACK 2  HACK
  73. 73. 5. HACK 2  HACK @-­‐moz-­‐document  url-­‐prefix()  {  .firefox{property:value;}  } @media  all  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:0)  {          .webkit{property:value;}   } @media  all  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:10000),not  all  and  (-­‐webkit-­‐ min-­‐device-­‐pixel-­‐ratio:0)  {          .opera{property:value;}   } @media  screen  and  (max-­‐device-­‐width:  480px)  {          .iphone-­‐or-­‐mobile-­‐s-­‐webkit{property:value;}   }
  74. 74. 5. HACK
  75. 75. 5. HACK 1 2 3
  76. 76. 5. HACK
  77. 77. 5. HACK HACK ie6 hack _padding:6px; 1 IE10 IE9 padding:8px0; IE8+ hack IE10 hack bug 2
  78. 78. 5. HACK HACK ie6 hack _padding:6px; 1 IE10 IE9 padding:8px0; IE8+ hack IE10 hack bug 2 HACK http://sofish.de/1331
  79. 79. Q&A
  80. 80. Q&A
  81. 81. 6. CSS 1  Reset 2  Reset 3
  82. 82. 6. CSS 1  Reset
  83. 83. 6. CSS 1  Reset /* */ html{ color:#000;background:#fff; } /* */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textare a,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgr oup,menu,nav,section { margin:0;padding:0; } ...
  84. 84. 6. CSS 1  Reset /* */ html{ color:#000;background:#fff; } /* */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textare a,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgr oup,menu,nav,section { margin:0;padding:0; } ...  YUI    Reset http://developer.yahoo.com/yui/3/cssreset/
  85. 85. 6. CSS 1  Reset   /* */ CSS  Reset html{ color:#000;background:#fff; } /* */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textare a,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgr oup,menu,nav,section { margin:0;padding:0; } ...  YUI    Reset http://developer.yahoo.com/yui/3/cssreset/
  86. 86. 6. CSS 2  Reset + h1{font-­‐size:30px} .h1{font-­‐size:30px} h2{font-­‐size:20px} .h2{font-­‐size:20px} h3{font-­‐size:10px;} .h3{font-­‐size:10px;}
  87. 87. 6. CSS 2 HTML
  88. 88. 6. CSS 2 HTML
  89. 89. 6. CSS 2 HTML
  90. 90. 6. CSS 2 HTML
  91. 91. 6. CSS 2 HTML
  92. 92. 6. CSS 2 HTML .module{} .module  .head{} .module  .body{} .module  .foot{}
  93. 93. 6. CSS 2 HTML .module{} .module  .head{} .module  .body{} .module  .foot{} Alice  Style  Library  Guideline   CSS  
  94. 94. Q&A
  95. 95. Q&A
  96. 96. 7. CSS3  CSS3  
  97. 97. 8. 1 Firebug 2  Dreamweaver   3 css.vim 4 CSS  Tidy 5  alice  solutions http://arale.alipay.net/alice/documentation.php 6
  98. 98. Q&A
  99. 99. sofish@163.com
  100. 100. THANKS!by http://sofish.de sofish@163.com

×