30个你应该知道的实用CSS代码片断

CSS是大家在web开发中常用的语言，但是有时候使用非常不爽。某一个CSS可能应用在不同的浏览器中行为不全一样。所以大家得花很多时间来进行调试。

幸运的是，网络上大家可以找到很多不错的CSS代码片断，能够有效地帮助大家解决一般性的或者设计问题。这里我们收集了30个CSS的代码片断帮助大家调试。希望大家喜欢!

代码

1. Chris Poteet’s CSS浏览器重置代码

这个代码能够有效地帮助大家解决跨浏览器问题。虽然不支持IE6，但是对于这种美国占有率低于1%的浏览器，大家大可以放弃。

/*  
 
Reset Default Browser Styles  
- Place first in the listing of external style sheets for cascading.  
- Be sure to explicitly set margin/padding styles.  
- Styles are not reset that have to do with display (block, inline) are not reset.  
 
By: Chris Poteet & various influences  
 
*/ 
 
* {  
vertical-align: baseline;  
font-family: inherit;  
font-style: inherit;  
font-size: 100%;  
border: none;  
padding: 0;  
margin: 0;  
}  
body {  
padding: 5px;  
}  
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {  
margin: 20px 0;  
}  
li, dd, blockquote {  
margin-left: 40px;  
}  
dt {  
font-weight: bold;  
}  
table {  
border-collapse: collapse;  
border-spacing: 0;  
} 

2. Eric Meyer’s CSS Reset

Eric的CSS代码片断可能是最受欢迎的代码之一。甚至支持Blueprint CSS Framework.

/* http://meyerweb.com/eric/tools/css/reset/  
   v2.0 | 20110126  
   License: none (public domain)  
*/ 
 
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, img, ins, kbd, q, s, samp,  
small, strike, strong, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td,  
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary,  
time, mark, audio, video {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    font-size: 100%;  
    font: inherit;  
    vertical-align: baseline;  
}  
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section {  
    display: block;  
}  
body {  
    line-height: 1;  
}  
ol, ul {  
    list-style: none;  
}  
blockquote, q {  
    quotes: none;  
}  
blockquote:before, blockquote:after,  
q:before, q:after {  
    content: '';  
    content: none;  
}  
table {  
    border-collapse: collapse;  
    border-spacing: 0;  
} 

3. How to Create Multiple Borders in CSS3

非常酷的方式创建box阴影，允许你创建多个边框

box-shadow:  
    0 0 0 2px #000,  
    0 0 0 3px #999,  
    0 0 0 9px #fa0,  
    0 0 0 10px #666,  
    0 0 0 16px #fd0,  
    0 0 0 18px #000;  

4. Tucked Corners

CSS代码允许你创建类似非常酷的Gravatar首页效果

div.tucked-corners {  
        background: #f6f6f6;  
        height: 380px;  
        margin: 50px auto;  
        padding: 10px;  
        position: relative;  
        width: 580px;  
        -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);  
           -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);  
                box-shadow: 0 1px 7px hsla(0,0%,0%,.2);  
    }  
    span.tucked-corners {  
        background: #c4453c;  
        display: block;  
        height: 380px;  
        position: relative;  
        width: 580px;  
        -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);  
           -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);  
                box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);  
    }  
 
    /* Top Corner Effect */ 
 
    .top-corners:after,  
    .top-corners:before {  
        background: #e6e6e6;  
        content: '';  
        height: 50px;  
        position: absolute;  
        top: -25px;  
        width: 100px;  
        z-index: 10;  
        -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
           -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
                box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
    }  
    .top-corners:after {  
        left: -50px;  
        -webkit-transform: rotate(-45deg);  
           -moz-transform: rotate(-45deg);  
            -ms-transform: rotate(-45deg);  
             -o-transform: rotate(-45deg);  
                transform: rotate(-45deg);  
    }  
    .top-corners:before {  
        right: -50px;  
        -webkit-transform: rotate(45deg);  
           -moz-transform: rotate(45deg);  
            -ms-transform: rotate(45deg);  
             -o-transform: rotate(45deg);  
                transform: rotate(45deg);  
    }  
 
    /* Bottom Corner Effect */ 
 
    .bottom-corners:after,  
    .bottom-corners:before {  
        background: #e6e6e6;  
        content: '';  
        height: 50px;  
        position: absolute;  
        bottom: -25px;  
        width: 100px;  
        -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
           -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
                box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
    }  
    .bottom-corners:after {  
        left: -50px;  
        -webkit-transform: rotate(-135deg);  
           -moz-transform: rotate(-135deg);  
            -ms-transform: rotate(-135deg);  
             -o-transform: rotate(-135deg);  
                transform: rotate(-135deg);  
    }  
    .bottom-corners:before {  
        right: -50px;  
        -webkit-transform: rotate(135deg);  
           -moz-transform: rotate(135deg);  
            -ms-transform: rotate(135deg);  
             -o-transform: rotate(135deg);  
                transform: rotate(135deg);  
    } 

