Home > Internet > 10个节约开发时间的CSS技巧
2009December . 26th

10个节约开发时间的CSS技巧

Internet 29 comments

CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。

1.简单的纯CSS Tooltip

简单的纯CSS Tooltip通过这些代码，你可以做出简单的Tooltip。这是CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

a:hover {
	background:#ffffff; /*要兼容IE6的话必须添加背景色*/
	text-decoration:none;
}
a.tooltip span {
	display:none;
	padding:2px 3px;
	margin-left:8px;
	width:130px;
}
a.tooltip:hover span{
	display:inline;
	position:absolute;
	background:#ffffff;
	border:1px solid #cccccc;
	color:#6c6c6c;
}


HTML代码如下：

1

Easy <a class="tooltip" href="#">Tooltip<span>This is a Example by imbolo.com.</span></a>.

效果如图。

2.重设基本样式

为了统一不同浏览器对各种HTML标签的默认样式的渲染，我们必须从新定义各种标签的样式，这样能对以后的开发带来方便。重新定义各种HTML标签只需要在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

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: none;
}
 
/* 元素获得焦点时的样式! */
:focus {
	outline: 0;
}
 
/* 特殊文本的样式! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* 细线表格样式 */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
3.方便的CSS调试器

这段代码可以把页面上的各种标签嵌套用不同的线条划分出来，方便你找出BUG。

1
2
3
4
5
6
7
8

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
4.使一个未设定宽度的DIV居中

对于一个有固定宽度的DIV容器，你可以轻松地通过margin:auto属性令他居中。如果要居中的DIV容器并没有设置宽度的话，你可以使用下面的CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.content {
	margin: 0 auto 8px;
	display: table;
	}
 
.content div {
	display: table-cell;
	}
 
<!--[if IE]>
.content {
	display: block;
	text-align: center;
	}
.content div {
	display: inline;
	zoom: 1;
}
< ![endif]-->
5.为大图片添加伪AJAX的载入图标

等待图片下载是浏览网页是意见烦人的事，但用JavaScript动态载入图片技术难度又比较大。你可以用CSS加上一个载入图标，缓解访客等待加载时的情绪。

1

img { background: url(loading.gif) no-repeat center center; }
6.CSS图像预载

如果你要在HTML文件加载完成前预载图片，你可以把图片设置为一个DIV容器的背景图，并且把这个容器设为不可见。当HTML加载后再把这个DIV容器插入页面里。

1
2
3
4
5
6

div.loader {
	background:url(images/hover.gif) no-repeat;
	background:url(images/hover2.gif) no-repeat;
	background:url(images/hover3.gif) no-repeat;
	margin-left:-10000px;
}
7.CSS透明度

由于老式浏览器对页面元素透明度处理不好，你必须为透明的元素写hack。

1
2
3
4
5

selector {
	filter: alpha(opacity=60); /* MSIE/PC */
	-moz-opacity: 0.6; /* Mozilla 1.6 and older */
	opacity: 0.6;
}
8.为IE和其它浏览器设置元素的最小高度

由于IE不支持min-height属性，我们还是要为IE写hack。以下代码的第一部分是正确的代码，可以在标准浏览器里使用，第二部分是针对IE的hack。由于IE不能识别min属性，因此height值设定为8em，使容器能装下超出容器范围的文本。

1
2
3
4
5
6
7
8
9
10
11
12

/* for browsers that don't suck */
.container {
	min-height:8em;
	height:auto !important;
}
 
/* for Internet Explorer  */
/*\*/
* html .container {
	height: 8em;
}
/**/
9.根据链接类型选用不同的链接样式

超链接的形式主要有http链接和mailto链接两种，你可以为这两种链接设置不同的样式。通过CSS3，你甚至能为指向不同文件类型的附件链接建立不同的样式！不过，这种做法对不兼容CSS3的浏览器不够友好，而这也是我们必须尽快淘汰老版本IE的原因。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* HTTP链接的样式 */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}
 
/* Mailto链接的杨思 */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
 
/* 指向PDF格式附件的样式 */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}
10.移除IE里文本输入框的滚动条

