• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS 101
 

CSS 101

on

  • 6,288 views

2011 新人培训, 讲 CSS 基础。

2011 新人培训, 讲 CSS 基础。

Statistics

Views

Total Views
6,288
Views on SlideShare
3,156
Embed Views
3,132

Actions

Likes
12
Downloads
127
Comments
0

15 Embeds 3,132

http://sofish.de 2880
http://xianguo.com 81
http://feed.feedsky.com 49
http://www.zhuaxia.com 30
http://static.slidesharecdn.com 27
http://sofi.sh 23
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 CSS 101 Presentation Transcript

    • 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  margin-­‐top   margin-­‐bottom replaced  /  non-­‐replaced  elements http://reference.sitepoint.com/css/replacedelements
    • 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 * style=”” 1,  0,  0,  0 !important specificity  *   @import  at  rule  
    • 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   *
    • 2. 1 <div  id=”alipay”  class=”b  a”>        <span>sofish</span> </div> <style>        .a{color:green;}        .b{color:blue;} </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>        div{color:green;}        span{color:blue;} </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>        div{color:green!important;}        #alipay{color:blue;} </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> <style>        div  span{color:green;}        span{color:blue;} </style>
    • 2. 1 <div  id=”alipay”  class=”b  a”> !important          <span>sofish</span> </div> base:   <style>        div  span{color:green;}        span{color:blue;} </style>
    • 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  
    • 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 IE6/7
    • 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  {   visibility:hidden;   display:block;   font-­‐size:0;   content:"  ";   clear:both;   height:0; } .clearfix  {   zoom:1;  /*  for  IE6  IE7  */ }
    • 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  */ }
    • 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:value0;} .lte-­‐IE-­‐7{*property:value;} .IE-­‐7{+property:value;} .IE-­‐6{_property:value;}   .not-­‐IE{property//:value;}
    • 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  
    • 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
    • 5. HACK 2  HACK
    • 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;}   }
    • 5. HACK
    • 5. HACK 1 2 3
    • 5. HACK
    • 5. HACK HACK ie6 hack _padding:6px; 1 IE10 IE9 padding:8px0; IE8+ hack IE10 hack bug 2
    • 5. HACK HACK ie6 hack _padding:6px; 1 IE10 IE9 padding:8px0; IE8+ hack IE10 hack bug 2 HACK http://sofish.de/1331
    • Q&A
    • Q&A
    • 6. CSS 1  Reset 2  Reset 3
    • 6. CSS 1  Reset
    • 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; } ...
    • 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/
    • 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/
    • 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;}
    • 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{} .module  .foot{}
    • 6. CSS 2 HTML .module{} .module  .head{} .module  .body{} .module  .foot{} Alice  Style  Library  Guideline   CSS  
    • Q&A
    • Q&A
    • 7. CSS3  CSS3  
    • 8. 1 Firebug 2  Dreamweaver   3 css.vim 4 CSS  Tidy 5  alice  solutions http://arale.alipay.net/alice/documentation.php 6
    • Q&A
    • sofish@163.com
    • THANKS!by http://sofish.de sofish@163.com