CSS实用小技巧

1、字体变形命令

.uppercaseInput{
   text-transform: uppercase;
}
.lowercaseInput{
   text-transform: lowercase;
}
.capitalInput{
   text-transform: capitalize;
}

2、解决字体问题，宋体，英文的标准字体则是Arial和Helvetica等

font-family:Arial, Helvetica, sans-serif;

3、长文本，不换行

.longTxt{   
    overflow:hidden;   
    text-overflow:ellipsis;/**字符溢出,用省略号表示**/   
    -o-text-overflow:ellipsis;   
    white-space:nowrap;   
    text-align:left;   
    padding-left: 2px;   
}

4、首字和首行（first-letter和first-line）伪类

p:first-letter {
  font-size: 300%
}   
div:first-line {
  color: red
}

5、min-height最小高度的实现（兼容IE6、IE7、FF）

#main-container {   
    background:#ccc;   
    min-height:100px;    
    height:auto !important;    
    height:100px;    
    overflow:visible;   
}

6、隐藏Exploertextarea的滚动条

textarea {   
    overflow:auto;   
}

7、删除链接上的虚线框

a:active, a:focus {   
    outline:none;   
}

8、用line-height实现垂直居中

div{
  height:100px;
}
div *{
  margin:0;
}
div p{
  line-height:100px;
}

<div>
  <p>Vertical centering with line-height</p> 
</div>

9、用过渡色做按钮背景色

input.PalegreenButton {
	BORDER-RIGHT: #7EBF4F 1px solid; 
	PADDING-RIGHT: 2px;
	BORDER-TOP:#7EBF4F 1px solid; 
	PADDING-LEFT: 2px; 
	FONT-SIZE: 12px; 
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
StartColorStr=#ffffff, EndColorStr=#B3D997); /**滤镜**/
	BORDER-LEFT: #7EBF4F 1px solid; 
	CURSOR: hand; 
	COLOR: black; 
	PADDING-TOP: 2px; 
	BORDER-BOTTOM: #7EBF4F 1px solid
}

10、纯CSSTooltip

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

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

11、CSS透明度

selector {
   filter: alpha(opacity=60); /* MSIE/PC */
   -moz-opacity: 0.6; /* Mozilla 1.6 and older */
   opacity: 0.6;
}

12、列表横排

li{
   display:block;
   float:left;
   margin:0 10px;
}

13、IE在CSS中加事件处理

/**实数输入**/
.floatInput {   
    border:1px solid #000000;  
       
    event:expression(   
        onkeyup = function(){   
            this.style.borderColor='red';   
            this.value=this.value.replace(/[^\\d\\.]/g,'');/**不在范围内的清掉**/   
        }   
    )   
} 
/**表格奇偶行颜色**/
#myTable tbody tr { 
   line-height: 24px; 
   background-color:expression((this.sectionRowIndex%2==0)?"#F4F8FF":"#E6EFF7"); 
}

14、背景图片绝对居中

background:url(images/xx.gif) no-repeat 50% 50%;
  background:url(images/xx.gif) no-repeat center center;

background-position属性设置背景图像的起始位置。第一个值是水平位置，第二个值是垂直位置。需要把background-attachment属性设置为"fixed"，才能保证该属性在Firefox和Opera中正常工作。

15、cssText属性

var top= document.getElementById("top");   
  top.style.cssText="width:200px;height:70px;display:bolck";

16、解决IE6中PNG图片背景问题

<!--[if IE 6]>
	<link href="../style/png_ie6.css" rel="stylesheet" type="text/css">
<![endif]-->

input.NormalButton{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="../images/btn_bg.png");
	background:none;
}

17、文件域

<input type="file" style="width:100%;cursor:hand;" onpropertychange="verifyAccept(this);" onkeydown="return false;" id="impFile" name="impFile" accept="txt,xls" class="FileInput" unselectable="on" contentEditable="false"/>

input.FileInput{
	border:1px solid #2D147E;
	background:#eeeeee;
	color:#2D147E;
	font:bold 12px ’隶书’;
}