常用的CSS片段

CSS的浏览器兼容问题常常会耗费我们大量的时间,令广大的重构童鞋头痛不止。
这篇文章我收集了大量常用的CSS片段,希望能够帮助大家高效快速的完成工作,同时也作为自己日后的参考。以后这篇文章也会常常更新。

CSS片段内容包括

  1. Eric Meyer’s CSS Reset
  2. 怎样用CSS3创建多重边框
  3. iPad特定的CSS
  4. 根据文件的格式改变链接样式
  5. CSS固定底部
  6. 图片替换技术
  7. 设置body中的文字大小为62.5%
  8. 垂直对其文本
  9. 用CSS包裹内容很长的URL和文本
  10. 用CSS3创造3D文字
  11. 使用醒目的引用来提升可读性
  12. 图片圆角
  13. 图片预加载
  14. CSS3透明度
  15. 突出在新窗口中打开的链接
  16. @font-face语法
  17. 翻转图片
  18. 用图片代替Email链接
  19. 美化引用文段
  20. 浏览器Hack
  21. 改变博客中默认选中文本的颜色
  22. 清除浮动
  23. 多背景图片
  24. 线性渐变
  25. IE中的min-height
  26. 防止文本换行
  27. 文本溢出省略
  28. 条件注释
  29. 让IE9以下的版本支持HTML5
  30. PNG32透明(IE6)

1. Eric Meyer’s CSS Reset

Eric Meyer的CSS重置代码是最流行的代码片段之一。你甚至可以在Blueprint CSS Framework中看到它。

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

2. 怎样用CSS3创建多重边框

使用box-shadow这个属性能够让你在项目中创建多重边框。

1
2
3
4
5
6
7
8
9
10
11
12
13
box-shadow:
    0 0 0 2px #000,
    0 0 0 3px #999,
    0 0 0 9px #fa0,
    0 0 0 10px #666,
    0 0 0 16px #fd0,
    0 0 0 18px #000;

3. iPad特定的CSS

根据iPad的屏幕大小和其横纵向模式改变整体的布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media only screen and (device-width: 768px) {
    /* For general iPad layouts */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
}

4. 根据文件的格式改变链接样式

一个很短的CSS片段让你改变外链、邮箱链接和pdf文档的链接样式。
/* externals */

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
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

5. CSS固定底部

固定Footer在页面底部的跨浏览器解决方案。
CSS

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/*
Sticky Footer Solution
by Steve Hatcher 

http://stever.ca

http://www.cssstickyfooter.com

*/
* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {
    overflow:auto;
    padding-bottom: 150px;  /* must be same height as the footer */
}
#footer {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
    #wrap {display:table;height:100%}
</style>
< ![endif]-->
*/

HTML

1
2
3
4
5
6
7
8
9
10
11
<div id="wrap">
	<div id="main">
	</div>
</div>
<div id="footer">
</div>

6. 图片替换技术

一个便利的替换文字元素为图片的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a.replacement{
    background: url(dotted-border.png) no-repeat;
    height: 44px;
    width: 316px;
    display: block;
    text-indent: -9999px;
    overflow: hidden;  /*Add this line to the image replacement method*/
}

7. 设置body中的文字大小为62.5%

如果你想有一个更加灵活的布局,你需要使用em来代替px和pt。

1
2
3
4
5
6
7
8
9
10
11
body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.2em; /* 1.2em = 12px */
}

8. 垂直对其文本

如果你将你的段落的line-height设置为与它父级div的高度相同,那么你就能垂直居中这个文本。更多居中方法可以查看我在“《编写高质量代码》读书笔记-CSS篇(2)”中写到的水平居中实现垂直居中实现

1
2
3
div { width:100px; height:100px; }
div p { line-height:100px; }

9. 用CSS包裹内容很长的URL和文本

这个代码片段通过保证文本的包裹元素宽度适应内容的宽度,能够避免很长的文本超出内容区域。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
pre {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

10. 用CSS3创造3D文字

text-shadow属性能帮助你只用CSS创造3D文字。

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
p.threeD{
    text-shadow:
        -1px 1px 0 #ddd,
        -2px 2px 0 #c8c8c8,
        -3px 3px 0 #ccc,
        -4px 4px 0 #b8b8b8,
        -4px 4px 0 #bbb,
        0px 1px 1px rgba(0,0,0,.4),
        0px 2px 2px rgba(0,0,0,.3),
        -1px 3px 3px rgba(0,0,0,.2),
        -1px 5px 5px rgba(0,0,0,.1),
        -2px 8px 8px rgba(0,0,0,.1),
        -2px 13px 13px rgba(0,0,0,.1)
        ;
}

11. 使用醒目的引用来提升可读性

让你的引用文字浮动在内容的左侧或者右侧来使其更加突出。

1
2
3
4
5
6
7
8
9
10
11
12
13
.pullquote {
    width: 300px;
    float: right;
    margin: 5px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font: italic bold #ff0000 ;
}

12. 图片圆角

通过CSS3你能够简单地在图片上制造出圆角效果。

1
2
3
4
5
6
7
8
9
img {
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

13. 图片预加载

当主图片很大时,显示之前先显示一个小图片。

1
2
3
4
5
img{
    background: url(img/preloader.gif) no-repeat 50% 50%;
}

14. CSS透明度

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
    opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
    filter: alpha(opacity=75); /* IE lt 8 */
    -ms-filter: "alpha(opacity=75)"; /* IE 8 */
    -khtml-opacity: .75; /* Safari 1.x */
    -moz-opacity: .75; /* FF lt 1.5, Netscape */
}

15. 突出在新窗口中打开的链接

这段代码让你能够轻易地区分在新窗口或新标签页中打开的链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a[target="_blank"]:before,a[target="new"]:before {
    margin:0 5px 0 0;
    padding:1px;
    outline:1px solid #333;
    color:#333;
    background:#ff9;
    font:12px "Zapf Dingbats";
    content: "\279C";
}

16. @font-face语法

一个跨浏览器的让你自定义字体的CSS代码片段。

1
2
3
4
5
6
7
8
9
10
11
12
13
@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
        url('myfont-webfont.woff') format('woff'),
        url('myfont-webfont.ttf')  format('truetype'),
        url('myfont-webfont.svg#svgFontName') format('svg');
}

