分享30个开发人员有用的CSS代码片段

CSS
是我们使用的功能强大和最常用 web 语言。他可以兼容新旧不同的浏览器，他的兼容跨度确实够大的，从微软的IE到火狐再到谷歌浏览器。在设计的时候我们总是想创建更有创意和风格的网站，无论创建怎么样的网站，有些CSS代码是必须要掌握的，可以说这是核心，掌握这样的一些CSS代码，前端布局方面基本上再不成问题，什么边框圆角，工具提示，浏览器hacks等等都不是问题，

在今天的文章中分享我收藏的 30 个CSS 代码段，无论您是经验丰富的 web 设计师还是新手，他们都是非常值得借鉴的；

Css Reset by Eric Meyer

1 html, body, div, span, applet, object, iframe,
2 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3 a, abbr, acronym, address, big, cite, code,
4 del, dfn, em, font, img, ins, kbd, q, s, samp,
5 small, strike, strong, sub, sup, tt, var,
6 b, u, i, center,
7 dl, dt, dd, ol, ul, li,
8 fieldset, form, label, legend,
9 table, caption, tbody, tfoot, thead, tr, th, td {
10     margin: 0;
11     padding: 0;
12     border: 0;
13     outline: 0;
14     font-size: 100%;
15     vertical-align: baseline;
16     background: transparent;
17 }
18
19 body {
20     line-height: 1;
21 }
22
23 ol, ul {
24     list-style: none;
25 }
26
27 blockquote, q {
28     quotes: none;
29 }
30
31 blockquote:before, blockquote:after,
32 q:before, q:after {
33     content: '';
34     content: none;
35 }
36
37 /* remember to define focus styles! */
38 :focus {
39     outline: 0;
40 }
41
42 /* remember to highlight inserts somehow! */
43 ins {
44     text-decoration: none;
45 }
46
47 del {
48     text-decoration: line-through;
49 }
50
51 /* tables still need 'cellspacing="0"' in the markup */
52 table {
53     border-collapse: collapse;
54     border-spacing: 0;
55 }

根据文件格式显示不同的链接样式

1 /* external links */
2 a[href^="http://"]{
3     padding-right: 20px;
4     background: url(external.gif) no-repeat center right;
5 }
6
7 /* emails */
8 a[href^="mailto:"]{
9     padding-right: 20px;
10     background: url(email.png) no-repeat center right;
11 }
12
13 /* pdfs */
14 a[href$=".pdf"]{
15     padding-right: 20px;
16     background: url(pdf.png) no-repeat center right;
17 }

在IE浏览器删除textarea的滚动条

1 textarea{
2     overflow:auto;
3 }

浏览器特定的 hacks

1 /* IE 6 */
2 * html .yourclass { }
3
4 /* IE 7 */
5 *+html .yourclass{ }
6
7 /* IE 7 and modern browsers */
8 html>body .yourclass { }
9
10 /* Modern browsers (not IE 7) */
11 html>/**/body .yourclass { }
12
13 /* Opera 9.27 and below */
14 html:first-child .yourclass { }
15
16 /* Safari */
17 html[xmlns*=""] body:last-child .yourclass { }
18
19 /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
20 body:nth-of-type(1) .yourclass { }
21
22 /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
23 body:first-of-type .yourclass {  }
24
25 /* Safari 3+, Chrome 1+ */
26 @media screen and (-webkit-min-device-pixel-ratio:0) {
27  .yourclass  {  }
28 }

Clearfix

1 .clearfix:after {
2     visibility: hidden;
3     display: block;
4     font-size: 0;
5     content: " ";
6     clear: both;
7     height: 0;
8 }
9
10 .clearfix { display: inline-block; }
11
12 /* start commented backslash hack \*/
13 * html .clearfix { height: 1%; }
14 .clearfix { display: block; }
15 /* close commented backslash hack */

固定宽度且居中

1 .wrapper {
2     width:960px;
3     margin:0 auto;
4 }

Rounded corners – border-radius

1 .round{
2    -moz-border-radius: 10px;
3    -webkit-border-radius: 10px;
4    border-radius: 10px; /* future proofing */
5    -khtml-border-radius: 10px; /* for old Konqueror browsers */
6 }

