Web开发者不容错过的10段CSS代码

1. CSS Resets

      网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。

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

　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:10pxsolid #ccc;
margin:1.5em10px;
padding: .5em10px;
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:4px3px 6px 10px;
-moz-border-radius:4px3px 6px 10px;
-o-border-radius:4px3px 6px 10px;
border-radius:4px3px 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), onlyscreenand (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:0auto;
width:320px;
height:85px;
background:transparenturl("images/logo.png")no-repeatscroll;
}