20個經典CSS代碼集合

原文：CSDN文章：http://www.csdn.net/article/2013-05-24/2815422-20-Useful-CSS-Snippets-Every-Designer-Should-Have：

Web開發人員不容錯過的20段CSS代碼

1. CSS Resets

網路上關於CSS重設的代碼非常多。本段代碼是根據Eric Meyer’s reset codes進行改編的，裡麵包含一點響應式圖片和所有核心元素的邊界框設定，這樣就可以保持頁面邊界和填充可以很好地對齊。

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;  outline: none;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}html { height: 101%; }body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }ol, ul { list-style: none; } blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; }img { border: 0; max-width: 100%; }p { font-size: 1.2em; line-height: 1.0em; color: #333; }

2.經典的CSS Clearfix
這個clearfix代碼已在Web開發人員之間廣泛流傳，這段類別選取器要應用到持有浮動元素的容器中，確保後面的內容都不會浮動，但會被下推和清除。

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }.clearfix { display: inline-block; } <font></font> html[xmlns] .clearfix { display: block; }* html .clearfix { height: 1%; }

3.升級版的Clearfix
在表現上，新版本和經典版本不存在什麼差異，這些類可以有效地清除所有floats，但它們只相容現代瀏覽器和傳統的IE 6-8。

.clearfix:before, .container:after { content: ""; display: table; }<font></font> .clearfix:after { clear: both; }/* IE 6/7 */.clearfix { zoom: 1; }

4. Cross-Browser Transparency 
CSS3裡的許多屬性都與瀏覽器相相容，但也有特例，比如opacity，需要對它進行一些更新才可以。附加過濾屬性可以相容任何老版的IE瀏覽器。

.transparent {    filter: alpha(opacity=50);/* internet explorer */    -khtml-opacity: 0.5;     /* khtml, old safari */    -moz-opacity: 0.5;      /* mozilla, netscape */    opacity: 0.5;          /* fx, safari, opera */}

源碼地址： http://perishablepress.com/cross-browser-transparency-via-css/
5. CSS Blockquote模板
這段代碼主要用在頁面上進行分離引用或複製內容，並且給頁面文字提供了預設樣式。 

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;}

查看源碼： http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
6. 個人化的圓角代碼
許多CSS開發人員都非常熟悉圓角文法，但如何為每個角設定不同的值？不如看看下面這段代碼吧！

#container {    -webkit-border-radius: 4px 3px 6px 10px;    -moz-border-radius: 4px 3px 6px 10px;    -o-border-radius: 4px 3px 6px 10px;     border-radius: 4px 3px 6px 10px;}/* alternative syntax broken into each line */#container {    -webkit-border-top-left-radius: 4px;    -webkit-border-top-rightright-radius: 3px;    -webkit-border-bottom-rightright-radius: 6px;    -webkit-border-bottom-left-radius: 10px;    -moz-border-radius-topleft: 4px;    -moz-border-radius-topright: 3px;    -moz-border-radius-bottomright: 6px;    -moz-border-radius-bottomleft: 10px;}

7. 一般媒體查詢
這是一段非常好的模板，用於各種零零碎碎的媒體查詢，在行動裝置上也可以使用，這段代碼甚至可以通過使用min-device-pixel-ratio引用到視網膜裝置上。

/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {   /* Styles */} /* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) {  /* Styles */} /* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) {  /* Styles */ }/* iPads (portrait and landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {  /* Styles */ }<font></font> /* iPads (landscape) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {  /* Styles */}/* iPads (portrait) ----------- */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {  /* Styles */}  /* Desktops and laptops ----------- */@media only screen and (min-width : 1224px) {  /* Styles */}/* Large screens ----------- */@media only screen and (min-width : 1824px) {  /* Styles */}/* iPhone 4 ----------- */@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {  /* Styles */}

源碼地址： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

8. 現代字型棧
在新網頁上設計屬於自己的字型棧還是件比較困難的事情，希望下面這段代碼能給你帶來啟發和開發模板，關於更多字型棧源碼，你可以訪問CSS Font Stacks。

/* Times New Roman-based serif */ font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;    /* A modern Georgia-based serif */ font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;    /*A more traditional Garamond-based serif */ font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;    /*The Helvetica/Arial-based sans serif */ font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;    /*The Verdana-based sans serif */ font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;    /*The Trebuchet-based sans serif */ font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;    /*The heavier “Impact” sans serif */ font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;    /*The monospace */ font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

源碼地址： http://www.sitepoint.com/eight-definitive-font-stacks/

9. 自訂文本選擇
一些新的Web瀏覽器允許你在網頁上自訂一些反白的顏色，下面代碼的預設顏色是淺藍色，當然，你可以依據個人愛好進行各種顏色設定。下面代碼引用了典型的