5. iPad-Specific CSS

修改一般的ipad屏幕布局

@media only screen and (device-width: 768px) {  
  /* For general iPad layouts */ 
}  
 
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {  
  /* For portrait layouts only */ 
}  
 
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {  
  /* For landscape layouts only */ 
} 

6. Style links depending on file format

修改外部链接，email链接，pdf链接的样式

/* external links */ 
a[href^="http://"]{  
    padding-right: 20px;  
    background: url(external.gif) no-repeat center right;  
}  
 
/* emails */ 
 
a[href^="mailto:"]{  
padding-right: 20px;  
 
background: url(email.png) no-repeat center right;  
 
}  
 
/* pdfs */ 
 
a[href$=".pdf"]{  
padding-right: 20px;  
background: url(pdf.png) no-repeat center right; 

#p#

7. Drop Caps

非常棒的跨浏览器代码帮助你使得每段文字的第一个字母更加

.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; } 

明显CSS3也可以，但是不支持IE9

p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; } 

8. CSS Sticky Footer

CSS实现的置顶sticky页脚效果，支持所有的主流浏览器包括chrome和IE8

CSS：

/*  
Sticky Footer Solution  
by Steve Hatcher   
 
http://stever.ca  
 
http://www.cssstickyfooter.com  
 
*/ 
 
* {margin:0;padding:0;}   
 
/* must declare 0 margins on everything, also for main layout components use padding, not  
vertical margins (top and bottom) to add spacing, else those margins get added to total height  
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ 
 
html, body {height: 100%;}  
 
#wrap {min-height: 100%;}  
 
#main {overflow:auto;  
    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;}   
 
/*Opera Fix*/ 
body:before {/* thanks to Maleika (Kohoutec)*/ 
content:"";  
height:100%;  
float:left;  
width:0;  
margin-top:-32767px;/* thank you Erik J - negate effect of float*/ 
}  
 
/* IMPORTANT  
 
You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher.  
 
<!--[if !IE 7]>  
<style type="text/css">  
        #wrap {display:table;height:100%}  
    </style>  
 
< ![endif]-->  
 
*/ 

HTML：

<div id="wrap"> 
 
    <div id="main"> 
 
    </div> 
 
</div> 
 
 
<div id="footer"> 
 
</div> 

9. Image Replacement Technique

实用的图片替换文字页面元素效果。

a.replacement  
{  
  background: url(dotted-border.png) no-repeat;  
  height: 44px;  
  width: 316px;  
  display: block;  
  text-indent: -9999px;  
  overflow: hidden;  /*Add this line to the image replacement method*/ 
} 

10. Set body font-size to 62.5% for Easier em Conversion

如果你想拥有更加灵活的布局，你应该使用em而不是pixel或者points。通过设置你的字体62.5%，你可以很容易的通过设置em为pixel的1/10来设置文字。

body {  
  font-size: 62.5%; /* font-size 1em = 10px */ 
}  
p {  
  font-size: 1.2em; /* 1.2em = 12px */ 
} 

11. Vertically Align Text

如果你设置line-height和父元素高度相同，则很容易让文字垂直居中

div { width:100px; height:100px; }  
div p { line-height:100px; } 

12. How to Create 3D Text With CSS3

使用text-shadow属性，你可以只使用CSS3创建3D文字

