CSS 101
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

CSS 101

on

  • 6,374 views

2011 新人培训, 讲 CSS 基础。

2011 新人培训, 讲 CSS 基础。

Statistics

Views

Total Views
6,374
Views on SlideShare
3,216
Embed Views
3,158

Actions

Likes
12
Downloads
130
Comments
0

15 Embeds 3,158

http://sofish.de 2880
http://xianguo.com 81
http://sofi.sh 49
http://feed.feedsky.com 49
http://www.zhuaxia.com 30
http://static.slidesharecdn.com 27
http://zhuaxia.com 11
http://feed.sofish.de 11
http://reader.youdao.com 10
http://translate.googleusercontent.com 3
http://www.hksilicon.com 2
http://oklai.co.cc 2
http://old.xianguo.com 1
http://www.slashdocs.com 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS 101 Presentation Transcript

  • 1. CSS101by http://sofish.de
  • 2. 1CSS101by http://sofish.de
  • 3. 1. 5. Hack2. 6. CSS3. 7. CSS34. 8.
  • 4. 1.
  • 5. 1. margin padding border
  • 6. 1. margin padding border non-­‐replaced  margin-­‐top   margin-­‐bottom replaced  /  non-­‐replaced  elements http://reference.sitepoint.com/css/replacedelements
  • 7. Q&A
  • 8. Q&A
  • 9. 2. 1 #id  .class 2 [rel=”nofollow”]  :hover 3 4 *
  • 10. 2. 1 #id  .class 2 [rel=”nofollow”]  :hover 3 4 *
  • 11. 2. 1 2
  • 12. 2. 1
  • 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. 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. 2. 1 <div  id=”alipay”  class=”b  a”>        <span>sofish</span> </div> <style>        .a{color:green;}        .b{color:blue;} </style>
  • 16. 2. 1 <div  id=”alipay”  class=”b  a”>        <span>sofish</span> </div>
  • 17. 2. 1 <div  id=”alipay”  class=”b  a”>        <span>sofish</span> </div> <style>        div{color:green;}        span{color:blue;} </style>
  • 18. 2. 1 <div  id=”alipay”  class=”b  a”>        <span>sofish</span> </div>
  • 19. 2. 1 <div  id=”alipay”  class=”b  a”>        <span>sofish</span> </div> <style>        div{color:green!important;}        #alipay{color:blue;} </style>
  • 20. 2. 1 <div  id=”alipay”  class=”b  a”> !important          <span>sofish</span> </div>
  • 21. 2. 1 <div  id=”alipay”  class=”b  a”> !important          <span>sofish</span> </div> <style>        div  span{color:green;}        span{color:blue;} </style>
  • 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. 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. 2. 1 2
  • 25. 2. 2
  • 26. 2. 2 ID CLASS *
  • 27. 2. 2 ID CLASS * http://code.google.com/speed/page-speed/docs/rendering.html
  • 28. 2. 2 ID CLASS * http://code.google.com/speed/page-speed/docs/rendering.html
  • 29. Q&A
  • 30. Q&A
  • 31. 3. 1 static 2 relative 3 absolute 4 fixed
  • 32. 3. 1 static -­‐-­‐>   2 relative 3 absolute 4 fixed
  • 33. 3. 1 static -­‐-­‐>   2 relative -­‐-­‐>   3 absolute 4 fixed
  • 34. 3. 1 static -­‐-­‐>   2 relative -­‐-­‐>   3 absolute -­‐-­‐>   4 fixed
  • 35. 3. 1 static -­‐-­‐>   2 relative -­‐-­‐>   3 absolute -­‐-­‐>   4 fixed -­‐-­‐>  
  • 36. 3. 1 static -­‐-­‐>   -­‐-­‐>   -­‐-­‐>   -­‐-­‐>  
  • 37. 3. 1 static -­‐-­‐>   -­‐-­‐>   -­‐-­‐>   -­‐-­‐>  
  • 38. 3. 2 relative
  • 39. 3. 2 relative
  • 40. 3. 3 absolute
  • 41. 3. 3 absolute
  • 42. 3. 4 fixed
  • 43. 3. 4 fixed
  • 44. 3. 4 fixed  position:absolute;   “html”
  • 45. 3. 1  static   2 fixed   3  ie6/ie7    bug
  • 46. 3. 1  static   2 fixed   3  ie6/ie7    bug IE6/7
  • 47. 3. 1  static   2 fixed   3  ie6/ie7    bug bug IE6/7
  • 48. Q&A
  • 49. Q&A
  • 50. 4. 1 none  ( ) 2 right 3 left
  • 51. 4. 1 none  ( )
  • 52. 4. 1 none  ( )
  • 53. 4. 2 right  
  • 54. 4. 2 right  
  • 55. 4. 3 left  
  • 56. 4. 3 left  
  • 57. 4. 3 left  
  • 58. 4. 3 left  
  • 59. 4. 3 left  
  • 60. 4. 3 left  
  • 61. 4. 1  vs   2 clearfix
  • 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. 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. Q&A
  • 65. Q&A
  • 66. 5. HACK 1 IE  bug  &&  hasLayout 2  HACK
  • 67. 5. HACK 1 IE  bug  &&  hasLayout
  • 68. 5. HACK 1 IE  bug  &&  hasLayout IE <!-­‐-­‐[if  lte  IE  7]>  ...  <![endif]-­‐-­‐>
  • 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. 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. 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. 5. HACK 2  HACK
  • 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. 5. HACK
  • 75. 5. HACK 1 2 3
  • 76. 5. HACK
  • 77. 5. HACK HACK ie6 hack _padding:6px; 1 IE10 IE9 padding:8px0; IE8+ hack IE10 hack bug 2
  • 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. Q&A
  • 80. Q&A
  • 81. 6. CSS 1  Reset 2  Reset 3
  • 82. 6. CSS 1  Reset
  • 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. 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. 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. 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. 6. CSS 2 HTML
  • 88. 6. CSS 2 HTML
  • 89. 6. CSS 2 HTML
  • 90. 6. CSS 2 HTML
  • 91. 6. CSS 2 HTML
  • 92. 6. CSS 2 HTML .module{} .module  .head{} .module  .body{} .module  .foot{}
  • 93. 6. CSS 2 HTML .module{} .module  .head{} .module  .body{} .module  .foot{} Alice  Style  Library  Guideline   CSS  
  • 94. Q&A
  • 95. Q&A
  • 96. 7. CSS3  CSS3  
  • 97. 8. 1 Firebug 2  Dreamweaver   3 css.vim 4 CSS  Tidy 5  alice  solutions http://arale.alipay.net/alice/documentation.php 6
  • 98. Q&A
  • 99. sofish@163.com
  • 100. THANKS!by http://sofish.de sofish@163.com