Webkit和Mozilla供應商首碼::selection 。::selection { background: #e2eae2; }::-moz-selection { background: #e2eae2; }::-webkit-selection { background: #e2eae2; }

10.隱藏Logo上的H1文本

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

11. 為圖片建立拍立得效果邊框
運用下面代碼可以在圖片上實現拍立得相片效果——一大片白色邊框和細微的陰影。你需要修改圖片的寬度/高度值來與你的網站布局相匹配。

img.polaroid {    background:#000;/*Change this to a background image or remove*/    border:solid #fff;    border-width:6px 6px 20px 6px;    box-shadow:1px 1px 5px #333;/* Standard blur at 5px. Increase for more depth *    -webkit-box-shadow:1px 1px 5px #333;    -moz-box-shadow:1px 1px 5px #333;    height:200px; /*Set to height of your image or desired div*/    width:200px;/*Set to width of your image or desired div*/}

源碼地址： http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS3

12. 錨連結偽類別選取器

a:link { color: blue; }a:visited { color: purple; }a:hover { color: red; }a:active { color: yellow; }

源碼地址： http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers

13. 花俏地CSS3 Pull-Quotes
Pull-quotes不同於頁面裡的blockquote，它們通常用在文章中來引用文本。

.has-pullquote:before {    /* Reset metrics. */    padding: 0;    border: none;     /* Content */    content: attr(data-pullquote);    /* Pull out to the right, modular scale based margins. */     float: rightright;    width: 320px;    margin: 12px -140px 24px 36px;    /* Baseline correction */    position: relative;    top: 5px;    /* Typography (30px line-height equals 25% incremental leading) */    font-size: 23px;    line-height: 30px;}.pullquote-adelle:before {    font-family: "adelle-1", "adelle-2";    font-weight: 100;    top: 10px !important;} .pullquote-helvetica:before {    font-family: "Helvetica Neue", Arial, sans-serif;    font-weight: bold;    top: 7px !important;}.pullquote-facit:before {    font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;    font-weight: bold;    top: 7px !important;}

源碼地址： http://miekd.com/articles/pull-quotes-with-html5-and-css/

14. CSS3的全屏背景效果
如果你想使用大圖片作為網站背景，並希望在頁面滾動時保持固定，該程式碼片段非常適合，不過這段代碼無法在舊的瀏覽器上工作。

html {    background: url('images/bg.jpg') no-repeat center center fixed;     -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;}

源碼： http://css-tricks.com/perfect-full-page-background-image/

15. 內容垂直集中
相對於內容在水平位置，內容在垂直方向是不好把控的，尤其當考慮到捲軸這些因素時。這段純CSS代碼可以很好的工作。

.container {    min-height: 6.5em;    display: table-cell;    vertical-align: middle;}

源碼地址： http://www.w3.org/Style/Examples/007/center

16. 垂直捲軸
這段代碼將確保你的HTML元素總是稍微高於瀏覽器捲軸所停留的位置。 

html { height: 101% }

17. CSS3 Gradients模板

#colorbox {    background: #629721;    background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));    background-image: -webkit-linear-gradient(top, #83b842, #629721);    background-image: -moz-linear-gradient(top, #83b842, #629721);    background-image: -ms-linear-gradient(top, #83b842, #629721);    background-image: -o-linear-gradient(top, #83b842, #629721);    background-image: linear-gradient(top, #83b842, #629721);}

18. @Font-Face模板
使用@font-face可以把TTF/OTF/SVG/WOFF檔案嵌入到網站，並產生自訂font families。

@font-face {    font-family: 'MyWebFont';    src: url('webfont.eot');/* IE9 Compat Modes */    src: url('webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */    url('webfont.woff') format('woff'),/* Modern Browsers */    url('webfont.ttf')  format('truetype'),/* Safari, Android, iOS */    url('webfont.svg#svgFontName') format('svg');/* Legacy iOS */}body {    font-family: 'MyWebFont', Arial, sans-serif;}

源碼地址： http://css-tricks.com/snippets/css/using-font-face/

19.建立縫合效果

p {    position:relative;    z-index:1;     padding: 10px;    margin: 10px;    font-size: 21px;    line-height: 1.3em;    color: #fff;    background: #ff0030;    -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);    -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;}p:before {    content: "";    position: absolute;    z-index: -1;    top: 3px;    bottombottom: 3px;    left :3px;    rightright: 3px;    border: 2px dashed #fff;}   p a {    color: #fff;    text-decoration:none;}p a:hover, p a:focus, p a:active {    text-decoration:underline;}

20. CSS3 斑馬線效果
當使用者在瀏覽許多行資料時，很難分清哪一個儲存格是屬於哪一行的。預設情況下，通過添加斑馬線，使用者可以給奇偶行更新不同的背景色。

tbody tr:nth-child(odd) {    background-color: #ccc;}

源碼地址： http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/