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

Web開發技術每一年都在革新，瀏覽器已逐漸支持CSS3特性，而且網站設計師和前端開發者廣泛採用這種新技術進行設計與開發。但仍然有一些開發者迷戀着一些CSS2代碼。

  本文將分享20段很是專業的CSS2/CSS3代碼供你們使用，你能夠把它們保存在IDE裏、或者存儲在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; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

3.升級版的Clearfix

在表現上，新版本和經典版本不存在什麼差別，這些類能夠有效地清除全部floats，但它們只兼容現代瀏覽器和傳統的IE 6-8。

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

1. 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/

1. 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/

2. 個性化的圓角代碼

   許多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 */

}

/* 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/

1. 現代字體棧

在新網頁上設計屬於本身的字體棧仍是件比較困難的事情，但願下面這段代碼能給你帶來啓發和開發模板，關於更多字體棧源碼，你能夠訪問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/

1. 自定義文本選擇

   一些新的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

1. 花俏地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/

1. 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/

1. 內容垂直集中
   相對於內容在水平位置，內容在垂直方向是很差把控的，尤爲當考慮到滾動條這些因素時。這段純CSS代碼能夠很好的工做。

.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
源碼地址： http://www.w3.org/Style/Examples/007/center

1. 爲圖片建立拍立得效果邊框

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

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-%20
CSS3

1. 錨連接僞類選擇器

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

1. 花俏地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/

1. 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/

1. 內容垂直集中
   相對於內容在水平位置，內容在垂直方向是很差把控的，尤爲當考慮到滾動條這些因素時。這段純CSS代碼能夠很好的工做。

.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
源碼地址： http://www.w3.org/Style/Examples/007/center