Your SlideShare is downloading. ×
0
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
CSS 101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS 101

6,494

Published on

2011 新人培训, 讲 CSS 基础。

2011 新人培训, 讲 CSS 基础。

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,494
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
142
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×