伪元素向文本的第一个字母添加特殊样式

1 p:first-letter{
2    display:block;
3    margin:5px 0 0 5px;
4    float:left;
5    color:#000;
6    font-size:60px;
7    font-family:Georgia;
8 }

使用 @fontface

1 @font-face {
2     font-family: 'MyFontFamily';
3     src: url('myfont-webfont.eot?') format('eot'),
4          url('myfont-webfont.woff') format('woff'),
5          url('myfont-webfont.ttf')  format('truetype'),
6          url('myfont-webfont.svg#svgFontName') format('svg');
7     }

跨浏览器的inline-block

1 li {
2         width: 200px;
3         min-height: 250px;
4         border: 1px solid #000;
5         display: -moz-inline-stack;
6         display: inline-block;
7         vertical-align: top;
8         margin: 5px;
9         zoom: 1;
10         *display: inline;
11         _height: 250px;
12 }

Fixed Footer

1 #footer {
2    position:fixed;
3    left:0px;
4    bottom:0px;
5    height:30px;
6    width:100%;
7    background:#999;
8 }
9
10 /* IE 6 */
11 * html #footer {
12    position:absolute;
13    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
14 }

 

更改内容区域的大小

1 #content {
2     width: 100%;
3     margin: 0;
4     float: none;
5 }

CSS3 Media Queries （这个不常用主要用于智能设备的判断显示不同的媒体）

1 /* Smartphones (portrait and landscape) ----------- */
2 @media only screen
3 and (min-device-width : 320px)
4 and (max-device-width : 480px) {
5 /* Styles */
6 }
7
8 /* Smartphones (landscape) ----------- */
9 @media only screen
10 and (min-width : 321px) {
11 /* Styles */
12 }
13
14 /* Smartphones (portrait) ----------- */
15 @media only screen
16 and (max-width : 320px) {
17 /* Styles */
18 }
19
20 /* iPads (portrait and landscape) ----------- */
21 @media only screen
22 and (min-device-width : 768px)
23 and (max-device-width : 1024px) {
24 /* Styles */
25 }
26
27 /* iPads (landscape) ----------- */
28 @media only screen
29 and (min-device-width : 768px)
30 and (max-device-width : 1024px)
31 and (orientation : landscape) {
32 /* Styles */
33 }
34
35 /* iPads (portrait) ----------- */
36 @media only screen
37 and (min-device-width : 768px)
38 and (max-device-width : 1024px)
39 and (orientation : portrait) {
40 /* Styles */
41 }
42
43 /* Desktops and laptops ----------- */
44 @media only screen
45 and (min-width : 1224px) {
46 /* Styles */
47 }
48
49 /* Large screens ----------- */
50 @media only screen
51 and (min-width : 1824px) {
52 /* Styles */
53 }
54
55 /* iPhone 4 ----------- */
56 @media
57 only screen and (-webkit-min-device-pixel-ratio : 1.5),
58 only screen and (min-device-pixel-ratio : 1.5) {
59 /* Styles */
60 }

多背景图片

1 #multiple-images {
2    background: url(image_1.png) top left no-repeat,
3    url(image_2.png) bottom left no-repeat,
4    url(image_3.png) bottom right no-repeat;
5 }

多列

1 #columns-3 {
2    text-align: justify;
3    -moz-column-count: 3;
4    -moz-column-gap: 12px;
5    -moz-column-rule: 1px solid #c4c8cc;
6    -webkit-column-count: 3;
7    -webkit-column-gap: 12px;
8    -webkit-column-rule: 1px solid #c4c8cc;
9 }

在IE的最小高度

1 .box {
2    min-height:500px;
3    height:auto !important;
4    height:500px;
5 }

突出显示文本样式

1 ::selection {
2    color: #000000;
3    background-color: #FF0000;
4 }
5
6 ::-moz-selection {
7    color: #000000;
8    background: #FF0000;
9 }

Box Shadow

1 box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
2 -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
3 -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

占位符文本样式

