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