IE浏览器会画蛇添足地为多行的文本输入框加上一个滚动条，哪怕你输入的文字长度还没有超出输入框的范围。通过下面的代码你可以把多余的滚动条移除。

1
2
3

textarea{
	overflow:auto;
}
, 推荐到豆瓣
  1. 2009December . 26th - 9:19 PM
    元胜

    羡慕技术人士～～～～
    第一次拜访 元胜 12.26

    Reply
  2. 2009December . 27th - 1:44 AM
    王涛

    还没想过自己写框架。。
    这是不错的想法。

    Reply
  3. 2009December . 27th - 10:55 AM
    虫儿

    这个资料好

    Reply
  4. 2009December . 27th - 12:03 PM
    先看看

    貌似很强大的样子

    Reply
  5. 2009December . 27th - 1:36 PM
    keelii

    那个ＩＥ条件注释最好独立出来吧！

    Reply
  6. 2009December . 27th - 2:08 PM
    keon

    不错不错～～学习下

    Reply
  7. 2009December . 27th - 2:41 PM
    ooaixt

    好东西，写了那么久的CSS也没总结过

    Reply
  8. 2009December . 28th - 9:50 AM
    娱乐博客

    不错的方法，吸收过去了。

    Reply
  9. 2009December . 28th - 11:12 AM
    平平

    开发的不错哦 继续开发中

    Reply
  10. 2009December . 28th - 2:47 PM
    Nox

    太深奥，看不懂。小菜鸟飘过。。。

    Reply
  11. 2009December . 29th - 1:48 AM
    619

    哈哈，这个最合适我不过了！这阵子正在学习CSS，谢谢分享，拿走咯？

    Reply
  12. 2009December . 29th - 11:11 AM
    草根网评

    很有用，准备用在吴熠博客。

    Reply
  13. 2009December . 29th - 4:23 PM
    小T

    看起来不错的样子

    Reply
  14. 2009December . 29th - 6:12 PM
    淘宝网女装

    还可以

    Reply
  15. 2009December . 29th - 10:40 PM
    LAONB

    5不错，7会影响速度，呵呵。
    我现在写CSS都是拿以前的旧样式改。

    Reply
  16. 2009December . 29th - 10:52 PM
    卢松松

    很多标签都重合着写，我也发现了

    Reply
  17. 2009December . 29th - 10:58 PM
    bolo

    @王涛
    多写写就会用自己的框架了
    @619
    欢迎符合CC 3.0协议的转载
    @LAONB
    我觉得5是很多余的，反而7现在应用比较多
    @卢松松
    嗯，复合的class容易进行js样式操作

    Reply
  18. 2009December . 30th - 9:41 AM
    仁心博客

    不错不错，学习一下

    Reply
  19. 2009December . 30th - 8:11 PM
    SEO培训

    博主用的是什么模板啊？真好看，支持你

    Reply
  20. 2009December . 31st - 12:21 AM
    bolo

    @SEO培训
    自己做的主题

    Reply
  21. 2009December . 31st - 2:54 PM
    老七

    学习了。。元旦快乐~~

    Reply
  22. 2009December . 31st - 5:53 PM
    chouray

    明年明天快乐

    Reply
  23. 2009December . 31st - 8:57 PM
    Jutoy

    不错，对新手来说还是很有帮助的…顺便，新年快乐哦

    Reply
  24. 2010January . 1st - 3:20 AM
    疾风

    送祝福来了

    新年快乐~

    Reply
  25. 2010January . 4th - 8:29 PM
    licream

    新年快乐

    Reply
  26. 2010January . 11th - 2:39 PM
    simaopig

    一样。想抽空简单学一下CSS，细节决定成败。

    Reply
  27. 2010January . 13th - 2:46 AM
    Zenoven自由人

    很不错的。。。收藏了。。。

    Reply
  28. 2010August . 5th - 7:07 PM
    wwe

    对新手来说还是很有帮助的

    Reply
  29. 2010October . 27th - 8:24 PM
    uiandue

    谢谢，收藏了。

    Reply

Subscriber selector

Close