17. 翻转图片

如果你需要翻转图标,比如箭头图标时,这段代码特别有用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

18. 用图片代替Email链接

一个自动添加mail图片到你所有的Email链接的快速方法。

1
2
3
4
5
6
7
a[href^="mailto:"] {
    background: url(images/email.png) no-repeat right top;
    padding-right:10px;
}

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
34
35
blockquote {
    background:#f9f9f9;
    border-left:10px solid #ccc;
    margin:1.5em 10px;
    padding:.5em 10px;
    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;
}

20. 浏览器Hack

一个很长的浏览器Hack列表,确保你能够让你的网站在多个浏览器上显示都是一致的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.all-IE { property:value\9; }
:root .IE-9 { property:value\0/; }
.gte-IE-8 { property:value\0; }
.lte-IE-7 {  *property:value; }
.IE-7 {  +property:value; }
.IE-6 { _property:value; }
.not-IE {  property//:value;}
@-moz-document url-prefix () { .firefox { property:value; } }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit { property:value; } }
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .opera { property:value; } }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit { property:value; } }

21. 改变博客中默认选中文本的颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
::selection {
    background: #ffb7b7; /* Safari */
    color: #ffffff;
}
::-moz-selection {
    background: #ffb7b7; /* Firefox */
    color: #ffffff;
}

22. 清除浮动

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
.clearfix:after {
    content: '\0020';
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}
/*
	The following zoom:1 rule is specifically for IE6 + IE7.
	Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix {
    zoom: 1;
}

23. 多背景图片

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

24. 线性渐变

1
2
3
4
5
6
7
8
9
10
11
background-image: -webkit-linear-gradient(top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -moz-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -o-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0ECE8), color-stop(1, #D8D3C8) );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#F0ECE8?, endColorstr=’#D8D3C8?,GradientType=0 );

25. IE中的min-height

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

26. 防止文本换行

1
a { white-space: nowrap; }

27. 文本溢出省略

纯CSS文本溢出省略的跨浏览器解决方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.textoverflow a {
    display:block;
    width:120px;
    margin: 0px 0px 0px 3px;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    -o-text-overflow: ellipsis;     /* for Opera */
    text-overflow: ellipsis;        /* for IE */
}
.textoverflow:after{ content: "..."; }/* for Firefox */
@media all and (min-width: 0px){ .textoverflow:after{ content:""; }/* for Opera */ }

28. 条件注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 6]>
According to the conditional comment this is Internet Explorer lower or equal to 6
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6
<![endif]-->

29. 让IE9以下的版本支持HTML5

在项目中的JS文件中加入以下代码片段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// html5 shiv

if (!+[1,]) {
    (function() {
    var tags = [
        'article', 'aside', 'details', 'figcaption',
        'figure', 'footer', 'header', 'hgroup',
        'menu', 'nav', 'section', 'summary',
        'time', 'mark', 'audio', 'video'],
        i = 0, len = tags.length;
    for (; i < len; i++) document.createElement(tags[i]);
    })();
}

或者网上引用

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

30. PNG32透明(IE6)

1
2
3
4
5
6
7
8
9
.some_element {
    background: url(image.png);
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}

参考:
Master your CSS3! Ultimate CSS code snippets
25 Incredibly Useful CSS Snippets for Developers
10 Random CSS Tricks You Might Want to Know About
此外还包括Google搜出的其他资料o(∩_∩)o

8 评论

  • 2012 年 3 月 27 日 - 上午 1:00 | 固定链接

    Good job!姐姐的博客很靓啊!!!整理的很细致,尤其最近写的时候其中一些都深有体会

  • 2012 年 6 月 17 日 - 下午 10:08 | 固定链接

    谢谢分享,果断收藏了 ^_^

  • 2012 年 7 月 29 日 - 下午 5:13 | 固定链接

    最后一个关于IE6png图片的问题。
    请问代码中的 image.png ,是填写自己的呢,还是直接放进去CSS文件里就好?

  • 2012 年 8 月 6 日 - 上午 5:30 | 固定链接

    3Q,多谢你阿。
    我第一感觉也是。但测试的时候用成了gif图片了。 – -

  • 广播: 30个常用的CSS片段

  • 发表评论

    电子邮件地址不会被公开。 必填项已用 * 标注

    *

    您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>