1 ::-webkit-input-placeholder { color: #ccc; font-style:italic }
2 :-moz-placeholder           { color: #ccc; font-style:italic }

CSS3 3D文字效果

1 h1 {
2   text-shadow: 0 1px 0 #ccc,
3                0 2px 0 #c9c9c9,
4                0 3px 0 #bbb,
5                0 4px 0 #b9b9b9,
6                0 5px 0 #aaa,
7                0 6px 1px rgba(0,0,0,.1),
8                0 0 5px rgba(0,0,0,.1),
9                0 1px 3px rgba(0,0,0,.3),
10                0 3px 5px rgba(0,0,0,.2),
11                0 5px 10px rgba(0,0,0,.25),
12                0 10px 10px rgba(0,0,0,.2),
13                0 20px 20px rgba(0,0,0,.15);
14 }

WebKit的边界半径修正

1 -webkit-background-clip: padding-box;

XBrowser的border-radius（CSS3PIE）

1 .roundbox {
2 -moz-border-radius:8px;
3 -webkit-border-radius:8px;
4 -khtml-border-radius:8px;
5 border-radius:8px;
6 behavior: url(/PIE.htc);
7 }

更好的兼容IE浏览器的

1 <!--[if IE]>
2 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
3 <![endif]-->

CSS3工具提示（这个很实用，看我网站的导航工具提示效果)

1 a {
2   color: #900;
3   text-decoration: none;
4 }
5
6 a:hover {
7   color: red;
8   position: relative;
9 }
10
11 a[title]:hover:after {
12   content: attr(title);
13   padding: 4px 8px;
14   color: #333;
15   position: absolute;
16   left: 0;
17   top: 100%;
18   white-space: nowrap;
19   z-index: 20px;
20   -moz-border-radius: 5px;
21   -webkit-border-radius: 5px;
22   border-radius: 5px;
23   -moz-box-shadow: 0px 0px 4px #222;
24   -webkit-box-shadow: 0px 0px 4px #222;
25   box-shadow: 0px 0px 4px #222;
26   background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
27   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
28 }

CSS3背景大小

1 body {
2   background: #000 url(http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) center center fixed no-repeat;
3   -moz-background-size: cover;
4   background-size: cover;
5 }
6
7 @media only all and (max-width: 1024px) and (max-height: 768px) {
8   body {
9     -moz-background-size: 1024px 768px;
10     background-size: 1024px 768px;
11   }
12 }

跨浏览器的CSS页面卷曲阴影

1 .page-curl {
2 position: relative;
3 background: #ffffff;
4 background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
5 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
6 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
7 -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
8 -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }
9
10 .page-curl:after {
11 z-index: -1;
12 position: absolute;
13 background: transparent;
14 width: 70%;
15 height: 55%;
16 content: '';
17 right: 10px;
18 bottom: 10px;
19 -webkit-transform: skew(15deg) rotate(5deg);
20 -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
21 -moz-transform: skew(15deg) rotate(5deg);
22 -moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }
23
24 .page-curl:before {
25 z-index: -2;
26 position: absolute;
27 background: transparent;
28 width: 70%;
29 height: 55%;
30 content: '';
31 left: 10px;
32 bottom: 10px;
33 -webkit-transform: skew(-15deg) rotate(-5deg);
34 -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
35 -moz-transform: skew(-15deg) rotate(-5deg);
36 -moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }

CSS3模糊文字

1 .blur {
2    color: transparent;
3    text-shadow: 0 0 5px rgba(0,0,0,0.5);
4 }

修复 IE6/7 margin/padding双倍 间距错误

1 ul li
2 {
3   float: right;
4   margin-right: 10px;
5   *display: inline; /*Target IE7 and bellow*/
6   _display: inline; /*Target IE6 and bellow*/
7 }
8 /* This example fixes the double right margin bug */

链接伪类的顺序

1 a:link {color: blue;}
2 a:visited {color: purple;}
3 a:hover {color: red;}
4 a:active {color: yellow;}

响应布局的HTML Meta标签

1 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
2 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3 <meta name="HandheldFriendly" content="true">

本文链接：提高开发人员布局能力的30个有用的CSS代码片断