原文地址：http://webdevmania.com/archive/top_10_css_snippets/

I have noticed myself to use a few different code snippets on a daily basis so I thought some of you might find them useful. So here we go.

 
1.    
        
   Centering a website (or other elements)   
   The HTML
   view plaincopy to clipboardprint?

   1. <DIV class=wrap>  
   2. </DIV><!-- end wrap -->  

       
   
       
       <!-- end wrap -->
       

   The CSS

    

   view plaincopy to clipboardprint?

   1. .wrap { width:960px; margin:0 auto;}   

     .wrap { width:960px; margin:0 auto;}
       

    

   This is an oldie, but apperantly it is not as obvious as you would think.

    

 

2. 
      
   

      
   Sticky Footer (make footer always be on bottom without absolute positioning)

    
   The HTML

    

   view plaincopy to clipboardprint?

   1. <DIV id=wrap>  
   2.   
   3. <DIV id=main class=clearfix>  
   4.   
   5. </DIV>  
   6.   
   7. </DIV>  
   8.   
   9. <DIV id=footer>  
   10.   
   11. </DIV>  

   The CSS

    

   view plaincopy to clipboardprint?

   1. * { margin:0; padding:0; }    
   2.   
   3. html, body, #wrap { height: 100%; }   
   4.   
   5. body > #wrap {height: auto; min-height: 100%;}   
   6.   
   7. #main { padding-bottom: 150px; }  /* must be same height as the footer */  
   8.   
   9. #footer {   
   10.         position: relative;   
   11.  margin-top: -150px; /* negative value of footer height */  
   12.  height: 150px;   
   13.  clear:both;}    
   14.   
   15. /* CLEAR FIX*/  
   16. .clearfix:after {content: ".";   
   17.  display: block;   
   18.  height: 0;   
   19.  clear: both;   
   20.  visibility: hidden;}   
   21. .clearfix {display: inline-block;}   
   22. /* Hides from IE-mac */  
   23. * html .clearfix { height: 1%;}   
   24. .clearfix {display: block;}   
   25. /* End hide from IE-mac */  

     * { margin:0; padding:0; }
       html, body, #wrap { height: 100%; }
       body > #wrap {height: auto; min-height: 100%;}
       #main { padding-bottom: 150px; }  /* must be same height as the footer */
       #footer {
       position: relative;
       margin-top: -150px; /* negative value of footer height */
       height: 150px;
       clear:both;}
       /* CLEAR FIX*/
       .clearfix:after {content: ".";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;}
       .clearfix {display: inline-block;}
       /* Hides from IE-mac */
       * html .clearfix { height: 1%;}
       .clearfix {display: block;}
       /* End hide from IE-mac */
       

    

   As of recently i have had to use this over 50 times… i think this is one of the most important tricks you will learn today.

    

 

3. 
      
   

      
   Cross-Browser Min Height

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. .element { min-height:600px; height:auto !important; height:600px; }   

     .element { min-height:600px; height:auto !important; height:600px; }
       

    

   You can replace the min-height and heigth with 12em or another value that works for you.

    

 

4. 
      
   

      
   Box Shadow (CSS3)

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }   

     .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }
       

    

   As you can see since this is a CSS3 property you will need all the three commands to make it cross browser(except for ie of course). The first 2 measurements are for horizontal offset and the vertical offset. The third number is for the blur radius. And the last is the color of the shadow.

    

 

5. 
      
   

      
   Text Shadow (CSS3) with IE hack

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }   

     .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
       

    

   This technique is great for all modern browsers, the IE fix works but it is not amazing quality.

    

 

6. 
      
   

      
   Cross Browser CSS Opacity

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. .transparent {   
   2.      
   3.   /* Modern Browsers */ opacity: 0.7;   
   4.   
   5.   /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";   
   6.   
   7.   /* IE 5-7 */ filter: alpha(opacity=70);   
   8.   
   9.   /* Netscape */ -moz-opacity: 0.7;   
   10.   
   11.   /* Safari 1 */ -khtml-opacity: 0.7;   
   12.      
   13. }   

     .transparent {
       /* Modern Browsers */ opacity: 0.7;
       /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
       /* IE 5-7 */ filter: alpha(opacity=70);
       /* Netscape */ -moz-opacity: 0.7;
       /* Safari 1 */ -khtml-opacity: 0.7;
       }
       

    

   Opacity can be used for plenty of elements, it adds a certain new age style we all strive for. Notice that in some browsers transperancy is inherited by all child elements!

    

 

