CSS101by   http://sofish.de
1CSS101by       http://sofish.de
1.   5.      Hack2.   6.        CSS3.   7. CSS34.   8.
1.
1.       margin       padding     border
1.                 margin                 padding               border                  non-­‐replaced                    ...
Q&A
Q&A
2.     1 #id	  .class     2 [rel=”nofollow”]	  :hover     3     4 *
2.     1 #id	  .class     2 [rel=”nofollow”]	  :hover     3     4 *
2.     1     2
2.     1
2.     1     ID           0,	  1,	  0,	  0     CLASS        0,	  0,	  1,	  0                  0,	  0,	  0,	  1     *     s...
2.     1     ID           0,	  1,	  0,	  0     CLASS        0,	  0,	  1,	  0                  0,	  0,	  0,	  1     *     s...
2.      1     <div	  id=”alipay”	  class=”b	  a”>     	  	  	  	  <span>sofish</span>     </div>     <style>     	  	  	  ...
2.     1     <div	  id=”alipay”	  class=”b	  a”>     	  	  	  	  <span>sofish</span>     </div>
2.      1     <div	  id=”alipay”	  class=”b	  a”>     	  	  	  	  <span>sofish</span>     </div>     <style>     	  	  	  ...
2.     1     <div	  id=”alipay”	  class=”b	  a”>     	  	  	  	  <span>sofish</span>     </div>
2.      1     <div	  id=”alipay”	  class=”b	  a”>     	  	  	  	  <span>sofish</span>     </div>     <style>     	  	  	  ...
2.     1     <div	  id=”alipay”	  class=”b	  a”>   !important	       	  	  	  	  <span>sofish</span>     </div>
2.      1     <div	  id=”alipay”	  class=”b	  a”>      !important	       	  	  	  	  <span>sofish</span>     </div>     <s...
2.      1     <div	  id=”alipay”	  class=”b	  a”>      !important	       	  	  	  	  <span>sofish</span>     </div>       ...
2.      1     <div	  id=”alipay”	  class=”b	  a”>      !important	       	  	  	  	  <span>sofish</span>     </div>       ...
2.     1     2
2.     2
2.     2     ID     CLASS     *
2.      2     ID     CLASS     *     http://code.google.com/speed/page-speed/docs/rendering.html
2.      2     ID     CLASS     *     http://code.google.com/speed/page-speed/docs/rendering.html
Q&A
Q&A
3.     1 static     2 relative     3 absolute     4 fixed
3.     1 static     -­‐-­‐>	       2 relative     3 absolute     4 fixed
3.     1 static     -­‐-­‐>	       2 relative   -­‐-­‐>	       3 absolute     4 fixed
3.     1 static     -­‐-­‐>	       2 relative   -­‐-­‐>	       3 absolute   -­‐-­‐>	       4 fixed
3.     1 static     -­‐-­‐>	       2 relative   -­‐-­‐>	       3 absolute   -­‐-­‐>	       4 fixed      -­‐-­‐>	  
3.     1 static   -­‐-­‐>	                  -­‐-­‐>	                  -­‐-­‐>	                  -­‐-­‐>	  
3.     1 static   -­‐-­‐>	                  -­‐-­‐>	                  -­‐-­‐>	                  -­‐-­‐>	  
3.     2 relative
3.     2 relative
3.     3 absolute
3.     3 absolute
3.     4 fixed
3.     4 fixed
3.     4 fixed        	  position:absolute;	          “html”
3.     1         	  static	       2 fixed	       3         	  ie6/ie7	   	  bug
3.     1         	  static	       2 fixed	       3         	  ie6/ie7	   	  bug                                   IE6/7
3.     1         	  static	       2 fixed	       3         	  ie6/ie7	   	  bug     bug                                   ...
Q&A
Q&A
4.     1 none	  (   )     2 right     3 left
4.     1 none	  (   )
4.     1 none	  (   )
4.     2 right	  
4.     2 right	  
4.     3 left	  
4.     3 left	  
4.     3 left	  
4.     3 left	  
4.     3 left	  
4.     3 left	  
4.     1    	  vs	       2 clearfix
4.     1                	  vs	       2 clearfix         /*	         	  */         .clearfix:after	  {         	     visibi...
4.     1                	  vs	       2 clearfix         /*	         	  */         .clearfix:after	  {         	     visibi...
Q&A
Q&A
5.             HACK     1 IE	  bug	  &&	  hasLayout     2               	  HACK
5.             HACK     1 IE	  bug	  &&	  hasLayout
5.             HACK     1 IE	  bug	  &&	  hasLayout     IE        <!-­‐-­‐[if	  lte	  IE	  7]>	  ...	  <![endif]-­‐-­‐>
5.                       HACK      1 IE	  bug	  &&	  hasLayout     .all-­‐IE{property:value9;}     .gte-­‐IE-­‐8{property:...
5.                       HACK      1 IE	  bug	  &&	  hasLayout     .all-­‐IE{property:value9;}     .gte-­‐IE-­‐8{property:...
5.                       HACK      1 IE	  bug	  &&	  hasLayout     .all-­‐IE{property:value9;}     .gte-­‐IE-­‐8{property:...
5.       HACK     2     	  HACK
5.                              HACK      2                                       	  HACK     @-­‐moz-­‐document	  url-­‐p...
5.   HACK
5.       HACK     1     2     3
5.   HACK
5.                          HACK              HACK            ie6      hack   _padding:6px;                     1         ...
5.                                HACK                    HACK                  ie6      hack   _padding:6px;             ...
Q&A
Q&A
6.               CSS     1     	  Reset     2   	  Reset     3
6.            CSS     1   	  Reset
6.                                      CSS     1                       	  Reset     /*                                   ...
6.                                      CSS     1                       	  Reset     /*                                   ...
6.                                      CSS     1                       	  Reset                                          ...
6.                               CSS      2             	  Reset                             +     h1{font-­‐size:30px}   ...
6.              CSS     2         HTML
6.              CSS     2         HTML
6.              CSS     2         HTML
6.              CSS     2         HTML
6.              CSS     2         HTML
6.                        CSS     2              HTML     .module{}     .module	  .head{}     .module	  .body{}     .modul...
6.                            CSS       2               HTML     .module{}     .module	  .head{}     .module	  .body{}    ...
Q&A
Q&A
7. CSS3	  CSS3	  
8.     1 Firebug     2                            	  Dreamweaver	       3 css.vim     4 CSS	  Tidy     5                  ...
Q&A
sofish@163.com
THANKS!by   http://sofish.de       sofish@163.com
CSS 101
CSS 101
Upcoming SlideShare
Loading in...5
×

CSS 101

6,600

Published on

2011 新人培训, 讲 CSS 基础。

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

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

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×