分享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代码片断

posted @ 2012-11-26 10:03  创想中国(羲闻)  阅读(4366)  评论(10)  编辑  收藏  举报