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

1.简单的纯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浏览器会画蛇添足地为多行的文本输入框加上一个滚动条,哪怕你输入的文字长度还没有超出输入框的范围。通过下面的代码你可以把多余的滚动条移除。

Tooltip:利用javascript模拟实现Tooltip,以便提供友好的提示信息

//*===========================================
//*  Tooltip:利用javascript模拟实现Tooltip,以便提供友好的提示信息
//*===========================================
//根据ID获取对像
function $(objID){return document.getElementById(objID);}
//获取javascript文件传递的参数
var request = {
  QueryString : function(val){
    var param ="?"+document.getElementsByTagName("script")[document.getElementsByTagName("script").length-1].src.split("?")[1]
    var re = new RegExp("" +val+ "=([^&?]*)", "ig");
    return ((param.match(re))?(param.match(re)[0].substr(val.length+1)):null);
  }
}
//var imgPath=document.getElementsByTagName("script")[document.getElementsByTagName("script").length-1].src.split("?")[0];
//imgPath=imgPath.replace("ToolTip.js","");
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
//*===========================================
//*  Public End
//*===========================================
//
//初始化
//
var path=request.QueryString("path");
    path=(path==null)?"":(path+"/");
 //alert(path)
document.write("<div id='ToolTipBox'  style='position:absolute;z-index:100;width:210px;font-size: 10pt;padding: 5px;visibility: hidden;display: none;'>"); 
document.write("  <div id='ToolTipHead'><img src='"+path+"Images/1_1a.gif' name='imgHeader' width='210' height='24' id='imgHeader' /></div>"); 
document.write("  <div id='ToolTipBody' style='height:36px;text-indent: 25px;font-size: 10pt;padding: 5px;background-image: url("+path+"Images/1_Body.gif); background-repeat: repeat-y;background-position: center;'></div>"); 
document.write("  <div id='ToolTipFoot'><img src='"+path+"Images/1_1.gif' name='imgFooter' width='210' height='4' id='imgFooter' /></div>"); 
//document.write("  <!--iframe解决div总是被select遮挡的问题-->");
//document.write(" <iframe allowTransparency='true' frameborder='0' src='"+path+"ToolTip.html'  style=\"position:absolute;visibility:inherit; top:0px; left:0px;border-style:none; z-index:-1;width:expression(this.parentNode.offsetWidth); height:expression(this.parentNode.offsetHeight);background-color:transparent;\"></iframe>");
document.write("</div>"); 
//
var objToolTip=$("ToolTipBox");
//函数:HideToolTip()——隐藏提示信息
//调用: onmouseout="javascript:HideToolTip();"
function HideToolTip(){
 try{
  objToolTip.style.display="none";
  objToolTip.style.visibility="hidden";  
 }catch(e){
  objToolTip.style.display="none";
  objToolTip.style.visibility="hide";  
 }     
}
/*=======================================================*/
/*                                                       */
/* 函数: ShowToolTip(txt)——显示提示信息                */
/*                                                       */
/* 参数: txt-要显示的内容                                */
/*                                                       */
/* 调用: onmousemove="javascript:ShowToolTip('txt');"    */
/*                                                       */
/*=======================================================*/
function ShowToolTip(txt){
 /*更新提示*/
 try{
  $("ToolTipBody").innerHTML = txt;
 }catch(e) {
  if (ns4) {
  var lyr = document.ToolTipBody.document
   lyr.write(txt)
   lyr.close()
  }else if (ie4){document.all["ToolTipBody"].innerHTML = txt;}
 }
    /*移动提示 */
 var evt=evt?evt:(window.event ? window.event : null);
 var element=(evt.target)?evt.target:evt.srcElement;
 moveTo(evt)
  /*显示提示 */
  try{
         objToolTip.style.display="block";
         objToolTip.style.visibility="visible"; 
  }catch(e){
      objToolTip.style.display="block";
         objToolTip.style.visibility="show"; 
  } 
 /*添加onmouseout事件,隐藏信息 */
 try{
  //if(evt.type=="mousemove"){
   element.onmouseout=function(){HideToolTip();};
  //}
 }catch(e){} 
}
//================================================
//函数: moveTo(evt)
//作用: 获取显示坐标并移动到相关位置
//================================================
function moveTo(evt){
    /*获取显示坐标 */
 var xPos=0;
    var yPos=0;
 evt=evt || window.event;
 if(evt.pageX){
  xPos=evt.pageX;
  yPos=evt.pageY;    
 } else { 
  xPos=evt.clientX+document.documentElement.scrollLeft-document.documentElement.clientLeft; 
  yPos=evt.clientY+document.documentElement.scrollTop-document.documentElement.clientTop;  
 }
 /*判断是否超出显示范围,以便获取友好的显示样式*/
 var xv=((xPos+210)>document.documentElement.clientWidth)?true:false;
 var yv=((yPos+80)>document.documentElement.clientHeight)?true:false;
 if(xv&&yv){/* xv=true yv=true mode:4*/
  setImage("imgHeader",path+"Images/1_2.gif");
  setImage("imgFooter",path+"Images/1_2b.gif");
  objToolTip.style.left=xPos-200;
  objToolTip.style.top=yPos-60;   
 }else if((!xv)&&(yv)){/* xv=true yv=false mode:3*/
  setImage("imgHeader",path+"Images/1_2.gif");
  setImage("imgFooter",path+"Images/1_2a.gif");
  objToolTip.style.left=xPos;
  objToolTip.style.top=yPos-60   
 }else if((xv)&&(!yv)){/* xv=false yv=true mode:2*/
  setImage("imgHeader",path+"Images/1_1b.gif");
  setImage("imgFooter",path+"Images/1_1.gif");
  objToolTip.style.left=xPos-200;
  objToolTip.style.top=yPos;   
 }else{/* xv=false yv=false mode:1*/
  setImage("imgHeader",path+"Images/1_1a.gif");
  setImage("imgFooter",path+"Images/1_1.gif");
  objToolTip.style.left=xPos;
  objToolTip.style.top=yPos;   
 }
}
//================================================
//函数: setImage(img,imgSrc)
//作用:更改图片来源及大小
//参数: img   - 图片ID
//      imgSrc- 图片来源
//================================================
function setImage(img,imgSrc){
 var tempImg = new Image();//建立临时图片对象以便获取其宽、高
 tempImg.src = imgSrc;
 $(img).src =imgSrc;
 $(img).style.cssText="width:"+tempImg.width+"px;height:"+tempImg.height+"px;"; 
}
//================================================
//触发document.onclick事件来隐藏信息,
//防止onmouseout事件隐藏失败 */
//================================================
try{
 window.document.onclick=function(){HideToolTip();};
}catch(e){
}