20段CSS代码

Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。

本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。

1. CSS Resets

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。

1

2

3

4

5

.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。

1

2

3

4

.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浏览器。

1

2

3

4

5

6

.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模板

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#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引用到视网膜设备上。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

/* 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), onlyscreen and (min-device-pixel-ratio:1.5) {

/* Styles */

}

源码地址： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

8. 现代字体栈

在新网页上设计属于自己的字体栈还是件比较困难的事情，希望下面这段代码能给你带来启发和开发模板，关于更多字体栈源码，你可以访问CSS Font Stacks。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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

1

2

3

::selection { background: #e2eae2; }

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

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

10.隐藏Logo上的H1文本

1

2

3

4

5

6

7

h1{

text-indent:-9999px;

margin:0 auto;

width:320px;

height:85px;

background:transparent url("images/logo.png")no-repeat scroll;

}

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

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

1

2

3

4

5

6

7

8

9

10

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

12. 锚链接伪类选择器

1

2

3

4

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

13. 花俏地CSS3 Pull-Quotes

Pull-quotes不同于页面里的blockquote，它们通常用在文章中来引用文本。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

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

14. CSS3的全屏背景效果

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

1

2

3

4

5

6

7

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/

15. 内容垂直集中

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

1

2

3

4

5

.container {

min-height:6.5em;

display:table-cell;

vertical-align:middle;

}

源码地址： http://www.w3.org/Style/Examples/007/center

16. 垂直滚动条

这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。

1

html { height:101% }

17. CSS3 Gradients模板

1

2

3

4

5

6

7

8

9

#colorbox {

background:#629721;

background-image: -webkit-gradient(linear,left top,left bottombottom, from(#83b842), to(#629721));

background-image: -webkit-linear-gradient(top,#83b842, #629721);

background-image: -moz-linear-gradient(top,#83b842, #629721);

background-image: -ms-linear-gradient(top,#83b842, #629721);

background-image: -o-linear-gradient(top,#83b842, #629721);

background-image: linear-gradient(top,#83b842, #629721);

}

18. @Font-Face模板

使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站，并生成自定义font families。

1

2

3

4

5

6

7

8

9

10

11

@font-face {

font-family:'MyWebFont';

src:url('webfont.eot');/* IE9 Compat Modes */

src:url('webfont.eot?#iefix')format('embedded-opentype'),/* IE6-IE8 */

url('webfont.woff')format('woff'),/* Modern Browsers */

url('webfont.ttf')format('truetype'),/* Safari, Android, iOS */

url('webfont.svg#svgFontName')format('svg');/* Legacy iOS */

}

body {

font-family:'MyWebFont', Arial, sans-serif;

}

源码地址： http://css-tricks.com/snippets/css/using-font-face/

19.创建缝合效果

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

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;

}

20. CSS3 斑马线效果

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

1

2

3

tbody tr:nth-child(odd) {

background-color:#ccc;

}

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

来自： HONGKIAT.COM