p.threeD  
{  
    text-shadow:  
        -1px 1px 0 #ddd,  
        -2px 2px 0 #c8c8c8,  
        -3px 3px 0 #ccc,  
        -4px 4px 0 #b8b8b8,  
        -4px 4px 0 #bbb,  
        0px 1px 1px rgba(0,0,0,.4),  
        0px 2px 2px rgba(0,0,0,.3),  
        -1px 3px 3px rgba(0,0,0,.2),  
        -1px 5px 5px rgba(0,0,0,.1),  
        -2px 8px 8px rgba(0,0,0,.1),  
        -2px 13px 13px rgba(0,0,0,.1)  
        ;  
} 

13. Wrapping Long URLs and Text Content with CSS

这段代码将会帮助你使得一行文字不至于太长，会自动根据内容宽度来折行

pre {  
    white-space: pre;           /* CSS 2.0 */ 
    white-space: pre-wrap;      /* CSS 2.1 */ 
    white-space: pre-line;      /* CSS 3.0 */ 
    white-space: -pre-wrap;     /* Opera 4-6 */ 
    white-space: -o-pre-wrap;   /* Opera 7 */ 
    white-space: -moz-pre-wrap; /* Mozilla */ 
    white-space: -hp-pre-wrap;  /* HP Printers */ 
    word-wrap: break-word;      /* IE 5+ */ 
    } 

14. Fancy Ampersand

使得你的"&"符号更加漂亮

.amp {  
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;  
font-style: italic;  
font-weight: normal;  
} 

15. Pull Quotes for Improved Reading

使得你的引用更加明显，将引用浮动到左边或者右边，并且包围内容