7. 
      
   

      
   The Famous Meyer Reset

    
   The CSS

    

   view plaincopy to clipboardprint?

   1.   html, body, div, span, applet, object, iframe,   
   2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,   
   3. a, abbr, acronym, address, big, cite, code,   
   4. del, dfn, em, font, img, ins, kbd, q, s, samp,   
   5. small, strike, strong, sub, sup, tt, var,   
   6. dl, dt, dd, ol, ul, li,   
   7. fieldset, form, label, legend,   
   8. table, caption, tbody, tfoot, thead, tr, th, td {   
   9.  margin: 0;   
   10.  padding: 0;   
   11.  border: 0;   
   12.  outline: 0;   
   13.  font-weight: inherit;   
   14.  font-style: inherit;   
   15.  font-size: 100%;   
   16.  font-family: inherit;   
   17.  vertical-align: baseline;   
   18. }   
   19. /* remember to define focus styles! */  
   20. :focus {   
   21.  outline: 0;   
   22. }   
   23. body {   
   24.  line-height: 1;   
   25.  color: black;   
   26.  background: white;   
   27. }   
   28. ol, ul {   
   29.  list-style: none;   
   30. }   
   31. /* tables still need 'cellspacing="0"' in the markup */  
   32. table {   
   33.  border-collapse: separate;   
   34.  border-spacing: 0;   
   35. }   
   36. caption, th, td {   
   37.  text-align: left;   
   38.  font-weight: normal;   
   39. }   
   40. blockquote:before, blockquote:after,   
   41. q:before, q:after {   
   42.  content: "";   
   43. }   
   44. blockquote, q {   
   45.  quotes: "" "";   
   46. }   
   47.    

     html, body, div, span, applet, object, iframe,
       h1, h2, h3, h4, h5, h6, p, blockquote, pre,
       a, abbr, acronym, address, big, cite, code,
       del, dfn, em, font, img, ins, kbd, q, s, samp,
       small, strike, strong, sub, sup, tt, var,
       dl, dt, dd, ol, ul, li,
       fieldset, form, label, legend,
       table, caption, tbody, tfoot, thead, tr, th, td {
       margin: 0;
       padding: 0;
       border: 0;
       outline: 0;
       font-weight: inherit;
       font-style: inherit;
       font-size: 100%;
       font-family: inherit;
       vertical-align: baseline;
       }
       /* remember to define focus styles! */
       :focus {
       outline: 0;
       }
       body {
       line-height: 1;
       color: black;
       background: white;
       }
       ol, ul {
       list-style: none;
       }
       /* tables still need 'cellspacing="0"' in the markup */
       table {
       border-collapse: separate;
       border-spacing: 0;
       }
       caption, th, td {
       text-align: left;
       font-weight: normal;
       }
       blockquote:before, blockquote:after,
       q:before, q:after {
       content: "";
       }
       blockquote, q {
       quotes: "" "";
       }
       

    

   This is the most useful css reset out there, i use it for almost everything I work on (even the 52framework, coming soon).

    

 

8. 
      
   

      
   Removing the dotted outlines

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. a, a:active { outline: none; }   

     a, a:active { outline: none; }
       

    

   I find myself getting very annoyed with the dotted outline (especially for text-indented elements that are off the page).

    

 

9. 
      
   

      
   Rounded Corners (non ie)

    
   The CSS

    

   view plaincopy to clipboardprint?

   1. .element {   
   2.  -moz-border-radius: 5px;   
   3.  -webkit-border-radius: 5px;   
   4.  border-radius: 5px; /* future proofing */  
   5. }   
   6. .element-top-left-corner {   
   7.  -moz-border-radius-topleft: 5px;   
   8.  -webkit-border-top-left-radius: 5px;   
   9. }   

     .element {
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border-radius: 5px; /* future proofing */
       }
       .element-top-left-corner {
       -moz-border-radius-topleft: 5px;
       -webkit-border-top-left-radius: 5px;
       }
       

    

   Love rounded corners? Don’t want to slave over images and elements to get the effect? This is your solution, and elements still look fine in ie.

    

 

10. 
       
    

       
    Override Inline Styles

     
    The CSS

     

    view plaincopy to clipboardprint?

    1. .override {   
    2.  font-size: 14px !important;   
    3. }   

      .override {
        font-size: 14px !important;
        }
        

     

    This comes in handy plenty of times, I personally use it way too much everytime something doesn’t work I test if its just not being applied because of some other style.