CSS小贴士备忘录前言：在CSS的学习实践过程中，我经常遗忘一些貌似常用的代码，为了能够强化记忆特在此作归纳整理并将陆续增删，以备即时查阅。但愿今后能遇到问题及时解决，牢牢记住这些奇怪的字符们。
一、关于段落文本强制对齐
text-align:justify; text-justify:inter-ideograph;若要文本两端对齐，必须先定义P的宽度，然后 { text-align:justify; text-justify :distribute-all-lines; }
二、给按钮的不同状态加CSS
Html代码<styletype="text/css"><!--.over{...}.down{...}--></style><inputtype="button"onMouSEOver="this.className='over';"onMouseOut="this.className='';"onMouseDown="this.className='down';"onMouseUp="this.className='over';"value="未被点击的按钮"onClick="this.value='被点击的按钮'"name="Button">
三、在一个CSS文件中导入另一个CSS
@import url(***.css);
四、渐变背景色（使用这个一定得加width或height)
FILTER:PRogid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#EEF5F8,endColorStr=#ffffff);
使用这个时必须注意要对该DIV定义width或height值。
Css代码.gradient{/*Firefox3.6*/background-image:-moz-linear-gradient(top,#81a8cb,#4477a1);/*Safari&Chrome*/background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#4477a1),color-stop(1,#81a8cb));/*IE6&IE7*/filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb',endColorstr='#4477a1');/*IE8*/-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb',endColorstr='#4477a1')";}
background:#f4faff\9;background:linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat;background:-moz-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat;background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f1f9ff)) no-repeat;background:-o-linear-gradient(#fff 0%,#f1f9ff 100%) no-repeat
五、用PNG图片在IE6中做出透明效果
*html #id{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=images/*.png); background:none; }
六、单行省略文本
{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
使用这个时必须注意要对需要省略文本的单行(如div或li)定义width值。
七、设为首页和加入收藏的代码
Html代码<astyle="BEHAVIOR:url(#default#homepage)"onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.hengdong8.cn');"href="javascript:"target="_self">设为首页</a>|<ahref="contact.htm">联系我们</a>|<ahref="Javascript:window.external.AddFavorite('http://www.hengdong8.cn','衡东吧')"target="_self">加入收藏</a>
八、中文描边效果
Java代码<styletype="text/css"><!--body{font:12px"Verdana";filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100);}.sizscolor{font-size:14px;font-weight:bold;position:absolute;padding:4px;filter:Dropshadow(offx=1,offy=0,color=white)Dropshadow(offx=0,offy=1,color=white)Dropshadow(offx=0,offy=-1,color=white)Dropshadow(offx=-1,offy=0,color=white);}--></style></head><body><divclass="sizscolor">中文描边效果</div></body>
九、调整字间距
{ text-transform: uppercase; letter-spacing: 2px }
十、margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px; /*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
十一、把鼠标放在图片上会出现图片变亮的效果
可以用图片替换的技巧，也可以用如下的滤镜，代码如下：.pictures img { filter: alpha(opacity=45); }.pictures a:hover img { filter: alpha(opacity=90); }
十二、区分不同浏览器
区别FF，IE7，IE6：background:orange;*background:green!important;*background:blue;注：IE都能识别*;标准浏览器(如FF)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;
IE6
IE7
FF
*
√
√
×
!important
×
√
√
另外再补充一个，下划线”_“,IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6，IE7，firefox: background:orange;*background:green;_background:blue;
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
十三、单行图片文字垂直居中对齐
style *{vertical-align:middle;.....}
十四、input加样式（1）
input[type~=radio] { ... } 含义：请将所有的input应用下面的style，但是其type属性是radio的input则例外。
十五、input加样式（2）
<input type="submit" class="btn" onmouseover="this.className='btnOver'" onmouseout="this.className='btn'" onmousedown="this.className='btnDown'" value="确认" />
<input id="" name="" type="text" class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'" />
十六、给文字加阴影
h1 {float: left;text-indent:0em; text-shadow:black 2px 2px 2px; filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
十七、用Javascript和CSS去掉链接中的虚线框和下划线
在链接标签中添加onFocus="if(this.blur)this.blur()"这句代码即可屏蔽点击时四周出现的虚线框，如：<Ahref="http://www.cce.com.cn"onFocus="if(this.blur)this.blur()"& gt;中国电脑教育报</a>
十八、 input type="image"
十九、删除链接上的虚线框
a:active, a:focus { outline:none; }
二十、改变上传按钮的样式
Html代码<METANAME="Generator"CONTENT="EditPlus"><METANAME="Author"CONTENT=""><METANAME="KeyWords"CONTENT=""><METANAME="Description"CONTENT=""></HEAD><BODY><inputtype="text"size="20"name="upfile"id="upfile"style="border:1pxdotted#ccc"><inputtype="button"value="浏览"onclick="path.click()"style="border:1pxsolid#ccc;background:#fff"><inputtype="file"id="path"style="display:none"onchange="upfile.value=this.value"></BODY></HTML>
或
Html代码<spanid="uploadImg"><inputtype="file"id="file"size="1"style="width:100"class="upload"><ahref="#">上传</a></span>
Css代码#uploadImg{font-size:12px;overflow:hidden;position:absolute;left:190px;top:6px;}#uploadImga{color:#000;line-height:24px;text-align:center;display:block;width:70px;margin:0;height:24px;border:1pxsolid#aecbd3;background:url(../images/btnbj.gif)repeat-x00;}#file{position:absolute;z-index:100;margin-left:-180px;font-size:60px;opacity:0;filter:alpha(opacity=0);margin-top:-5px;}
Html代码