.pullquote {  
width: 300px;  
float: right;  
margin: 5px;  
font-family: Georgia, "Times New Roman", Times, serif;  
font: italic bold #ff0000 ; } 

16. Rounded Borders Around Images

使用CSS3可以很容易的生成图片圆角

img {  
-webkit-border-radius: 25px;  
-moz-border-radius: 25px;  
border-radius: 25px;  
} 

17. Image Preloader

图片加载中先加载一个小图片，这样提示用户预加载图片

img  
{  
    background: url(img/preloader.gif) no-repeat 50% 50%;  
} 

#p#

18. CSS3 Opacity

使用opacity属性，帮助你透明看到元素，你可以创建一个分层的纹理背景

div.L1 { background:#036; opacity:0.2; height:20px; }  
div.L2 { background:#036; opacity:0.4; height:20px; }  
div.L3 { background:#036; opacity:0.6; height:20px; }  
div.L4 { background:#036; opacity:0.8; height:20px; }  
div.L5 { background:#036; opacity:1.0; height:20px; } 

19. Highlight links that open in a new window

这段代码允许你通过显示不同的样式清楚地分辨新窗口/标签页打开的link。

a[target="_blank"]:before,  
a[target="new"]:before {  
margin:0 5px 0 0;  
padding:1px;  
outline:1px solid #333;  
color:#333;  
background:#ff9;  
font:12px "Zapf Dingbats";  
content: "\279C";  
} 

20. The New Bulletproof @Font-Face Syntax

跨浏览器的CSS代码片断，帮助你定义font face

@font-face {  
    font-family: 'MyFontFamily';  
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),  
         url('myfont-webfont.woff') format('woff'),  
         url('myfont-webfont.ttf')  format('truetype'),  
         url('myfont-webfont.svg#svgFontName') format('svg');  
    } 

21. Flip an Image

翻转图片的CSS代码片断。特别适合你翻转图标

img {  
        -moz-transform: scaleX(-1);  
        -o-transform: scaleX(-1);  
        -webkit-transform: scaleX(-1);  
        transform: scaleX(-1);  
        filter: FlipH;  
        -ms-filter: "FlipH";  
} 

22. Email Link With An Image

快速的方法自动添加一个电子邮件图片到你的email链接

a[href^="mailto:"] {  
     background: url(images/email.png) no-repeat right top;  
     padding-right:10px;  
} 

23. Beautiful Blockquotes

美化你的引用

blockquote {  
     background:#f9f9f9;  
     border-left:10px solid #ccc;  
     margin:1.5em 10px;  
     padding:.5em 10px;  
     quotes:"\201C""\201D""\2018""\2019";  
}  
blockquote:before {  
     color:#ccc;  
     content:open-quote;  
     font-size:4em;  
     line-height:.1em;  
     margin-right:.25em;  
     vertical-align:-.4em;  
}  
blockquote p {  
     display:inline;  
} 

24. Browser CSS hacks

大量的CSS hack帮助你让你的网站在所有浏览器下显示一致

/***** Selector Hacks ******/ 
 
/* IE6 and below */ 
* html #uno  { color: red }  
 
/* IE7 */ 
*:first-child+html #dos { color: red }   
 
/* IE7, FF, Saf, Opera  */ 
html>body #tres { color: red }  
 
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 
html>/**/body #cuatro { color: red }  
 
/* Opera 9.27 and below, safari 2 */ 
html:first-child #cinco { color: red }  
 
/* Safari 2-3 */ 
html[xmlns*=""] body:last-child #seis { color: red }  
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
body:nth-of-type(1) #siete { color: red }  
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
body:first-of-type #ocho {  color: red }  
 
/* saf3+, chrome1+ */ 
@media screen and (-webkit-min-device-pixel-ratio:0) {  
 #diez  { color: red  }  
}  
 
/* iPhone / mobile webkit */ 
@media screen and (max-device-width: 480px) {  
 #veintiseis { color: red  }  
}  
 
/* Safari 2 - 3.1 */ 
html[xmlns*=""]:root #trece  { color: red  }  
 
/* Safari 2 - 3.1, Opera 9.25 */ 
*|html[xmlns*=""] #catorce { color: red  }  
 
/* Everything but IE6-8 */ 
:root *> #quince { color: red  }  
 
/* IE7 */ 
*+html #dieciocho {  color: red }  
 
/* Firefox only. 1+ */ 
#veinticuatro,  x:-moz-any-link  { color: red }  
 
/* Firefox 3.0+ */ 
#veinticinco,  x:-moz-any-link, x:default  { color: red  }  
 
/* FF 3.5+ */ 
body:not(:-moz-handler-blocked) #cuarenta { color: red; }  
 
/***** Attribute Hacks ******/ 
 
/* IE6 */ 
#once { _color: blue }  
 
/* IE6, IE7 */ 
#doce { *color: blue; /* or #color: blue */ }  
 
/* Everything but IE6 */ 
#diecisiete { color/**/: blue }  
 
/* IE6, IE7, IE8 */ 
#diecinueve { color: blue\9; }  
 
/* IE7, IE8 */ 
#veinte { color/*\**/: blue\9; }  
 
/* IE6, IE7 -- acts as an !important */ 
#veintesiete { color: blue !ie; } /* string after ! can be anything */ 
 
/* IE8, IE9 */ 
#anotherone  {color: blue\0/;} /* must go at the END of all rules */ 

25. How To Change The Default Text Selection Color on your Blog

修改高亮的文字颜色

::selection {  
   background: #ffb7b7; /* Safari */ 
        color: #ffffff;  
   }  
::-moz-selection {  
   background: #ffb7b7; /* Firefox */ 
        color: #ffffff;  
   } 

26. Clearfix

.clearfix:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
}  
 
.clearfix { display: inline-block; }  
 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* close commented backslash hack */ 

27. Hide Logo Text With Text Indent

使得你的logo SEO友好。保证logo文字不显示

h1 {  
        text-indent:-9999px;  
        margin:0 auto;  
        width:400px;  
        height:100px;  
        background:transparent url("images/logo.jpg") no-repeat scroll;  
} 

28. Reset all Text Colors and Background Colors

重置所有的背景和文字颜色。

* {  
     color: black !important;  
     background-color: white !important;  
     background-image: none !important;  
} 

29. Multiple Background Images

使用多背景图片

#multiple-images {  
   background: url(image_1.png) top left no-repeat,  
   url(image_2.png) bottom left no-repeat,  
   url(image_3.png) bottom right no-repeat;  
} 

30. Linear Gradient

允许你为背景创建一个线状渐变效果，不支持一些老浏览器

background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));  
background: -moz-linear-gradient(top,  #74b8d7,  #437fbc);  
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc'); 

原文：http://www.gbin1.com/technology/css/20120128usefulcsssnippetsforyourcodingarsenal/

【编辑推荐】

1. 使用HTML 5和CSS3制作登录页面完整步骤
2. 使用jQuery和CSS实现超酷缩略图悬浮逼近效果
3. 高效整洁CSS代码原则
4. 30个最常用CSS选择器解析
5. 推荐10个加速CSS开发的框架