12. 锚链接伪类选择器
1 a:link { color: blue; }2 a:visited { color: purple; } 3 a:hover { color: red; } 4 a:active { color: yellow; } 源码地址： http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers
13. 花俏地CSS3 Pull-Quotes
Pull-quotes不同于页面里的blockquote，它们通常用在文章中来引用文本。
1 .has-pullquote:before { 2 /* Reset metrics. */ 3 padding: 0; 4 border: none; 5 /* Content */ 6 content: attr(data-pullquote); 7 /* Pull out to the right, modular scale based margins. */ 8 float: rightright; 9 width: 320px;10 margin: 12px -140px 24px 36px;11 /* Baseline correction */12 position: relative;13 top: 5px; 14 /* Typography (30px line-height equals 25% incremental leading) */ 15 font-size: 23px;16 line-height: 30px; 17 } 18 .pullquote-adelle:before {19 font-family: "adelle-1", "adelle-2";20 font-weight: 100;21 top: 10px !important;22 } 23 24 .pullquote-helvetica:before {25 font-family: "Helvetica Neue", Arial, sans-serif;26 font-weight: bold;27 top: 7px !important;28 }29 .pullquote-facit:before { 30 font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;31 font-weight: bold;32 top: 7px !important;33 } 源码地址： http://miekd.com/articles/pull-quotes-with-html5-and-css/
14. CSS3的全屏背景效果
如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。
1 html { 2 background: url('images/bg.jpg') no-repeat center center fixed; 3 -webkit-background-size: cover; 4 -moz-background-size: cover;5 -o-background-size: cover;6 background-size: cover;7 } 源码： http://css-tricks.com/perfect-full-page-background-image/
15. 内容垂直集中
相对于内容在水平位置，内容在垂直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。
1 .container {2 min-height: 6.5em;3 display: table-cell; 4 vertical-align: middle;5 } 源码地址： http://www.w3.org/Style/Examples/007/center
16. 垂直滚动条
这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。
1 html { height: 101% } 17. CSS3 Gradients模板
1 #colorbox {2 background: #629721;3 background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));4 background-image: -webkit-linear-gradient(top, #83b842, #629721); 5 background-image: -moz-linear-gradient(top, #83b842, #629721);6 background-image: -ms-linear-gradient(top, #83b842, #629721);7 background-image: -o-linear-gradient(top, #83b842, #629721);8 background-image: linear-gradient(top, #83b842, #629721);9 } 18. @Font-Face模板
使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站，并生成自定义font families。
1 @font-face { 2 font-family: 'MyWebFont'; 3 src: url('webfont.eot'); /* IE9 Compat Modes */ 4 src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 url('webfont.woff') format('woff'), /* Modern Browsers */ 6 url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 7 url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 8 } 9 body {10 font-family: 'MyWebFont', Arial, sans-serif;11 } 源码地址： http://css-tricks.com/snippets/css/using-font-face/
19.创建缝合效果
1 p { 2 position:relative; 3 z-index:1; 4 padding: 10px; 5 margin: 10px; 6 font-size: 21px; 7 line-height: 1.3em; 8 color: #fff; 9 background: #ff0030;10 -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);11 -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);12 box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);13 -webkit-border-radius: 3px;14 -moz-border-radius: 3px;15 border-radius: 3px;16 }17 p:before {18 content: "";19 position: absolute;20 z-index: -1;21 top: 3px;22 bottombottom: 3px;23 left :3px;24 rightright: 3px;25 border: 2px dashed #fff;26 } 27 p a {28 color: #fff;29 text-decoration:none;30 }31 p a:hover, p a:focus, p a:active { 32 text-decoration:underline;33 } 20. CSS3 斑马线效果
当用户在浏览许多行数据时，很难分清哪一个单元格是属于哪一行的。默认情况下，通过添加斑马线，用户可以给奇偶行更新不同的背景色。
1 tbody tr:nth-child(odd) {2 background-color: #ccc;3 }
源码地址： http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/
来自： HONGKIAT.COM
查看更多关于不容错过的20段CSS代码_html/css_WEB-ITnose的详细内容...