Web开发者不容错过的13段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 */

}

5. CSS Blockquote模板

这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。 

blockquote {

    background:#f9f9f9;<

    border-left:10px solid #ccc;

    margin:1.5em 10px;

    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: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.自定义文本选择

一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色，下面代码的默认颜色是浅蓝色，当然，你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。

::selection { background: #e2eae2; }

::-moz-selection { background: #e2eae2; }

::-webkit-selection {background: #e2eae2; }

 

8. 为图片创建拍立得效果边框

运用下面代码可以在图片上实现拍立得相片效果——一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。

img.polaroid {

    background:#000;/*Change this to a background image or remove*/

    border:solid#fff;

    border-width:6px6px 20px 6px;

    box-shadow:1px1px 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

9. 锚链接伪类选择器

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

10. CSS3的全屏背景效果

如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。

html {

    background:url('images/bg.jpg')no-repeat centercenter 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/

11. 内容垂直集中

相对于内容在水平位置，内容在垂直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。

.container {

    min-height:6.5em;

    display:table-cell;

    vertical-align:middle;

}

 

12.创建缝合效果

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;

}

 

13. CSS3 斑马线效果

当用户在浏览许多行数据时，很难分清哪一个单元格是属于哪一行的。默认情况下，通过添加斑马线，用户可以给奇偶行更新不同的背景色。

tbody tr:nth-child(odd) {

    background-color:#ccc;

}

 

 

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