分类目录

链接

2012年 11月
 1234
567891011
12131415161718
19202122232425
2627282930  

近期文章

热门标签

新人福利,免费薅羊毛

现在位置:    首页 > 前端 > 正文
你不得不收藏的30个CSS代码片段
前端 评论(1) 阅读(3,475)

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">

============ 欢迎各位老板打赏~ ===========

本文版权归Bruce's Blog所有,转载引用请完整注明以下信息:
本文作者:Bruce
本文地址:你不得不收藏的30个CSS代码片段 | Bruce's Blog

你不得不收藏的30个CSS代码片段:目前有1 条留言

  1. 505701119 : 2012年11月26日下午 12:31 回复

    好收藏了!

发表评论

留言无头像?